Introducción a JavaScript: qué es, cómo funciona y cómo agregarlo a HTML

Aprendé qué es JavaScript, cómo funciona en el navegador, su relación con HTML y CSS y cómo agregar tus primeros scripts a una página web.


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 + I en Windows/Linux;
  • Cmd + Option + I en macOS.

Una vez abiertas, seleccioná la pestaña Console o Consola.

También podés abrir la consola directamente con:

  • Ctrl + Shift + J en Chrome/Edge sobre Windows/Linux;
  • Cmd + Option + J en 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.

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender JavaScript, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

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”

  1. Pingback: Variables, constantes, tipos de datos y operadores en JavaScript

Deja un comentario

Descubre más desde Club Programador

Suscríbete ahora para seguir leyendo y obtener acceso al archivo completo.

Seguir leyendo