Adicionando JavaScript à sua página HTML

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>
    
    <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>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script><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>
    
    <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>
    
    <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.