Exercício - Adicionar interatividade com JavaScript

10 minutos

JavaScript (ou ECMAScript) é uma linguagem de programação que o ajuda a adicionar interatividade às suas páginas web.

Por exemplo, você pode usar JavaScript para definir o comportamento que acontece quando um usuário seleciona um botão, como abrir uma janela pop-up. Usando JavaScript, você pode adicionar ou remover conteúdo de uma página da Web sem recarregá-lo.

Nesta unidade, você configura um arquivo JavaScript de exemplo para sua página da Web. Nele, você cria um botão para alternar entre temas claros e escuros. Em seguida, anexe o botão ao código JavaScript que executa a troca de tema real. Finalmente, você verifica o projeto concluído usando as ferramentas de desenvolvedor do seu navegador.

Link para JavaScript

Como CSS, você pode adicionar JavaScript diretamente ao arquivo HTML, mas uma prática recomendada é salvar seu JavaScript em um arquivo separado. Adicionar seu código JavaScript a um arquivo separado facilita a reutilização em várias páginas da Web. Por exemplo, você pode criar um alerta pop-up adicionando o seguinte código em qualquer lugar no corpo de suas páginas da Web:

<script>alert('Hello World')</script>

No entanto, é melhor adicionar seu código JavaScript a um arquivo separado que você pode vincular a cada arquivo que precisa de sua funcionalidade personalizada.

A marca <script> de script HTML nos permite vincular a um arquivo JavaScript externo, que é como você configura seu aplicativo Web neste exercício.

No Visual Studio Code, abra o index.html arquivo.
Encontre o elemento de fechamento </body> e coloque o cursor em uma nova linha acima dele. Digite script:src e pressione Enter. As tags de abertura e fechamento de um <script> elemento são adicionadas ao seu código.
Modifique o elemento para carregar o <script>app.js arquivo, conforme mostrado no exemplo a seguir. Certifique-se de que ele está localizado após o elemento de fechamento </ul> da lista.
```
...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...
```

Você pode colocar o <script> elemento no ou em <head> outro lugar no <body>. No entanto, colocar o <script> elemento no final da seção permite que todo o conteúdo da <body> página seja exibido na tela primeiro, antes que o script seja carregado.

Adicionar tolerância a falhas

No arquivo HTML, adicione um <noscript> elemento após a tag de fechamento </script> , que pode ser usado para mostrar uma mensagem se o JavaScript estiver desativado.
```
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
```
Adicionar o <noscript> elemento é um exemplo de tolerância a falhas ou degradação graciosa. Quando você usa o <noscript> elemento , seu código pode detetar e planejar quando um recurso não é suportado ou disponível.

Definir modo estrito

JavaScript foi projetado para ser fácil de aprender e permite que o desenvolvedor cometa certos erros. Por exemplo, o JavaScript não gera um erro quando você usa uma variável com erros ortográficos e, em vez disso, cria uma nova variável global. Quando você começa a aprender JavaScript, ter menos erros é conveniente. No entanto, isso pode levar a escrever código que é mais difícil para os navegadores otimizarem e mais difícil para você depurar.

Mude para o modo estrito para obter erros mais úteis quando cometer erros.

No Visual Studio Code, abra o app.js arquivo e digite o seguinte:
```
'use strict';
```

Adicionar um botão

Você precisa de uma maneira de permitir que seus usuários alternem entre os temas claros e escuros em sua página da Web. Neste exercício, você implementa essa funcionalidade com um elemento HTML <button> .

No arquivo HTML (index.html), adicione um <button> elemento . Coloque o botão dentro de um <div> elemento e adicione-o logo após o final da lista (</ul>).
```
...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<div>
  <button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...
```
Observe que o <button> elemento neste exemplo tem um atributo de classe que você pode usar para aplicar estilos CSS.
Salve as alterações no arquivo HTML com o atalho de teclado Control+S no Windows ou Command+S no macOS.
No arquivo CSS (main.css), adicione uma nova regra com um seletor de .btn classe para o botão HTML. Para tornar as cores do botão diferentes das cores gerais do tema claro ou escuro, defina as color propriedades e background-color nesta regra. Quando a página é exibida, essas .btn propriedades substituem body as propriedades padrão definidas na regra do arquivo CSS.
```
.btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```
Em seguida, modifique a .btn regra para adicionar alguns estilos para o tamanho, forma, aparência e posicionamento do botão. O CSS a seguir cria um botão redondo à direita do título da página.
```
.btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```

Em seguida, atualize o CSS para o tema claro e escuro. Defina algumas novas variáveis --btnBg e --btnFontColor, para especificar a cor de fundo específica do botão e a cor da fonte.

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

Salve as alterações no arquivo CSS com o atalho de teclado Control+S no Windows ou Command+S no macOS.

Adicionar um manipulador de eventos

Para fazer com que o botão faça algo ao selecioná-lo, você precisa de um manipulador de eventos em seu arquivo JavaScript. Um manipulador de eventos é uma maneira de executar uma função JavaScript quando um evento acontece na página. Para o botão, vamos adicionar um manipulador de eventos para o click evento, a função de manipulador de eventos é executada quando o click evento ocorre.

Antes de adicionar o manipulador de eventos, você precisa de uma referência ao elemento button.

No arquivo JavaScript (app.js), use document.querySelector para obter a referência do botão.
```
const switcher = document.querySelector('.btn');
```
A document.querySelector função usa seletores CSS, assim como os que você usou em seu arquivo CSS. switcher é agora uma referência ao botão na página.
Em seguida, adicione o manipulador de eventos para o click evento. No código a seguir, você adiciona um ouvinte para o click evento e define uma função de manipulador de eventos que o navegador executa quando o click evento ocorre.
```
switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});
```

No código anterior, você usou o toggle método para modificar o <body> atributo class do elemento. Este método adiciona ou remove automaticamente as light-theme classes and dark-theme . Este código aplica os estilos escuros em vez de estilos claros se você clicar e, em seguida, estilos claros em vez de escuros se você clicar novamente.

No entanto, o rótulo do botão também precisa ser atualizado para mostrar o tema correto, então você precisa adicionar uma if instrução para determinar o tema atual e atualizar o rótulo do botão.

Veja como seu código JavaScript deve parecer com o manipulador de eventos adicionado:

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }
});

É uma convenção JavaScript usar camel case para nomes de variáveis com mais de uma palavra; por exemplo, a variável className.

Mensagem da consola

Como desenvolvedor da Web, você pode criar mensagens ocultas que não são visíveis em sua página da Web, mas que você pode ler nas Ferramentas de Desenvolvedor na guia Console . Usar mensagens de console é útil para ver o resultado do seu código.

No arquivo JavaScript, adicione uma chamada após console.log a if instrução, mas dentro do ouvinte de eventos.

Depois de fazer essa alteração, seu código JavaScript completo deve ter esta aparência.

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }

    console.log('current class name: ' + className);
});

Quando você está em um arquivo JavaScript no Visual Studio Code, você pode usar o preenchimento automático para console.log inserindo log e pressionando Enter.

Você pode definir uma cadeia de caracteres de texto com aspas simples ou duplas ao redor do texto.

Abrir no navegador

Para visualizar, clique index.html com o botão direito do mouse e selecione Abrir no navegador padrão ou recarregue a mesma guia do navegador pressionando F5.
Selecione o novo botão escuro para alternar para o tema escuro.
Certifique-se de que tudo parece correto e se comporta como esperado. Se não, você deve rever as etapas anteriores para ver se você perdeu algo.

Verifique a página nas ferramentas de desenvolvedor

Abra as Ferramentas de Desenvolvimento clicando com o botão direito do mouse e selecionando Inspecionar ou usando o atalho de teclado F12. Como alternativa, use o atalho Ctrl+Shift+I no Windows ou Linux e Option+Command+I no macOS.
Selecione a guia Elementos e selecione a guia Estilos .
Selecione o <body> elemento . Na guia Estilos , observe o tema aplicado. Se o tema atual estiver escuro, os dark-theme estilos serão aplicados.

Verifique se o tema escuro está selecionado.
Selecione a guia Console para ver a console.log mensagem, current class name: dark-theme.

Usando o console, você pode obter informações interessantes do seu código JavaScript. Adicione mais mensagens de console para entender quais partes do seu código estão sendo executadas e para saber os valores atuais de outras variáveis.

Para saber mais sobre o console, confira o artigo Visão geral do console .

Feedback

Esta página foi útil?