Incorporar JavaScript em uma página HTML é uma prática essencial para desenvolvedores web que desejam adicionar interatividade e dinamismo ao conteúdo. Nos artigos anteriores, discutimos os fundamentos do HTML e como adicionar CSS a uma Página HTML, que formam a base da estrutura e do estilo de uma página web. Agora, ao integrar o JavaScript, completamos o trio de tecnologias que possibilitam a construção de experiências interativas e dinâmicas para os nossos usuários.
Para que serve JavaScript?
O JavaScript é uma linguagem de programação, inicialmente voltada para o desenvolvimento de funcionalidades dinâmicas e interativas em páginas web. Enquanto o HTML define a estrutura e o CSS estiliza o conteúdo, o JavaScript adiciona comportamento ao site, permitindo a criação de animações, validação de formulários, interações complexas com o usuário e até mesmo o controle de elementos na página sem a necessidade de recarregamento. Isso torna a experiência do usuário mais rica e responsiva, uma vez que é possível responder rapidamente às ações do visitante, como cliques, teclas pressionadas e outras interações.
Como incorporar JavaScript no HTML
Conforme veremos a seguir, existem algumas abordagens possíveis para adicionar código JavaScript em uma página HTML. Cada uma possui características específicas que a torna mais ou menos adequada para cada cenário.
JavaScript inline em atributos HTML
A forma mais direta de adicionar JavaScript é incorporá-lo diretamente nos atributos de elementos HTML, como o “onclick”, e outros eventos. Esse método é útil para pequenas funções ou eventos específicos, mas tem limitações quando se trata de manutenção e organização do código. Por exemplo:
<button onclick="alert('Botão clicado!')">Clique-me</button>
Neste exemplo, o código JavaScript alert(‘Botão clicado!’) está diretamente associado ao evento “onclick” do botão. Sempre que o botão for clicado, uma mensagem de alerta aparecerá na tela.
Vantagens e desvantagens do JavaScript inline
- Vantagens: simples de implementar para ações específicas e pequenas;
- Desvantagens: torna o HTML desorganizado e difícil de manter em projetos maiores. Mistura lógica de programação com marcação, o que pode dificultar a manutenção.
JavaScript em uma tag script local no HTML
Usar a tag “<script>” dentro do próprio arquivo HTML permite escrever código JavaScript mais estruturado e organizado, sem misturá-lo diretamente com a marcação HTML. Esse método é útil para scripts curtos e funciona bem para páginas em que o JavaScript não será reutilizado.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>JavaScript em Tag Script</title>
<script>
function exibirMensagem() {
alert('Mensagem a partir de uma tag script!');
}
</script>
</head>
<body>
<button onclick="exibirMensagem()">Clique-me</button>
<script type="text/javascript" id="perfmatters-delayed-styles-js">!function(){const e=["keydown","mousemove","wheel","touchmove","touchstart","touchend"];function t(){document.querySelectorAll("link[data-pmdelayedstyle]").forEach(function(e){e.setAttribute("href",e.getAttribute("data-pmdelayedstyle"))}),e.forEach(function(e){window.removeEventListener(e,t,{passive:!0})})}e.forEach(function(e){window.addEventListener(e,t,{passive:!0})})}();</script><script type="text/javascript" id="perfmatters-delayed-scripts-js">const perfmattersUserInteractions=["keydown","mousemove","wheel","touchmove","touchstart","touchend"];perfmattersUserInteractions.forEach(function(event){window.addEventListener(event,pmTriggerDelayedScripts,{passive:!0})});function pmTriggerDelayedScripts(){pmLoadDelayedScripts();perfmattersUserInteractions.forEach(function(event){window.removeEventListener(event, pmTriggerDelayedScripts,{passive:!0});});}function pmLoadDelayedScripts(){document.querySelectorAll("script[data-pmdelayedscript]").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("data-pmdelayedscript"));});}</script></body>
</html>
Aqui, a função “exibirMensagem()” está definida dentro de uma tag “<script>” que está dentro do <head>. Quando o botão é clicado, o evento “onclick” chama essa função, exibindo o alerta. Neste exemplo, temos uma abordagem mista, uma vez que utilizamos o evento “onclick” diretamente na tag <button>. Porém, também é possível fazer todo o trabalho dentro da tag <script>, sem “misturar” HTML com JavaScript:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>JavaScript em Tag Script</title>
<script>
function exibirMensagem() {
alert('Mensagem a partir de uma tag script!');
}
document.getElementById('btnAlerta')
.addEventListener('click', exibirMensagem);
</script>
</head>
<body>
<button id="btnAlerta">Clique-me</button>
<script type="text/javascript" id="perfmatters-delayed-styles-js">!function(){const e=["keydown","mousemove","wheel","touchmove","touchstart","touchend"];function t(){document.querySelectorAll("link[data-pmdelayedstyle]").forEach(function(e){e.setAttribute("href",e.getAttribute("data-pmdelayedstyle"))}),e.forEach(function(e){window.removeEventListener(e,t,{passive:!0})})}e.forEach(function(e){window.addEventListener(e,t,{passive:!0})})}();</script><script type="text/javascript" id="perfmatters-delayed-scripts-js">const perfmattersUserInteractions=["keydown","mousemove","wheel","touchmove","touchstart","touchend"];perfmattersUserInteractions.forEach(function(event){window.addEventListener(event,pmTriggerDelayedScripts,{passive:!0})});function pmTriggerDelayedScripts(){pmLoadDelayedScripts();perfmattersUserInteractions.forEach(function(event){window.removeEventListener(event, pmTriggerDelayedScripts,{passive:!0});});}function pmLoadDelayedScripts(){document.querySelectorAll("script[data-pmdelayedscript]").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("data-pmdelayedscript"));});}</script></body>
</html>
No exemplo acima, atribuímos um id ao botão, para facilitar a referência a ele dentro do JavaScript. E lá na tag <script>, utilizamos o método “document.getElementById” para obter essa referência. Em seguida, com o botão referenciado, chamamos o método “addEventListener”, que atribui uma função ao evento “click” do elemento. Dessa forma, o código HTML ficou mais limpo e toda lógica de programação ficou restrita ao bloco de JavaScript.
Onde colocar a tag <script>: <head> ou <body>
- No <head>: colocar o JavaScript no <head> significa que ele será carregado antes de o conteúdo da página ser exibido. Isso pode aumentar o tempo de carregamento para o usuário, especialmente em scripts maiores, já que o navegador precisa processar o JavaScript antes de renderizar o conteúdo;
- No <body>: colocar a tag <script> no final do <body> permite que o conteúdo da página seja carregado primeiro, melhorando a experiência do usuário ao reduzir o tempo de carregamento inicial. Essa abordagem é recomendada para scripts que não precisam ser executados imediatamente.
JavaScript em arquivo Externo
Por fim, em projetos maiores ou em que o JavaScript é reutilizado, o uso de um arquivo JavaScript externo é a prática mais recomendada. Isso mantém o código organizado, facilita a manutenção e permite que o arquivo seja armazenado em cache pelo navegador, acelerando o carregamento das próximas visitas.
Para exemplificar, vamos criar um arquivo chamado “script.js” na pasta do nosso projeto e adicionar uma função.
Organização dos arquivos:
Código JavaScript que deve ser armazenado no arquivo “script.js”:
function exibirMensagem() {
alert('Mensagem a partir de uma tag script!');
}
document.getElementById('btnAlerta').addEventListener('click', exibirMensagem);
Agora vamos incluir o arquivo externo na página HTML usando a tag <script src=”script.js”></script>:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>JavaScript com Arquivo Externo</title>
<script src="script.js" defer></script>
</head>
<body>
<button id="btnAlerta">Clique-me</button>
<script type="text/javascript" id="perfmatters-delayed-styles-js">!function(){const e=["keydown","mousemove","wheel","touchmove","touchstart","touchend"];function t(){document.querySelectorAll("link[data-pmdelayedstyle]").forEach(function(e){e.setAttribute("href",e.getAttribute("data-pmdelayedstyle"))}),e.forEach(function(e){window.removeEventListener(e,t,{passive:!0})})}e.forEach(function(e){window.addEventListener(e,t,{passive:!0})})}();</script><script type="text/javascript" id="perfmatters-delayed-scripts-js">const perfmattersUserInteractions=["keydown","mousemove","wheel","touchmove","touchstart","touchend"];perfmattersUserInteractions.forEach(function(event){window.addEventListener(event,pmTriggerDelayedScripts,{passive:!0})});function pmTriggerDelayedScripts(){pmLoadDelayedScripts();perfmattersUserInteractions.forEach(function(event){window.removeEventListener(event, pmTriggerDelayedScripts,{passive:!0});});}function pmLoadDelayedScripts(){document.querySelectorAll("script[data-pmdelayedscript]").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("data-pmdelayedscript"));});}</script></body>
</html>
O atributo “defer”, ou em português “adiar”, é adicionado à tag <script> para indicar que o navegador deve carregar o script de forma assíncrona e executá-lo apenas após o carregamento completo do HTML, melhorando o desempenho.
Vantagens e desvantagens do JavaScript externo
- Vantagens: Código mais organizado, fácil de manter e reutilizável em múltiplas páginas. Pode ser armazenado em cache, aumentando a velocidade de carregamento nas visitas subsequentes;
- Desvantagens: Requer o gerenciamento dos arquivos externos e a definição correta dos caminhos no HTML.
Conclusão
Escolher como e onde adicionar JavaScript ao HTML depende das necessidades do projeto e do impacto na performance. Para scripts simples e específicos, o uso inline pode ser suficiente, mas para projetos maiores, o ideal é manter o JavaScript em arquivos externos e carregar esses arquivos de forma que não atrasem o carregamento da página. Compreender essas diferenças permite que desenvolvedores escolham as melhores práticas para garantir uma experiência de usuário eficiente e fluida.