Apuntes sobre Javascript

JavaScript lo resuelve todo... eventualmente.

¿Qué es y por qué importa?

JavaScript es un lenguaje de programación utilizado principalmente para añadir interactividad a las páginas web. Las páginas web que contienen HTML son por naturaleza estáticas. Puedes leer su contenido, que no cambia. Con javascript la página puede reaccionar a eventos (cuando se carga, cuando haces click, etc) y puede interactuar con el usuario.

A diferencia de otros lenguajes, JavaScript es interpretado (no necesita compilarse) y se ejecuta directamente en el navegador. Además, es un lenguaje versátil: aunque nació para la web, hoy se usa en servidores (gracias a Node.js), aplicaciones móviles, e incluso inteligencia artificial.

Una breve historia de JavaScript

  • 1995: Brendan Eich creó JavaScript en solo 10 días mientras trabajaba en Netscape. Originalmente se llamó "Mocha", luego "LiveScript", y finalmente "JavaScript" para aprovechar la popularidad de Java (aunque no tienen relación). Francamente estas primeras versiones eran poco mas que un juguete, para cambiar el color de las páginas, añadir algo de movimiento y poco mas. Cada navegador interpretaba javascript a su manera.
  • 1997: Se estandarizó como ECMAScript, la base técnica de JavaScript. Desde entonces, ECMAScript define las reglas del lenguaje.
  • 2000s: JavaScript creció con la llegada de bibliotecas como jQuery, que facilitaron la manipulación de páginas web.
  • 2015: La versión ES6 (ECMAScript 2015) trajo cambios revolucionarios, como let, const, y funciones flecha, haciendo el lenguaje más moderno.
  • Hoy: JavaScript es uno de los lenguajes más populares, impulsado por frameworks como React, Angular y Vue, y entornos como Node.js, y tiene una reputación de lenguaje "de verdad".

¿Por qué aprender JavaScript?

  1. Es esencial para el desarrollo web: Si quieres crear sitios interactivos, necesitas JavaScript.
  2. Gran comunidad: Hay toneladas de tutoriales, bibliotecas y foros para ayudarte.
  3. Versatilidad: Úsalo en navegadores, servidores, apps móviles, etc.
  4. Fácil: No hay nada que instalar. Los navegadores ya traen su propio intérprete javascript. Asegurate de tenerlos actualizados.

Cómo insertar JavaScript en una página

JavaScript se añade al HTML con la etiqueta <script>. Hay dos formas:

Inline: el código va directamente dentro del HTML. Útil para pruebas rápidas.

<!DOCTYPE html>
<html>
<body>
  <h1>Mi página</h1>
  <script>
    alert("¡Hola desde JavaScript!");
  </script>
</body>
</html>

Fichero externo: el código va en un archivo .js separado, que se enlaza con src. Es la forma habitual en proyectos reales, ya que mantiene el HTML limpio.

<!-- index.html -->
<body>
  <h1>Mi página</h1>
  <script src="script.js"></script>
</body>

// script.js
alert("¡Hola desde un fichero externo!");

El <script> se coloca justo antes de cerrar </body> para que el HTML ya esté cargado cuando el script se ejecute.

alert() vs console.log()

Son las dos formas más inmediatas de ver qué está haciendo tu código:

  • alert("mensaje"): muestra un cuadro de diálogo en el navegador. Visible para el usuario, pero interrumpe la ejecución. Útil para probar algo rápido.
  • console.log("mensaje"): escribe en la consola de desarrollo (F12 → pestaña Consola). El usuario normal no lo ve. Es la herramienta de depuración por excelencia.
alert("Esto lo ve el usuario");          // cuadro emergente
console.log("Esto solo lo ves tú");      // consola del navegador (F12)

En los ejemplos del manual usamos console.log() porque es más cómodo para aprender: no interrumpe y permite ver varios valores a la vez. En una página real, lo que importa es lo que aparece en el HTML —eso lo veremos a partir de la lección 9 con la manipulación del DOM.

Nota: JavaScript distingue mayúsculas de minúsculas: miVariable y mivariable son dos identificadores completamente distintos. Los punto y coma al final de cada instrucción son técnicamente opcionales, pero incluirlos evita errores sutiles.

En la próxima lección: variables y tipos de datos, la base para almacenar y manipular información en JavaScript.

TOP