[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.68,0:00:06.44,Default,,0000,0000,0000,,De volta com a página web sobre cães, \Nestou muito determinada a usar JavaScript
Dialogue: 0,0:00:06.44,0:00:11.89,Default,,0000,0000,0000,,e a api do DOM para transformá-la em uma \Npágina web especializada em gatos.
Dialogue: 0,0:00:11.89,0:00:17.46,Default,,0000,0000,0000,,Existe um problema que estive ignorando\Naté agora. Na verdade são dois,
Dialogue: 0,0:00:17.46,0:00:23.67,Default,,0000,0000,0000,,dois cachorros, ou melhor, suas imagens. \NNão posso manter as imagens
Dialogue: 0,0:00:23.67,0:00:29.48,Default,,0000,0000,0000,,desses adoráveis cães em nossa página \Nsobre gatos. Preciso alterá-los.
Dialogue: 0,0:00:29.49,0:00:36.34,Default,,0000,0000,0000,,Vamos começar encontrando as imagens\Nusando o {\i1}getElementsByTagName{\i0}.
Dialogue: 0,0:00:36.34,0:00:47.86,Default,,0000,0000,0000,,{\i1}var imageEls = \Ndocument.getElementsByTagName("img");{\i0}
Dialogue: 0,0:00:48.11,0:00:51.27,Default,,0000,0000,0000,,Desde que ele retorne vários elementos,\Nprecisamos usar um {\i1}loop for{\i0}
Dialogue: 0,0:00:51.27,0:00:54.72,Default,,0000,0000,0000,,para percorrer-los, então eu vou\Nconfigurar isso.
Dialogue: 0,0:00:54.72,0:01:04.43,Default,,0000,0000,0000,,{\i1}var i = 0; i < imageEls.length; i++{\i0}
Dialogue: 0,0:01:05.10,0:01:11.46,Default,,0000,0000,0000,,Mas o que eu coloquei dentro do loop for?\NNão posso mudar os elementos de imagem com
Dialogue: 0,0:01:11.46,0:01:18.76,Default,,0000,0000,0000,,{\b1}innerHTML{\b0} porque as tags de imagem não tem\Nisso. Eles são as tags de auto fechamento.
Dialogue: 0,0:01:18.76,0:01:23.80,Default,,0000,0000,0000,,Em vez disso, preciso mudar as coisas\Nsobre o que faz eles parecerem como cães
Dialogue: 0,0:01:23.80,0:01:27.18,Default,,0000,0000,0000,,a URL das imagens,\Nque está especificado
Dialogue: 0,0:01:27.18,0:01:30.72,Default,,0000,0000,0000,,com o atributo {\i1}src{\i0} em cada\Numa das tags.
Dialogue: 0,0:01:30.72,0:01:36.46,Default,,0000,0000,0000,,Podemos mudar os atributos dos elementos\Nusando a notação de ponto. Vou te mostrar.
Dialogue: 0,0:01:36.46,0:01:43.18,Default,,0000,0000,0000,,Primeiro vamos acessar o elemento atual\Ncom os colchetes, e então dizemos ponto
Dialogue: 0,0:01:43.18,0:01:50.65,Default,,0000,0000,0000,,e vamos colocar o nome do atributo HTML\Ncomo o nome da propriedade JavaScript =src
Dialogue: 0,0:01:50.65,0:01:54.84,Default,,0000,0000,0000,,e em seguida, vou configurar com um novo\Nvalor; e eu vou colocar numa string vazia.
Dialogue: 0,0:01:54.84,0:01:57.30,Default,,0000,0000,0000,,Observe que as imagens ficaram em branco,
Dialogue: 0,0:01:57.30,0:02:01.67,Default,,0000,0000,0000,,uma vez que uma string vazia não aponta\Na qualquer imagem.
Dialogue: 0,0:02:01.67,0:02:07.66,Default,,0000,0000,0000,,Para descobrir o que esta nova URL\Ndeve ser, vou colar o URL antigo aqui
Dialogue: 0,0:02:07.66,0:02:13.02,Default,,0000,0000,0000,,e mudar o nome do arquivo\Npara gato, porque eu sei
Dialogue: 0,0:02:13.02,0:02:16.84,Default,,0000,0000,0000,,que essa é a URL da imagem do gato\Nna Khan Academy.
Dialogue: 0,0:02:18.02,0:02:23.05,Default,,0000,0000,0000,,Os cães agora são gatos, e a nossa\Ngatificação está praticamente completa.
Dialogue: 0,0:02:23.40,0:02:30.90,Default,,0000,0000,0000,,Você vê alguma coisa que ainda tem a ver\Ncom os cães? É muito sutil, mas
Dialogue: 0,0:02:30.90,0:02:36.83,Default,,0000,0000,0000,,há uma coisa que deixou o link para\Na Wikipédia. Ela vai para a página de cães
Dialogue: 0,0:02:36.83,0:02:41.45,Default,,0000,0000,0000,,e se o usuário acompanhar o link,\Neles vão me pegar no meu truque maldoso.
Dialogue: 0,0:02:41.45,0:02:47.35,Default,,0000,0000,0000,,Quero enviar os gatos para seu lugar.\NComo devo achar esse link em JavaScript?
Dialogue: 0,0:02:47.35,0:02:51.83,Default,,0000,0000,0000,,Eu poderia dar a este link um ID \Ne usar {\i1}{\b1}getElementById{\b0}{\i0}.
Dialogue: 0,0:02:51.83,0:02:57.10,Default,,0000,0000,0000,,Ou eu poderia usar {\i1}{\b1}getElementsByTagName{\b0}{\i0}\Ne mudar todos os links na página.
Dialogue: 0,0:02:57.10,0:03:00.19,Default,,0000,0000,0000,,Ou eu poderia ser super chique,\Ne encontrar apenas links que levam
Dialogue: 0,0:03:00.19,0:03:06.66,Default,,0000,0000,0000,,levam a páginas sobre cães, \Nusando um seletor consulta CSS.
Dialogue: 0,0:03:06.66,0:03:11.82,Default,,0000,0000,0000,,Deixe-me mostrar a consulta CSS que quero\Nfazer aqui na primeira tag {\i1}< style >{\i0}.
Dialogue: 0,0:03:11.82,0:03:15.95,Default,,0000,0000,0000,,Portanto, esta consulta CSS vai encontrar\Ntodos os links que têm a ver com cães.
Dialogue: 0,0:03:15.95,0:03:19.32,Default,,0000,0000,0000,,Primeiro vou digitar "{\i1}a{\i0}", porque estou\Napenas procurando por links.
Dialogue: 0,0:03:19.32,0:03:26.04,Default,,0000,0000,0000,,Então eu coloco {\i1}[href =" Dog"]{\i0}.
Dialogue: 0,0:03:26.04,0:03:31.95,Default,,0000,0000,0000,,Portanto, ele diz ao CSS para corresponder\Ncom qualquer link que tenha "Dog" nele.
Dialogue: 0,0:03:31.95,0:03:38.17,Default,,0000,0000,0000,,E então vamos definir a cor para roxo.\NE selecionar-lo.
Dialogue: 0,0:03:38.17,0:03:43.57,Default,,0000,0000,0000,,Então, isso é muito arrumado, e este é um\Nseletor de atributo, e há um monte de
Dialogue: 0,0:03:43.57,0:03:49.47,Default,,0000,0000,0000,,formas de usar seletores de atributo para\Nrealmente ir fundo em seu documento.
Dialogue: 0,0:03:49.47,0:03:58.04,Default,,0000,0000,0000,,Para descobrir em JavaScript, podemos usar\N{\i1}document.querySelectorAll{\i0}, e colocar
Dialogue: 0,0:03:58.04,0:04:07.99,Default,,0000,0000,0000,,{\i1}var linkEls = document.querySelectorAll{\i0},\Ne então podemos apenas ir e colar no
Dialogue: 0,0:04:07.99,0:04:12.89,Default,,0000,0000,0000,,seletor que nós fizemos, embora temos que\Nter certeza de que não esquecemos
Dialogue: 0,0:04:12.89,0:04:16.45,Default,,0000,0000,0000,,nossas aspas duplas. Aí vamos nós.
Dialogue: 0,0:04:19.45,0:04:22.68,Default,,0000,0000,0000,,Então, agora parece que uma boa sequência.
Dialogue: 0,0:04:22.70,0:04:27.55,Default,,0000,0000,0000,,E agora preciso percorrer estes, então\Nmais uma vez só fazemos o nosso loop for
Dialogue: 0,0:04:27.57,0:04:34.64,Default,,0000,0000,0000,,deve ser ficando realmente usado para\Nfazer estes para loops e para cada um,
Dialogue: 0,0:04:34.64,0:04:41.64,Default,,0000,0000,0000,,eu quero mudar o link para a página\Nsobre gatos na Wikipédia.
Dialogue: 0,0:04:41.64,0:04:45.50,Default,,0000,0000,0000,,Então, eu vou colocar {\i1}linkEls[i].href{\i0}
Dialogue: 0,0:04:45.50,0:04:50.68,Default,,0000,0000,0000,,porque esse é o nome do atributo que\Nestamos mudando e, em seguida, é igual,
Dialogue: 0,0:04:50.68,0:05:00.11,Default,,0000,0000,0000,,então eu vou encontrar este URL e colá-lo\Naqui em baixo e só alterá-lo para gato,
Dialogue: 0,0:05:00.11,0:05:04.30,Default,,0000,0000,0000,,porque eu tenho certeza que\Né o URL da página.
Dialogue: 0,0:05:05.74,0:05:08.87,Default,,0000,0000,0000,,A gatificação mundial está completa.
Dialogue: 0,0:05:09.41,0:05:13.29,Default,,0000,0000,0000,,Mas você ainda não aprendeu tudo sobre\Ncomo manipular páginas web com JavaScript,
Dialogue: 0,0:05:13.42,0:05:15.31,Default,,0000,0000,0000,,então fique por perto.
Dialogue: 0,0:05:15.75,0:05:31.00,Default,,0000,0000,0000,,[Legendado por Fernando dos Reis]\N[Revisado por Paulo Trentin]