HTML define la estructura. CSS controla la presentación. JavaScript agrega comportamiento e interacción.
Con JavaScript podemos responder a clics, validar formularios, modificar contenido, consumir APIs y construir aplicaciones completas.
¿Qué es JavaScript?
JavaScript es un lenguaje de programación de propósito general, dinámico y multiparadigma. Nació para aportar interactividad a las páginas web y hoy también se utiliza fuera del navegador, por ejemplo en servidores mediante Node.js.
JavaScript no es Java
A pesar del nombre, JavaScript y Java son lenguajes diferentes, con ecosistemas y modelos de ejecución distintos.
HTML, CSS y JavaScript
HTML → estructura y contenido CSS → estilos y presentación JavaScript → comportamiento e interacción
¿Dónde se ejecuta?
En el navegador, JavaScript es ejecutado por un motor. Chrome y otros navegadores basados en Chromium utilizan V8; Firefox utiliza SpiderMonkey.
Los motores modernos no se limitan a interpretar línea por línea: aplican técnicas de compilación y optimización en tiempo de ejecución.
ECMAScript
JavaScript evoluciona a partir de una especificación estándar llamada ECMAScript. Por eso es frecuente encontrar nombres como ES6 o ES2015.
Primer JavaScript en una página
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Mi primera página con JavaScript</title> </head> <body> <h1>Club Programador</h1> <script> console.log("Hola desde JavaScript"); </script> </body> </html>
La consola del navegador
console.log() permite mostrar información en la consola de las herramientas de desarrollo.
¿Cómo abrir la consola del navegador?
La consola forma parte de las herramientas de desarrollo del navegador. Desde allí podemos ver mensajes, probar instrucciones de JavaScript y detectar errores.
En Google Chrome y Microsoft Edge podés abrir las herramientas de desarrollo con:
F12;Ctrl + Shift + Ien Windows/Linux;Cmd + Option + Ien macOS.
Una vez abiertas, seleccioná la pestaña Console o Consola.
También podés abrir la consola directamente con:
Ctrl + Shift + Jen Chrome/Edge sobre Windows/Linux;Cmd + Option + Jen Chrome/Edge sobre macOS.
En Firefox podés abrir las herramientas con F12 o Ctrl + Shift + I, y acceder a la consola con Ctrl + Shift + K.
Otra opción, disponible en la mayoría de los navegadores, es hacer clic derecho sobre la página, elegir Inspeccionar y luego abrir la pestaña Consola.
console.log("Hola, mundo");
JavaScript externo
Para proyectos reales suele ser mejor separar el código en un archivo. Así mantenemos el HTML enfocado en la estructura y el JavaScript en el comportamiento.
mi-proyecto/ |-- index.html |-- app.js
<script src="app.js"></script>
Archivo app.js:
console.log("JavaScript cargado correctamente");
¿Dónde colocar script?
Una opción habitual es colocar el script al final del body. También podemos cargarlo en head usando defer.
<script src="app.js" defer></script>
Primer ejemplo interactivo
<button id="saludar">Saludar</button> <p id="mensaje"></p>
const boton = document.querySelector("#saludar"); const mensaje = document.querySelector("#mensaje"); boton.addEventListener("click", function () { mensaje.textContent = "¡Hola desde JavaScript!"; });
Qué ocurre en este ejemplo
- seleccionamos elementos del HTML;
- escuchamos el evento
click; - modificamos el contenido de un párrafo.
Síncrono y asíncrono
JavaScript ejecuta gran parte del código de forma secuencial: una instrucción después de otra. También dispone de mecanismos asíncronos para tareas que terminan más adelante, como temporizadores o peticiones HTTP, sin bloquear innecesariamente el resto de la aplicación.
Errores comunes
- confundir JavaScript con Java;
- olvidar enlazar el archivo
.js; - escribir mal la ruta del script;
- intentar acceder a elementos antes de que existan en el DOM;
- copiar código sin revisar la consola del navegador.
Ejercicio
Creá una página con un título, un botón y un párrafo. Al presionar el botón, cambiá el texto del párrafo usando JavaScript.
Qué aprendimos
- qué es JavaScript;
- relación entre HTML, CSS y JavaScript;
- motores y ECMAScript;
- scripts internos y externos;
console.log();- primer contacto con DOM y eventos.
Seguí aprendiendo JavaScript
Esta es la primera guía de la ruta de JavaScript.
Variables, constantes, tipos de datos y operadores en JavaScript →
Descubre más desde Club Programador
Suscríbete y recibe las últimas entradas en tu correo electrónico.
Un comentario en “Introducción a JavaScript: qué es, cómo funciona y cómo agregarlo a HTML”