Você pode usar a tag HTML <script> para indicar o uso de scripts em do­cu­men­tos HTML. Além da in­te­gra­ção direta de códigos Ja­vaS­cript, também é possível fazer re­fe­rên­cia a scripts externos. É possível usar atributos opcionais, como async edefer, para controlar o pro­ces­sa­mento desses scripts.

O que é <script> HTML e para que a tag é usada?

A tag HTML <script> é utilizada para in­cor­po­rar scripts client-side em páginas web. Ela inclui ins­tru­ções de código Ja­vaS­cript ou faz re­fe­rên­cia a arquivos de script externos di­re­ta­mente, com o atributo src. Desde o advento do HTML5, o Ja­vaS­cript passou a ser a linguagem padrão suportada por essa tag. Em versões an­te­ri­o­res do HTML, era ne­ces­sá­rio es­pe­ci­fi­car a linguagem do script.

Os usos mais comuns de HTML <script> ou de códigos Ja­vaS­cript incluem validação de for­mu­lá­rios, ma­ni­pu­la­ção de imagens e al­te­ra­ções dinâmicas no conteúdo de páginas.

Hos­pe­da­gem que se adapta às suas ambições
  • Fique online com 99,99% de tempo de atividade e segurança robusta
  • Aumente o de­sem­pe­nho com um clique à medida que o tráfego cresce
  • Inclui domínio gratuito, SSL, e-mail e suporte 24 horas por dia, 7 dias por semana

Sintaxe e exemplo da tag HTML <script>

A estrutura básica da tag HTML <script> é simples: ela começa com a tag de abertura <script> e termina com a tag de fe­cha­mento </script>. Veja a sintaxe básica:

<script>JavaScript ou referência ao script externo</script>
html

Para incluir um código Ja­vaS­cript di­re­ta­mente, não são ne­ces­sá­rios atributos adi­ci­o­nais. No caso de um script externo, é preciso utilizar o atributo HTML src para es­pe­ci­fi­car o arquivo. A sintaxe expandida da tag HTML <script> seria assim:

<script src="meuscript.js"></script>
html

Incluir Ja­vaS­cript di­re­ta­mente com <script> HTML

A seguir, veremos um exemplo simples que ilustra como in­cor­po­rar Ja­vaS­cript di­re­ta­mente em um documento HTML usando a tag HTML <script>. Na área <body>, adi­ci­o­na­mos um botão com o <button id> “myButton”. Depois de criar o ID, incluímos o código Ja­vaS­cript que exibe uma mensagem que diz “Você clicou no botão!” quando um usuário pressiona o botão:

<body>
    <h1>Exemplo de botão com JavaScript: Inclusão direta</h1>
    <button id="myButton">Clique aqui!</button>
    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            alert('Você clicou no botão!');
        });
    </script>
</body>
html
Dica

É melhor incluir um texto al­ter­na­tivo que será apre­sen­tado no lugar do script, caso ele não possa ser executado. Isso pode ocorrer, por exemplo, se um usuário tiver feito a de­sa­ti­va­ção do Ja­vaS­cript. Você pode usar o elemento <noscript> (tag in­tro­du­tó­ria e de fe­cha­mento) para isso.

Incluir script externo com <script> HTML

Agora, veremos como criar o botão com a mensagem acima usando um script externo. Para fazer isso, primeiro sal­va­re­mos em um novo arquivo chamado script.js o código do botão clicável que exibe a mensagem “Você clicou no botão!” quando clicado:

// script.js
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('myButton').addEventListener('click', function() {
        alert('Você clicou no botão!');
    });
});
ja­vas­cript

Em seguida, vamos integrar o script em um documento HTML que está lo­ca­li­zado no mesmo diretório do script:

<body>
    <h1>Exemplo de botão com JavaScript: Inclusão externa</h1>
    <button id="myButton">Clique aqui!</button>
    <script src="script.js"></script>
</body>
</html>
html

Quais atributos podem ser usados com <script> HTML?

A tag HTML <script> suporta diversos atributos que oferecem mais controle sobre a execução de scripts. Os prin­ci­pais são:

  • async: Faz com que scripts externos sejam baixados em paralelo com o car­re­ga­mento da página e exe­cu­ta­dos assim que estiverem dis­po­ní­veis, mesmo antes do car­re­ga­mento completo da página.
  • crossorigin: Define o modo de re­qui­si­ção HTTP CORS para o script.
  • defer: Se o atributo defer for definido, um script externo também será baixado pa­ra­le­la­mente à in­ter­pre­ta­ção do código da página. No entanto, ele só será executado assim que a página tiver sido to­tal­mente in­ter­pre­tada.
  • integrity: Para aumentar a segurança, você pode adicionar o atributo integrity ao HTML <script>. Ele garante que os na­ve­ga­do­res possam verificar o script que foi re­cu­pe­rado. Isso garante que o script não seja carregado se o código-fonte tiver sido ma­ni­pu­lado.
  • nomodule: Com nomodule, você garante que seus scripts não sejam exe­cu­ta­dos em na­ve­ga­do­res que suportam módulos ES2015.
  • referrerpolicy: Se você quiser es­pe­ci­fi­car quais in­for­ma­ções do re­fe­ren­ci­a­dor devem ser enviadas quando um script for chamado, use o atributo referrerpolicy. Os valores possíveis incluem no-referrer (nenhuma página de re­fe­rên­cia) e strict-origin (somente o domínio de origem é enviado como re­fe­rên­cia).
  • src: O atributo src es­pe­ci­fica o URL de um script externo.
  • type: Com esse atributo (agora opcional), você pode es­pe­ci­fi­car o conteúdo do elemento HTML <script>. Além do script clássico, também são possíveis módulos EC­MAS­cript (module) e mapas de im­por­ta­ção (importmap) com regras para im­por­ta­ções de módulos EC­MAS­cript.
Construa sua marca com um ótimo domínio
Registre um nome de domínio
  • SSL Wildcard grátis para mais segurança
  • Registro privado grátis para mais pri­va­ci­dade
  • Domain Connect grátis para con­fi­gu­rar DNS fácil
Ir para o menu principal