1
00:00:00,210 --> 00:00:02,150
OK, vamos voltar.

2
00:00:02,400 --> 00:00:07,620
De volta à introdução ao javascript, mencionei que uma das razões importantes para aprender javascript é

3
00:00:07,680 --> 00:00:10,520
que podemos usá-lo para tornar nossas páginas interativas.

4
00:00:10,680 --> 00:00:16,590
É como podemos executar o código quando um usuário clica em um botão ou digita algo ou atinge a tecla de seta ou o

5
00:00:16,590 --> 00:00:17,920
que quer que eles façam.

6
00:00:18,090 --> 00:00:23,310
Podemos ter algum código correspondente que seja executado em um determinado momento não apenas executado

7
00:00:23,310 --> 00:00:24,880
no início da página.

8
00:00:25,410 --> 00:00:28,290
Então, para fazer isso precisamos conversar sobre os eventos Dom.

9
00:00:28,320 --> 00:00:31,250
Então, este vídeo será uma introdução aos eventos Dom.

10
00:00:31,260 --> 00:00:36,300
Conceitualmente, o processo para configurá-los e também a sintaxe.

11
00:00:36,300 --> 00:00:38,660
Então, como mencionei, os eventos estão em toda parte.

12
00:00:38,670 --> 00:00:43,170
Pense quando você interage com a página da Web as diferentes coisas que acontecem você pode clicar em

13
00:00:43,170 --> 00:00:47,330
coisas como um botão que você pode passar por cima de um link e algo pode aparecer.

14
00:00:47,370 --> 00:00:50,320
Você pode arrastar e soltar elementos em determinadas páginas.

15
00:00:50,550 --> 00:00:55,440
Você pode querer ter o código que é executado a partir do usuário com cliques duplos ou, na verdade, esta página

16
00:00:55,440 --> 00:00:56,650
da Web tem alguns exemplos.

17
00:00:56,670 --> 00:01:03,550
Este slide dot com é um site da Web e tocando as teclas de seta para a esquerda e para a direita para mudar os slides.

18
00:01:03,690 --> 00:01:09,300
Então, algum código está sendo executado quando eu toco a tecla de seta para a esquerda ou a tecla de seta para a direita ou quando

19
00:01:09,300 --> 00:01:10,050
eu clicar aqui.

20
00:01:10,590 --> 00:01:15,780
Isso também é um evento e está fazendo algo que está executando algum código que está mudando o slide atual.

21
00:01:16,950 --> 00:01:20,930
Então o ponto é que os eventos estão em todo o lugar e eles são realmente emocionantes.

22
00:01:20,920 --> 00:01:26,070
É um dos meus tópicos favoritos para ensinar porque agora podemos fazer nossas páginas da web

23
00:01:26,070 --> 00:01:31,230
interativas, podemos levar as coisas de manipulação que aprendemos sobre a mudança de cores mudando de

24
00:01:31,230 --> 00:01:35,070
texto e então podemos realmente fazer isso quando algo em particular acontece.

25
00:01:35,070 --> 00:01:38,340
Então, isso realmente destranca o potencial de manipular o dormitório.

26
00:01:38,370 --> 00:01:43,170
É assim que vamos fazer jogos. É assim que vamos fazer valentes de formulário tic

27
00:01:43,170 --> 00:01:49,050
tac toe, vamos fazer um jogo de seleção de cores realmente legal e que tudo decorre desses eventos.

28
00:01:49,050 --> 00:01:55,890
Assim, a maneira como esses eventos funcionam é que nós realmente os anexamos a elementos específicos para que nós

29
00:01:55,890 --> 00:02:04,440
selecionemos um elemento como o primeiro botão ou o segundo H-1 ou a entrada onde um tipo é igual ao texto e, em seguida,

30
00:02:04,440 --> 00:02:07,590
anexamos um ouvinte de evento a esse elemento selecionado.

31
00:02:07,920 --> 00:02:15,540
talvez estivéssemos ouvindo um clique em um botão, podemos ouvir um evento de deslocamento em um H1, podemos ouvir um evento de imprensa

32
00:02:15,540 --> 00:02:20,880
de tecla em uma entrada de texto e falaremos mais sobre as diferenças entre esses eventos.

33
00:02:20,880 --> 00:02:21,990
Então, como exemplo,

34
00:02:21,990 --> 00:02:26,490
Há tantos tipos diferentes de eventos em javascript, mas o que é importante é que

35
00:02:26,490 --> 00:02:30,170
temos que ter um evento que está sendo ouvido em um determinado elemento.

36
00:02:30,180 --> 00:02:34,890
Então, como antes, quando eu falava sobre selecionar e depois manipular, isso ainda se aplica.

37
00:02:34,920 --> 00:02:41,190
Precisamos selecionar algo e então a manipulação que acontece é nós, adicionando um ouvinte de

38
00:02:41,190 --> 00:02:43,740
eventos a essa coisa que selecionamos.

39
00:02:43,740 --> 00:02:48,930
Existe um método em particular que vamos usar todo o tempo, que é chamado de "add ouvidor de eventos".

40
00:02:49,650 --> 00:02:56,200
de entrada porque a senha e nós temos algo selecionado, então chamamos de adicionar ouvinte de eventos e damos dois argumentos.

41
00:02:56,200 --> 00:03:02,160
Então, no ouvinte de eventos é o que usamos uma vez que selecionamos um elemento como o primeiro botão

42
00:03:02,160 --> 00:03:03,070
ou o tipo

43
00:03:03,330 --> 00:03:06,950
O primeiro é o tipo de evento para o qual queremos ouvir.

44
00:03:07,350 --> 00:03:12,790
E o segundo argumento é o código que queremos executar quando esse evento acontece.

45
00:03:13,260 --> 00:03:14,330
Então aqui está um exemplo.

46
00:03:14,400 --> 00:03:19,590
Estou selecionando o primeiro botão em uma página na verdade, não importa onde o botão é ou como

47
00:03:19,590 --> 00:03:22,060
ele se parece ou qualquer coisa apenas qualquer botão.

48
00:03:22,350 --> 00:03:29,430
estou chamando o botão no ouvinte do evento, clique e depois o segundo argumento é uma função que vai até aqui.

49
00:03:29,430 --> 00:03:30,540
E então eu

50
00:03:30,750 --> 00:03:33,690
E este código não é executado imediatamente.

51
00:03:33,690 --> 00:03:35,910
Lembre-se disso é chamado de retorno de chamada.

52
00:03:35,910 --> 00:03:38,140
Este código não é executado imediatamente.

53
00:03:38,430 --> 00:03:42,000
É executado apenas quando este evento dispara.

54
00:03:42,000 --> 00:03:46,390
Então, uma vez que você clicar no botão, o javascript vai para trás.

55
00:03:46,440 --> 00:03:51,630
Esta função diz que é seu momento para brilhar e volte aqui pronto, vamos executá-lo.

56
00:03:51,630 --> 00:03:56,040
E então esse código é executado e nós recebemos conselhos, não acesse alguém, clique no botão.

57
00:03:56,250 --> 00:04:02,130
Portanto, esta função será executada sempre que um botão for rápido para executar com

58
00:04:02,130 --> 00:04:05,290
o botão específico que selecionamos como clicado.

59
00:04:05,910 --> 00:04:07,540
Então, aqui está outro exemplo.

60
00:04:07,830 --> 00:04:15,060
Este caso eu tenho a marca aqui um botão e um parágrafo e eu selecionei ambos com o seletor Kery e eu os salve

61
00:04:15,750 --> 00:04:21,630
ambos para variáveis ​​e então tudo o que fazemos é adicionar um ouvinte de clique, então o botão adiciona

62
00:04:21,630 --> 00:04:26,910
ouvinte de evento clique e então o O segundo argumento é essa função de retorno de chamada.

63
00:04:26,910 --> 00:04:32,610
botão é clicado é alterado o conteúdo do texto dos parágrafos para ser alguém clicar no botão e

64
00:04:32,610 --> 00:04:39,660
você pode ver quando eu clicar nesse botão que ele muda de ninguém que me clicou e que alguém clicou no botão.

65
00:04:39,660 --> 00:04:42,260
E o que vamos fazer sempre que o

66
00:04:42,930 --> 00:04:50,180
Então, agora vou fazer uma demonstração rápida usando nossa página de demonstração do Dom, vamos começar fazendo isso

67
00:04:50,180 --> 00:04:50,790
H-1 aqui.

68
00:04:50,810 --> 00:04:53,700
Altere a cor quando um usuário clica nele.

69
00:04:53,780 --> 00:04:58,310
Então, para fazer isso, precisamos começar sempre selecionando o H-1.

70
00:04:58,810 --> 00:05:00,510
Então temos um monte de opções lá.

71
00:05:00,530 --> 00:05:09,070
Eu vou apenas usar o documento do seer diferente que consulta o seletor H-1, certifique-se de que o possamos.

72
00:05:09,310 --> 00:05:10,460
Tudo bem.

73
00:05:10,460 --> 00:05:14,920
Então, basta escrever H-1 que adiciona o ouvinte de eventos.

74
00:05:15,010 --> 00:05:16,790
Lembre-se de que há dois argumentos.

75
00:05:16,940 --> 00:05:19,910
O primeiro é o evento que estamos a ouvir.

76
00:05:20,060 --> 00:05:24,050
E passaremos mais algum tempo a falar sobre os diferentes eventos, as diferentes opções.

77
00:05:24,050 --> 00:05:30,050
Por enquanto, estamos apenas clicando e o segundo é o código que queremos executar quando o usuário clicar.

78
00:05:30,310 --> 00:05:37,060
Então, funcione e comece realmente simples e apenas faça um alerta quando o usuário clicar.

79
00:05:37,160 --> 00:05:44,330
Então, vamos fazer um alerta, cada um clicou assim.

80
00:05:44,750 --> 00:05:46,990
E agora vamos entrar.

81
00:05:47,120 --> 00:05:48,700
Nada muda imediatamente.

82
00:05:49,190 --> 00:05:52,910
Mas agora, se eu clicar naquele, então vou fechar isso.

83
00:05:52,910 --> 00:05:54,570
Se eu clicar em qualquer lugar da página.

84
00:05:54,590 --> 00:05:56,400
Além do H-1, nada acontece.

85
00:05:56,620 --> 00:06:01,150
Assim que clicar no H-1, porém, ele me diz que H-1 estava correto.

86
00:06:01,430 --> 00:06:02,510
Então isso é importante.

87
00:06:02,500 --> 00:06:09,730
significa que posso ir aqui e clicar porque lembre-se se eu inspecionar isso, o H-1 vai todo o caminho pela

88
00:06:09,740 --> 00:06:10,130
tela.

89
00:06:12,980 --> 00:06:15,290
Aplica-se apenas ao H-1, mas isso

90
00:06:15,500 --> 00:06:20,720
Então, apenas algo para ter em mente que é bom para nós, neste caso, mas aparecerá ocasionalmente, onde

91
00:06:20,720 --> 00:06:25,680
as coisas se comportam um pouco diferente do que você pode querer e você precisa usá-los CSSA

92
00:06:25,700 --> 00:06:30,190
talvez para encurtar o primeiro estágio ou você mudar o seu ouvinte de qualquer maneira.

93
00:06:30,640 --> 00:06:35,130
Então, em vez de apenas alertar Vamos tentar fazer outra coisa.

94
00:06:35,330 --> 00:06:42,140
E se eu acabei de acertar na seta para cima e adicione o ouvinte de

95
00:06:42,130 --> 00:06:54,260
evento, clique e eu altero o código aqui e eu faço algo como H-1 que o estilo de fundo é igual e vamos fazer fundo laranja e laranja.

96
00:06:54,250 --> 00:07:01,870
atenção ao que acontece, a primeira coisa que acontece é que ainda diz em um alerta que H-1 foi clicado.

97
00:07:01,880 --> 00:07:06,030
Mais uma vez, nada muda imediatamente, mas quando clico em prestar

98
00:07:06,170 --> 00:07:10,360
E então, quando eu fechar isso, ele muda para ser laranja.

99
00:07:10,730 --> 00:07:14,840
Então, a moral aqui é que podemos ter mais de um ouvinte em um determinado elemento.

100
00:07:14,840 --> 00:07:22,090
Quando clicamos nesse H-1, o primeiro ouvinte que adicionamos estava escutando um clique e executou um alerta e

101
00:07:22,610 --> 00:07:28,280
depois adicionamos outro ouvinte que também escutou um clique, mas mudou a cor de

102
00:07:28,270 --> 00:07:28,890
fundo.

103
00:07:28,910 --> 00:07:31,200
Então, quando eu clicar em ambos, execute.

104
00:07:31,390 --> 00:07:37,190
laranja, é claro, você não vê isso porque já era laranja, mas você tem que confiar em mim.

105
00:07:37,320 --> 00:07:42,190
E isso sempre acontecerá por enquanto, se eu clicar novamente, recebo o alerta e mudou para

106
00:07:42,290 --> 00:07:45,000
Ele continua mudando a laranja uma e outra vez.

107
00:07:45,670 --> 00:07:48,560
OK, eu vou atualizar e me livrar de tudo isso.

108
00:07:48,590 --> 00:07:52,720
Eu também quero fazer uma demonstração rápida, adicionando um ouvinte à UL.

109
00:07:52,880 --> 00:08:03,320
Então, faça um seletor de consulta de despejo de documento UL e lembre-se que temos três aliados em vez de apenas um ul.

110
00:08:04,490 --> 00:08:08,500
Então, eu vou mostrar o que acontece quando o configuramos em um elemento pai como esse.

111
00:08:08,510 --> 00:08:11,850
Bem, e não vou usar uma variável, só vou fazer isso aqui.

112
00:08:12,130 --> 00:08:14,640
Ouvinte Adamant.

113
00:08:15,250 --> 00:08:16,140
Clique.

114
00:08:16,550 --> 00:08:17,930
Então esse é o primeiro argumento.

115
00:08:17,930 --> 00:08:20,330
O segundo é a função que

116
00:08:24,610 --> 00:08:25,560
queremos executar assim.

117
00:08:25,880 --> 00:08:27,410
E vou começar.

118
00:08:27,680 --> 00:08:35,720
Vamos apenas fazer um console que logue bem foi cliques e você sabe o que.

119
00:08:35,810 --> 00:08:37,210
Essa é uma voz passiva.

120
00:08:37,250 --> 00:08:38,050
Péssima ideia.

121
00:08:38,300 --> 00:08:39,270
Vamos fazer.

122
00:08:39,460 --> 00:08:43,550
Você clicou na UL muito melhor.

123
00:08:43,880 --> 00:08:44,520
ESTÁ BEM.

124
00:08:44,720 --> 00:08:48,430
Então, mantenhamos o console aberto e vamos clicar na UL.

125
00:08:48,980 --> 00:08:50,420
Mas como vamos clicar no óleo.

126
00:08:50,450 --> 00:08:53,090
Porque o poço tem três aliados dentro dele.

127
00:08:53,120 --> 00:08:55,290
A UL é toda essa coisa aqui.

128
00:08:55,320 --> 00:09:00,890
Então, qualquer coisa rápida não importa qual aliado eu estou em qualquer lugar do poço.

129
00:09:01,040 --> 00:09:02,820
Você pode ver o número de incrementos aqui.

130
00:09:02,930 --> 00:09:07,150
Qualquer rápido no bem, ele vai executar este log de ponto de console.

131
00:09:08,120 --> 00:09:14,290
Então, vamos atualizar mais uma vez e desta vez vamos dizer que eu quero mudar o aliado em si.

132
00:09:14,300 --> 00:09:17,540
Quando eu clico em um aliado individual, quero que algo aconteça.

133
00:09:17,960 --> 00:09:19,400
Existem algumas maneiras de fazer isso.

134
00:09:19,420 --> 00:09:25,840
E vamos começar com apenas o mais simples que está anexando um ouvinte a cada aliado como

135
00:09:25,850 --> 00:09:26,360
chefe.

136
00:09:26,360 --> 00:09:32,880
O que faremos eventualmente é anexar um ouvinte ao UL e, em seguida, dentro desse ouvinte.

137
00:09:32,990 --> 00:09:39,250
Nós vamos detectar quais mentiras especificamente dentro da UL foi clicado em tudo com um Lessner.

138
00:09:39,250 --> 00:09:44,230
Por enquanto, porém, vamos adicionar um ouvinte separado a cada mentira,

139
00:09:44,240 --> 00:09:55,570
então precisamos começar selecionando os Aliados para que nossos aliados sejam iguais ao seletor de ponto do documento, todos aliados garantem que todos os possamos.

140
00:09:55,570 --> 00:09:59,040
Tudo bem, então precisamos fazer um loop for.

141
00:09:59,210 --> 00:10:02,190
Então, para var I é igual a zero.

142
00:10:02,410 --> 00:10:04,880
Lembre-se que eu disse que estaria fazendo isso o tempo todo.

143
00:10:04,880 --> 00:10:09,670
Então, eu não sou mais do que aliados, esse comprimento eu mais mais,

144
00:10:13,730 --> 00:10:14,740
assim como isso.

145
00:10:15,050 --> 00:10:20,600
E então, dentro daqui, vamos adicionar um ouvinte a cada aliado individual.

146
00:10:20,840 --> 00:10:21,940
Então isso parece assim.

147
00:10:21,960 --> 00:10:27,350
Elyse I, de modo que nos dá o aliado

148
00:10:30,080 --> 00:10:39,220
específico e o ouvinte do evento clicar na função assim e fazer isso um pouco.

149
00:10:39,770 --> 00:10:41,920
E depois o código que queremos executar.

150
00:10:42,320 --> 00:10:49,250
Vamos mudar a cor do aliado que foi clicado e vamos apenas mudá-lo para ser roxo.

151
00:10:49,250 --> 00:10:51,250
Então, temos algumas opções diferentes.

152
00:10:51,290 --> 00:10:54,600
O que eu preciso fazer é se referir ao aliado que foi clicado.

153
00:10:54,800 --> 00:11:00,980
Então, eu poderia fazer esses aliados, embora não seja realmente uma ótima solução porque há uma

154
00:11:01,000 --> 00:11:05,320
maneira muito mais fácil de fazer o que é usar essa palavra-chave.

155
00:11:05,680 --> 00:11:12,410
Então, dentro de um ouvinte, a palavra-chave refere-se ao item que foi clicado ou ao item que foi suspenso ou

156
00:11:12,410 --> 00:11:18,250
ao item em que a pressão de tecla ocorreu em qualquer lugar que o elemento que está bem

157
00:11:18,430 --> 00:11:23,100
antes do evento, independentemente do que for selecionado, é o que isso refere-se a.

158
00:11:23,140 --> 00:11:30,640
Então eu posso escrever esse estilo de ponto que a cor é igual ao roxo.

159
00:11:31,000 --> 00:11:33,140
E, na verdade, isso é algo mais óbvio.

160
00:11:33,230 --> 00:11:34,150
É uma fonte pequena.

161
00:11:34,150 --> 00:11:36,670
Então, vamos fazer o rosa assim.

162
00:11:37,040 --> 00:11:38,500
Eu bati enter.

163
00:11:38,500 --> 00:11:46,020
Nada acontece imediatamente, mas se eu clicar em um aliado, você pode ver que ele muda para ser rosa.

164
00:11:47,410 --> 00:11:53,960
E se eu continuar clicando, continue mudando para rosa. Você simplesmente não pode contar.

165
00:11:54,080 --> 00:12:00,110
Então, esse padrão aqui de selecionar um monte de coisas que os acompanham individualmente e adicionar um ouvinte

166
00:12:00,110 --> 00:12:03,670
de eventos a cada um deles é realmente muito comum.

167
00:12:03,710 --> 00:12:11,170
Nós vamos ver isso o tempo todo nos próximos projetos que fazemos.

168
00:12:11,270 --> 00:12:16,640
uma função anônima como fizemos aqui onde você escreve a função com parênteses e você não lhe dá um nome.

169
00:12:16,630 --> 00:12:20,830
A última coisa que vou mencionar aqui é que você nem sempre tem que usar

170
00:12:20,990 --> 00:12:22,330
Você não precisa fazer isso.

171
00:12:22,370 --> 00:12:25,790
Você pode declarar uma função nomeada separadamente, como fiz aqui.

172
00:12:26,090 --> 00:12:31,200
O texto de mudança de função e, em seguida, tudo o que temos a fazer é dizer botão que adiciona ouvinte de

173
00:12:31,420 --> 00:12:33,890
evento ou clique e, em seguida, damos-lhe mudar de texto.

174
00:12:34,070 --> 00:12:38,830
Note que não temos parênteses depois porque eu executaria a função imediatamente, o que não é

175
00:12:38,840 --> 00:12:39,890
o que queremos.

176
00:12:40,180 --> 00:12:46,880
este ouvinte rápido e dizendo que aqui é a função que eu quero que você execute quando o usuário clica neste botão.

177
00:12:47,170 --> 00:12:51,100
Então, estamos passando o valor dessa função, estamos passando o conteúdo basicamente para

178
00:12:51,190 --> 00:12:52,810
Mas não execute isso ainda.

179
00:12:52,820 --> 00:12:55,350
Então, estes dois funcionarão exatamente o mesmo.

180
00:12:55,370 --> 00:12:57,030
É apenas uma questão de preferência.

181
00:12:57,190 --> 00:13:00,830
Na maior parte, há algumas diferenças que podemos encontrar mais tarde.

182
00:13:00,880 --> 00:13:02,980
Eu preferiria usar isso.

183
00:13:03,230 --> 00:13:08,240
A única vez que eu não usaria uma função anônima é se eu precisasse usar esse código novamente em

184
00:13:08,240 --> 00:13:10,160
algum lugar fora do ouvinte do relógio.

185
00:13:10,150 --> 00:13:15,100
Então, se eu quisesse executá-lo individualmente ou queria executá-lo em vez de outro ouvinte rápido, em

186
00:13:15,530 --> 00:13:21,260
vez de duplicar essa função, eu lhe daria um nome e, em seguida, duplicaria apenas o nome onde

187
00:13:21,260 --> 00:13:22,600
eu uso duas vezes.

188
00:13:23,060 --> 00:13:28,660
Ok, então, depois, você terá a chance de fazer alguns exercícios rápidos usando o rápido Wisner e algumas

189
00:13:28,660 --> 00:13:30,650
das coisas que aprendemos nos últimos vídeos.