Como usar JavaScript em HTML para criar páginas da Web interativas

Por
Twittar
Compartilhar
Compartilhar
Pin

HTML, CSS e JavaScript são as três principais linguagens usadas no desenvolvimento front-end. HTML é uma linguagem de marcação, enquanto CSS é uma linguagem de estilo.

JavaScript é uma linguagem de programação orientada a objetos usada principalmente na criação do lado do cliente de aplicativos da Web e móveis. Essa linguagem dinâmica de código aberto tornou-se uma das linguagens de programação mais usadas devido à sua flexibilidade e facilidade de compreensão.

Com HTML5 e CSS3, você pode criar sites estáticos. No entanto, para adicionar interatividade a tal site, você deve usar uma linguagem de programação como JavaScript que os navegadores entendam.

Este artigo explicará por que você precisa usar JavaScript com HTML, as diferentes abordagens para adicionar código JavaScript a HTML e as práticas recomendadas para combinar as duas linguagens.

Por que é crucial usar JavaScript em HTML

  • Adicionar interatividade: a interatividade está respondendo às entradas/ações do usuário em tempo real sem recarregar o navegador. Por exemplo, você pode ter um contador que aumenta em um toda vez que é clicado. Outro exemplo pode ser uma resposta que informa aos usuários que seus comentários foram enviados sempre que eles clicam no botão enviar.
  • Validação do lado do cliente: você pode usar JavaScript para capturar os dados corretos nos formulários. Por exemplo, você pode usar essa linguagem de programação para validar as entradas do usuário em uma página de inscrição pelo formato de e-mail, o tamanho da senha e a combinação de caracteres a serem usados.
  • Manipulação de DOM: JavaScript oferece o Document Object Model (DOM), que facilita a alteração dinâmica do conteúdo de uma página da Web. Com essa tecnologia instalada, o conteúdo de uma página é atualizado automaticamente com base nas entradas do usuário sem recarregar a página da web.
  • Compatibilidade entre navegadores: JavaScript é compatível com todos os navegadores modernos. As páginas da Web criadas usando HTML, CSS e JavaScript funcionarão perfeitamente em diferentes navegadores.
  10 melhores recursos gratuitos para aprender Git - sistema de controle de versão

Pré-requisitos

  • Compreensão básica de HTML: você entende tags HTML básicas, pode adicionar botões e criar formulários usando HTML.
  • Compreensão básica de CSS: você entende os conceitos de CSS, como id, classe e seletores de elemento.
  • Um editor de código: você pode usar um editor de código como VS Code ou Atom. Você também pode usar um compilador JavaScript online se não quiser instalar software em seu sistema.

Como usar JavaScript em HTML

Você pode usar três abordagens principais para adicionar código JavaScript ao HTML. Exploramos cada abordagem e onde ela se adapta melhor.

#1. Incorporando código entre as tags

Essa abordagem permite que você tenha códigos JavaScript e HTML no mesmo arquivo (arquivo HTML). Podemos começar criando uma pasta de projeto onde demonstraremos como funciona. Você pode usar esses comandos para começar;

mkdir javascript-html-playground

cd javascript-html-playground

Crie dois arquivos; index.html e estilo.css

Adicione este código inicial ao arquivo HTML;

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></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">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" />

      </form>

    </div>

  </body>

</html>

Adicione este código inicial 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;

  }

Quando a página da Web for renderizada, você terá algo assim;

  Como copiar formatação no Google Docs de forma rápida e fácil

Agora podemos adicionar um código JavaScript simples que diz “enviado” quando você clica no botão enviar. O código HTML refatorado com JavaScript será;

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></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">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" onclick="submitted()" />

      </form>

    </div>

    <script>

      function submitted() {

        alert("submitted");

      }

    </script>

  </body>

</html>

Ao clicar no botão enviar, você obterá algo semelhante a isto;

Pros of embedding JavaScript code between <script> … </script> tags


  • Fast to implement: Working on the same file can save you time as you can reference your JavaScript code from HTML code from the same file. 
    • 

  • Easy to read code: The presence of <script> tags separates HTML from JavaScript codes, making it easier to read and debug. 
    • 

Cons of embedding JavaScript code between <script> … </script> tags


  • Makes it hard to reuse code: If you have several forms in your app, it means you will create JavaScript code for every form.
    • 

  • Slows performance: Big code blocks on the HTML document can slow loading speeds. 
    • 

#2. Inline Code by using JavaScript code directly inside HTML


Instead of enclosing the above JavaScript code in <script> …. </script> tags, you can add it directly to the HTML code. We will use the same HTML code and style sheet (style.css). 


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></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">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" onclick="alert('inline submit')" />

      </form>

    </div>

  </body>

</html>


Quando você clicar em enviar, aparecerá uma pequena janela em seu navegador com as palavras “submissão inline”. 


Prós de adicionar JavaScript como código embutido


    

  • Rápido de implementar: você não precisa mudar de um documento para outro para escrever código HTML e JavaScript. 
    • 

  • Perfeito para um aplicativo pequeno: Se você tem um aplicativo pequeno que não exige muita interatividade, o JavaScript embutido é a escolha perfeita. 
    • 



  Como usar um iPhone com um botão de energia quebrado
Contras de adicionar JavaScript como código embutido


    

  • O código não é reutilizável: se seu aplicativo tiver vários formulários, você criará um código JavaScript para cada formulário.
    • 

  • Retarda o desempenho: 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 continua a crescer, a legibilidade do código diminui. 
    • 



#3.  Criando um arquivo JavaScript externo


À medida que seu aplicativo cresce, você notará que adicionar código JavaScript diretamente a um arquivo HTML não é uma boa ideia.  Também é provável que você tenha páginas da Web com baixa velocidade de carregamento quando tiver muito código em seu arquivo HTML. 


Crie um novo arquivo script.js para transportar seu código JavaScript. 


Importe o arquivo script.js no arquivo 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 atualizada terá este código;


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></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">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" />

      </form>

    </div>

  </body>

</html>


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("external JS sheet submit");

    });

  });


Este JavaScript faz o seguinte;


    

  • Temos um ouvinte de eventos que aguarda o disparo do evento DOMContentLoaded. 
    • 

  • Uma função de retorno de chamada é executada após o evento DOMContentLoaded ser disparado.
    • 

  • O código usa querySelector para escolher um formulário.
    • 

  • Usamos o event.preventDefault() para evitar que o DOM escolha o comportamento padrão (atualizar a página ou navegar para uma nova página) quando o evento submit é acionado. 
    • 

  • Uma mensagem “envio de planilha JS externa” é acionada assim que o evento de envio é acionado. 
    • 





JavaScript em HTML: práticas recomendadas


    

  • Reduza os tamanhos dos arquivos: quanto maior o tamanho do arquivo, mais tempo leva para carregar no navegador.  Minificar remove todos os caracteres indesejados no código-fonte sem alterar seu significado ou desempenho.  Você pode usar ferramentas como Yahoo YUI Compressor e HTMLMinifier para criar uma base de código compacta. 
    • 

  • Mantenha seu código organizado: isso facilitará a leitura e a manutenção.  Você pode usar extensões como Prettier para organizar seu código. 
    • 

  • Use bibliotecas externas: se uma biblioteca pode executar uma determinada tarefa para seu aplicativo, não há necessidade de escrever o código do zero.  No entanto, evite usar várias bibliotecas que atingem os mesmos objetivos no mesmo projeto. 
    • 

  • Otimize o posicionamento do JavaScript: se você pretende adicionar código JavaScript ao seu arquivo HTML, verifique se ele vem depois do código HTML.  Coloque o JavaScript entre as tags