0:00:00.737,0:00:06.812 Una página web básica, como ésta, está hecha con etiquetas HTML, como todas éstas. 0:00:06.812,0:00:12.180 Ahora, cuando queremos estilizar una página web, ¿cómo introducimos CSS? 0:00:12.180,0:00:14.397 Añadimos una etiqueta "". 0:00:14.397,0:00:17.349 Y el navegador sabe cuando hay una etiqueta "" 0:00:17.349,0:00:20.195 y debe usar la máquina de CSS para procesar esa etiqueta. 0:00:20.195,0:00:23.383 Generalmente ponemos la etiqueta "" dentro de "", 0:00:23.383,0:00:27.352 porque queremos asegurarnos de que el navegador procese los estilos 0:00:27.352,0:00:30.959 antes de ejecutar las etiquetas HTML. 0:00:30.959,0:00:34.936 De otra manera, si ponemos "" aquí abajo, 0:00:34.936,0:00:40.277 podríamos tener un "FOUC: flash of unstyled content" (un destello de contenido sin estilo), 0:00:40.277,0:00:44.726 y la gente vería nuestra página web expuesta, ¡sería grotesco! 0:00:44.726,0:00:48.484 Vamos a regresarla a su lugar. 0:00:48.484,0:00:51.734 Ok, ahora esta página web tiene estilo. 0:00:51.734,0:00:57.954 ¿Cómo ponemos JavaScript en una página web cuando queremos añadir interactividad? 0:00:57.954,0:01:01.255 Para eso, añadimos una etiqueta "". 0:01:01.255,0:01:04.385 Y el mejor lugar para poner una etiqueta "" 0:01:04.385,0:01:10.517 en realidad es hasta abajo de la página, justo antes de la etiqueta "". 0:01:10.517,0:01:15.150 Ya la puse allí y explicaré en un momento porque se pone allí. 0:01:15.150,0:01:19.724 Ahora, ¿qué puedo poner dentro de la etiqueta ""? 0:01:19.724,0:01:25.094 Mmm, podemos escribir cualquier sentencia válida de JavaScript, como "var four = 2 + 2;". 0:01:25.094,0:01:30.386 Pero eso no es muy emocionante, porque no pasa nada en nuestra página web. 0:01:30.386,0:01:33.152 Y si estás en Khan Academy, probablemente ya sabes 0:01:33.152,0:01:35.526 que cuatro es igual a dos más dos. 0:01:35.526,0:01:39.072 Así que algo que puedo hacer para verificar que funciona, 0:01:39.072,0:01:42.092 es escribir esta línea de código aquí. 0:01:42.092,0:01:45.350 Ok, no ves nada, ¿cierto? 0:01:45.350,0:01:48.927 Y probablemente nunca antes habías visto esta función. 0:01:48.927,0:01:53.130 Esta función "console.log" es una función especial que podemos usar 0:01:53.130,0:01:56.466 en muchos ambientes de JavaScript, incluyendo navegadores. 0:01:56.466,0:02:00.310 Y va a escribir cosas a la consola de JavaScript. 0:02:00.310,0:02:03.661 Puedes encontrar esa consola en tu navegador, 0:02:03.661,0:02:10.510 si presionas "Command-Option-I" o "Control-Option-I", 0:02:10.510,0:02:14.245 o botón derecho en cualquier parte de la página y seleccionar "Inspeccionar elemento". 0:02:14.245,0:02:19.009 Ahora pausa esta guía paso a paso y trata de abrir la consola, 0:02:19.009,0:02:21.707 para ver ese mensaje. 0:02:21.707,0:02:23.939 Entonces, ¿lo viste? ¡Genial! 0:02:23.939,0:02:26.656 Ahora puedes cerrar la consola, si quieres, 0:02:26.656,0:02:28.580 porque ocupa mucho espacio. 0:02:28.580,0:02:32.962 Y también te puede distraer ya que va a mostrarte cada error conforme voy tecleando. 0:02:32.962,0:02:35.515 Sin embargo, es una gran herramienta para depurar. 0:02:35.515,0:02:38.359 Así que definitivamente guárdala en tu caja de herramientas. 0:02:38.359,0:02:42.325 Ahora, déjame hacerle algo a la página con JavaScript, 0:02:42.325,0:02:47.034 usando una línea de código que todavía no tendrá mucho sentido. 0:02:56.671,0:02:58.596 ¿Viste lo que pasó? 0:02:58.596,0:03:03.128 Nuestra página web desapareció, y fue reemplazada por nuestro mensaje pirata. 0:03:03.128,0:03:07.895 Veremos con más detalle cómo funciona esta línea de código. 0:03:07.895,0:03:12.219 Pero básicamente encuentra la etiqueta "" y reemplaza todo el contenido. 0:03:12.219,0:03:16.530 Ahora, ¿qué pasará si copio y pego esta etiqueta "", 0:03:16.530,0:03:20.163 y la pongo en "" con la etiqueta ""? 0:03:20.163,0:03:23.095 No funciona. ¿Por qué no funciona? 0:03:23.095,0:03:26.861 Porque la página web evalúa la etiqueta "" 0:03:26.861,0:03:29.203 antes de que vea la etiqueta "". 0:03:29.203,0:03:34.808 Y dice: "Oh-oh, no he visto todavía el 'document.body', 0:03:34.808,0:03:38.494 ¡Y estás tratando de manipularlo! Eso no puede pasar". 0:03:38.494,0:03:43.762 Es por eso que debemos poner la etiqueta "" al final de nuestra página. 0:03:43.762,0:03:46.861 Así la página web va a ver la etiqueta "" primero, 0:03:46.861,0:03:51.219 va a ver todo lo que contiene, y luego empezaremos a hacer cosas con eso. 0:03:51.219,0:03:54.809 Queremos asegurarnos primero de que la página web exista. 0:03:54.809,0:03:56.672 Y eso es diferente que con CSS: 0:03:56.672,0:03:59.576 Queremos poner nuestra etiqueta "" al principio, 0:03:59.576,0:04:02.530 porque al analizador de CSS le parece bien aplicar estilos 0:04:02.530,0:04:04.435 a cosas que todavía no existen. 0:04:04.435,0:04:07.036 Y aplica el estilo una vez que existen. 0:04:07.036,0:04:09.909 Pero eso no está bien para el DOM de JavaScript. (DOM: Document Object Model, Modelo de Objetos para representar Documentos) 0:04:09.909,0:04:12.973 Así que asegúrate de que esté aquí abajo. 0:04:12.973,0:04:16.357 Trata de añadir la etiqueta "" en tu siguiente desafío, 0:04:16.357,0:04:18.916 asegurándote de que la pongas hasta abajo, 0:04:18.916,0:04:24.735 y luego prometo que explicaré más sobre esta línea que está aquí.