Fundamentos de JavaScript: Conceptos Esenciales para Programadores

1. ¿Qué es JavaScript?

JavaScript es un lenguaje de programación que se usa principalmente en páginas web para hacerlas interactivas.

Sin JavaScript, una web solo muestra información. Con JavaScript, la web puede reaccionar a lo que hace el usuario. Por ejemplo: cuando haces clic en un botón y aparece un mensaje, cuando un formulario te avisa de que un campo está vacío o cuando cambia un texto sin recargar la página.

2. Variables

Una variable es como una caja con nombre donde guardamos un valor para poder usarlo más tarde. Sirve para almacenar información que puede cambiar durante el programa.

Ejemplo: let nombre = "Ana"; (donde nombre es la variable y "Ana" es el valor).

Tipos de declaración

• let: el valor puede cambiar.
• const: el valor no puede cambiar.

Ejemplos:

• let edad = 18; edad = 19; (sí se puede cambiar).
• const pais = "España"; (si intentas cambiarlo, daría error).

3. Tipos de datos

Un tipo de dato es la clase de información que guardamos en una variable:

• String: Texto. Siempre va entre comillas. let saludo = "Hola";
• Number: Un número. No lleva comillas. let edad = 20;
• Boolean: Solo puede tener dos valores: true (verdadero) o false (falso). let mayorEdad = true;

4. Operadores

Los operadores sirven para realizar operaciones con valores.

• Operadores matemáticos: Se usan para cálculos. let resultado = 5 + 3; // 8
• Operadores de comparación: Comparan valores y el resultado siempre es true o false.
  • 5 > 3 // true
  • 5 == "5" // true (compara solo el valor)
  • 5 === "5" // false (compara valor y tipo; es más estricto y recomendable).

5. Condicionales (if / else)

Un condicional permite que el programa tome decisiones según se cumpla o no una condición.

let edad = 16;
if (edad >= 18) {
  console.log("Mayor de edad");
} else {
  console.log("Menor de edad");
}

6. Bucles (for)

Un bucle sirve para repetir un bloque de código varias veces. El más básico es el for.

for (let i = 0; i < 3; i++) {
  console.log("Hola");
}

Funcionamiento: Se crea una variable (i = 0), se repite mientras se cumpla la condición (i < 3) y, en cada vuelta, la variable aumenta (i++).

7. Funciones

Una función es un bloque de código que realiza una tarea específica. Sirve para organizar el código y evitar repeticiones.

function saludar() {
  console.log("Hola");
}
saludar();

Con parámetros:

function sumar(a, b) {
  return a + b;
}
let resultado = sumar(2, 3);

Los parámetros (a, b) son datos que la función recibe y return devuelve un resultado.

8. Arrays

Un array es una estructura que permite guardar varios valores dentro de una sola variable. Cada valor tiene una posición, empezando desde 0.

let numeros = [1, 2, 3, 4];
console.log(numeros[0]); // 1

9. Objetos

Un objeto es una estructura que guarda información organizada en propiedades (clave y valor).

let persona = {
  nombre: "Ana",
  edad: 20
};
console.log(persona.nombre);

10. DOM

El DOM es la representación del HTML que permite a JavaScript modificar los elementos de la página (cambiar texto, estilos, mostrar u ocultar elementos).

document.getElementById("titulo").innerHTML = "Nuevo texto";

11. Eventos

Un evento es una acción que ocurre en la página (clic, escribir, mover el ratón). JavaScript puede detectar ese evento y ejecutar código.

document.getElementById("boton").onclick = function() {
  alert("Has hecho clic");
};

Preguntas frecuentes sobre JavaScript

Variables y tipos de datos

1. ¿Qué es una variable? Un contenedor que guarda un valor que puede cambiar (let) o no (const).
2. Diferencia entre var, let y const: var (alcance global/función), let (alcance de bloque, no redeclarable), const (alcance de bloque, no reasignable).
3. ¿Qué pasa si cambias una const? Da un error (TypeError).
4. Tipos primitivos: string, number, boolean, null, undefined.
5. ¿Qué es un objeto? Una colección de propiedades (clave: valor).
6. ¿Qué es un array? Una lista ordenada de valores.
7. Diferencia entre == y ===: == compara valor, === compara valor y tipo.
8. ¿Qué es el scope? El área donde una variable es accesible.
9. ¿Qué es hoisting? Cuando las declaraciones se "suben" al inicio del código.

Operadores y condicionales

10. Operadores aritméticos: +, -, *, /, %.
11. Operadores de comparación: ==, ===, !=, !==, >, <, >=, <=.
12. Operadores lógicos: && (AND), || (OR), ! (NOT).
13. Estructuras condicionales: if, else if, else, switch.
14. ¿Qué hace un switch? Ejecuta bloques según diferentes valores de una variable.

Bucles

16. Tipos de bucles: for, while, do…while.
17. Diferencia: for (número conocido), while (condición previa), do…while (ejecuta al menos una vez).

Funciones

19. ¿Qué es una función? Bloque de código que realiza una tarea y puede devolver un valor.
20. Función normal: function suma(a, b) { return a + b; }
21. Función flecha: const suma = (a, b) => a + b;
22. Parámetros y return: Parámetros son datos de entrada; return es la salida.
23. Función anónima: Función sin nombre, usada como callback.
24. Diferencia normal vs flecha: Sintaxis y comportamiento del this.

Arrays y métodos

25. Acceso: numeros[0].
26. Añadir: numeros.push(4).
27. Quitar: numeros.pop().
28. Length: Devuelve la cantidad de elementos.
29. forEach(): Recorre cada elemento.
30. map(): Crea un nuevo array transformado.
31. filter(): Crea un nuevo array filtrado.

Objetos y DOM

32. Acceso a propiedades: persona.nombre o persona["edad"].
33. Cambiar valor: persona.edad = 21;.
34. Añadir propiedad: persona.apellido = "Ramos";.
35. ¿Qué es el DOM? Representación de la web que JS puede modificar.
36. Seleccionar por ID: document.getElementById("id").
37. Seleccionar clase/etiqueta: document.querySelector(".clase").
38. Cambiar contenido: elemento.textContent = "Nuevo texto";.
39. Eventos: Acciones detectadas con addEventListener.
40. Cambiar clase: classList.add() / remove().
41. Cambiar estilo: elemento.style.color = "red";.

Errores y debugging

42. Tipos de errores: SyntaxError, ReferenceError, TypeError, etc.
43. console.log(): Muestra info en consola.
44. alert(): Mensaje emergente.
45. ReferenceError: Variable no declarada.
46. SyntaxError: Error de escritura/sintaxis.
47. TypeError: Uso incorrecto de un valor.