W3docs
es
Iniciar sesión

Comenzar a usar Javascript

Aprende a añadir JavaScript con la etiqueta script, vincular archivos .js externos, controlar la carga con defer y async, y usar la consola del navegador.

Qué cubre este capítulo

Este es tu punto de partida para escribir JavaScript. Al finalizarlo sabrás cómo:

  • añadir JavaScript directamente a una página HTML con la etiqueta <script>,
  • mover tu código a un archivo .js separado y vincularlo,
  • controlar cuándo se ejecuta un script con los atributos defer y async,
  • escribir tus primeras líneas de código, y
  • usar la consola del navegador para ver resultados y encontrar errores.

Si eres completamente nuevo en el lenguaje, lee primero la breve Introducción a JavaScript para tener una visión general, y luego regresa aquí para comenzar a escribir código.

Por qué necesitas JavaScript

HTML describe la estructura de una página y CSS la estiliza, pero ninguno puede reaccionar ante un visitante. HTML por sí solo permite que las personas lean texto, vean vídeos, miren imágenes y hagan clic en enlaces — no puede hacer cálculos, validar un formulario ni cambiar la página después de que haya cargado. JavaScript añade comportamiento: convierte un documento estático en algo interactivo que puede responder a clics, escritura y otros eventos.

Añadir JavaScript a una página significa que estás escribiendo un programa informático. La mayoría de los scripts para principiantes son breves, pero comparten los mismos bloques de construcción que los programas más grandes: valores, condiciones e instrucciones paso a paso. Una buena forma de pensar antes de programar es dividir una tarea en pasos pequeños. Por ejemplo, para saludar a un visitante por su nombre — "¡Bienvenido, John Doe!" — tu programa necesita:

  1. pedir al visitante su nombre,
  2. leer la respuesta, y
  3. mostrar el mensaje en la página.

Una vez que los pasos están claros, los traduces a código. Aprender el lenguaje es muy similar a aprender un idioma hablado: vas adquiriendo nuevas palabras (let, if, function) y aprendes cómo combinarlas.

Cómo añadir JavaScript a una página

El navegador lee el HTML de arriba a abajo. Para indicarle "viene JavaScript," envuelves tu código en la etiqueta HTML <script>. Todo lo que hay entre el <script> de apertura y el </script> de cierre se ejecuta como JavaScript:

Un script "¡Hola, mundo!" dentro de HTML

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Hello, world!');
    </script>
    <p>...After the script.</p>
  </body>
</html>
Pruébalo tú mismo »

Una etiqueta <script> puede contener el código en sí mismo (llamado código en línea) o apuntar a un archivo externo con el atributo src (tratado en la siguiente sección). Puedes colocar etiquetas <script> en el <head> de la página o en cualquier lugar del <body>.

Dónde colocar la etiqueta <script>

Un script bloquea el análisis mientras se ejecuta, así que la ubicación importa:

  • Justo antes de la etiqueta de cierre </body> es el lugar más sencillo y seguro. Cuando el script se ejecuta, el HTML que hay encima ya existe, de modo que el código puede encontrar los elementos de la página.
  • En el <head> mantiene el código organizado en un solo lugar, pero un <script> simple allí se ejecuta antes de que se analice el body — por lo que todavía no puede ver los elementos de la página. Para solucionar esto, usa el atributo defer (ver más abajo).

Atributos antiguos de <script> que aún puedes ver

Los scripts modernos rara vez necesitan atributos, pero hay dos que aparecen en código antiguo:

  • type — HTML4 requería type="text/javascript". Ya no es necesario; el estándar moderno reutiliza type solo para módulos de JavaScript (type="module"), un tema avanzado que se trata más adelante.
  • language — language="javascript" antes declaraba el lenguaje del script. JavaScript es el valor predeterminado, así que este atributo está obsoleto.

Puedes leer sobre todos los atributos disponibles en el capítulo sobre atributos HTML.

Controlar cuándo se carga un script: defer y async

Cuando el navegador encuentra un <script src="..."> externo, normalmente detiene la construcción de la página, descarga el archivo y lo ejecuta antes de continuar. En una página con varios scripts, esto ralentiza el renderizado. Dos atributos cambian ese comportamiento:

  • defer — descarga el script en paralelo y lo ejecuta solo después de que el HTML esté completamente analizado, en el orden en que aparecen los scripts. Este es el valor predeterminado recomendado para scripts que interactúan con la página.
  • async — descarga en paralelo y ejecuta en cuanto esté listo, sin garantizar el orden. Ideal para scripts independientes (analíticas, publicidad) que no dependen de otro código ni de que la página esté lista.
<!-- Runs after the page is parsed, keeps order -->
<script defer src="main.js"></script>

<!-- Runs whenever it finishes downloading, order not guaranteed -->
<script async src="analytics.js"></script>

Ambos atributos solo se aplican a scripts externos (src). Para el código en línea, simplemente coloca el <script> al final del <body>.

Archivos JavaScript externos

El código en línea está bien para una demostración rápida, pero los proyectos reales mantienen JavaScript en archivos .js separados. Copiar el mismo código en cada página es difícil de mantener — si corriges un error tendrías que editar cada página. Un script externo reside en un único archivo .js que muchas páginas pueden compartir, así que lo escribes una sola vez y el navegador incluso puede almacenarlo en caché para mayor velocidad.

Para usar un archivo externo, apunta el atributo src (fuente) de la etiqueta <script> hacia él y deja la etiqueta vacía:

Vincular un script en la misma carpeta

<script src="W3DocsScript.js"></script>

La ruta en src funciona como cualquier otra URL en HTML. Puede ser:

  • Relativa a la página actual — my-script.js (misma carpeta) o js/my-script.js (una subcarpeta).
  • Ruta absoluta (desde la raíz del sitio) — empieza con /:
<script src="/path/W3DocsScript.js"></script>
  • Una URL completa, útil para bibliotecas alojadas en una CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Para cargar varios archivos, usa una etiqueta <script> por archivo. Se ejecutan de arriba a abajo:

<script src="/W3DocsScript1.js"></script>
<script src="/W3DocsScript2.js"></script>

Un error común: una sola etiqueta <script> no puede tener a la vez un atributo src y código en línea. Si se establece src, cualquier cosa entre las etiquetas se ignora:

src establecido — el alert en línea nunca se ejecuta

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js">
      alert("Hello, world!"); // the content is ignored, because src is set
    </script>
    <p>...After the script.</p>
  </body>
</html>
Pruébalo tú mismo »

Para usar a la vez un archivo externo y código en línea, divídelos en dos etiquetas separadas:

Dos etiquetas: una externa y una en línea

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js"></script>
    <script>
      alert("Hello, world!");
    </script>
    <p>...After the script.</p>
  </body>
</html>
Pruébalo tú mismo »

Tu primer programa JavaScript

Escribamos un primer programa completo. Crea un archivo HTML y, justo antes de la etiqueta de cierre </body>, añade un <script> con una sola línea que muestre un mensaje emergente:

Un diálogo alert()

<!DOCTYPE HTML>
<html>
  <head>
    <title>My First Script</title>
  </head>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Welcome to W3Docs');
    </script>
  </body>
</html>
Pruébalo tú mismo »

Cuando abres esta página en un navegador, aparece un cuadro de diálogo con el texto Welcome to W3Docs. La página se detiene hasta que haces clic en OK; una vez que el cuadro se cierra, el resto de la página se renderiza. alert() es útil para comprobaciones rápidas mientras aprendes, pero interrumpe al usuario, por lo que el código de producción rara vez lo utiliza.

Escribir texto en una página web

alert() muestra una ventana emergente, pero a menudo querrás poner texto dentro de la propia página. El comando clásico de enseñanza para esto es document.write(), que inserta la cadena que le pases directamente en el documento mientras se carga:

Usando document.write()

<!DOCTYPE HTML>
<html>
  <head>
    <title>document.write demo</title>
  </head>
  <body>
    <h1>Writing to the document window</h1>
    <script>
      document.write('<p>Welcome to W3Docs!</p>');
    </script>
  </body>
</html>
Pruébalo tú mismo »

Al igual que la función alert(), document.write() muestra lo que coloques entre sus paréntesis — aquí un elemento <p>, por lo que el navegador añade un nuevo párrafo debajo del encabezado.

Atención: document.write() está bien para un primer experimento, pero evítalo en proyectos reales. Si se ejecuta después de que la página haya terminado de cargar, borra todo el documento. El código moderno actualiza la página a través del DOM (por ejemplo element.textContent = '...') en su lugar.

La consola JavaScript del navegador

Todos los navegadores modernos incluyen una consola integrada — la herramienta más útil que tienes mientras aprendes. Muestra los mensajes que imprimes, informa de los errores con el número de línea exacto y te permite escribir JavaScript y ejecutarlo al instante.

Imprime en ella con console.log(). A diferencia de alert(), no interrumpe la página; y a diferencia de document.write(), nunca sobreescribe tu documento — por eso es la forma preferida de inspeccionar valores:

Registrar en la consola

<!DOCTYPE HTML>
<html>
  <head>
    <title>console.log demo</title>
  </head>
  <body>
    <p>Open the console to see the message.</p>
    <script>
      console.log('Welcome to W3Docs');
      console.log('2 + 2 =', 2 + 2);
    </script>
  </body>
</html>
Pruébalo tú mismo »

Para abrir la consola:

  • Chrome / Edge: Ctrl + Shift + J (Windows/Linux) o Cmd + Option + J (Mac), o usa el menú → Más herramientas → Herramientas para desarrolladores y selecciona la pestaña Console.
  • Firefox: Ctrl + Shift + K (Windows/Linux) o Cmd + Option + K (Mac).
  • Safari: activa el menú Desarrollo en Ajustes → Avanzado, luego presiona Cmd + Option + C.

Para un recorrido más profundo por las herramientas de depuración, consulta Depuración del DOM y herramientas.

Resumen

  • Añade JavaScript con la etiqueta <script> — el código en línea va entre las etiquetas; un archivo externo va en el atributo src (nunca ambos en una misma etiqueta).
  • Coloca los scripts simples justo antes de </body>, o usa defer en scripts externos para ejecutarlos después de que la página esté analizada.
  • Los archivos .js externos te permiten reutilizar y almacenar en caché el código en muchas páginas.
  • alert() muestra una ventana emergente, document.write() escribe en la página (úsalo con moderación), y console.log() imprime en la consola sin alterar la página.

A continuación, aprende cómo almacenar datos en variables de JavaScript y cómo documentar tu código con comentarios.

Práctica

Práctica
¿Cuáles de las siguientes afirmaciones son verdaderas sobre el inicio con JavaScript en el desarrollo web?
¿Cuáles de las siguientes afirmaciones son verdaderas sobre el inicio con JavaScript en el desarrollo web?
Was this page helpful?