Poner JS en una página web (Versión en Video)

Una página web básica, como ésta, está hecha con etiquetas HTML, como todas éstas.

Ahora, cuando queremos estilizar una página web, ¿cómo introducimos CSS?

Añadimos una etiqueta "".

Y el navegador sabe cuando hay una etiqueta ""

y debe usar la máquina de CSS para procesar esa etiqueta.

Generalmente ponemos la etiqueta "" dentro de "",

porque queremos asegurarnos de que el navegador procese los estilos

antes de ejecutar las etiquetas HTML.

De otra manera, si ponemos "" aquí abajo,

podríamos tener un "FOUC: flash of unstyled content" (un destello de contenido sin estilo),

y la gente vería nuestra página web expuesta, ¡sería grotesco!

Vamos a regresarla a su lugar.

Ok, ahora esta página web tiene estilo.

¿Cómo ponemos JavaScript en una página web cuando queremos añadir interactividad?

Para eso, añadimos una etiqueta "".

Y el mejor lugar para poner una etiqueta ""

en realidad es hasta abajo de la página, justo antes de la etiqueta "".

Ya la puse allí y explicaré en un momento porque se pone allí.

Ahora, ¿qué puedo poner dentro de la etiqueta ""?

Mmm, podemos escribir cualquier sentencia válida de JavaScript, como "var four = 2 + 2;".

Pero eso no es muy emocionante, porque no pasa nada en nuestra página web.

Y si estás en Khan Academy, probablemente ya sabes

que cuatro es igual a dos más dos.

Así que algo que puedo hacer para verificar que funciona,

es escribir esta línea de código aquí.

Ok, no ves nada, ¿cierto?

Y probablemente nunca antes habías visto esta función.

Esta función "console.log" es una función especial que podemos usar

en muchos ambientes de JavaScript, incluyendo navegadores.

Y va a escribir cosas a la consola de JavaScript.

Puedes encontrar esa consola en tu navegador,

si presionas "Command-Option-I" o "Control-Option-I",

o botón derecho en cualquier parte de la página y seleccionar "Inspeccionar elemento".

Ahora pausa esta guía paso a paso y trata de abrir la consola,

para ver ese mensaje.

Entonces, ¿lo viste? ¡Genial!

Ahora puedes cerrar la consola, si quieres,

porque ocupa mucho espacio.

Y también te puede distraer ya que va a mostrarte cada error conforme voy tecleando.

Sin embargo, es una gran herramienta para depurar.

Así que definitivamente guárdala en tu caja de herramientas.

Ahora, déjame hacerle algo a la página con JavaScript,

usando una línea de código que todavía no tendrá mucho sentido.

¿Viste lo que pasó?

Nuestra página web desapareció, y fue reemplazada por nuestro mensaje pirata.

Veremos con más detalle cómo funciona esta línea de código.

Pero básicamente encuentra la etiqueta "" y reemplaza todo el contenido.

Ahora, ¿qué pasará si copio y pego esta etiqueta "",

y la pongo en "" con la etiqueta ""?

No funciona. ¿Por qué no funciona?

Porque la página web evalúa la etiqueta ""

antes de que vea la etiqueta "".

Y dice: "Oh-oh, no he visto todavía el 'document.body',

¡Y estás tratando de manipularlo! Eso no puede pasar".

Es por eso que debemos poner la etiqueta "" al final de nuestra página.

Así la página web va a ver la etiqueta "" primero,

va a ver todo lo que contiene, y luego empezaremos a hacer cosas con eso.

Queremos asegurarnos primero de que la página web exista.

Y eso es diferente que con CSS:

Queremos poner nuestra etiqueta "" al principio,

porque al analizador de CSS le parece bien aplicar estilos

a cosas que todavía no existen.

Y aplica el estilo una vez que existen.

Pero eso no está bien para el DOM de JavaScript. (DOM: Document Object Model, Modelo de Objetos para representar Documentos)

Así que asegúrate de que esté aquí abajo.

Trata de añadir la etiqueta "" en tu siguiente desafío,

asegurándote de que la pongas hasta abajo,

y luego prometo que explicaré más sobre esta línea que está aquí.