1 00:00:00,737 --> 00:00:06,812 Una página web básica, como ésta, está hecha con etiquetas HTML, como todas éstas. 2 00:00:06,812 --> 00:00:12,180 Ahora, cuando queremos estilizar una página web, ¿cómo introducimos CSS? 3 00:00:12,180 --> 00:00:14,397 Añadimos una etiqueta "". 4 00:00:14,397 --> 00:00:17,349 Y el navegador sabe cuando hay una etiqueta "" 5 00:00:17,349 --> 00:00:20,195 y debe usar la máquina de CSS para procesar esa etiqueta. 6 00:00:20,195 --> 00:00:23,383 Generalmente ponemos la etiqueta "" dentro de "", 7 00:00:23,383 --> 00:00:27,352 porque queremos asegurarnos de que el navegador procese los estilos 8 00:00:27,352 --> 00:00:30,959 antes de ejecutar las etiquetas HTML. 9 00:00:30,959 --> 00:00:34,936 De otra manera, si ponemos "" aquí abajo, 10 00:00:34,936 --> 00:00:40,277 podríamos tener un "FOUC: flash of unstyled content" (un destello de contenido sin estilo), 11 00:00:40,277 --> 00:00:44,726 y la gente vería nuestra página web expuesta, ¡sería grotesco! 12 00:00:44,726 --> 00:00:48,484 Vamos a regresarla a su lugar. 13 00:00:48,484 --> 00:00:51,734 Ok, ahora esta página web tiene estilo. 14 00:00:51,734 --> 00:00:57,954 ¿Cómo ponemos JavaScript en una página web cuando queremos añadir interactividad? 15 00:00:57,954 --> 00:01:01,255 Para eso, añadimos una etiqueta "". 16 00:01:01,255 --> 00:01:04,385 Y el mejor lugar para poner una etiqueta "" 17 00:01:04,385 --> 00:01:10,517 en realidad es hasta abajo de la página, justo antes de la etiqueta "". 18 00:01:10,517 --> 00:01:15,150 Ya la puse allí y explicaré en un momento porque se pone allí. 19 00:01:15,150 --> 00:01:19,724 Ahora, ¿qué puedo poner dentro de la etiqueta ""? 20 00:01:19,724 --> 00:01:25,094 Mmm, podemos escribir cualquier sentencia válida de JavaScript, como "var four = 2 + 2;". 21 00:01:25,094 --> 00:01:30,386 Pero eso no es muy emocionante, porque no pasa nada en nuestra página web. 22 00:01:30,386 --> 00:01:33,152 Y si estás en Khan Academy, probablemente ya sabes 23 00:01:33,152 --> 00:01:35,526 que cuatro es igual a dos más dos. 24 00:01:35,526 --> 00:01:39,072 Así que algo que puedo hacer para verificar que funciona, 25 00:01:39,072 --> 00:01:42,092 es escribir esta línea de código aquí. 26 00:01:42,092 --> 00:01:45,350 Ok, no ves nada, ¿cierto? 27 00:01:45,350 --> 00:01:48,927 Y probablemente nunca antes habías visto esta función. 28 00:01:48,927 --> 00:01:53,130 Esta función "console.log" es una función especial que podemos usar 29 00:01:53,130 --> 00:01:56,466 en muchos ambientes de JavaScript, incluyendo navegadores. 30 00:01:56,466 --> 00:02:00,310 Y va a escribir cosas a la consola de JavaScript. 31 00:02:00,310 --> 00:02:03,661 Puedes encontrar esa consola en tu navegador, 32 00:02:03,661 --> 00:02:10,510 si presionas "Command-Option-I" o "Control-Option-I", 33 00:02:10,510 --> 00:02:14,245 o botón derecho en cualquier parte de la página y seleccionar "Inspeccionar elemento". 34 00:02:14,245 --> 00:02:19,009 Ahora pausa esta guía paso a paso y trata de abrir la consola, 35 00:02:19,009 --> 00:02:21,707 para ver ese mensaje. 36 00:02:21,707 --> 00:02:23,939 Entonces, ¿lo viste? ¡Genial! 37 00:02:23,939 --> 00:02:26,656 Ahora puedes cerrar la consola, si quieres, 38 00:02:26,656 --> 00:02:28,580 porque ocupa mucho espacio. 39 00:02:28,580 --> 00:02:32,962 Y también te puede distraer ya que va a mostrarte cada error conforme voy tecleando. 40 00:02:32,962 --> 00:02:35,515 Sin embargo, es una gran herramienta para depurar. 41 00:02:35,515 --> 00:02:38,359 Así que definitivamente guárdala en tu caja de herramientas. 42 00:02:38,359 --> 00:02:42,325 Ahora, déjame hacerle algo a la página con JavaScript, 43 00:02:42,325 --> 00:02:47,034 usando una línea de código que todavía no tendrá mucho sentido. 44 00:02:56,671 --> 00:02:58,596 ¿Viste lo que pasó? 45 00:02:58,596 --> 00:03:03,128 Nuestra página web desapareció, y fue reemplazada por nuestro mensaje pirata. 46 00:03:03,128 --> 00:03:07,895 Veremos con más detalle cómo funciona esta línea de código. 47 00:03:07,895 --> 00:03:12,219 Pero básicamente encuentra la etiqueta "" y reemplaza todo el contenido. 48 00:03:12,219 --> 00:03:16,530 Ahora, ¿qué pasará si copio y pego esta etiqueta "", 49 00:03:16,530 --> 00:03:20,163 y la pongo en "" con la etiqueta ""? 50 00:03:20,163 --> 00:03:23,095 No funciona. ¿Por qué no funciona? 51 00:03:23,095 --> 00:03:26,861 Porque la página web evalúa la etiqueta "" 52 00:03:26,861 --> 00:03:29,203 antes de que vea la etiqueta "". 53 00:03:29,203 --> 00:03:34,808 Y dice: "Oh-oh, no he visto todavía el 'document.body', 54 00:03:34,808 --> 00:03:38,494 ¡Y estás tratando de manipularlo! Eso no puede pasar". 55 00:03:38,494 --> 00:03:43,762 Es por eso que debemos poner la etiqueta "" al final de nuestra página. 56 00:03:43,762 --> 00:03:46,861 Así la página web va a ver la etiqueta "" primero, 57 00:03:46,861 --> 00:03:51,219 va a ver todo lo que contiene, y luego empezaremos a hacer cosas con eso. 58 00:03:51,219 --> 00:03:54,809 Queremos asegurarnos primero de que la página web exista. 59 00:03:54,809 --> 00:03:56,672 Y eso es diferente que con CSS: 60 00:03:56,672 --> 00:03:59,576 Queremos poner nuestra etiqueta "" al principio, 61 00:03:59,576 --> 00:04:02,530 porque al analizador de CSS le parece bien aplicar estilos 62 00:04:02,530 --> 00:04:04,435 a cosas que todavía no existen. 63 00:04:04,435 --> 00:04:07,036 Y aplica el estilo una vez que existen. 64 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) 65 00:04:09,909 --> 00:04:12,973 Así que asegúrate de que esté aquí abajo. 66 00:04:12,973 --> 00:04:16,357 Trata de añadir la etiqueta "" en tu siguiente desafío, 67 00:04:16,357 --> 00:04:18,916 asegurándote de que la pongas hasta abajo, 68 00:04:18,916 --> 00:04:24,735 y luego prometo que explicaré más sobre esta línea que está aquí.