-
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í.
