Los mas nuevo

6/recent/ticker-posts

Curso de programación GRATIS Modulo III: Desarrollo Web Parte III - JavaScript y Proyecto final.

Portada Módulo 3 HTML
0%
Módulo 3 · JavaScript
✅ Módulo 3 anterior
🚀 Proyecto del módulo
Sitio web profesional completo
Completa L8–L11 para desbloquearlo
Módulo 3 · Desarrollo Web · JavaScript · 2026

JavaScript:
dale vida e interactividad a tu sitio

El último gran bloque del Módulo 3. Aprenderás a manejar datos con variables, responder a las acciones del usuario con eventos, manipular la página en tiempo real con el DOM, y comunicarte con servidores usando Fetch API. Al final, unirás HTML + CSS + JS en tu primer sitio web profesional completo.

4Lecciones
1Proyecto final
4Mini quizzes
∞Tu portafolio
🔖 Marcadores
Sin marcadores — usa el botón dorado en cualquier lección.
L8
Fundamentos

Variables: donde JavaScript guarda información

JavaScript es el lenguaje que convierte una página estática en una aplicación interactiva. Todo empieza con las variables: espacios con nombre donde guardas datos para usarlos después — un nombre de usuario, el resultado de un cálculo, el contenido de un formulario, etc.

📦
Analogía: las variables son cajas con etiqueta

Imagina cajas de almacenamiento con una etiqueta escrita a mano. let edad = 25 es como escribir "edad" en una etiqueta y meter el número 25 dentro de esa caja. Más adelante puedes abrir la caja, ver qué hay, o incluso cambiar el contenido. const es como una caja selladas con cinta — una vez que metes algo, no puedes cambiarlo (aunque si es un objeto, sí puedes modificar lo que hay dentro de él).

let, const y var: ¿cuál usar?

JavaScript — Declaración de variables
// ── let: variable que SÍ puede reasignarse ──
let edad = 25;
edad = 26;          // ✅ funciona — let permite reasignar

// ── const: variable que NO puede reasignarse ──
const PI = 3.1416;
PI = 4;            // ❌ Error: Assignment to constant variable

// ── const con objetos/arrays: el contenido SÍ es mutable ──
const usuario = { nombre: "Ana", edad: 25 };
usuario.edad = 26;     // ✅ funciona — modificas una propiedad, no reasignas
usuario = {};            // ❌ Error — esto SÍ es reasignar

// ── var: la forma antigua (evitar en código nuevo) ──
var nombre = "Carlos"; // funciona, pero tiene problemas de "scope"
// var no respeta los bloques {} — usa let/const siempre
✅ Regla práctica

Usa const por defecto — la mayoría de tus variables no necesitan cambiar. Usa let solo cuando sepas que el valor cambiará (contadores, acumuladores, valores que se actualizan). Evita var por completo en código nuevo: es la versión antigua de JavaScript y tiene comportamientos confusos con el alcance (scope).

Tipos de datos primitivos

JavaScript — Los tipos de datos básicos
// ── String: texto, entre comillas simples, dobles o backticks ──
const nombre = "Ana García";
const saludo = `Hola, ${nombre}`;  // template literal — interpola variables

// ── Number: enteros y decimales, sin diferencia ──
const edad = 25;
const precio = 19.99;

// ── Boolean: verdadero o falso ──
const activo = true;
const completado = false;

// ── Array: lista ordenada de valores ──
const colores = ["rojo", "verde", "azul"];
colores[0];               // "rojo" — los índices empiezan en 0
colores.length;          // 3

// ── Object: pares clave-valor ──
const producto = {
  nombre: "Laptop",
  precio: 899.99,
  disponible: true,
  tags: ["tech", "oferta"]
};
producto.nombre;       // "Laptop" — notación de punto
producto["precio"];     // 899.99 — notación de corchetes

// ── undefined, null: ausencia de valor ──
let sinValor;             // undefined — declarado pero sin asignar
let vacio = null;     // null — "intencionalmente sin valor"

// ── typeof: para saber el tipo de un valor ──
typeof "hola";     // "string"
typeof 42;        // "number"
typeof true;      // "boolean"

Operadores y funciones

JavaScript — Operadores, condicionales y funciones
// ── Operadores aritméticos ──
10 + 5;   // 15     10 % 3;  // 1 (residuo)
10 - 5;   // 5      2 ** 3;  // 8 (potencia)
10 * 5;   // 50
10 / 5;   // 2

// ── Operadores de comparación ──
5 === 5;   // true  — igualdad estricta (usa siempre ===)
5 == "5";  // true  — igualdad débil (convierte tipos, evitar)
5 !== 3;   // true  — diferente, estricto
5 > 3;    // true

// ── Operadores lógicos ──
true && false;  // false — Y (AND)
true || false;  // true  — O (OR)
!true;          // false — NO (NOT)

// ── Condicionales ──
const edad = 17;
if (edad >= 18) {
  console.log("Eres mayor de edad");
} else {
  console.log("Eres menor de edad");
}

// ── Operador ternario: if/else en una línea ──
const mensaje = edad >= 18 ? "Adulto" : "Menor";

// ── Funciones: bloques de código reutilizables ──
function saludar(nombre) {
  return `¡Hola, ${nombre}!`;
}
saludar("Ana");  // "¡Hola, Ana!"

// ── Arrow functions: sintaxis moderna y compacta ──
const sumar = (a, b) => a + b;
sumar(3, 4);  // 7

Métodos de array más usados

JavaScript — map, filter, forEach: el trío esencial
const productos = [
  { nombre: "Laptop",  precio: 899, stock: 3 },
  { nombre: "Mouse",   precio: 25,  stock: 0 },
  { nombre: "Teclado", precio: 60,  stock: 12 }
];

// ── forEach: ejecuta una función por cada elemento ──
productos.forEach(p => {
  console.log(`${p.nombre}: $${p.precio}`);
});

// ── map: transforma cada elemento y devuelve un NUEVO array ──
const nombres = productos.map(p => p.nombre);
// ["Laptop", "Mouse", "Teclado"]

// ── filter: devuelve un NUEVO array con los que cumplen la condición ──
const disponibles = productos.filter(p => p.stock > 0);
// [{nombre:"Laptop",...}, {nombre:"Teclado",...}]

// ── find: devuelve el PRIMER elemento que cumple la condición ──
const laptop = productos.find(p => p.nombre === "Laptop");

// ── reduce: combina todos los elementos en un solo valor ──
const total = productos.reduce((acc, p) => acc + p.precio, 0);
// 984 — suma de todos los precios

Demo interactiva: variables en acción

▶ Calculadora simple — observa cómo se usan variables y operadores
Resultado: —
🧠 Quiz: ¿Cuál es la principal diferencia entre let y const al declarar una variable?
🏆

¡Módulo 3 completado!

Dominas Desarrollo Web completo: HTML semántico, formularios, multimedia y SEO; CSS con Flexbox, Grid y Responsive Design; y JavaScript con variables, eventos, DOM y Fetch API. Construiste tu primer sitio web profesional completo.

El Módulo 4 (Frameworks modernos de frontend) te espera.


David DGX

Publicadas por David DGX

Publicar un comentario

0 Comentarios