Básicos de

Expresiones y Sentencias

Se le llama expresión a un fragmento de código que produce un valor y es el bloque de construcción más básico en JavaScript

100 + 200

Sentencias (declaraciones)

Otro bloque de construcción importante en JavaScript es la sentencia, que es una idea completa o una oración que le dice a la computadora que haga algo.

alert("Hola Mundo");

Los programas en JS constan de una serie de sentencias.

indicar a la computadora que mostrara un cuadro de diálogo con el texto Hello, world!

Las expresiones y las sentencias en JS se complementan entre sí:

Las expresiones tienen valores, pero por sí solas no hacen nada.
Las sentencias realizan acciones al indicar a la computadora que ejecute tareas, pero las sentencias en sí no tienen valores; son solo instrucciones.

El poder de la programación proviene de escribir sentencias que usen y manipulen los valores de las expresiones para lograr los resultados deseados.

Números y Operadores

JS utiliza el tipo de dato number para almacenar valores numéricos y operadores para cálculos matemáticos.

+ , - , * , / , **

Orden de las Operaciones

JS utiliza la regla matemática estándar PEMDAS (paréntesis, exponentes, multiplicación, división, suma, resta)

8 + 8 / 8 - 2; 

7

8 + (8 / 8) - 2; 

7

Punto Flotante

En JS el tipo de dato number admite enteros (integers) y números con punto decimal o floats

10 / 4
2.5

8 / 3
2.6666666666666665

Enlaces (Bindings)

Los lenguajes de programación te permiten asociar un nombre con un valor para poder referirte a valor facilmente más adelante en tu código. A esa asociación en JS se le llama enlace (binding) y sirven para almacenar los valores que generan tus expresiones.

Variables

Un tipo de enlace es la variable, que permite actualizar el valor asociado a un nombre según sea necesario.

Constantes

Otro tipo de enlace son las constantes, donde no puedes actualizar el valor asociado al nombre una vez que lo hayas asignado.

Variables

JS Tiene dos palabras clave (keyword) para declarar variables: var y let

Una palabra clave es una palabra integrada en el lenguaje de programación y por lo tanto está reservada para un propósito específico.

let edad;
undefined

let edad = 30;

edad;
30

let crea una nueva variable llamada edad. Una declaración con let por sí sola no tiene valor.

Escribimos una expresión para asignar un valor a la variable.

Constantes

Para declarar una constante en JavaScript, usamos la palabra clave const:

const PI = 3.141592653589793;

let diametro = 3;

let circunsferencia = diametro * PI;

circunsferencia;
9.42477796076938

Constantes

Para declarar una constante en JavaScript, usamos la palabra clave const:

const PI = 3.141592653589793;
PI = 5.378;

Uncaught TypeError: Assignment to constant variable.
  at <anonymous>:1:4

Constantes

Para declarar una constante en JavaScript, usamos la palabra clave const:

const PI;

Uncaught SyntaxError: Missing initializer in const declaration

Convenciones de Nombres

Debes dar a tus variables y constantes nombres descriptivos, de modo que cuando tú u otra persona lean tu código, quede claro qué representan
JavaScript distingue entre mayúsculas y minúsculas (case sensitive): edad, Edad y EDAD (son diferentes)
Los identificadores, no pueden contener espacios. Una convención es usar camelCase o snake_case
Para las constantes verdaderas, es habitual usar SNAKE_CASE en mayúsculas, como HORAS_EN_UN_DIA
Los identificadores no pueden empezar con números o caracteres raros

ejercicios

🧠 Ejercicio 1 — Orden de operaciones

let result = 8 + 4 * 2 - 6 / 3;
result;

Sin usar la consola, intenta predecir el resultado:

ejercicios

🛠 Ejercicio 2 — Encuentra y corrige el error

Const horasEnUnDia = 24;
lett minutos = 60
let total = horasEnUnDia * minutos * 60

horasEnUnDia = 25;

Este código tiene varios problemas:

Tu misión:

Encuentra todos los errores.
Corrige el código.
Explica por qué JS marca error.

ejercicios

📐 Ejercicio 3 — Fórmula matemática con variables

área = π * radio²

La fórmula para calcular el área de un círculo es:

Escribe un programa en JavaScript que:

Declare una constante PI
Declare una variable radius
Calcule el área usando una expresión
Guarde el resultado en una variable llamada area
Muestre el resultado en la consola

ejercicios

🏷 Ejercicio 4 — Nombres bien y mal definidos

let user name = "Carlos";
let 2speed = 80;
let velociadEnKmh = 100;
let velocidad_en_kmh = 120;
let velocidad = 90;
let edadActualDelUsuario = 28;

Tienes varios nombres de variables.
Indica cuáles son correctos y cuáles no, y explica por qué.

Luego:

Corrige los incorrectos.
Decide cuáles deberían ser const en lugar de let.
Explica cuándo usarías SNAKE_CASE en mayúsculas.

ejercicios

🚀 Bonus (si quieres subir nivel)

Escribe un pequeño programa que:

Declare una constante HOURS_IN_A_DAY
Declare una variable days y asigna el valor numerico entero que desees
Calcula cuántas horas hay en esos días.
Guarde el resultado en una variable con buen nombre en camelCase

Sin usar números sueltos. Todo debe estar declarado.

Comentarios

sirven para explicar cómo funciona el código, resaltar características importantes o tomar nota de algo que aún necesitas hacer, sin afectar la funcionalidad del programa.

// comentario de una línea

/*
	Comentario multi-línea
*/

Sumar y Restar

Operador de

incremento y decremento

let level = 5;

level++; // 6

level--; // 5

let level = 5;

level += 5; // 10

level -= 2; // 8

let level = 5;

level = level + 5; // 10

level = level - 2; // 8

Operador de

asignación con signo

Multiplicar y Dividir

Operador de

incremento y decremento

let points = 8;

// points = points * 4;
points *= 4;

// points = points / 2;
points /= 2;

Pruébalo

Usa el operador `*=` para observar el efecto del interés compuesto.

Imagina que tienes $200 y ganas un 5% de interés cada año.
¿Cuántos años te tomará duplicar tu dinero?

Para descubrirlo:

Crea una variable llamada investment e inicialízala con el valor 200.
Usa repetidamente el operador *= para multiplicar el valor por 1.05.
Cuenta cuántas veces necesitas aplicar la operación hasta que el valor alcance o supere 400.

ejercicio

🛠 Ejercicio 1 — Encuentra y corrige el error

let price = 200;

price -= 20;
price /= 1.16;
price += 16%;

Este código pretende aplicar un descuento y luego un impuesto:

¿Qué error hay en el código?
Corrige el cálculo para que:
- Primero aplique 20 pesos de descuento
- Luego aplique 16% de impuesto correctamente
¿Qué valor final debería tener price?

Cadenas de caracteres (Strings)

JS utiliza el tipo de dato string para representar texto. Se llama “cadena” porque el texto se trata como una secuencia (o cadena) de caracteres. Por ejemplo, la cadena Hola! está compuesta por cinco caracteres: H, o, l, a, !

String literal

Un literal de cadena es una representación directa de un valor de texto. Para crear uno, simplemente encierra el texto entre comillas dobles. Todo lo que esté entre las comillas forma parte de la cadena. Por ejemplo:

let message = "Bienvenido!";

message;

'Bienvenido!'

También puedes escribir cadenas usando comillas simples en lugar de dobles.

let description = "Producto #45";

description;

'Producto #45'

Incluso es posible tener una cadena que solo contenga números, como:

"789"

Sin embargo, el literal "789" es una secuencia de tres caracteres (7, 8 y 9), mientras que el número:

Tiene un valor numérico.

Unir cadenas

Cuando el operador + se aplica a cadenas en lugar de números las une (concatena). Así puedes construir mensajes más largos

let student = "Be";

let greeting = "Bienvenida";

let fullGreeting = greeting  + student;

fullGreeting;
'BienvenidaBe'

let student = "Be";

let greeting = "Bienvenida";

let fullGreeting = greeting  + " " + student;

fullGreeting;
'Bienvenida Be'

Obtener la longitud

A menudo necesitarás saber cuántos caracteres tiene una cadena. Para obtener la longitud de una cadena, usa la propiedad .length:

"xyz".length;
3

let tweet = "Estoy aprendiendo Javascript";
tweet.length;
28

Obtener un carácter específico

Para obtener un carácter individual de una cadena, utilizamos su índice, que representa su posición dentro de la cadena.

let language = "Javascript";
language[0];
'J'

language[4];
's'

ejercicios

🧠 Ejercicio 1 — Indexación y concatenación

let language = "Javascript";

Dado el siguiente código:

Obtén la J utilizando su indice
Obtén la s de igual manera
utiliza + para concatenar ambos caracteres

ejercicios

🛠 Ejercicio 2 — Refactoriza el código

let name = "Carlos";
let greeting = "Hola,";
let fullGretting = name + greeting;

Este código intenta construir este mensaje: 'Hola, Carlos' pero no está funcionando 😔

¿Qué problemas tiene?
corrígelos

ejercicios

🛠 Ejercicio 2 — Detecta el bug conceptual

let code = "123";
let result = code + 5;

Analiza el siguiente código:

¿Cuál es el valor de result?
¿Por qué no es una suma matemática?
¿Qué tipo de dato es code?
¿Qué tipo de dato es result?
¿Cómo harías para que el resultado fuera realmente 128?

Obtener múltiples caracteres de una cadena

también llamada subcadena o slice

let phrase = "Aprendiendo JavaScript";
phrase.slice(0, 11);
'Aprendiendo'

El índice inicial es 0 (incluido).
El índice final es 11 (no incluido).
JavaScript devuelve los caracteres desde el índice 0 hasta el 10.

Un método es un tipo especial de función que está asociado a un valor o tipo de dato específico.

Eliminar espacios en blanco con `trim`

El término whitespace (espacio en blanco) se refiere a caracteres que no imprimen tinta visible, como espacios o tabulaciones.

let userInput = "   Hola mundo   ";
userInput.trim();
'Hola mundo'

⚠ Importante:

Solo elimina espacios al principio y al final
No modifica la cadena
devuelve una nueva cadena

Otros métodos útiles

para cadenas

"HELLO".toLowerCase();
'hello'


"JavaScript".includes("Script");
true

"7".padStart(3, "0");
'007'

"Ja".repeat(3);
'JaJaJa'

Repite la cadena la cantidad de veces indicada.

Devuelve true si la cadena contiene la subcadena indicada.

Asegura que la cadena tenga al menos cierta longitud.
Si no la tiene, agrega el carácter indicado al inicio.

Convierte todas las letras a minúsculas.

Repite la cadena la cantidad de veces indicada.

ejercicios

1️⃣Extrae una subcadena

let framework = "Vue.js";

Dada la cadena:

obtén la subcadena: js

ejercicios

2️⃣Corrige el error

let word = "Programacion";
word.slice(3, 3);

El siguiente código no devuelve lo esperado:

Qué devuelve?
¿Por qué?
Corrígelo para que devuelva "gram".

ejercicios

3️⃣Limpieza de entrada

let email = "   usuario@email.com   ";

Un usuario escribió:

Elimina los espacios innecesarios.
Guarda el resultado en una nueva variable.
Verifica que la variable original no haya cambiado.

ejercicios

4️⃣Prueba con casos extremo

"Hola".repeat(0);
"Hola".repeat(-1);
"Hola".padStart(2, "*");

¿Qué ocurre en cada caso?

Explica cada resultado.

ejercicios

5️⃣Construcción controlada

Escribe un código que:

Declare una variable code con valor "5".
Use padStart para convertirlo en "005".
Luego repita ese resultado 2 veces.

Resultado esperado:

Secuencias de Escape (scape secuences)

Para incluir caracteres especiales dentro de tus strings, como saltos de línea o tabulaciones. Js permite hacerlo mediante secuencias de escape.

// Salto de línea:
console.log("Hola\nMundo");

Una secuencia de escape es una combinación de caracteres que comienza con una barra invertida (\) y que representa otro carácter especial.

Secuencia	Resultado
\'	Comilla simple
\"	Comilla doble
\\	Barra invertida
\n	Salto de línea
\t	Tabulación

Template Literals

es un tipo especial de string que puede evaluar expresiones dentro de ella.

// Se escribe usando backticks (`)
`Hola ${expresion}`

`El resultado es ${5 * 5}`;
'El resultado es 25'

let user = "Carlos";

`Hola, ${user}!`;
'Hola, Carlos'

Es una forma más clara, legible y moderna que la concatenación

`undefined` y `null`

Estos valores representan: la ausencia de valor.

Cuando JS no tiene un valor para algo, devuelve undefined por defecto.

let emptyValue;
emptyValue;
undefined

console.log("Algo");
undefined

null sirve para indicar de manera intencional que algo está vacío.

let phoneNumber = null;
phoneNumber;
null

Booleanos (Booleans)

Boolean es un tipo de dato primitivo.
Representa valores de verdadero o falso.

Solo existen dos literales booleanos

true
false

let isLoggedIn = true;
isLoggedIn;
true

¿Por qué son importantes los Booleanos?

permiten trabajar con lógica.

Si quieres que tu programa se comporte de manera diferente según una condición, necesitas poder expresar si esa condición es verdadera o falsa.

Operadores relacionados con Booleanos

Existen dos tipos principales de operadores que producen valores Booleanos:

1️⃣Operadores lógicos

Toman valores Booleanos y devuelven Booleanos

2️⃣Operadores de comparación

Comparan números, cadenas u otros valores y devuelven un Booleano.

Operadores lógicos

Existen tres operadores lógicos Booleanos en JavaScript: and, or y not.

Operador AND (`&&`)

toma dos valores (llamados operandos) y devuelve true únicamente si ambos operandos son true.

Operador OR (`||`)

devuelve true si al menos uno de los operandos es true.

let isLogged = true;
let hasPermition = true;

hasBadge && passActive;
true

let isAdmin = false;
let isEditor = true;

isAdmin || isEditor;
true

Operadores lógicos

Existen tres operadores lógicos Booleanos en JavaScript: and, or y not.

Operador NOT (!)

toma un solo valor y devuelve su opuesto.

!true;   // false
!false;  // true

let accountActive = false;
!accountActive;
true
// la cuenta no está activa

Combinando operadores

pueden combinarse para formar expresiones más complejas.

let maintenanceMode = true;
let blocked = false;

!maintenanceMode && !blocked;
false

Supongamos que puedes enviar un formulario solo si:

```
No estás en modo mantenimiento
```
```
Y no estás bloqueado
```

Ley de Morgan

Una expresión como:

!a && !b

Puede reescribirse como:

!(a || b)

!a || !b

!(a && b)

Puede reescribirse como:

Operadores de Comparación

Los operadores de comparación comparan valores y devuelven un Booleano.

Igualdad estricta (===)

verifica si dos valores son exactamente iguales.

10 === 10;      // true
4 === 9;        // false
3 * 3 === 9;    // true
"hola" === "hola"; // true
"hola" === "Hola"; // false
true === true;  // true

Igualdad estricta (===)

El operador !== verifica si dos valores no son iguales.

7 !== 7;            // false
"perro" !== "gato"; // true

// Equivale a: !(7 === 7);

Mayor y menor que

Operadores matemáticos:

> mayor que
< menor que
>= mayor o igual
<= menor o igual

3 > 1;      // true
8 > 8;      // false
8 >= 8;     // true
-2 < 0;     // true
5 <= 5;     // true

Comparación con Strings

Se comparan carácter por carácter, como un diccionario

"apple" < "banana";  // true
"zebra" > "yak";     // true

🧠 EJERCICIOS

(Operadores Lógicos y de Comparación)

1️⃣ Evaluación lógica

Dado:

let hasAccess = true;
let isVerified = false;

¿Qué devuelve?

hasAccess && isVerified
hasAccess || isVerified
!isVerified

Explica el resultado

2️⃣ Detecta el error lógico

El siguiente código pretende verificar si un usuario puede comprar alcohol (mayor de 18 y no bloqueado):

let age = 20;
let blocked = false;

age > 18 || !blocked;

¿Es correcta la lógica?
Corrígela

3️⃣ Comparación de strings

¿Qué devuelve cada expresión?

"Java" === "JavaScript"
"abc" < "abd"
"100" > "20"

Explica por qué.

4️⃣ Ley de Morgan

Reescribe la siguiente expresión usando la Ley de De Morgan:

!isStudent && !hasDiscount

5️⃣ Construye la condición correcta

Crea una expresión que sea true únicamente cuando:

La temperatura sea mayor a 20
Y menor o igual a 30

Usa una variable llamada temperature.

Estructuras de Control

Condicionales

Bucles

Añaden lógica y estructura a los programas al permitir que el código tome decisiones basadas en condiciones específicas. Juntos, los condicionales y los bucles se conocen como estructuras de control porque permiten controlar cuándo y con qué frecuencia se deben ejecutar partes del código.

Condicionales

Permiten ejecutar un fragmento de código solo si se cumple una condición.

Sentencia `If`

Ejecuta código si una condición es verdadera o lo omite si es falsa.

<html>
  <body>
  <script>
  	let lifePoints = 10;
	console.log(`Puntos de vida ${lifePoints} xp.`);

	if (lifePoints > 0) {
  		console.log("Sigue jugando.");
	}
  </script>
  </body>
</html>

Sentencia `If...else`

Permite ejecutar un fragmento de código cuando una condición sea verdadera, u otro cuando sea falsa.

<html>
  <body>
  <script>
  	let lifePoints = 10;
	console.log(`Puntos de vida ${lifePoints} xp.`);

	if (lifePoints > 0) {
  		console.log("Sigue jugando.");
	} else {
      console.log("Moriste 💀");
    }
  </script>
  </body>
</html>

Condiciones más complejas

Es posible usar expresiones booleanas más complejas como condiciones incorporando operadores lógicos:

<html>
  <body>
  <script>
  	let lifePoints = 10;
	console.log(`Puntos de vida ${lifePoints} xp.`);

	if (lifePoints > 0 && lifePoints <= 20) {
  		console.log("Cuida tus puntos de vida");
	}
    else if (lifePoints > 20 && lifePoints <= 50) {
      console.log("Puntos de vida en buen estado");
    }
    else {
      console.log("Moriste 💀");
    }
  </script>
  </body>
</html>

🧠 1️⃣ Evaluación paso a paso

let temperature = 18;

if (temperature > 25) {
  console.log("Hace calor");
} else if (temperature > 15) {
  console.log("Clima templado");
} else {
  console.log("Hace frío");
}

Dado el siguiente código:

Preguntas:

¿Qué se imprime?
¿Qué pasaría si temperature fuera 26?
¿Qué pasaría si fuera 15 exactamente?
Explica por qué el orden de las condiciones importa.

🛠 2️⃣ Encuentra el error lógico

let score = 85;

if (score >= 60) {
  console.log("Aprobado");
} else if (score >= 80) {
  console.log("Excelente");
} else {
  console.log("Reprobado");
}

El siguiente código intenta clasificar una nota:

¿Cuál es el problema?
¿Qué mensaje se imprime realmente?
Corrige la lógica para que:
- 80 o más → "Excelente"
- 60–79 → "Aprobado"
- Menor a 60 → "Reprobado"

✍️ 3️⃣ Escribe el código

Escribe un programa que:

Declare una variable age
Si es menor a 13 → imprima "Niño"
Si es entre 13 y 17 → imprima "Adolescente"
Si es 18 o más → imprima "Adulto"

Después:

Modifica tu código para que también valide que la edad no sea negativa.

🔎 4️⃣ Refactoriza mejor

El siguiente código funciona, pero no está bien estructurado:

let loggedIn = true;

if (loggedIn === true) {
  console.log("Bienvenido");
} else if (loggedIn === false) {
  console.log("Por favor inicia sesión");
}

¿Cómo lo simplificarías?
¿Qué pasa si loggedIn fuera false?

🚀 5️⃣ Lógica combinada

Tienes estas variables:

let hasTicket = true;
let isVIP = false;
let age = 20;

1. Reglas:

Puede entrar si:
- Tiene boleto Y es mayor o igual a 18
- O es VIP (aunque sea menor)

Escribe la condición correcta usando if.

2. Luego responde:

¿Con los valores actuales puede entrar?
¿Qué combinación haría que NO pueda entrar?
¿Puedes reescribir la condición usando paréntesis para que sea completamente clara?

🚀 6 Acceso a Plataforma Online

Tienes estas variables:

let hasSubscription = true;
let hasTrial = false;
let accountSuspended = false;

📋 Reglas:

Un usuario puede acceder a la plataforma si:

Tiene suscripción activa O
Tiene período de prueba activo

Pero en ningún caso puede acceder si su cuenta está suspendida.

🧠 Tareas:

Escribe la condición correcta usando if.

Debe respetar exactamente las reglas anteriores.

Reescribe la condición usando paréntesis para que quede completamente explícita y fácil de leer.

¿Cómo escribirías la condición inversa?
Es decir, la condición que determine cuándo NO puede acceder.

Repetir código en bucle

Bucle `while`

El bucle while depende de una prueba condicional. Omite la ejecución de su código si la condición es falsa inicialmente y lo ejecuta mientras sea verdadera

<script>
let temperature = 32;

while (temperature > 26) {
  console.log(`La temperatura actual es ${temperature}°C.`);
  temperature--;
}

console.log(`Ahora la temperatura es ${temperature}°C.`);
</script>

los bucles permiten ejecutar un fragmento de código repetidamente mientras la condición se cumpla.

⚠️ ¡Cuidado con los bucles infinitos!

Un bucle infinito, donde la condición del bucle siempre se mantiene en true

<script>
let temperature = 32;

while (temperature > 26) {
  console.log(`La temperatura actual es ${temperature}°C.`);
  // temperature--;
}

console.log(`Ahora la temperatura es ${temperature}°C.`);
</script>

Bucle for

Al igual que un while, un for repite su ejecución mientras una condición sea verdadera. La diferencia es que, en un for, la lógica que controla la repetición aparece concentrada al inicio del bucle, separada del cuerpo

<script>

  for (let attempts = 5; attempts > 0; attempts--) {
    console.log(`Te quedan ${attempts} intentos.`);
  }
  
</script>

Inicialización

Condición

Actualización

Convertir bucle for a bucle while

Convierte el siguiente bucle for a su equivalente en bucle while

<script>

  for (let attempts = 5; attempts > 0; attempts--) {
    console.log(`Te quedan ${attempts} intentos.`);
  }
  
</script>

Scope

Todos los enlaces (variables y constantes) en JS tienen scope (alcance), que es el área del código donde pueden utilizarse.

<script>

  for (let attempts = 5; attempts > 0; attempts--) {
    console.log(`Te quedan ${attempts} intentos.`);
  }

  console.log(attempts); // Error
  
</script>

<script>
  let attempts = 5;
  while ( attempts > 0) {
    console.log(`Te quedan ${attempts} intentos.`);
     attempts--;
  }
  
  console.log(attempts); // Funciona!

</script>

Tipos de datos compuestos

en JS los tipos de datos primitivos representan un solo dato, como un número o una cadena

Los tipos de datos compuestos combinan múltiples datos en una sola estructura

Arrays

Los elementos de un array pueden ser de cualquier tipo de dato
Agrupan valores relacionados en un solo lugar.
Pueden crecer o reducirse dinámicamente.
Mantienen el orden de los elementos.
Permiten recorrer todos sus elementos fácilmente con bucles.

Un array en JavaScript es un tipo de dato compuesto que contiene una lista ordenada de valores.

let temperatures = [18, 21, 19, 23, 25, 20];

Índices

Cada elemento de un array tiene un número de índice asociado.

temperature[0]; // 1er elemento

Cantidad de elementos

Sabe cuántos elementos tiene el array

temperatures.length; // 6

Último elemento

Como los índices comienzan en 0, el último índice siempre es:

length - 1;

temperatures[temperatures.length - 1];

Reemplazar

Puedes modificar un elemento usando su índice

temperatures[2] = 30;
temperatures;

Array de Arrays (Multidimensionales)

Un array puede contener otros arrays.
A este tipo de estructura se le llama array multidimensional.

Son muy útiles para representar:

Tablas
Grillas bidimensionales
Tableros
Matrices
Coordenadas

let board = [
  ["", "", ""],
  ["", "", ""],
  ["", "", ""]
];

Acceder a elementos en arrays anidados

Para acceder a un elemento específico:

1️⃣ Primero seleccionas el índice del array externo.
2️⃣ Luego seleccionas el índice dentro del array interno.

arrayExterno[indiceFila][indiceColumna];

🧩 Ejemplo práctico

Colocar una "X" en la esquina superior derecha de el array multidimensional: board

let board = [
  ["", "", ""],
  ["", "", ""],
  ["", "", ""]
];

🧩Visualización Mental

Si lo piensas como una tabla:

[ [0,0] [0,1] [0,2] ]
[ [1,0] [1,1] [1,2] ]
[ [2,0] [2,1] [2,2] ]

Bucles y Arrays

Los bucles y los arrays sun un equipo ideal.

Un bucle recorre los elementos de un arreglo y realiza una acción sobre cada elemento del bucle si así se desea.

Bucles `for…of`

Un bucle for…of recorre los elementos de un arreglo.
Mientras que un while o un for tradicional repiten mientras una condición sea verdadera.

<script>
let animals = ["Dog", "Cat", "Rabbit"];

for (let animal of animals) {
  console.log(`${animal} is an animal.`);
}
</script>

Usando un `for` tradicional

Un bucle for…of recorre los elementos de un arreglo.
Mientras que un while o un for tradicional repiten mientras una condición sea verdadera.

<script>
let animals = ["Dog", "Cat", "Rabbit"];

for (let i = 0; i < animals.length; i++) {
  console.log(`${animals[i]} is an animal.`);
}
</script>

Acceder a índices con `entries()`

Una ventaja del for tradicional es que tienes acceso directo al índice, pero también puedes usar for..of junto con el método entries()

<script>
let animals = ["Dog", "Cat", "Rabbit"];

for (let [index, value] of animals.entries()) {
  console.log(`${index}: ${value} is an animal.`);
}
</script>

🧠 EJERCICIOS — Arrays + Bucles

1️⃣ Recorre e imprime

Dado: let numbers = [5, 10, 15, 20];

Usa un for…of para imprimir cada número multiplicado por 2.

2️⃣ Usa un for tradicional

Dado: let names = ["Ana", "Luis", "Marta"];

Usa un for clásico para imprimir:

0: Ana 1: Luis 2: Marta

🧠 EJERCICIOS — Arrays + Bucles

3️⃣ Suma todos los elementos

Dado: let values = [3, 7, 2, 9];

Usa un bucle para calcular la suma total y guardarla en una variable total.

4️⃣ Índices pares

Dado: let letters = ["a", "b", "c", "d", "e"];

Imprime únicamente los elementos que estén en índices pares.

🧠 EJERCICIOS — Arrays + Bucles

5️⃣ Modifica elementos

Dado: let prices = [100, 200, 300];

Usa un bucle para aumentar cada precio en un 10%.
Modifica el arreglo original.

Objetos

(Objects) son otro tipo de dato compuestos en JS. También almacenan colecciones de valores, pero se diferencian de los arrays por:

Los arrays usan índices numéricos
Los objetos usan claves (keys) que son strings: key-value pair

Array

let temperatures = [20, 22, 19, 25];

VS

Object

let person = {
  name: "Laura",
  age: 35,
  married: true
};

let person = {
  name: "Laura",
  age: 35,
  married: true
};

```
Lista ordenada
```

Normalmente contienen elementos del mismo tipo

Ideal para datos sobre una sola entidad
ideal para valores de distintos tipos

Crear un objeto

Una forma común de crear objetos es usando un object literal.

Un object literal consiste en:

llaves { }
pares clave-valor separados por comas
dos puntos : entre la clave y el valor

Ejemplo:

let movie = {
  "title": "Inception",
  "released": 2010,
  "director": "Christopher Nolan"
};

movie;

{title: "Inception", released: 2010, director: "Christopher Nolan"}

Acceder a valores de un objeto

Hay dos formas principales.

1️⃣ Notación de corchetes:

2️⃣ Notación de corchetes:

Si la clave es un identificador válido podemos usar:

movie["title"]; // "Inception"

{title: "Inception", released: 2010, director: "Christopher Nolan"}

example.title; // "Inception"

Propiedades (atributos)

Si la notación con punto te parecer familiar....

es porqué length es una propiedad.

En Js:

propiedad = clave + valor

Estamos accediendo a la propiedad title del objeto

array.length;
string.length;

movie.title;

Agregar valores a un objeto

Podemos crear primero un objeto vacío:

let glossary = {};

let glossary = {};

Luego agregar claves:

glossary.mouse = "A small animal";
glossary["computer mouse"] = "An input device";

Resultado:

{
  mouse: "A small animal",
  computer mouse: "An input device"
}

Modificar Valores

Si una clave ya existe, podemos actualizar su valor:

glossary.mouse = "A furry animal";

🧠 Ejercicios — Objetos

1️⃣ Crear un objeto

Crea un objeto llamado book que contenga la siguiente información:

title
author
pages

Después imprime el título con console.log del libro usando dot notation.

2️⃣ Acceder correctamente a una clave

Dado el siguiente objeto:

Escribe dos formas distintas de acceder al valor "Corolla"

Usando dot notation
Usando bracket notation

let car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2020
};

3️⃣ Detectar el error

El siguiente código tiene un error. Corrígelo

Preguntas:

¿Cuál es el error?
¿Cómo se corrige?

let student = {
  name: "Ana",
  age: 21
};

console.log(student["name"]);
console.log(student.age);
console.log(student.name());

4️⃣ Agrega nuevas propiedades

Dado el objeto

Agrega dos nuevas propiedades:

price
"release year"

Luego imprime el precio del teléfono.

let phone = {
  brand: "Apple",
  model: "iPhone 14"
};

5️⃣ Modificar un valor

Dado el objeto

Haz lo siguiente:

Cambia players a 2
Cambia online a true
Imprime todo el objeto

let game = {
  title: "Zelda",
  players: 1,
  online: false
};

⭐ Reto lógico

Dado el objeto

Escribe un if que imprima:

Acceso permitido

solo si:

El usuario tiene 18 o más años.
o tiene cuenta premium

let user = {
  username: "dev123",
  age: 17,
  premium: false
};

Trabajando con Objetos

JS tiene muchos métodos para trabajar con objetos. Aquí veremos algunos de los más comunes.

Los métodos para objetos suelen llamarse con métodos estáticos usando la forma:

Es decir:

Se usa el constructor Object
El objeto sobre el que queremos operar se pasa como argumento

Object es un constructor, un tipo especial de función utilizada para crear objetos.

Object.methodName(objeto)

Obtener las claves

Para obtener todas las claves de un objeto se usa:

Ejm:

Resultado:

Object.keys()

let pets = {
  Luna: "white",
  Milo: "brown",
  Coco: "black"
};

Object.keys(pets);

['Luna', 'Milo', 'Coco']

Obtener las claves

Para obtener todas las claves de un objeto se usa:

Ejm:

Resultado:

Object.keys()

let pets = {
  Luna: "white",
  Milo: "brown",
  Coco: "black"
};

Object.keys(pets);

['Luna', 'Milo', 'Coco']

Obtener las claves y valores

Para obtener claves y valores al mismo tiempo usamos:

Ejm:

Object.entries()

let animals = {
  dog: 78,
  cat: 38,
  horse: 64,
  rabbit: 44
};

Object.entries(animals);

[
 ['dog', 78],
 ['cat', 38],
 ['horse', 64],
 ['rabbit', 44]
]

Resultado:

Anidar objetos y arrays

Ejemplo: un array que contiene información sobre trilogías de libros.

let trilogies = [
  {
    title: "The Lord of the Rings",
    author: "J. R. R. Tolkien",
    books: [
      "The Fellowship of the Ring",
      "The Two Towers",
      "The Return of the King"
    ]
  },
  {
    title: "The Hunger Games",
    author: "Suzanne Collins",
    books: [
      "The Hunger Games",
      "Catching Fire",
      "Mockingjay"
    ]
  }
];

array
  └─ objeto
        └─ array

Acceder a datos anidados

Para obtener el primer libro de la segunda trilogía:

trilogies[1].books[0];

1️⃣trilogies[1] → segundo objeto
2️⃣ .books → array de libros
3️⃣ [0] → primer libro

JS interactivo

Desarrollar tus propias aplicaciones web interactivas requiere aprender algunos fundamentos de HTML y CSS

HTML

HyperText Markup Language

(Lenguaje de Marcado de Hipertexto)

HTML es un lenguaje para anotar texto en documentos que se enlazan entre sí

Las anotaciones en HTML se realizan mediante

etiquetas (tags).

Las anotaciones en HTML se realizan mediante

etiquetas (tags).

Un documento HTML contiene un conjunto anidado de elementos que describen la estructura del documento.

HTML

HyperText Markup Language

(Lenguaje de Marcado de Hipertexto)

HTML es un lenguaje para anotar texto en documentos que se enlazan entre sí

Las anotaciones en HTML se realizan mediante

etiquetas (tags).

Las anotaciones en HTML se realizan mediante

etiquetas (tags).

Un documento HTML contiene un conjunto anidado de elementos que describen la estructura del documento.

//TODO: Crear un documento básico HTML

Entendiendo las relaciones de anidación

Un elemento que está directamente dentro de otro elemento se llama hijo (child).

html
 └── body
      └── h1

El Document Object Model (DOM)

Cuando un navegador carga un archivo HTML, crea un modelo interno de los elementos llamado Document Object Model, o DOM.

A diferencia del archivo HTML —que es un archivo de texto estático— el DOM es un modelo dinámico de la página.

Esto significa que podemos modificarlo usando JS.

El Document Object Model (DOM)

Para ver el DOM de inicio.html:

abre la consola del navegador
cambia a la pestaña Elements

El Document Object Model (DOM)

El DOM realmente no se preocupa por las etiquetas de apertura y cierre. Lo importante son los elementos y las relaciones que existen entre ellos, como:

padre (parent)
hijo (child)
hermano (sibling)

La API del DOM

API significa:Application Programming Interface (interfaz de programación de aplicaciones), que es una forma de interactuar con un sistema u objeto mediante código.

Los navegadores web permiten modificar el DOM usando JavaScript a través de la DOM API.

la DOM API nos permite escribir código que produce retroalimentación visual inmediata para el usuario que está viendo la página

La API proporciona un conjunto de métodos y propiedades para interactuar con el DOM.

Muchos de estos métodos se encuentran en el objeto:

// representa el documento actual
document

// permite obtener o modificar el título
document.title

Identificadores de elementos

JS ofrece muchas maneras de acceder a elementos HTML.
La más sencilla es referirse a un elemento mediante su atributo id

Podemos usar la DOM API para modificar cualquier elemento de nuestra página, e incluso para agregar nuevos elementos.

<!DOCTYPE html>
<html>
  <head>
    <title>Hola Mundo!</title>
  </head>
  <body>
    <h1 id="main-heading">Hello!</h1>
    <p>Bienvenido a mi Blog</p>
  </body>
</html>

let heading = document.getElementById("main-heading");

Modificando el texto del elemento

Podemos leer o cambiar el texto usando la propiedad: innerText

La propiedad innerText representa el texto contenido dentro del elemento.

Podemos usar la DOM API para modificar cualquier elemento de nuestra página, e incluso para agregar nuevos elementos.

heading.innerText;
'Hello!'

heading.innerText = "Hi there…";
'Hi there…'

Ejercicio 1: — Cambiar el título del documento

Abre la consola del navegador y ejecuta código para:

Obtener el título actual de la página.
Cambiar el título por: Mi primera app web

Ejercicio 2: — Obtener un elemento por ID

Dado el siguiente HTML:
<h1 id="titulo-principal">Bienvenido</h1>

Escribe código JavaScript para:

Obtener el elemento usando getElementById
Guardarlo en una variable llamada titulo
Mostrar su valor en la consola

Ejercicio 3: — Analizar el DOM

Observa el siguiente HTML:

Obtén el elemento p usando getElementById.
Guarda el resultado en una variable llamada descripcion.
Cambia el texto del párrafo a:

<html>
  <body>
    <h1 id="titulo">Página de ejemplo</h1>
    <p id="descripcion">Este es un párrafo.</p>
  </body>
</html>

Selectores CSS en JS

el método document.querySelectorAll recibe una cadena de texto que contiene un selector CSS y devuelve un objeto similar a un arreglo con todos los elementos que coinciden con ese selector.

document.querySelectorAll(".highlight");

devuelve un NodeList con dos elementos.

Un NodeList es un tipo de arreglo especializado. Podemos tratarlo como si fuera un arreglo normal.

let strong = document.querySelectorAll("#main-heading strong");

Selectores CSS en JS

También puedes usar document.querySelector, que devuelve únicamente el primer elemento que coincida con el selector, o null si ningún elemento coincide

strong[0].textContent

let strong = document.querySelector("#main-heading strong");

Para obtener el contenido de texto de ese elemento, debes acceder al elemento 0 y usar textContent.

Programación Basada en Eventos

(Event-Based Programming)

Cuando un usuario hace clic en un botón, se desplaza por la página (scroll) o simplemente mueve el mouse dentro de una página web, esa acción genera un evento.

Un evento es la forma que tiene el navegador de señalar que ocurrió una acción en el DOM.

Los eventos nos permiten crear aplicaciones web interactivas que responden a las acciones del usuario.

Controladores de Eventos

(Event Handler)

Hacemos esto escribiendo handlers para eventos específicos: funciones que se ejecutan cuando ocurre un evento.

Usando handlers de eventos, podemos:

cambiar el color de un elemento cuando el usuario hace clic sobre él
mover un elemento por la pantalla cuando el usuario presiona cierta tecla
y mucho más

De esta manera, agregarás interactividad a tus páginas web.

Handlers de eventos

(Event Handler)

Los eventos son la forma en la que el navegador le dice a JavaScript que algo ocurrió en el DOM.

Es casi como si, cada vez que el mouse se mueve sobre la ventana o se presiona una tecla, el navegador estuviera gritando:

“¡Oye, el mouse se movió! ¡Se presionó una tecla!”

Estos “gritos” ocurren todo el tiempo, pero tu código JavaScript solo puede responder a ellos si le indicas explícitamente que los escuche.

Propagación de eventos

(Event Bubbling)

Cuando un evento se activa sobre un elemento, también se activa sobre todos los ancestros de ese elemento; es decir:

el padre del elemento
el padre del padre
y así sucesivamente

Esta progresión del evento desde los hijos hacia los ancestros se conoce como event bubbling o propagación de eventos.

Delegación de eventos

(Event Delegation)

Uno de los usos más comunes de la propagación de eventos (event bubbling) es la delegación de eventos.

La delegación de eventos es una técnica en la que usas un solo handler para responder a eventos en múltiples elementos hijos o descendientes.

El objeto event

(Event Object)

El objeto `event`

La función callback recibe un parámetro llamado event.

Este objeto contiene información sobre el evento que ocurrió, incluyendo:

qué elemento fue clicado
su contenido
su posición, etc.

event.target // elemento dondoe ocurrió el evento

Ejercicio 1 — Detectar el elemento correcto

Tienes este HTML:

Agrega un solo event listener al <ul> que:

Detecte exactamente qué <li> fue clicado.
Imprima en consola:

Seleccionaste: Verde

<ul id="list">
  <li>Rojo</li>
  <li>Azul</li>
  <li>Verde</li>
</ul>

Ejercicio 2 — Evitar errores con bubbling

Usa el mismo HTML del ejercicio anterior.

Problema:

Si haces clic fuera de un <li> (pero dentro del <ul>), el código puede fallar.

👉 Modifica tu handler para que:

solo responda si el elemento clicado es un <li>
ignore cualquier otro clic

💡 Hint: revisa event.target.tagName

Ejercicio 3 — Contador de clics por elemento

HTML:

Objetivo:

Cada vez que el usuario haga clic en el h1, aumenta un contador.
Muestra el resultado en consola:

Clicks: 1 Clicks: 2 Clicks: 3

👉 Luego mejora el ejercicio:

Cambia el texto del h1 para mostrar el contador.

<h1 id="title">Haz clic aquí</h1>

Ejercicio 4 — Event bubbling en acción

HTML:

Agrega:

un event listener al button
otro al div

Haz que cada uno imprima algo distinto:

Botón clicado Contenedor clicado

👉 Ahora responde:

¿Qué mensaje aparece primero?
¿Por qué ocurre ese orden?

<div id="container">
  <button id="btn">Click</button>
</div>

Ejercicio 5 — Mini app: construir frase

HTML

Requisitos:

Usa delegación de eventos en el <ul>
Cada clic en una palabra la agrega al <p>
Agrega un espacio entre palabras
El botón "Limpiar" borra el contenido del <p>

👉 Extra (nivel +):

No permitas agregar la misma palabra dos veces seguidas

<ul id="words">
  <li>Hola</li>
  <li>Mundo</li>
  <li>JS</li>
</ul>

<p id="output"></p>
<button id="clear">Limpiar</button>

Imprimiendo objetos con `JSON.stringify`

Otra forma de visualizar un objeto es convertirlo en una cadena JSON (JavaScript Object Notation) es un formato de datos textual basado en los literales de objetos y arreglos de Js, que se utiliza ampliamente en la web y más allá para almacenar e intercambiar información.

El método JSON.stringify convierte un objeto de JavaScript en una cadena JSON. Veamos un ejemplo pasando el objeto anidado

JSON.stringify(myObj);

JSON.stringify(myObj);

'{"name":"Outer","content":{"name":"Middle","content":{"name":"Inner","content":"Whoa…"}}}'

Imprimiendo objetos con `JSON.stringify`

myObjJSON = JSON.stringify(myObj, null, 2);

console.log(nestedJSON);

{
  "name": "Padre",
  "content": {
    "name": "Hijo",
    "content": {
      "name": "Nieto",
      "content": "Whoa…"
    }
  }
}

Llamar a JSON.stringify de esta manera es útil para obtener una representación visual rápida de un objeto sin tener que hacer clic repetidamente en las flechas de la consola para expandir cada nivel anidado. El método también funciona con objetos no anidados, aunque en ese caso la vista normal del objeto en la consola suele ser suficiente.

¿Qué es el Local Storage?

Es una funcionalidad de los navegadores que permite a los desarrolladores guardar información en el navegador del usuario.

El local storage funciona tomando información en formato de pares clave-valor y la conserva aun cuando el usuario actualiza la página o cierra la pestaña o el navegador.

Cómo usar el Local Storage

El objeto local storage viene con varios métodos diferentes para poder interactuar con él. Con estos métodos es posible agregar, leer, y borrar información ubicada en el local storage.

¿Cómo almacenar y leer información en Local Storage?

Para almacenar información en el local storage, se usa en el método setItem(). Este método lleva dos argumentos, un clave y un valor.

localStorage.setItem(key, value);

Para recuperar y usar la información, puedes utilizar el método getItem().

Este método lleva una clave como argumento.

localStorage.getItem(key);

¿Cómo almacenar y leer valores de información complejos?

El local storage solo puede almacenar cadenas de texto.

significa que si necesitas almacenar valores como objetos o arrays, lo primero que tienes que hacer es transformar ese valor en una cadena de texto. Esto lo puedes hacer usando el método JSON.stringify().

const userObj = {
  username = "Be",
  email: "be@gmail.com"
}

localStorage.setItem('user', JSON.stringify(userObj));

Si quisieras acceder a la información del local storage, es necesario devolverla a su forma original. Esto lo haces usando el método:

JSON.parse()

const storedUserData = localStorage.getItem('user')

if (storedUserData) {
  const userData = JSON.parse(storedUserData)
  // Aquí puedes trabajar con userData...
} else {
  console.log('datos de usuario no encontrados')
}

¿Cómo borrar información del

Local Storage?

Hay dos métodos para borrar información del local storage. Uno es el método removeItem() y el otro es el método clear()

El método removeItem() se utiliza cuando quieres borrar un solo ítem del local storage. El método lleva la clave como argumento y borra el correspondiente par clave-valor del local storage.

localStorage.removeItem('user')

localStorage.clear()

Básicos de Javascript

By Carlos Hernández

Básicos de Javascript

Carlos Hernández

Me gusta la programación: comparto en mi canal de Youtube llamado YouDevs lo poco que sé sobre el tema.

Básicos de

Expresiones y Sentencias

Sentencias (declaraciones)

Números y Operadores

Orden de las Operaciones

Punto Flotante

Enlaces (Bindings)

Variables

Constantes

Variables

Constantes

Constantes

Constantes

Convenciones de Nombres

ejercicios

🧠 Ejercicio 1 — Orden de operaciones

ejercicios

🛠 Ejercicio 2 — Encuentra y corrige el error

ejercicios

📐 Ejercicio 3 — Fórmula matemática con variables

ejercicios

🏷 Ejercicio 4 — Nombres bien y mal definidos

ejercicios

🚀 Bonus (si quieres subir nivel)

Comentarios

Sumar y Restar

Operador de

incremento y decremento

Operador de

asignación con signo

Multiplicar y Dividir

Operador de

incremento y decremento

Pruébalo

Usa el operador *= para observar el efecto del interés compuesto.

ejercicio

🛠 Ejercicio 1 — Encuentra y corrige el error

Cadenas de caracteres (Strings)

String literal

Unir cadenas

Obtener la longitud

Obtener un carácter específico

ejercicios

🧠 Ejercicio 1 — Indexación y concatenación

ejercicios

🛠 Ejercicio 2 — Refactoriza el código

ejercicios

🛠 Ejercicio 2 — Detecta el bug conceptual

Obtener múltiples caracteres de una cadena

Eliminar espacios en blanco con trim

Otros métodos útiles

para cadenas

ejercicios

1️⃣Extrae una subcadena

ejercicios

2️⃣Corrige el error

ejercicios

3️⃣Limpieza de entrada

ejercicios

4️⃣Prueba con casos extremo

ejercicios

5️⃣Construcción controlada

Secuencias de Escape (scape secuences)

Template Literals

undefined y null

Booleanos (Booleans)

Operadores relacionados con Booleanos

1️⃣Operadores lógicos

2️⃣Operadores de comparación

Operadores lógicos

Operador AND (&&)

Operador OR (||)

Operadores lógicos

Operador NOT (!)

Combinando operadores

Ley de Morgan

Operadores de Comparación

🧠 EJERCICIOS

(Operadores Lógicos y de Comparación)

Estructuras de Control

Usa el operador `*=` para observar el efecto del interés compuesto.

Eliminar espacios en blanco con `trim`

`undefined` y `null`

Operador AND (`&&`)

Operador OR (`||`)

Sentencia `If`

Sentencia `If...else`

Bucle `while`

Bucles `for…of`

Usando un `for` tradicional

Acceder a índices con `entries()`