1
00:00:01,680 --> 00:00:06,440
De volta com a página web sobre cães,
estou muito determinada a usar JavaScript
2
00:00:06,440 --> 00:00:11,888
e a api do DOM para transformá-la em uma
página web especializada em gatos.
3
00:00:11,888 --> 00:00:17,464
Existe um problema que estive ignorando
até agora. Na verdade são dois,
4
00:00:17,464 --> 00:00:23,671
dois cachorros, ou melhor, suas imagens.
Não posso manter as imagens
5
00:00:23,671 --> 00:00:29,478
desses adoráveis cães em nossa página
sobre gatos. Preciso alterá-los.
6
00:00:29,487 --> 00:00:36,342
Vamos começar encontrando as imagens
usando o getElementsByTagName.
7
00:00:36,342 --> 00:00:47,859
var imageEls =
document.getElementsByTagName("img");
8
00:00:48,109 --> 00:00:51,268
Desde que ele retorne vários elementos,
precisamos usar um loop for
9
00:00:51,268 --> 00:00:54,725
para percorrer-los, então eu vou
configurar isso.
10
00:00:54,725 --> 00:01:04,427
var i = 0; i < imageEls.length; i++
11
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
12
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.
13
00:01:18,755 --> 00:01:23,796
Em vez disso, preciso mudar as coisas
sobre o que faz eles parecerem como cães
14
00:01:23,796 --> 00:01:27,176
a URL das imagens,
que está especificado
15
00:01:27,176 --> 00:01:30,721
com o atributo src em cada
uma das tags.
16
00:01:30,721 --> 00:01:36,461
Podemos mudar os atributos dos elementos
usando a notação de ponto. Vou te mostrar.
17
00:01:36,461 --> 00:01:43,179
Primeiro vamos acessar o elemento atual
com os colchetes, e então dizemos ponto
18
00:01:43,179 --> 00:01:50,653
e vamos colocar o nome do atributo HTML
como o nome da propriedade JavaScript =src
19
00:01:50,653 --> 00:01:54,841
e em seguida, vou configurar com um novo
valor; e eu vou colocar numa string vazia.
20
00:01:54,841 --> 00:01:57,298
Observe que as imagens ficaram em branco,
21
00:01:57,298 --> 00:02:01,672
uma vez que uma string vazia não aponta
a qualquer imagem.
22
00:02:01,672 --> 00:02:07,664
Para descobrir o que esta nova URL
deve ser, vou colar o URL antigo aqui
23
00:02:07,664 --> 00:02:13,022
e mudar o nome do arquivo
para gato, porque eu sei
24
00:02:13,022 --> 00:02:16,842
que essa é a URL da imagem do gato
na Khan Academy.
25
00:02:18,022 --> 00:02:23,054
Os cães agora são gatos, e a nossa
gatificação está praticamente completa.
26
00:02:23,404 --> 00:02:30,897
Você vê alguma coisa que ainda tem a ver
com os cães? É muito sutil, mas
27
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
28
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.
29
00:02:41,448 --> 00:02:47,347
Quero enviar os gatos para seu lugar.
Como devo achar esse link em JavaScript?
30
00:02:47,347 --> 00:02:51,828
Eu poderia dar a este link um ID
e usar getElementById.
31
00:02:51,828 --> 00:02:57,096
Ou eu poderia usar getElementsByTagName
e mudar todos os links na página.
32
00:02:57,096 --> 00:03:00,194
Ou eu poderia ser super chique,
e encontrar apenas links que levam
33
00:03:00,194 --> 00:03:06,657
levam a páginas sobre cães,
usando um seletor consulta CSS.
34
00:03:06,657 --> 00:03:11,822
Deixe-me mostrar a consulta CSS que quero
fazer aqui na primeira tag < style >.
35
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.
36
00:03:15,946 --> 00:03:19,325
Primeiro vou digitar "a", porque estou
apenas procurando por links.
37
00:03:19,325 --> 00:03:26,041
Então eu coloco [href =" Dog"].
38
00:03:26,041 --> 00:03:31,950
Portanto, ele diz ao CSS para corresponder
com qualquer link que tenha "Dog" nele.
39
00:03:31,950 --> 00:03:38,166
E então vamos definir a cor para roxo.
E selecionar-lo.
40
00:03:38,166 --> 00:03:43,566
Então, isso é muito arrumado, e este é um
seletor de atributo, e há um monte de
41
00:03:43,566 --> 00:03:49,467
formas de usar seletores de atributo para
realmente ir fundo em seu documento.
42
00:03:49,467 --> 00:03:58,041
Para descobrir em JavaScript, podemos usar
document.querySelectorAll, e colocar
43
00:03:58,041 --> 00:04:07,992
var linkEls = document.querySelectorAll,
e então podemos apenas ir e colar no
44
00:04:07,992 --> 00:04:12,893
seletor que nós fizemos, embora temos que
ter certeza de que não esquecemos
45
00:04:12,893 --> 00:04:16,454
nossas aspas duplas. Aí vamos nós.
46
00:04:19,454 --> 00:04:22,685
Então, agora parece que uma boa sequência.
47
00:04:22,705 --> 00:04:27,548
E agora preciso percorrer estes, então
mais uma vez só fazemos o nosso loop for
48
00:04:27,568 --> 00:04:34,645
deve ser ficando realmente usado para
fazer estes para loops e para cada um,
49
00:04:34,645 --> 00:04:41,642
eu quero mudar o link para a página
sobre gatos na Wikipédia.
50
00:04:41,642 --> 00:04:45,501
Então, eu vou colocar linkEls[i].href
51
00:04:45,501 --> 00:04:50,681
porque esse é o nome do atributo que
estamos mudando e, em seguida, é igual,
52
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,
53
00:05:00,113 --> 00:05:04,295
porque eu tenho certeza que
é o URL da página.
54
00:05:05,745 --> 00:05:08,872
A gatificação mundial está completa.
55
00:05:09,407 --> 00:05:13,287
Mas você ainda não aprendeu tudo sobre
como manipular páginas web com JavaScript,
56
00:05:13,423 --> 00:05:15,313
então fique por perto.
57
00:05:15,748 --> 00:05:31,000
[Legendado por Fernando dos Reis]
[Revisado por Paulo Trentin]