[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.17,0:00:06.44,Default,,0000,0000,0000,,Estoy de vuelta con mi página web sobre perros, y estoy determinada a usar JavaScript
Dialogue: 0,0:00:06.44,0:00:11.89,Default,,0000,0000,0000,,y la API de DOM para cambiar esta página a una que sea completamente sobre gatos.
Dialogue: 0,0:00:11.89,0:00:17.46,Default,,0000,0000,0000,,Y hay un gran problema que había ignorado. \NBueno, en realidad hay un problema llamado
Dialogue: 0,0:00:17.46,0:00:23.67,Default,,0000,0000,0000,,perro, bueno de hecho hay dos perros: las imágenes.\NNo puedo tener imágenes
Dialogue: 0,0:00:23.67,0:00:29.48,Default,,0000,0000,0000,,de estos perros adorables en mi página de gatos adorables. Y necesito cambiarlas.
Dialogue: 0,0:00:29.49,0:00:36.34,Default,,0000,0000,0000,,Así que voy a empezar por encontrar esas imágenes usando "getElementsByTagName".
Dialogue: 0,0:00:36.34,0:00:47.87,Default,,0000,0000,0000,,'var imageEls = document.getElementsByTagName("img");'
Dialogue: 0,0:00:47.87,0:00:50.67,Default,,0000,0000,0000,,Ahora, como eso me regresa múltiples elementos,
Dialogue: 0,0:00:50.67,0:00:54.72,Default,,0000,0000,0000,,necesito usar un ciclo "for" para acceder a sus elementos, así que voy a empezar.
Dialogue: 0,0:00:54.72,0:01:04.43,Default,,0000,0000,0000,,"var i=0; i
Dialogue: 0,0:01:04.43,0:01:11.46,Default,,0000,0000,0000,,Ok. ¿Pero qué voy a poner dentro de este ciclo "for"?\NNo puedo cambiar elementos tipo imagen con
Dialogue: 0,0:01:11.46,0:01:18.76,Default,,0000,0000,0000,,"innerHTML" porque las etiquetas de imagen no tienen "innerHTML". Son etiquetas que se cierran solas.
Dialogue: 0,0:01:18.76,0:01:23.80,Default,,0000,0000,0000,,En su lugar, necesito cambiar lo que hace que haya perros en la imagen,
Dialogue: 0,0:01:23.80,0:01:27.18,Default,,0000,0000,0000,,la URL de las fotografías, lo que está especificado
Dialogue: 0,0:01:27.18,0:01:30.72,Default,,0000,0000,0000,,en el atributo "src" en cada una de las etiquetas.
Dialogue: 0,0:01:30.72,0:01:36.46,Default,,0000,0000,0000,,Podemos cambiar los atributos de los elementos usando notación de punto. Déjenme mostrarles cómo.
Dialogue: 0,0:01:36.46,0:01:43.18,Default,,0000,0000,0000,,En primer lugar, accedemos al elemento actual con notación de corchetes, y luego escribimos punto,
Dialogue: 0,0:01:43.18,0:01:50.65,Default,,0000,0000,0000,,y ponemos el nombre del atributo de HTML como el nombre de la propiedad de JavaScript, "src", igual...
Dialogue: 0,0:01:50.65,0:01:54.84,Default,,0000,0000,0000,,y luego le asignamos un nuevo valor; y puedo poner una cadena de caracteres vacía.
Dialogue: 0,0:01:54.84,0:01:57.30,Default,,0000,0000,0000,,Fíjense que las imágenes desaparecieron,
Dialogue: 0,0:01:57.30,0:02:01.67,Default,,0000,0000,0000,,porque una cadena de caracteres vacía no apunta a ninguna imagen.
Dialogue: 0,0:02:01.67,0:02:07.66,Default,,0000,0000,0000,,Para descubrir cuál debería ser esta nueva URL, voy a pegar la URL anterior aquí,
Dialogue: 0,0:02:07.66,0:02:13.02,Default,,0000,0000,0000,,y cambiar el nombre del archivo por "cat", porque yo sé
Dialogue: 0,0:02:13.02,0:02:16.84,Default,,0000,0000,0000,,que ésa es la URL de la imagen de un gato en Khan Academy.
Dialogue: 0,0:02:16.84,0:02:23.40,Default,,0000,0000,0000,,¡Sí! Los perros ahora son gatos, y nuestra "gatificación" está casi completa.
Dialogue: 0,0:02:23.40,0:02:30.90,Default,,0000,0000,0000,,¿Ves algo más que todavía tiene que ver con perros?\NEs muy sutil pero,
Dialogue: 0,0:02:30.90,0:02:36.83,Default,,0000,0000,0000,,queda una cosa, el enlace a Wikipedia. \NEl enlace se va a la página de perros,
Dialogue: 0,0:02:36.83,0:02:41.45,Default,,0000,0000,0000,,y si el usuario sigue el enlace, va a descubrir mi trampa.
Dialogue: 0,0:02:41.45,0:02:47.35,Default,,0000,0000,0000,,Así que quiero mandarlo a la página de gatos. \N¿Cómo encuentro ese enlace en JavaScript?
Dialogue: 0,0:02:47.35,0:02:51.83,Default,,0000,0000,0000,,Podría asignarle a este enlace un "Id" y usar "getElementById".
Dialogue: 0,0:02:51.83,0:02:57.10,Default,,0000,0000,0000,,O podría usar "getElementsByTagName" y cambiar todos los enlaces en la página.
Dialogue: 0,0:02:57.10,0:02:59.41,Default,,0000,0000,0000,,O podría hacer algo fantástico y
Dialogue: 0,0:02:59.41,0:03:06.66,Default,,0000,0000,0000,,encontrar sólo los enlaces que lleven a páginas sobre perros, usando un selector de consulta de CSS.
Dialogue: 0,0:03:06.66,0:03:11.82,Default,,0000,0000,0000,,Déjame mostrarte la consulta de CSS que quiero hacer primero aquí en la etiqueta "".
Dialogue: 0,0:03:11.82,0:03:15.95,Default,,0000,0000,0000,,Entonces, esta consulta de CSS va a encontrar todos los enlaces que tengan algo que ver con perros.
Dialogue: 0,0:03:15.95,0:03:19.32,Default,,0000,0000,0000,,Primero voy a teclear "a", porque estoy buscando enlaces.
Dialogue: 0,0:03:19.32,0:03:26.04,Default,,0000,0000,0000,,Luego voy a escribir: '[href*="Dog"]'.
Dialogue: 0,0:03:26.04,0:03:31.95,Default,,0000,0000,0000,,Así que esto le dice a CSS que encuentre cualquier enlace que contenga "Dogs".
Dialogue: 0,0:03:31.95,0:03:38.17,Default,,0000,0000,0000,,Y luego le vamos a asignar el color morado.\N¡Tan tan!, lo seleccionó.
Dialogue: 0,0:03:38.17,0:03:43.57,Default,,0000,0000,0000,,Esto está muy bien, éste es un selector de atributos, y hay muchas
Dialogue: 0,0:03:43.57,0:03:49.47,Default,,0000,0000,0000,,maneras ordenadas de usar selectores de atributos para ir a lo más profundo en tu documento.
Dialogue: 0,0:03:49.47,0:03:58.04,Default,,0000,0000,0000,,Así que ahora para encontrar eso en JavaScript, podemos usar "document.querySelectorAll", y escribimos:
Dialogue: 0,0:03:58.04,0:04:07.99,Default,,0000,0000,0000,,"var linkEls = document.querySelectorAll", y luego podemos pegar simplemente
Dialogue: 0,0:04:07.99,0:04:12.58,Default,,0000,0000,0000,,el selector que acabamos de hacer, aunque tenemos que asegurarnos
Dialogue: 0,0:04:12.58,0:04:22.70,Default,,0000,0000,0000,,de que tenemos comillas dobles. Aquí están. Así que ahora esto se ve como una cadena de caracteres correcta.
Dialogue: 0,0:04:22.70,0:04:27.56,Default,,0000,0000,0000,,Y ahora necesito hacer las iteraciones, así que una vez más hacemos un ciclo "for",
Dialogue: 0,0:04:27.56,0:04:34.64,Default,,0000,0000,0000,,deberíamos estar muy familiarizados con este ciclo "for", y para cada elemento
Dialogue: 0,0:04:34.64,0:04:41.64,Default,,0000,0000,0000,,quiero cambiar el enlace a la página web de gatos en Wikipedia.
Dialogue: 0,0:04:41.64,0:04:45.50,Default,,0000,0000,0000,,Así que voy a escribir "linkEls[i].href"
Dialogue: 0,0:04:45.50,0:04:50.68,Default,,0000,0000,0000,,porque ese es el nombre del atributo que estamos cambiando, luego escribo igual a...
Dialogue: 0,0:04:50.68,0:05:00.11,Default,,0000,0000,0000,,y luego voy a encontrar esta URL y la pego aquí abajo y sólo le cambio aquí a "Cat",
Dialogue: 0,0:05:00.11,0:05:04.30,Default,,0000,0000,0000,,porque estoy segura de que ésta es la URL de esa página.
Dialogue: 0,0:05:04.30,0:05:10.53,Default,,0000,0000,0000,,¡Tan tan! La "gatificación" del mundo está completada.\NPero tú no has terminado
Dialogue: 0,0:05:10.53,0:05:16.21,Default,,0000,0000,0000,,de aprender cómo manipular páginas web con JavaScript, así que continúa por aquí.