1. ¿Qué es JavaScript?
JavaScript es conocido como el “cerebro interactivo de la web”. Mientras que HTML
estructura el contenido y CSS define el estilo y la apariencia, JavaScript se encarga de
dar vida a las páginas web, permitiendo la interacción con el usuario.
Su papel principal es la manipulación del DOM (Document Object Model), que
representa la estructura de un documento HTML como un árbol de nodos. Gracias a
JavaScript, se pueden agregar, modificar o eliminar elementos, cambiar estilos
dinámicamente y responder a eventos del usuario como clics, movimientos del mouse o
escritura en formularios.
2. Variables y Tipos de Datos
En JavaScript, una variable es un contenedor donde se almacenan datos. Se declaran
usando var, let o const.
Los tipos de datos básicos son:
- String (cadena de texto): Se usan para representar texto. Ejemplo: "Hola Mundo".
- Number (número): Representa valores numéricos, ya sean enteros o decimales.
Ejemplo: 25, 3.14.
- Boolean (booleano): Solo tiene dos valores posibles: true (verdadero) o false (falso).
- Array (arreglo): Lista ordenada de elementos que pueden ser de diferentes tipos.
Ejemplo: [1, 2, 3, "hola"].
- Object (objeto): Conjunto de propiedades con clave y valor. Ejemplo: {nombre: "Juan",
edad: 20}.
3. Operadores y Expresiones
Los operadores permiten realizar cálculos, asignaciones y comparaciones.
- Aritméticos: +, -, *, /.
- Asignación: =, +=, -=.
- Comparación:
- == compara solo el valor.
- === compara valor y tipo de dato.
- != (diferente en valor).
- !== (diferente en valor o tipo).
- >, < (mayor o menor que).
- Lógicos:
- && (AND).
- || (OR).
- ! (NOT).
Pregunta de reflexión:
La diferencia entre == y === es que el primero compara solo valores, mientras que
el segundo compara valor y tipo de dato.
Ejemplo:
5 == "5" // true, porque compara solo valor.
5 === "5" // false, porque compara valor y tipo.
4. Sentencias Condicionales (if/else)
Las sentencias condicionales permiten tomar decisiones en el código según una
condición.
Ejemplo:
let edad = 20;
if (edad < 18) {
[Link]("Eres menor de edad");
} else if (edad >= 18 && edad < 60) {
[Link]("Eres adulto");
} else {
[Link]("Eres adulto mayor");
}
5. Funciones
Una función es un bloque de código reutilizable que se puede ejecutar cuando se
necesite.
- Declaración de una función normal:
function saludar(nombre) {
return "Hola " + nombre;
}
[Link](saludar("Pedro"));
- Función de flecha (arrow function):
const saludar = (nombre) => "Hola " + nombre;
[Link](saludar("Ana"));
Diferencia:
- La función normal puede usarse antes de ser declarada (hoisting).
- La función de flecha es más corta y no tiene su propio this.
6. Manipulación del DOM (Document Object Model)
El DOM es la representación estructurada de un documento HTML como un árbol de
nodos. JavaScript lo utiliza para interactuar, modificar y actualizar dinámicamente la
página web.
Métodos más comunes:
- getElementById(): selecciona un elemento por su id.
[Link]("titulo").innerText = "Nuevo Título";
- querySelector(): selecciona el primer elemento que coincida con un selector CSS.
[Link](".parrafo").[Link] = "blue";
- addEventListener(): agrega un evento a un elemento.
[Link]("btn").addEventListener("click", () => {
alert("Botón presionado");
});
Conclusión
JavaScript es fundamental en el desarrollo web moderno, pues permite crear páginas
dinámicas, interactivas y personalizadas, trabajando en conjunto con HTML y CSS.