OK, vamos voltar.
Então eu acho que é hora de você dar um pouco disso por conta própria.
Então eu tenho um exercício rápido.
Tudo o que você precisa fazer é criar uma nova idade ou arquivar um novo arquivo javascript e adicionar um único botão à idade
em meu arquivo.
É isso aí.
E então, quando eu clicar nesse botão, tudo o que você precisa fazer é mudar a cor de fundo do corpo
de branco para roxo.
Como fazes isso.
Vou deixá-lo para você.
Há algumas maneiras diferentes de que você poderia fazê-lo, dado as coisas diferentes sobre as quais
falamos até agora, mas você precisa executar algum código quando você clica no botão e esse código deve
mudar a cor de fundo entre duas cores, seja roxo e Branco ou você escolhe algumas cores melhores.
Totalmente para você.
Então, o vídeo Pasic agora.
Dê uma chance por conta própria.
Isso é realmente importante que você faça isso e depois volte quando estiver pronto e
nós vamos resolver uma solução em conjunto.
ESTÁ BEM.
Então, vamos falar sobre como podemos fazer isso funcionar.
Primeiramente, primeiro precisamos de um arquivo feminino antigo que eu tenho aqui mesmo para adicionar no meu HMO.
Vamos chamar essa opção de cores e tudo o que precisamos é de um único botão e vamos simplesmente
clicar em mim assim.
que apenas adicionamos uma tag de script aqui e no nosso javascript, mas não é uma ótima prática.
Agora precisamos do nosso arquivo javascript e podemos facilmente fazer algo em
Então, apenas para que você tenha o hábito certo e faça um novo arquivo, vamos chamá-lo para alternar.
J. S. no mesmo diretório e dentro, como eu sempre gosto
de fazer, vou adicionar um alerta apenas para garantir que eles estejam conectados OK e então precisamos
ir e vincular a esse script e isso precisa ser fonte igual a ponto alternativo Jay Sim, apenas Curtiu isso.
Então, vamos em frente e abra este arquivo no navegador e veja o que recebemos.
A primeira coisa que vou apontar aqui.
Observe que recebemos o alerta que diz que as coisas estão conectadas, mas o botão ainda não está na página.
Então, na verdade, não vemos o botão até me livrar do alerta.
E isso é realmente importante e queremos consertar isso.
O que isso nos diz é que nosso código aqui está sendo executado primeiro antes que o botão esteja na página
e o código que vamos escrever vai confiar no fato de o botão estar na página.
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
página no momento em que é executado.
Então, temos algumas maneiras de corrigir isso.
nosso script até o fim do corpo para que possamos saber com certeza que este botão foi carregado.
O mais simples por enquanto é apenas para mover
Nós aprenderemos sobre outra maneira de fazer isso quando chegarmos à consulta Jay, mas isso funciona perfeitamente bem
por enquanto.
Então, se atualizarmos agora, você verá os botões já existentes.
E então, recebemos o alerta que diz, conecte-o.
Então, vamos falar sobre a lógica.
Vamos para o nosso jorro J. S. e selecione o botão.
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.
E então queremos adicionar o nosso ouvinte de eventos, então o botão que adiciona o ouvinte do evento
clique e depois nossa função que executará a função de retorno de chamada assim.
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
certa e que esta função está sendo executada.
Quando fazemos clique, então atualize Vamos clicar e clicamos.
Então é ótimo.
As coisas estão conectadas corretamente, agora tudo o que precisamos fazer é mudar a cor do fundo do corpo.
Então, eu começaria apenas fazendo o corpo de despejo de documentos e simplesmente configurá-lo para ser roxo.
Então, documentar o estilo do corpo, esse fundo é igual ao roxo e você verá que eu usei o corpo do ponto do documento.
Poderíamos também documentar esse seletor de consultas e dar o nome da etiqueta do corpo ou algo parecido com o documento
diked obter elementos por nome do nome do corpo zero, mas é muito mais fácil simplesmente usar o corpo do ponto do documento.
É apenas um atalho incorporado no documento.
Então eu faço que eu mude para roxo e nós devemos ser bons para ir aqui.
Se eu clicar, obteremos um corpo púrpura, mas é claro que parte desse problema foi alternar de um lado para o outro.
Então, quando eu clicar aqui, volta para o branco e depois clico novamente e volta para o roxo e
ele continua mudando entre os dois.
Então, o que precisamos fazer é adicionar alguma lógica e nossa lógica vai se parecer com
algo assim se o White puder ficar mais pálido, faça isso com algo assim.
Então, o jeito que eu vou lidar com isso, eu vou criar um valor booleano
chamado Purple Savar é roxo e vai começar como falso, porque quando eu atualizar a página não é roxo tão roxo
é falso.
E então, o que precisamos fazer é dentro do nosso javascript, vamos verificar se é roxo.
Então, se é roxo, então iremos querer tornar a cor de fundo
branca assim.
E a
mudança deve ser branca e, caso contrário, faremos a mesma coisa, exceto que vamos torná-la corada.
A única questão, é claro, é que o roxo agora é sempre falso.
Nós vamos querer mudar isso.
Então, se é roxo se é um documento roxo acima do estilo do corpo, mas o fundo é igual ao branco e, então,
nós dizemos que o roxo agora é chamado de falso, porque nós apenas mudamos para o branco e então, quando dissemos que
ele é roxo, nós dirijamos que é O roxo é igual a verdadeiro.
E isso precisa ser um valor booleano, é claro, não a string true ou a string false.
Então, o que fizemos aqui é criar nosso próprio rastreador alvo pequeno.
Este booleano é roxo O início é falso.
A primeira vez é roxa.
Isso não acontece.
Então, vamos para o outro, mudamos o plano de fundo para ser roxo e, em seguida, é roxo agora é verdade.
Então, a próxima vez que o usuário clicar, é roxo que agora é verdade.
Então, se mudarmos o plano de fundo para ser branco e, em seguida, é roxo é definido como falso e continuamos alternando de
um lado para o outro.
Então, atualize o conselho de verificador, certifique-se de que não temos erros.
E agora vamos tentar clicar em roxo branco, roxo e branco.
Portanto, há um pequeno fator re que podemos fazer, o que não temos que definir é roxo para ser
falso e é roxo para ser verdade dentro da afirmação if.
Nós temos uma maneira mais curta de fazer isso apenas por escrito.
O roxo não é igual ao roxo.
Então, isso só vai mudá-lo entre verdadeiro e falso ou falso e verdadeiro simplesmente negá-lo.
Então esse é um bom atalho.
Você pode ver aqui agora, é Heigl e é um pouco mais curto, mas há uma maneira ainda mais
curta de fazer escritório, o que, espero, tenha pensado em alguns de nós quando aprendemos sobre a lista de aulas.
Havia um método chamado toggle.
Então, se definimos um CSA como uma classe e vamos seguir em frente e fazer isso em vez do meu
estilo, eu só vou fazer uma marca de estilo por agora e adicionar uma classe chamada Dot.
E vamos chamá-lo de roxo ou simplesmente roxo.
Esse é um nome de classe e nós vamos apenas dizer que o fundo é roxo e isso é tudo o que precisamos fazer o
que vamos fazer é alternar essa classe dentro e fora do corpo.
Então volte aqui e eu vou apenas copiar isso por enquanto e contado e tudo o que precisamos fazer é quando
você clica no botão e eles comentam isso ou se livram disso, se livrar disso também.
Tudo isso que queremos fazer é documentar o corpo.
Alternância sem classe.
E então o nome da aula que acabamos de fazer foi chamado de roxo.
Então lembre-se do que isso fará se o corpo não tiver a classe chamada roxo, irá adicioná-lo.
Mas ele verifica se já tem o nome da classe roxo.
Isso o removerá.
Portanto, não precisamos acompanhar se é roxo ou branco.
Atualmente, se a classe for aplicada ou, se não for, não precisamos disso é Boullion roxo.
Isso é basicamente tudo embrulhado em vez de alternar sem classe.
Então eu atualizo.
Eu clico e você pode ver que parece ser o mesmo.
Mas se inspecionamos e olhamos para o corpo.
Aqui vamos nós.
A classe de observação é igual ao roxo.
E então eu clico e agora não temos mais roxos clássicos.
Ele vai embora.
Esse é o corpo do documento.
A lista de classe alterna o que realmente é realmente útil.
É muito mais curto do que essa lógica aqui.
Tudo bem, então essa é a minha solução.