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