JavaScript e HTML: Guia Definitivo para Web Interativa

Por

HTML, CSS e JavaScript são os pilares fundamentais no desenvolvimento front-end. O HTML atua como uma linguagem de marcação, enquanto o CSS define o estilo visual das páginas.

JavaScript, por sua vez, é uma linguagem de programação orientada a objetos, primordialmente utilizada para criar interatividade no lado do cliente em aplicações web e móveis. Sua natureza dinâmica e de código aberto a consagraram como uma das linguagens de programação mais populares, devido à sua flexibilidade e facilidade de aprendizado.

Com HTML5 e CSS3, é possível construir websites estáticos. Contudo, para enriquecer esses sites com elementos interativos, é necessário o uso de uma linguagem de programação que os navegadores compreendam, como o JavaScript.

Este artigo tem como objetivo esclarecer a importância da combinação de JavaScript com HTML, explorando as diversas abordagens para integrar o código JavaScript ao HTML, além de apresentar as melhores práticas para otimizar essa união.

A Importância Crucial do JavaScript no HTML

  • Interatividade Aprimorada: A interatividade se manifesta na resposta em tempo real a ações e entradas do usuário, sem a necessidade de recarregar a página. Um exemplo prático é um contador que incrementa a cada clique ou uma mensagem de confirmação de envio de comentários.
  • Validação no Lado do Cliente: O JavaScript se mostra útil na captura de dados corretos em formulários, validando entradas de usuários em páginas de cadastro, por exemplo, verificando o formato do e-mail, tamanho da senha e combinação de caracteres.
  • Manipulação do DOM: Graças ao Document Object Model (DOM), o JavaScript permite a modificação dinâmica do conteúdo de uma página web. Com essa tecnologia, o conteúdo se atualiza automaticamente conforme as ações do usuário, sem a necessidade de recarregar a página.
  • Compatibilidade entre Navegadores: O JavaScript possui compatibilidade com todos os navegadores modernos, garantindo que páginas desenvolvidas com HTML, CSS e JavaScript funcionem corretamente em diversos ambientes de navegação.

Requisitos Essenciais

  • Conhecimentos Básicos em HTML: Familiaridade com tags HTML, criação de botões e formulários.
  • Conhecimentos Básicos em CSS: Compreensão de conceitos como ID, classes e seletores de elementos CSS.
  • Editor de Código: Utilização de um editor como VS Code ou Atom, ou até mesmo um compilador JavaScript online.

Métodos para Integrar JavaScript ao HTML

Existem três métodos principais para adicionar código JavaScript ao HTML. Vamos explorar cada um deles e suas aplicações ideais.

#1. Inclusão de Código entre as Tags <script> e </script>

Essa abordagem permite incluir códigos JavaScript e HTML no mesmo arquivo (arquivo HTML). Para começar, vamos criar uma pasta de projeto:

mkdir javascript-html-playground
  cd javascript-html-playground

Crie dois arquivos: index.html e estilo.css.

Adicione o seguinte código ao arquivo HTML:

<html>
    <head>
      <meta charset="utf-8" />
      <title>Exemplo de Formulário</title>
      <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
    </head>
    <body>
      <div class="form-container">
        <form>
          <label for="name">Nome:</label>
          <input type="text" id="name" />
          <br />
          <label for="email">Email:</label>
          <input type="email" id="email" />
          <br />
          <label for="message">Mensagem:</label>
          <textarea
            id="message"
            name="message"
            rows="5"
            cols="30"
            required
          ></textarea>
          <br />
          <input type="submit" value="Enviar" />
        </form>
      </div>
    </body>
  </html>

E adicione este código ao seu arquivo CSS:

.form-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    input[type="text"],
    input[type="email"],
    textarea {
      display: block;
      margin-bottom: 10px;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 8px;
    }
    input[type="submit"] {
      background-color: #4CAF50;
      color: white;
      padding: 5px 10px;
      border: none;
      border-radius: 2.5px;
      font-size: 8px;
      cursor: pointer;
    }
    input[type="submit"]:hover {
      background-color: #3e8e41;
    }

Ao renderizar a página web, você terá um formulário simples.

Agora, vamos adicionar um código JavaScript para exibir uma mensagem ao clicar no botão “Enviar”. O código HTML refatorado com JavaScript será:

<html>
    <head>
      <meta charset="utf-8" />
      <title>Exemplo de Formulário</title>
      <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
    </head>
    <body>
      <div class="form-container">
        <form>
          <label for="name">Nome:</label>
          <input type="text" id="name" />
          <br />
          <label for="email">Email:</label>
          <input type="email" id="email" />
          <br />
          <label for="message">Mensagem:</label>
          <textarea
            id="message"
            name="message"
            rows="5"
            cols="30"
            required
          ></textarea>
          <br />
          <input type="submit" value="Enviar" onclick="submitted()" />
        </form>
      </div>
      <script>
        function submitted() {
          alert("Enviado!");
        }
      </script>
    </body>
  </html>

Ao clicar no botão “Enviar”, uma mensagem de alerta será exibida.

Vantagens de inserir código JavaScript entre as tags <script> … </script>

  • Implementação rápida: Trabalhar no mesmo arquivo economiza tempo, pois o código JavaScript pode ser referenciado diretamente pelo código HTML.
  • Facilidade de leitura: As tags <script> separam o código HTML do JavaScript, facilitando a leitura e a depuração.

Desvantagens de inserir código JavaScript entre as tags <script> … </script>

  • Dificuldade de reutilização: Em aplicações com múltiplos formulários, seria necessário criar código JavaScript para cada um.
  • Desempenho reduzido: Grandes blocos de código no documento HTML podem tornar o carregamento mais lento.

#2. Código Inline: Utilização Direta do Código JavaScript no HTML

Em vez de envolver o código JavaScript com as tags <script>, podemos adicioná-lo diretamente ao HTML. Vamos usar o mesmo HTML e folha de estilo (style.css).

<html>
    <head>
      <meta charset="utf-8" />
      <title>Exemplo de Formulário</title>
      <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
    </head>
    <body>
      <div class="form-container">
        <form>
          <label for="name">Nome:</label>
          <input type="text" id="name" />
          <br />
          <label for="email">Email:</label>
          <input type="email" id="email" />
          <br />
          <label for="message">Mensagem:</label>
          <textarea
            id="message"
            name="message"
            rows="5"
            cols="30"
            required
          ></textarea>
          <br />
          <input type="submit" value="Enviar" onclick="alert('Envio inline')" />
        </form>
      </div>
    </body>
  </html>

Ao clicar no botão “Enviar”, uma mensagem de alerta com “Envio inline” será exibida.

Vantagens de adicionar JavaScript como código inline

  • Implementação rápida: A escrita de código HTML e JavaScript é feita sem alternar entre documentos.
  • Ideal para aplicações pequenas: O JavaScript inline é ideal para aplicações que não necessitam de muita interatividade.

Desvantagens de adicionar JavaScript como código inline

  • Código não reutilizável: É necessário criar código JavaScript para cada formulário em aplicações com múltiplos formulários.
  • Desempenho reduzido: Grandes blocos de código no documento HTML podem diminuir a velocidade de carregamento.
  • Legibilidade do código: À medida que a base de código cresce, a legibilidade se torna um problema.

#3. Criação de um Arquivo JavaScript Externo

Conforme uma aplicação se torna maior, a adição direta de código JavaScript no HTML não é recomendável. Páginas web com muito código no HTML podem ter carregamento lento.

Para lidar com isso, crie um arquivo script.js para abrigar o código JavaScript.

Importe o arquivo script.js no HTML:

<head>
      <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>
  </head>

A nova página HTML terá o seguinte código:

<html>
    <head>
      <meta charset="utf-8" />
      <title>Exemplo de Formulário</title>
      <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
      <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>
    </head>
    <body>
      <div class="form-container">
        <form>
          <label for="name">Nome:</label>
          <input type="text" id="name" />
          <br />
          <label for="email">Email:</label>
          <input type="email" id="email" />
          <br />
          <label for="message">Mensagem:</label>
          <textarea
            id="message"
            name="message"
            rows="5"
            cols="30"
            required
          ></textarea>
          <br />
          <input type="submit" value="Enviar" />
        </form>
      </div>
    </body>
  </html>

E adicione este código ao arquivo script.js:

document.addEventListener("DOMContentLoaded", function() {
      const form = document.querySelector("form");
      form.addEventListener("submit", function(event) {
        event.preventDefault();
        alert("Envio de JS externo");
      });
    });

Este JavaScript faz o seguinte:

  • Um listener de evento aguarda o evento DOMContentLoaded ser disparado.
  • Uma função de callback é executada após o evento DOMContentLoaded ser disparado.
  • O código usa querySelector para selecionar um formulário.
  • O event.preventDefault() impede o comportamento padrão do DOM (atualizar a página ou navegar para outra) quando o evento submit é acionado.
  • Uma mensagem “Envio de JS externo” é disparada ao acionar o evento submit.

Melhores Práticas para Utilização de JavaScript em HTML

  • Reduza o Tamanho dos Arquivos: Arquivos maiores levam mais tempo para carregar. A minificação remove caracteres desnecessários sem alterar o desempenho do código. Ferramentas como Yahoo YUI Compressor e HTMLMinifier podem ser úteis.
  • Organização do Código: Um código bem organizado facilita a leitura e manutenção. Extensões como Prettier podem auxiliar na organização.
  • Uso de Bibliotecas Externas: Utilize bibliotecas para tarefas específicas, evitando escrever código do zero. Evite usar várias bibliotecas que visam o mesmo objetivo.
  • Otimização do Posicionamento do JavaScript: Ao adicionar código JavaScript em um arquivo HTML, coloque-o após o código HTML. O ideal é inserir o JavaScript entre as tags <script> antes do fechamento da tag <body>. Isso garante que o conteúdo HTML seja carregado primeiro, melhorando a velocidade da página.

Conclusão

Agora você possui as ferramentas para integrar JavaScript ao HTML e criar páginas web interativas. A melhor abordagem depende da natureza da aplicação. Aplicações menores podem se beneficiar do código inline, enquanto projetos maiores necessitam de um arquivo JavaScript externo importado no arquivo HTML.

Confira as bibliotecas de tabelas JavaScript disponíveis para utilização.