1
00:00:00,380 --> 00:00:02,130
OK, vamos voltar.

2
00:00:02,130 --> 00:00:05,070
Então eu acho que é hora de você dar um pouco disso por conta própria.

3
00:00:05,400 --> 00:00:07,310
Então eu tenho um exercício rápido.

4
00:00:07,560 --> 00:00:14,730
Tudo o que você precisa fazer é criar uma nova idade ou arquivar um novo arquivo javascript e adicionar um único botão à idade

5
00:00:14,730 --> 00:00:15,620
em meu arquivo.

6
00:00:15,630 --> 00:00:16,920
É isso aí.

7
00:00:16,920 --> 00:00:23,490
E então, quando eu clicar nesse botão, tudo o que você precisa fazer é mudar a cor de fundo do corpo

8
00:00:23,490 --> 00:00:24,780
de branco para roxo.

9
00:00:24,780 --> 00:00:25,600
Como fazes isso.

10
00:00:25,600 --> 00:00:27,190
Vou deixá-lo para você.

11
00:00:27,240 --> 00:00:31,620
Há algumas maneiras diferentes de que você poderia fazê-lo, dado as coisas diferentes sobre as quais

12
00:00:31,620 --> 00:00:36,570
falamos até agora, mas você precisa executar algum código quando você clica no botão e esse código deve

13
00:00:36,570 --> 00:00:41,280
mudar a cor de fundo entre duas cores, seja roxo e Branco ou você escolhe algumas cores melhores.

14
00:00:41,280 --> 00:00:42,220
Totalmente para você.

15
00:00:42,510 --> 00:00:44,010
Então, o vídeo Pasic agora.

16
00:00:44,190 --> 00:00:45,560
Dê uma chance por conta própria.

17
00:00:45,580 --> 00:00:50,160
Isso é realmente importante que você faça isso e depois volte quando estiver pronto e

18
00:00:50,160 --> 00:00:52,460
nós vamos resolver uma solução em conjunto.

19
00:00:54,620 --> 00:00:55,280
ESTÁ BEM.

20
00:00:55,350 --> 00:00:58,110
Então, vamos falar sobre como podemos fazer isso funcionar.

21
00:00:58,110 --> 00:01:04,870
Primeiramente, primeiro precisamos de um arquivo feminino antigo que eu tenho aqui mesmo para adicionar no meu HMO.

22
00:01:05,310 --> 00:01:14,550
Vamos chamar essa opção de cores e tudo o que precisamos é de um único botão e vamos simplesmente

23
00:01:14,550 --> 00:01:16,590
clicar em mim assim.

24
00:01:16,650 --> 00:01:22,850
que apenas adicionamos uma tag de script aqui e no nosso javascript, mas não é uma ótima prática.

25
00:01:22,860 --> 00:01:27,260
Agora precisamos do nosso arquivo javascript e podemos facilmente fazer algo em

26
00:01:27,270 --> 00:01:34,170
Então, apenas para que você tenha o hábito certo e faça um novo arquivo, vamos chamá-lo para alternar.

27
00:01:34,190 --> 00:01:42,540
J. S. no mesmo diretório e dentro, como eu sempre gosto

28
00:01:42,540 --> 00:01:47,910
de fazer, vou adicionar um alerta apenas para garantir que eles estejam conectados OK e então precisamos

29
00:01:51,130 --> 00:01:57,450
ir e vincular a esse script e isso precisa ser fonte igual a ponto alternativo Jay Sim, apenas Curtiu isso.

30
00:01:57,510 --> 00:02:02,880
Então, vamos em frente e abra este arquivo no navegador e veja o que recebemos.

31
00:02:02,880 --> 00:02:04,640
A primeira coisa que vou apontar aqui.

32
00:02:04,800 --> 00:02:10,770
Observe que recebemos o alerta que diz que as coisas estão conectadas, mas o botão ainda não está na página.

33
00:02:11,220 --> 00:02:14,710
Então, na verdade, não vemos o botão até me livrar do alerta.

34
00:02:15,030 --> 00:02:17,450
E isso é realmente importante e queremos consertar isso.

35
00:02:17,490 --> 00:02:24,210
O que isso nos diz é que nosso código aqui está sendo executado primeiro antes que o botão esteja na página

36
00:02:25,140 --> 00:02:30,060
e o código que vamos escrever vai confiar no fato de o botão estar na página.

37
00:02:30,150 --> 00:02:36,810
Não podemos adicionar um ouvinte rápido, caso contrário, o ouvinte de eventos só funcionará e adicionará eventos a itens que estão na

38
00:02:36,810 --> 00:02:39,100
página no momento em que é executado.

39
00:02:39,450 --> 00:02:41,290
Então, temos algumas maneiras de corrigir isso.

40
00:02:41,310 --> 00:02:47,040
nosso script até o fim do corpo para que possamos saber com certeza que este botão foi carregado.

41
00:02:47,040 --> 00:02:49,710
O mais simples por enquanto é apenas para mover

42
00:02:49,710 --> 00:02:55,020
Nós aprenderemos sobre outra maneira de fazer isso quando chegarmos à consulta Jay, mas isso funciona perfeitamente bem

43
00:02:55,020 --> 00:02:55,680
por enquanto.

44
00:02:55,980 --> 00:02:59,440
Então, se atualizarmos agora, você verá os botões já existentes.

45
00:02:59,610 --> 00:03:03,140
E então, recebemos o alerta que diz, conecte-o.

46
00:03:03,210 --> 00:03:05,470
Então, vamos falar sobre a lógica.

47
00:03:05,490 --> 00:03:09,460
Vamos para o nosso jorro J. S. e selecione o botão.

48
00:03:09,660 --> 00:03:19,920
Então o botão var é igual ao botão do seletor de consultas do documento e essa é apenas uma maneira de selecioná-lo, é claro.

49
00:03:20,970 --> 00:03:28,030
E então queremos adicionar o nosso ouvinte de eventos, então o botão que adiciona o ouvinte do evento

50
00:03:30,930 --> 00:03:36,650
clique e depois nossa função que executará a função de retorno de chamada assim.

51
00:03:37,290 --> 00:03:44,100
E eu sempre gosto de começar novamente com um alerta que apenas diz clicado apenas para se certificar de que estamos selecionando a coisa

52
00:03:44,100 --> 00:03:46,450
certa e que esta função está sendo executada.

53
00:03:46,470 --> 00:03:51,910
Quando fazemos clique, então atualize Vamos clicar e clicamos.

54
00:03:51,960 --> 00:03:52,860
Então é ótimo.

55
00:03:52,860 --> 00:03:59,280
As coisas estão conectadas corretamente, agora tudo o que precisamos fazer é mudar a cor do fundo do corpo.

56
00:03:59,700 --> 00:04:04,920
Então, eu começaria apenas fazendo o corpo de despejo de documentos e simplesmente configurá-lo para ser roxo.

57
00:04:05,100 --> 00:04:14,980
Então, documentar o estilo do corpo, esse fundo é igual ao roxo e você verá que eu usei o corpo do ponto do documento.

58
00:04:15,150 --> 00:04:24,830
Poderíamos também documentar esse seletor de consultas e dar o nome da etiqueta do corpo ou algo parecido com o documento

59
00:04:24,840 --> 00:04:35,510
diked obter elementos por nome do nome do corpo zero, mas é muito mais fácil simplesmente usar o corpo do ponto do documento.

60
00:04:35,670 --> 00:04:38,730
É apenas um atalho incorporado no documento.

61
00:04:38,730 --> 00:04:42,970
Então eu faço que eu mude para roxo e nós devemos ser bons para ir aqui.

62
00:04:43,110 --> 00:04:50,770
Se eu clicar, obteremos um corpo púrpura, mas é claro que parte desse problema foi alternar de um lado para o outro.

63
00:04:50,940 --> 00:04:56,310
Então, quando eu clicar aqui, volta para o branco e depois clico novamente e volta para o roxo e

64
00:04:56,310 --> 00:04:57,870
ele continua mudando entre os dois.

65
00:04:58,290 --> 00:05:06,030
Então, o que precisamos fazer é adicionar alguma lógica e nossa lógica vai se parecer com

66
00:05:09,150 --> 00:05:16,040
algo assim se o White puder ficar mais pálido, faça isso com algo assim.

67
00:05:16,350 --> 00:05:21,550
Então, o jeito que eu vou lidar com isso, eu vou criar um valor booleano

68
00:05:21,630 --> 00:05:29,130
chamado Purple Savar é roxo e vai começar como falso, porque quando eu atualizar a página não é roxo tão roxo

69
00:05:29,130 --> 00:05:29,930
é falso.

70
00:05:29,970 --> 00:05:37,950
E então, o que precisamos fazer é dentro do nosso javascript, vamos verificar se é roxo.

71
00:05:38,910 --> 00:05:45,450
Então, se é roxo, então iremos querer tornar a cor de fundo

72
00:05:49,200 --> 00:05:50,370
branca assim.

73
00:05:50,520 --> 00:05:51,630
E a

74
00:05:54,690 --> 00:06:02,020
mudança deve ser branca e, caso contrário, faremos a mesma coisa, exceto que vamos torná-la corada.

75
00:06:02,040 --> 00:06:06,930
A única questão, é claro, é que o roxo agora é sempre falso.

76
00:06:06,930 --> 00:06:08,610
Nós vamos querer mudar isso.

77
00:06:08,880 --> 00:06:16,230
Então, se é roxo se é um documento roxo acima do estilo do corpo, mas o fundo é igual ao branco e, então,

78
00:06:16,230 --> 00:06:23,190
nós dizemos que o roxo agora é chamado de falso, porque nós apenas mudamos para o branco e então, quando dissemos que

79
00:06:23,190 --> 00:06:27,610
ele é roxo, nós dirijamos que é O roxo é igual a verdadeiro.

80
00:06:27,840 --> 00:06:35,130
E isso precisa ser um valor booleano, é claro, não a string true ou a string false.

81
00:06:35,160 --> 00:06:38,280
Então, o que fizemos aqui é criar nosso próprio rastreador alvo pequeno.

82
00:06:38,280 --> 00:06:41,020
Este booleano é roxo O início é falso.

83
00:06:41,070 --> 00:06:43,590
A primeira vez é roxa.

84
00:06:43,590 --> 00:06:44,510
Isso não acontece.

85
00:06:44,610 --> 00:06:49,990
Então, vamos para o outro, mudamos o plano de fundo para ser roxo e, em seguida, é roxo agora é verdade.

86
00:06:50,190 --> 00:06:54,460
Então, a próxima vez que o usuário clicar, é roxo que agora é verdade.

87
00:06:54,480 --> 00:06:58,890
Então, se mudarmos o plano de fundo para ser branco e, em seguida, é roxo é definido como falso e continuamos alternando de

88
00:06:58,890 --> 00:06:59,930
um lado para o outro.

89
00:06:59,970 --> 00:07:03,640
Então, atualize o conselho de verificador, certifique-se de que não temos erros.

90
00:07:03,900 --> 00:07:08,910
E agora vamos tentar clicar em roxo branco, roxo e branco.

91
00:07:09,450 --> 00:07:15,030
Portanto, há um pequeno fator re que podemos fazer, o que não temos que definir é roxo para ser

92
00:07:15,090 --> 00:07:18,180
falso e é roxo para ser verdade dentro da afirmação if.

93
00:07:18,180 --> 00:07:21,110
Nós temos uma maneira mais curta de fazer isso apenas por escrito.

94
00:07:21,150 --> 00:07:25,360
O roxo não é igual ao roxo.

95
00:07:25,770 --> 00:07:31,280
Então, isso só vai mudá-lo entre verdadeiro e falso ou falso e verdadeiro simplesmente negá-lo.

96
00:07:31,440 --> 00:07:33,660
Então esse é um bom atalho.

97
00:07:34,200 --> 00:07:40,080
Você pode ver aqui agora, é Heigl e é um pouco mais curto, mas há uma maneira ainda mais

98
00:07:40,080 --> 00:07:46,000
curta de fazer escritório, o que, espero, tenha pensado em alguns de nós quando aprendemos sobre a lista de aulas.

99
00:07:46,110 --> 00:07:48,230
Havia um método chamado toggle.

100
00:07:48,240 --> 00:07:55,320
Então, se definimos um CSA como uma classe e vamos seguir em frente e fazer isso em vez do meu

101
00:07:55,320 --> 00:08:01,590
estilo, eu só vou fazer uma marca de estilo por agora e adicionar uma classe chamada Dot.

102
00:08:01,590 --> 00:08:04,650
E vamos chamá-lo de roxo ou simplesmente roxo.

103
00:08:04,650 --> 00:08:12,630
Esse é um nome de classe e nós vamos apenas dizer que o fundo é roxo e isso é tudo o que precisamos fazer o

104
00:08:12,630 --> 00:08:16,680
que vamos fazer é alternar essa classe dentro e fora do corpo.

105
00:08:16,680 --> 00:08:25,140
Então volte aqui e eu vou apenas copiar isso por enquanto e contado e tudo o que precisamos fazer é quando

106
00:08:25,140 --> 00:08:31,720
você clica no botão e eles comentam isso ou se livram disso, se livrar disso também.

107
00:08:31,740 --> 00:08:37,820
Tudo isso que queremos fazer é documentar o corpo.

108
00:08:38,230 --> 00:08:41,900
Alternância sem classe.

109
00:08:42,210 --> 00:08:46,390
E então o nome da aula que acabamos de fazer foi chamado de roxo.

110
00:08:46,470 --> 00:08:53,000
Então lembre-se do que isso fará se o corpo não tiver a classe chamada roxo, irá adicioná-lo.

111
00:08:53,400 --> 00:08:56,510
Mas ele verifica se já tem o nome da classe roxo.

112
00:08:56,580 --> 00:08:57,660
Isso o removerá.

113
00:08:57,660 --> 00:09:00,630
Portanto, não precisamos acompanhar se é roxo ou branco.

114
00:09:00,630 --> 00:09:05,850
Atualmente, se a classe for aplicada ou, se não for, não precisamos disso é Boullion roxo.

115
00:09:06,270 --> 00:09:09,660
Isso é basicamente tudo embrulhado em vez de alternar sem classe.

116
00:09:09,930 --> 00:09:11,390
Então eu atualizo.

117
00:09:12,000 --> 00:09:15,980
Eu clico e você pode ver que parece ser o mesmo.

118
00:09:16,110 --> 00:09:19,890
Mas se inspecionamos e olhamos para o corpo.

119
00:09:19,890 --> 00:09:20,670
Aqui vamos nós.

120
00:09:20,790 --> 00:09:22,930
A classe de observação é igual ao roxo.

121
00:09:22,980 --> 00:09:26,310
E então eu clico e agora não temos mais roxos clássicos.

122
00:09:26,310 --> 00:09:27,570
Ele vai embora.

123
00:09:27,990 --> 00:09:29,830
Esse é o corpo do documento.

124
00:09:29,910 --> 00:09:32,760
A lista de classe alterna o que realmente é realmente útil.

125
00:09:32,760 --> 00:09:35,490
É muito mais curto do que essa lógica aqui.

126
00:09:35,490 --> 00:09:37,030
Tudo bem, então essa é a minha solução.