WEBVTT
00:00:01.680 --> 00:00:06.440
De volta com a página web sobre cães,
estou muito determinada a usar JavaScript
00:00:06.440 --> 00:00:11.888
e a api do DOM para transformá-la em uma
página web especializada em gatos.
00:00:11.888 --> 00:00:17.464
Existe um problema que estive ignorando
até agora. Na verdade são dois,
00:00:17.464 --> 00:00:23.671
dois cachorros, ou melhor, suas imagens.
Não posso manter as imagens
00:00:23.671 --> 00:00:29.478
desses adoráveis cães em nossa página
sobre gatos. Preciso alterá-los.
00:00:29.487 --> 00:00:36.342
Vamos começar encontrando as imagens
usando o getElementsByTagName.
00:00:36.342 --> 00:00:47.859
var imageEls =
document.getElementsByTagName("img");
00:00:48.109 --> 00:00:51.268
Desde que ele retorne vários elementos,
precisamos usar um loop for
00:00:51.268 --> 00:00:54.725
para percorrer-los, então eu vou
configurar isso.
00:00:54.725 --> 00:01:04.427
var i = 0; i < imageEls.length; i++
00:01:05.097 --> 00:01:11.456
Mas o que eu coloquei dentro do loop for?
Não posso mudar os elementos de imagem com
00:01:11.456 --> 00:01:18.755
innerHTML porque as tags de imagem não tem
isso. Eles são as tags de auto fechamento.
00:01:18.755 --> 00:01:23.796
Em vez disso, preciso mudar as coisas
sobre o que faz eles parecerem como cães
00:01:23.796 --> 00:01:27.176
a URL das imagens,
que está especificado
00:01:27.176 --> 00:01:30.721
com o atributo src em cada
uma das tags.
00:01:30.721 --> 00:01:36.461
Podemos mudar os atributos dos elementos
usando a notação de ponto. Vou te mostrar.
00:01:36.461 --> 00:01:43.179
Primeiro vamos acessar o elemento atual
com os colchetes, e então dizemos ponto
00:01:43.179 --> 00:01:50.653
e vamos colocar o nome do atributo HTML
como o nome da propriedade JavaScript =src
00:01:50.653 --> 00:01:54.841
e em seguida, vou configurar com um novo
valor; e eu vou colocar numa string vazia.
00:01:54.841 --> 00:01:57.298
Observe que as imagens ficaram em branco,
00:01:57.298 --> 00:02:01.672
uma vez que uma string vazia não aponta
a qualquer imagem.
00:02:01.672 --> 00:02:07.664
Para descobrir o que esta nova URL
deve ser, vou colar o URL antigo aqui
00:02:07.664 --> 00:02:13.022
e mudar o nome do arquivo
para gato, porque eu sei
00:02:13.022 --> 00:02:16.842
que essa é a URL da imagem do gato
na Khan Academy.
00:02:18.022 --> 00:02:23.054
Os cães agora são gatos, e a nossa
gatificação está praticamente completa.
00:02:23.404 --> 00:02:30.897
Você vê alguma coisa que ainda tem a ver
com os cães? É muito sutil, mas
00:02:30.897 --> 00:02:36.827
há uma coisa que deixou o link para
a Wikipédia. Ela vai para a página de cães
00:02:36.827 --> 00:02:41.448
e se o usuário acompanhar o link,
eles vão me pegar no meu truque maldoso.
00:02:41.448 --> 00:02:47.347
Quero enviar os gatos para seu lugar.
Como devo achar esse link em JavaScript?
00:02:47.347 --> 00:02:51.828
Eu poderia dar a este link um ID
e usar getElementById.
00:02:51.828 --> 00:02:57.096
Ou eu poderia usar getElementsByTagName
e mudar todos os links na página.
00:02:57.096 --> 00:03:00.194
Ou eu poderia ser super chique,
e encontrar apenas links que levam
00:03:00.194 --> 00:03:06.657
levam a páginas sobre cães,
usando um seletor consulta CSS.
00:03:06.657 --> 00:03:11.822
Deixe-me mostrar a consulta CSS que quero
fazer aqui na primeira tag < style >.
00:03:11.822 --> 00:03:15.946
Portanto, esta consulta CSS vai encontrar
todos os links que têm a ver com cães.
00:03:15.946 --> 00:03:19.325
Primeiro vou digitar "a", porque estou
apenas procurando por links.
00:03:19.325 --> 00:03:26.041
Então eu coloco [href =" Dog"].
00:03:26.041 --> 00:03:31.950
Portanto, ele diz ao CSS para corresponder
com qualquer link que tenha "Dog" nele.
00:03:31.950 --> 00:03:38.166
E então vamos definir a cor para roxo.
E selecionar-lo.
00:03:38.166 --> 00:03:43.566
Então, isso é muito arrumado, e este é um
seletor de atributo, e há um monte de
00:03:43.566 --> 00:03:49.467
formas de usar seletores de atributo para
realmente ir fundo em seu documento.
00:03:49.467 --> 00:03:58.041
Para descobrir em JavaScript, podemos usar
document.querySelectorAll, e colocar
00:03:58.041 --> 00:04:07.992
var linkEls = document.querySelectorAll,
e então podemos apenas ir e colar no
00:04:07.992 --> 00:04:12.893
seletor que nós fizemos, embora temos que
ter certeza de que não esquecemos
00:04:12.893 --> 00:04:16.454
nossas aspas duplas. Aí vamos nós.
00:04:19.454 --> 00:04:22.685
Então, agora parece que uma boa sequência.
00:04:22.705 --> 00:04:27.548
E agora preciso percorrer estes, então
mais uma vez só fazemos o nosso loop for
00:04:27.568 --> 00:04:34.645
deve ser ficando realmente usado para
fazer estes para loops e para cada um,
00:04:34.645 --> 00:04:41.642
eu quero mudar o link para a página
sobre gatos na Wikipédia.
00:04:41.642 --> 00:04:45.501
Então, eu vou colocar linkEls[i].href
00:04:45.501 --> 00:04:50.681
porque esse é o nome do atributo que
estamos mudando e, em seguida, é igual,
00:04:50.681 --> 00:05:00.113
então eu vou encontrar este URL e colá-lo
aqui em baixo e só alterá-lo para gato,
00:05:00.113 --> 00:05:04.295
porque eu tenho certeza que
é o URL da página.
00:05:05.745 --> 00:05:08.872
A gatificação mundial está completa.
00:05:09.407 --> 00:05:13.287
Mas você ainda não aprendeu tudo sobre
como manipular páginas web com JavaScript,
00:05:13.423 --> 00:05:15.313
então fique por perto.
00:05:15.748 --> 00:05:31.000
[Legendado por Fernando dos Reis]
[Revisado por Paulo Trentin]