JavaScript
JavaScript es un lenguaje de programación que permite crear contenido dinámico e interactivo en las páginas web.
¿Qué es JavaScript?
Si HTML es la estructura de una casa y CSS es la decoración, entonces JavaScript es la electricidad que hace que todo funcione: las luces, los electrodomésticos, los sistemas automatizados.
JavaScript es un lenguaje de programación que da vida e interactividad a las páginas web. Mientras HTML crea el contenido y CSS lo hace bonito, JavaScript hace que las cosas sucedan cuando los usuarios interactúan con la página.
JavaScript permite:
- Responder a clics y acciones - Botones que hacen algo cuando los presionas
- Validar formularios - Verificar que la información esté correcta antes de enviarla
- Crear animaciones - Elementos que se mueven y cambian dinámicamente
- Cargar contenido nuevo - Actualizar partes de la página sin recargarla completamente
- Almacenar información - Recordar preferencias del usuario
JavaScript se ejecuta directamente en el navegador web (Chrome, Firefox, Safari) y también puede usarse en servidores para crear aplicaciones completas. Es un lenguaje versátil que puede manejar desde simples efectos visuales hasta aplicaciones web complejas como Gmail o Facebook.
La característica más importante de JavaScript es que es dinámico: puede cambiar el contenido, el estilo y el comportamiento de una página web en tiempo real, basándose en las acciones del usuario.
Conceptos Fundamentales
Variables
let nombre = "Juan";
const edad = 25;
var mensaje = "Hola mundo";
Funciones
function saludar(nombre) {
return `Hola, ${nombre}!`;
}
const sumar = (a, b) => a + b;
Objetos
const persona = {
nombre: "Ana",
edad: 30,
saludar() {
console.log(`Hola, soy ${this.nombre}`);
}
};
DOM (Document Object Model)
Permite manipular elementos HTML:
// Seleccionar elementos
const titulo = document.getElementById('titulo');
const botones = document.querySelectorAll('.boton');
// Modificar contenido
titulo.textContent = 'Nuevo título';
// Añadir eventos
boton.addEventListener('click', function() {
alert('¡Botón clickeado!');
});
ES6+ (JavaScript Moderno)
- Arrow Functions:
() => {} - Template Literals:
`Hola ${nombre}` - Destructuring:
const {x, y} = objeto - Modules:
import/export - Promises/Async-Await: Programación asíncrona