Marc Semper Lloret
← JavaScript: el lenguaje

Sesión 1 · Semana 1

Dónde se ejecuta JavaScript

Hoy · Hoja de ruta

  1. 1. Aprende: Qué es JavaScript, dónde se ejecuta y cómo se enlaza con una página.
  2. 2. Haz: Usa la consola como calculadora, crea js/main.js y enlázalo en tu sitio.
  3. 3. Comprueba: Tu código se ejecuta, sabes demostrarlo y sabes leer un error.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Qué cosas de una web crees que no puede hacer el HTML por sí solo?
  2. En la UD2, ¿cómo comprobabas que la hoja de estilos se había cargado?
  3. ¿Qué esperas que ocurra si enlazas un fichero que no existe?

Un lenguaje que vive dentro del navegador

Todo navegador moderno lleva dentro un motor de JavaScript: un programa que lee tu código y lo ejecuta. No hay que instalar nada ni compilar nada. Abres la consola, escribes una expresión y te responde.

Prueba esto, línea a línea:

2 + 3
"Pixel" + "Store"
10 / 4
new Date().getFullYear()

Ya estás programando. La consola evalúa lo que escribes y muestra el resultado.

Escribirlo en un fichero

Escribir en la consola sirve para probar; lo que se conserva va en un fichero. Crea js/main.js:

console.log("El código se está ejecutando");

Enlázalo después desde el head de tu página, con defer:

<script src="js/main.js" defer></script>

Recarga la página, abre la consola y busca el mensaje. Si aparece, el enlace funciona.

defer

Le dice al navegador: descarga el fichero mientras lees el documento, y ejecútalo cuando el documento esté completo. Sin defer, el código se ejecuta antes de que exista la página, y en la UD4 eso significaría buscar elementos que todavía no están.

Los tres sitios donde puede ir el código

Forma Cómo se escribe Cuándo
Fichero externo Un .js enlazado con script src Siempre
Bloque en la página Código dentro de un script en el documento Pruebas rápidas
En un atributo onclick="..." en la etiqueta Nunca en este módulo

Las razones son las mismas que en CSS: reutilización, caché y mantener separadas las tres capas. Un onclick mete comportamiento dentro de la estructura, que es justo lo que llevamos dos unidades evitando.

Leer un error en vez de asustarse

Escribe esto a propósito en main.js:

console.log(precioTotal);

La consola responde algo parecido a:

Uncaught ReferenceError: precioTotal is not defined
    at main.js:1:13

Tiene tres partes y las tres importan: el tipo de error (ReferenceError), el mensaje (is not defined) y la posición (main.js, línea 1, columna 13). Con eso ya sabes qué mirar antes de tocar nada.

El primer error es el que hay que arreglar

Cuando algo falla, la consola suele llenarse. Casi siempre los errores siguientes son consecuencia del primero. Sube arriba del todo, arregla ese, recarga y vuelve a mirar.

Tarea 1 · Tu primer script

  1. Crea js/main.js y enlázalo en index.html con defer.
  2. Escribe tres console.log con tu nombre, el nombre de tu proyecto y el año actual calculado.
  3. Provoca un error a propósito y anota su tipo, su mensaje y su línea.
  4. Corrígelo.
  5. Enlaza el mismo fichero en el resto de páginas.
Objetivo mínimoEl código se ejecuta en las cuatro páginas y sabes demostrarlo.
Si lo tienesCambia la ruta del src y diagnostica el 404 desde la pestaña Network.
RetoSuprime defer, desplaza el enlace y explica qué consecuencia tiene el cambio de orden.

Checkpoint · fin de la sesión 1

  • Existe js/main.js y se ejecuta al cargar la página.
  • Sabes por qué usamos un fichero externo y no un atributo en la etiqueta.
  • Sabes leer el tipo, el mensaje y la línea de un error.
  • Puedes explicar qué hace defer.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Dónde se ejecuta el JavaScript que escribes en esta unidad?
  2. ¿Qué tres datos te da un error de la consola?
  3. ¿Por qué evitamos onclick en el HTML?
Ver respuestas

1 · En el motor de JavaScript del navegador, sin instalar ni compilar nada.

2 · El tipo de error, el mensaje, y el fichero con su línea y su columna.

3 · Porque mezcla comportamiento con estructura, y pierde la reutilización y la caché del fichero externo.