Cuando abrimos una página web en el navegador, éste interpreta el código HTML para entender qué contenido hay y qué significa cada parte. Después aplica el CSS para definir el aspecto visual de ese contenido. Pero una página web moderna no solo necesita estructura y presentación: en muchos casos también necesita comportamiento, lógica e interacción. Ahí es donde entra JavaScript.
JavaScript es el lenguaje que permite que una página web responda a acciones del usuario, modifique contenidos, valide formularios, cargue información sin recargar toda la página o cambie el estado de distintos elementos de la interfaz. Es, por tanto, la parte de la Web que aporta funcionalidad y dinamismo.
Qué es JavaScript
JavaScript es un lenguaje de programación. A diferencia de HTML y CSS, que no son lenguajes de programación, Javascript sí puede ejecutar comandos y funciones de lógica. Esto no implica que Javascript no tenga que relacionarse con HTML o CSS. Con HTML describimos el contenido y su estructura. Con CSS definimos la presentación visual. Con JavaScript programamos el comportamiento de la página.
Dónde se puede usar Javascript
Aunque mucha gente identifica JavaScript solo con el navegador, el lenguaje también se puede utilizar fuera de la Web en otros entornos como scripts en la Terminal de Linux o MacOçS, como lenguaje de programación para servidores con NodeJS o para programar servicios para la Nube.
El estándar del lenguaje se denomina ECMAScript, y JavaScript es su implementación más conocida en la actualidad.
Ejemplo básico en JavaScript
A continuación tenemos un ejemplo de una página HTML con un botón y un pequeño fragmento de JavaScript:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Mi primera página con JavaScript</title>
</head>
<body>
<h1>Mi primera página con JavaScript</h1>
<p id="mensaje">Todavía no ha pasado nada.</p>
<button id="boton">Pulsa aquí</button>
<script>
document.getElementById("boton").addEventListener("click", function () {
document.getElementById("mensaje").textContent = "Has pulsado el botón.";
});
</script>
</body>
</html>
Si guardamos ese contenido en un fichero con extensión .html y lo abrimos con el navegador, veremos una página con un botón. Al pulsarlo, el texto del párrafo cambiará.
Ese cambio no lo hace HTML ni lo hace CSS. Lo hace JavaScript.
Qué está ocurriendo en el ejemplo
Aunque a primera vista pueda parecer mucho código, en realidad están pasando pocas cosas.
Primero tenemos este párrafo:
<p id="mensaje">Todavía no ha pasado nada.</p>
Ese párrafo tiene un atributo id con el valor mensaje. Ese identificador nos permite localizar el elemento desde JavaScript.
Después tenemos este botón:
<button id="boton">Pulsa aquí</button>
También tiene un id, en este caso boton.
Y por último aparece el bloque script:
<script>
document.getElementById("boton").addEventListener("click", function () {
document.getElementById("mensaje").textContent = "Has pulsado el botón.";
});
</script>
Ese bloque contiene código JavaScript que el navegador ejecuta. La instrucción busca el botón, escucha el evento de pulsación (click) y, cuando ese evento ocurre, modifica el texto del párrafo.
La etiqueta <script>
La forma más habitual de incluir JavaScript en una página HTML es mediante la etiqueta <script>.
Puede escribirse directamente dentro del propio documento HTML:
<script>
console.log("Hola desde JavaScript");
</script>
O bien enlazarse desde un fichero externo:
<script src="app.js"></script>
En la práctica, cuando el código crece, lo normal es utilizar un fichero independiente. Esto facilita el mantenimiento, permite reutilizar código y evita mezclar demasiadas responsabilidades en el HTML.
JavaScript y el DOM
Cuando JavaScript trabaja con una página HTML, normalmente no “ve” el fichero como texto plano, sino como una estructura interna que el navegador ha construido en memoria.
A esa representación se la suele llamar DOM (Document Object Model).
Utilizando el DOM, JavaScript puede realizar diversas funciones como buscar y manipular elementos de la página, añadir y eliminar elementos, reaccionar a eventos provocados por el usuario o por el navegador…
JavaScript no sustituye a HTML
Una idea importante al empezar es que JavaScript no debería utilizarse para suplir una mala estructura HTML.
Primero conviene tener un documento HTML bien organizado y semántico. Después CSS se ocupa de la presentación. Y finalmente JavaScript añade comportamiento.
Si se invierte ese orden, es fácil terminar con páginas difíciles de mantener, menos accesibles y más frágiles.
En artículos anteriores indicamos que HTML describe contenido y CSS describe presentación. Siguiendo esa idea de separar contenido, diseño y funcionalidad, Javascript debe añadir funcionalidad sin romper la semántica del documento. Esta separación de responsabilidades hace que la página sea más clara, con un mejor mantenimiento y más robusta.
JavaScript no debe ser intrusivo ni imprescindible
Aunque JavaScript aporta mucha potencia a una página web, conviene usarlo con cierta prudencia.
Una mala práctica bastante común consiste en construir páginas que dependen completamente de JavaScript para funcionar, incluso en tareas básicas como mostrar contenido, seguir enlaces o enviar un formulario. Cuando esto ocurre, la página se vuelve dependiente de Javascript y, en muchos casos, menos accesible.
Lo apropiado es que HTML proporcione una base sólida por sí mismo. Es decir, que la estructura del documento, los enlaces, los textos y la información principal existan ya en el marcado. Después, JavaScript puede enriquecer esa base con comportamiento adicional: validar datos en el navegador, mostrar u ocultar partes de la interfaz, actualizar contenidos o responder a acciones del usuario.
Con esto se mantiene la idea de que JavaScript debería mejorar la experiencia, no convertirse en un obstáculo.
También conviene evitar un uso intrusivo del lenguaje. Por ejemplo, no es buena idea abrir ventanas inesperadas, cambiar el foco sin necesidad, alterar el contenido de manera brusca sin avisar o interceptar comportamientos normales del navegador si no hay un motivo claro. Todas esas prácticas pueden desorientar a muchas personas usuarias y hacer que la navegación resulte confusa.