[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.29,0:00:07.39,Default,,0000,0000,0000,,Tengo esta página web: "All about dogs" ("Todo sobre perros"), que es genial, pero en realidad,
Dialogue: 0,0:00:07.39,0:00:12.58,Default,,0000,0000,0000,,y sé que no todos estarán de acuerdo conmigo, soy una persona más afín a los gatos,
Dialogue: 0,0:00:12.58,0:00:17.18,Default,,0000,0000,0000,,y quisiera cambiar esta página web a una página "All about cats" ("Todo sobre gatos").
Dialogue: 0,0:00:17.18,0:00:23.27,Default,,0000,0000,0000,,Voy a usar JavaScript para hacer eso, en lugar de simplemente modificar el HTML,
Dialogue: 0,0:00:23.27,0:00:26.43,Default,,0000,0000,0000,,para que eventualmente, pueda cambiar esto
Dialogue: 0,0:00:26.43,0:00:32.10,Default,,0000,0000,0000,,en una extensión del navegador para cambiar cualquier página web a una sobre gatos.
Dialogue: 0,0:00:32.10,0:00:37.45,Default,,0000,0000,0000,,¿No sería emocionante que toda la Internet fuera sobre gatos?
Dialogue: 0,0:00:37.45,0:00:44.76,Default,,0000,0000,0000,,Ahora, esta página web tiene un encabezado, un párrafo y un par de imágenes.
Dialogue: 0,0:00:44.76,0:00:50.34,Default,,0000,0000,0000,,Vamos a cambiar cada parte a la vez, empezando con el encabezado,
Dialogue: 0,0:00:50.34,0:00:53.91,Default,,0000,0000,0000,,usando los dos pasos que recién aprendimos.
Dialogue: 0,0:00:53.91,0:00:59.27,Default,,0000,0000,0000,,El primer paso es encontrar el nodo del DOM que contiene el encabezado.
Dialogue: 0,0:00:59.27,0:01:06.90,Default,,0000,0000,0000,,La manera en que encontramos el nodo anteriormente fue escribiendo "document.body",
Dialogue: 0,0:01:06.90,0:01:12.49,Default,,0000,0000,0000,,pero ahora quiero ser más específica, quiero solamente este "".
Dialogue: 0,0:01:12.49,0:01:14.70,Default,,0000,0000,0000,,Bueno, este "" tiene un "Id",
Dialogue: 0,0:01:14.70,0:01:19.74,Default,,0000,0000,0000,,lo que significa que debe ser la única etiqueta que tiene ese "Id" en la página,
Dialogue: 0,0:01:19.74,0:01:24.98,Default,,0000,0000,0000,,y en realidad hay una manera muy fácil de encontrar nodos DOM que tienen "Id",
Dialogue: 0,0:01:24.98,0:01:30.34,Default,,0000,0000,0000,,un método del objeto "document" llamado "getElementById".
Dialogue: 0,0:01:30.34,0:01:33.20,Default,,0000,0000,0000,,Vamos a usarlo aquí en la etiqueta "",
Dialogue: 0,0:01:33.20,0:01:38.53,Default,,0000,0000,0000,,empezando por declarar una variable en la que lo vamos a guardar, la variable "var headingEl".
Dialogue: 0,0:01:38.53,0:01:42.30,Default,,0000,0000,0000,,Me gusta terminar los nombres de mis variables con "El" o con "Node",
Dialogue: 0,0:01:42.30,0:01:47.39,Default,,0000,0000,0000,,así puedo saber que están almacenando un elemento, que también llamamos nodo.
Dialogue: 0,0:01:47.39,0:01:52.74,Default,,0000,0000,0000,,Ahora usamos el método. Es un método ligado al objeto global "document",
Dialogue: 0,0:01:52.74,0:01:58.96,Default,,0000,0000,0000,,así que escribimos "document", luego un punto, luego "getElementById",
Dialogue: 0,0:01:58.96,0:02:04.75,Default,,0000,0000,0000,,luego un paréntesis porque es una función. No voy a encontrar nada así simplemente,
Dialogue: 0,0:02:04.75,0:02:07.73,Default,,0000,0000,0000,,porque no sabe qué "Id" estoy buscando.
Dialogue: 0,0:02:07.73,0:02:12.01,Default,,0000,0000,0000,,Dentro de los paréntesis le tengo que pasar a la función el "Id" que estoy buscando,
Dialogue: 0,0:02:12.01,0:02:21.35,Default,,0000,0000,0000,,como una cadena de caracteres entre comillas.\NAsí que escribo "heading".
Dialogue: 0,0:02:21.35,0:02:24.10,Default,,0000,0000,0000,,¿Cómo sabemos si encontramos el elemento,
Dialogue: 0,0:02:24.10,0:02:26.54,Default,,0000,0000,0000,,antes de tratar de manipularlo?
Dialogue: 0,0:02:26.54,0:02:31.77,Default,,0000,0000,0000,,Una manera es usar la función "console.log".
Dialogue: 0,0:02:31.77,0:02:36.20,Default,,0000,0000,0000,,Ahora, puedes pausar el video, y hacer que se desplieguen tus herramientas de desarrollador.
Dialogue: 0,0:02:36.20,0:02:40.90,Default,,0000,0000,0000,,Intenta con los atajos Command + option + i para Mac,
Dialogue: 0,0:02:40.90,0:02:48.03,Default,,0000,0000,0000,,o Control + Shift + i para Windows.\NAlguno de esos generalmente funciona.
Dialogue: 0,0:02:48.03,0:02:54.83,Default,,0000,0000,0000,,¿Viste el "" en tu consola? Si lo viste, eso significa que
Dialogue: 0,0:02:54.83,0:03:00.26,Default,,0000,0000,0000,,completamos el paso uno. Encontramos el elemento y lo guardamos en una variable.
Dialogue: 0,0:03:00.26,0:03:06.36,Default,,0000,0000,0000,,Para el paso dos, vamos a manipular el elemento usando la forma que conocemos,
Dialogue: 0,0:03:06.36,0:03:10.68,Default,,0000,0000,0000,,cambiando "innerHTML". Vamos a ver, eso significa que vamos a escribir
Dialogue: 0,0:03:10.68,0:03:17.63,Default,,0000,0000,0000,,"headingEL.innerHTML =", tan, tan, tan, es el momento de la verdad,
Dialogue: 0,0:03:17.63,0:03:22.72,Default,,0000,0000,0000,,"All about cats". ¡Aquí vamos!
Dialogue: 0,0:03:22.72,0:03:26.66,Default,,0000,0000,0000,,Empezamos. La "gatificación" ha comenzado.
Dialogue: 0,0:03:26.66,0:03:32.32,Default,,0000,0000,0000,,Ahora van a tratar de hacer algo como esto en el desafío.