JavaScript Básico
Con los siguientes conceptos básicos de JavaScript, ya puedes empezar a darle vida a tus páginas web, haciendo que respondan a la interacción del usuario y muestren información dinámica. Este es el punto de partida para construir aplicaciones web complejas.
¿De que trata?
JavaScript (JS) es un lenguaje de programación esencial para el diseño y desarrollo web. Mientras que HTML estructura el contenido y CSS le da estilo, JavaScript añade interactividad y comportamiento dinámico a tu página web. Sin JavaScript, un sitio web es estático; con JavaScript, puede responder a las acciones del usuario, actualizar el contenido sin recargar la página, realizar cálculos, validar formularios y mucho más.
Piensa en JavaScript como el cerebro de la página web. Es lo que permite que un botón haga algo cuando se le hace clic, que una imagen cambie al pasar el ratón por encima, o que un formulario te diga si has rellenado un campo incorrectamente antes de enviarlo.
JavaScript se ejecuta principalmente en el navegador del usuario (lado del cliente), lo que lo hace muy rápido porque no necesita comunicarse con un servidor para realizar muchas de sus funciones. Sin embargo, con el surgimiento de Node.js, JavaScript también puede ejecutarse en el servidor (lado del backend), lo que lo convierte en un lenguaje muy versátil para el desarrollo web completo.
¿Cómo se hace el JavaScript Básico?
Puedes incluir JavaScript en tu página web de forma similar a CSS:
1. Formas de Incluir JavaScript
En línea (Inline JavaScript): Se inserta directamente en un atributo HTML. No recomendado para uso general, ya que mezcla la lógica con el contenido.
HTML:
Interno (Internal JavaScript): Se escribe dentro de una etiqueta <script> en el documento HTML. Se suele colocar al final de la etiqueta <body> para asegurar que todo el HTML se haya cargado antes de que el script intente manipularlo.
HTML:
Externo (External JavaScript): Se crea un archivo .js separado (ej. script.js) y se enlaza al documento HTML usando la etiqueta <script src="...">. Esta es la práctica recomendada por las mismas razones que CSS externo: separación de preocupaciones, reusabilidad y mantenimiento.
HTML:
JavaScript:
2. Mostrar Mensajes
JavaScript ofrece varias formas de mostrar información al usuario o al desarrollador:
alert(): Muestra un cuadro de diálogo emergente con un mensaje. Es intrusivo, ya que el usuario debe hacer clic en "Aceptar" para continuar.
JavaScript:
console.log(): Muestra un mensaje en la consola del navegador (accesible a través de las herramientas de desarrollador, generalmente con F12). Es una herramienta indispensable para la depuración y para ver el valor de las variables sin afectar la interfaz del usuario.
JavaScript:
document.write(): Escribe contenido HTML directamente en el documento. No es recomendable para páginas ya cargadas, ya que puede sobrescribir el contenido existente.
JavaScript:
Manipulación del DOM: La forma más común y flexible de mostrar contenido es modificar elementos HTML existentes en la página (el DOM - Document Object Model).
HTML:
JavaScript:
3. Variables
¿De qué trata? Las variables son contenedores para almacenar datos. Son fundamentales en cualquier lenguaje de programación para guardar información que puede cambiar durante la ejecución del programa.
¿Cómo se hace? Se declaran usando las palabras clave var, let o const.
var: La forma más antigua de declarar variables. Tiene un alcance de función (o global) y puede ser re-declarada y re-asignada. (Menos usada hoy en día).
let: Introducido en ES6 (ECMAScript 2015). Tiene un alcance de bloque y puede ser re-asignada, pero no re-declarada en el mismo alcance. Es la opción preferida para variables que necesitan cambiar de valor.
const: También introducido en ES6. Tiene un alcance de bloque y es para declarar constantes, es decir, valores que no cambiarán una vez asignados. No puede ser re-asignada ni re-declarada.
JavaScript:
4. Eventos Simples
¿De qué trata? Los eventos son acciones que ocurren en el navegador (ej. un clic de ratón, una tecla presionada, una página cargada, un formulario enviado). JavaScript nos permite "escuchar" estos eventos y ejecutar código en respuesta a ellos, lo que hace que las páginas sean interactivas.
¿Cómo se hace? La forma más común y recomendada es usar el método addEventListener().
Seleccionar el elemento: Primero, necesitas obtener una referencia al elemento HTML al que quieres añadir el evento. Esto se hace comúnmente con document.getElementById().
addEventListener(evento, funcion): Este método "escucha" un tipo específico de evento (ej. 'click', 'mouseover', 'submit') y cuando ocurre, ejecuta la funcion (también llamada "callback").
Ejemplos Comunes de Eventos:
click: Cuando el usuario hace clic en un elemento.
mouseover: Cuando el puntero del ratón se mueve sobre un elemento.
mouseout: Cuando el puntero del ratón se mueve fuera de un elemento.
submit: Cuando se envía un formulario.
keydown: Cuando una tecla es presionada.
load: Cuando la página o un recurso ha terminado de cargarse.
HTML:
JavaScript:
