[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:00.74,0:00:06.81,Default,,0000,0000,0000,,Una página web básica, como ésta, está hecha con etiquetas HTML, como todas éstas. Dialogue: 0,0:00:06.81,0:00:12.18,Default,,0000,0000,0000,,Ahora, cuando queremos estilizar una página web, ¿cómo introducimos CSS? Dialogue: 0,0:00:12.18,0:00:14.40,Default,,0000,0000,0000,,Añadimos una etiqueta "". Dialogue: 0,0:00:14.40,0:00:17.35,Default,,0000,0000,0000,,Y el navegador sabe cuando hay una etiqueta "" Dialogue: 0,0:00:17.35,0:00:20.20,Default,,0000,0000,0000,,y debe usar la máquina de CSS para procesar esa etiqueta. Dialogue: 0,0:00:20.20,0:00:23.38,Default,,0000,0000,0000,,Generalmente ponemos la etiqueta "" dentro de "", Dialogue: 0,0:00:23.38,0:00:27.35,Default,,0000,0000,0000,,porque queremos asegurarnos de que el navegador procese los estilos Dialogue: 0,0:00:27.35,0:00:30.96,Default,,0000,0000,0000,,antes de ejecutar las etiquetas HTML. Dialogue: 0,0:00:30.96,0:00:34.94,Default,,0000,0000,0000,,De otra manera, si ponemos "" aquí abajo, Dialogue: 0,0:00:34.94,0:00:40.28,Default,,0000,0000,0000,,podríamos tener un "FOUC: flash of unstyled content" (un destello de contenido sin estilo), Dialogue: 0,0:00:40.28,0:00:44.73,Default,,0000,0000,0000,,y la gente vería nuestra página web expuesta, ¡sería grotesco! Dialogue: 0,0:00:44.73,0:00:48.48,Default,,0000,0000,0000,,Vamos a regresarla a su lugar. Dialogue: 0,0:00:48.48,0:00:51.73,Default,,0000,0000,0000,,Ok, ahora esta página web tiene estilo. Dialogue: 0,0:00:51.73,0:00:57.95,Default,,0000,0000,0000,,¿Cómo ponemos JavaScript en una página web cuando queremos añadir interactividad? Dialogue: 0,0:00:57.95,0:01:01.26,Default,,0000,0000,0000,,Para eso, añadimos una etiqueta "". Dialogue: 0,0:01:01.26,0:01:04.38,Default,,0000,0000,0000,,Y el mejor lugar para poner una etiqueta "" Dialogue: 0,0:01:04.38,0:01:10.52,Default,,0000,0000,0000,,en realidad es hasta abajo de la página, justo antes de la etiqueta "". Dialogue: 0,0:01:10.52,0:01:15.15,Default,,0000,0000,0000,,Ya la puse allí y explicaré en un momento porque se pone allí. Dialogue: 0,0:01:15.15,0:01:19.72,Default,,0000,0000,0000,,Ahora, ¿qué puedo poner dentro de la etiqueta ""? Dialogue: 0,0:01:19.72,0:01:25.09,Default,,0000,0000,0000,,Mmm, podemos escribir cualquier sentencia válida de JavaScript, como "var four = 2 + 2;". Dialogue: 0,0:01:25.09,0:01:30.39,Default,,0000,0000,0000,,Pero eso no es muy emocionante, porque no pasa nada en nuestra página web. Dialogue: 0,0:01:30.39,0:01:33.15,Default,,0000,0000,0000,,Y si estás en Khan Academy, probablemente ya sabes Dialogue: 0,0:01:33.15,0:01:35.53,Default,,0000,0000,0000,,que cuatro es igual a dos más dos. Dialogue: 0,0:01:35.53,0:01:39.07,Default,,0000,0000,0000,,Así que algo que puedo hacer para verificar que funciona, Dialogue: 0,0:01:39.07,0:01:42.09,Default,,0000,0000,0000,,es escribir esta línea de código aquí. Dialogue: 0,0:01:42.09,0:01:45.35,Default,,0000,0000,0000,,Ok, no ves nada, ¿cierto? Dialogue: 0,0:01:45.35,0:01:48.93,Default,,0000,0000,0000,,Y probablemente nunca antes habías visto esta función. Dialogue: 0,0:01:48.93,0:01:53.13,Default,,0000,0000,0000,,Esta función "console.log" es una función especial que podemos usar Dialogue: 0,0:01:53.13,0:01:56.47,Default,,0000,0000,0000,,en muchos ambientes de JavaScript, incluyendo navegadores. Dialogue: 0,0:01:56.47,0:02:00.31,Default,,0000,0000,0000,,Y va a escribir cosas a la consola de JavaScript. Dialogue: 0,0:02:00.31,0:02:03.66,Default,,0000,0000,0000,,Puedes encontrar esa consola en tu navegador, Dialogue: 0,0:02:03.66,0:02:10.51,Default,,0000,0000,0000,,si presionas "Command-Option-I" o "Control-Option-I", Dialogue: 0,0:02:10.51,0:02:14.24,Default,,0000,0000,0000,,o botón derecho en cualquier parte de la página y seleccionar "Inspeccionar elemento". Dialogue: 0,0:02:14.24,0:02:19.01,Default,,0000,0000,0000,,Ahora pausa esta guía paso a paso y trata de abrir la consola, Dialogue: 0,0:02:19.01,0:02:21.71,Default,,0000,0000,0000,,para ver ese mensaje. Dialogue: 0,0:02:21.71,0:02:23.94,Default,,0000,0000,0000,,Entonces, ¿lo viste? ¡Genial! Dialogue: 0,0:02:23.94,0:02:26.66,Default,,0000,0000,0000,,Ahora puedes cerrar la consola, si quieres, Dialogue: 0,0:02:26.66,0:02:28.58,Default,,0000,0000,0000,,porque ocupa mucho espacio. Dialogue: 0,0:02:28.58,0:02:32.96,Default,,0000,0000,0000,,Y también te puede distraer ya que va a mostrarte cada error conforme voy tecleando. Dialogue: 0,0:02:32.96,0:02:35.52,Default,,0000,0000,0000,,Sin embargo, es una gran herramienta para depurar. Dialogue: 0,0:02:35.52,0:02:38.36,Default,,0000,0000,0000,,Así que definitivamente guárdala en tu caja de herramientas. Dialogue: 0,0:02:38.36,0:02:42.32,Default,,0000,0000,0000,,Ahora, déjame hacerle algo a la página con JavaScript, Dialogue: 0,0:02:42.32,0:02:47.03,Default,,0000,0000,0000,,usando una línea de código que todavía no tendrá mucho sentido. Dialogue: 0,0:02:56.67,0:02:58.60,Default,,0000,0000,0000,,¿Viste lo que pasó? Dialogue: 0,0:02:58.60,0:03:03.13,Default,,0000,0000,0000,,Nuestra página web desapareció, y fue reemplazada por nuestro mensaje pirata. Dialogue: 0,0:03:03.13,0:03:07.90,Default,,0000,0000,0000,,Veremos con más detalle cómo funciona esta línea de código. Dialogue: 0,0:03:07.90,0:03:12.22,Default,,0000,0000,0000,,Pero básicamente encuentra la etiqueta "" y reemplaza todo el contenido. Dialogue: 0,0:03:12.22,0:03:16.53,Default,,0000,0000,0000,,Ahora, ¿qué pasará si copio y pego esta etiqueta "", Dialogue: 0,0:03:16.53,0:03:20.16,Default,,0000,0000,0000,,y la pongo en "" con la etiqueta ""? Dialogue: 0,0:03:20.16,0:03:23.10,Default,,0000,0000,0000,,No funciona. ¿Por qué no funciona? Dialogue: 0,0:03:23.10,0:03:26.86,Default,,0000,0000,0000,,Porque la página web evalúa la etiqueta "" Dialogue: 0,0:03:26.86,0:03:29.20,Default,,0000,0000,0000,,antes de que vea la etiqueta "". Dialogue: 0,0:03:29.20,0:03:34.81,Default,,0000,0000,0000,,Y dice: "Oh-oh, no he visto todavía el 'document.body', Dialogue: 0,0:03:34.81,0:03:38.49,Default,,0000,0000,0000,,¡Y estás tratando de manipularlo! Eso no puede pasar". Dialogue: 0,0:03:38.49,0:03:43.76,Default,,0000,0000,0000,,Es por eso que debemos poner la etiqueta "" al final de nuestra página. Dialogue: 0,0:03:43.76,0:03:46.86,Default,,0000,0000,0000,,Así la página web va a ver la etiqueta "" primero, Dialogue: 0,0:03:46.86,0:03:51.22,Default,,0000,0000,0000,,va a ver todo lo que contiene, y luego empezaremos a hacer cosas con eso. Dialogue: 0,0:03:51.22,0:03:54.81,Default,,0000,0000,0000,,Queremos asegurarnos primero de que la página web exista. Dialogue: 0,0:03:54.81,0:03:56.67,Default,,0000,0000,0000,,Y eso es diferente que con CSS: Dialogue: 0,0:03:56.67,0:03:59.58,Default,,0000,0000,0000,,Queremos poner nuestra etiqueta "" al principio, Dialogue: 0,0:03:59.58,0:04:02.53,Default,,0000,0000,0000,,porque al analizador de CSS le parece bien aplicar estilos Dialogue: 0,0:04:02.53,0:04:04.44,Default,,0000,0000,0000,,a cosas que todavía no existen. Dialogue: 0,0:04:04.44,0:04:07.04,Default,,0000,0000,0000,,Y aplica el estilo una vez que existen. Dialogue: 0,0:04:07.04,0:04:09.91,Default,,0000,0000,0000,,Pero eso no está bien para el DOM de JavaScript. (DOM: Document Object Model, Modelo de Objetos para representar Documentos) Dialogue: 0,0:04:09.91,0:04:12.97,Default,,0000,0000,0000,,Así que asegúrate de que esté aquí abajo. Dialogue: 0,0:04:12.97,0:04:16.36,Default,,0000,0000,0000,,Trata de añadir la etiqueta "" en tu siguiente desafío, Dialogue: 0,0:04:16.36,0:04:18.92,Default,,0000,0000,0000,,asegurándote de que la pongas hasta abajo, Dialogue: 0,0:04:18.92,0:04:24.74,Default,,0000,0000,0000,,y luego prometo que explicaré más sobre esta línea que está aquí.