Você pode usar a tag HTML <script> para indicar o uso de scripts em documentos HTML. Além da integração direta de códigos JavaScript, também é possível fazer referência a scripts externos. É possível usar atributos opcionais, como async edefer, para controlar o processamento desses scripts.

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

A tag HTML <script> é utilizada para incorporar scripts client-side em páginas web. Ela inclui instruções de código JavaScript ou faz referência a arquivos de script externos diretamente, com o atributo src. Desde o advento do HTML5, o JavaScript passou a ser a linguagem padrão suportada por essa tag. Em versões anteriores do HTML, era necessário especificar a linguagem do script.

Os usos mais comuns de HTML <script> ou de códigos JavaScript incluem validação de formulários, manipulação de imagens e alterações dinâmicas no conteúdo de páginas.

Hospedagem que se adapta às suas ambições
  • Fique online com 99,99% de tempo de atividade e segurança robusta
  • Aumente o desempenho 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 fechamento </script>. Veja a sintaxe básica:

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

Para incluir um código JavaScript diretamente, não são necessários atributos adicionais. No caso de um script externo, é preciso utilizar o atributo HTML src para especificar o arquivo. A sintaxe expandida da tag HTML <script> seria assim:

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

Incluir JavaScript diretamente com <script> HTML

A seguir, veremos um exemplo simples que ilustra como incorporar JavaScript diretamente em um documento HTML usando a tag HTML <script>. Na área <body>, adicionamos um botão com o <button id> “myButton”. Depois de criar o ID, incluímos o código JavaScript 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 alternativo que será apresentado no lugar do script, caso ele não possa ser executado. Isso pode ocorrer, por exemplo, se um usuário tiver feito a desativação do JavaScript. Você pode usar o elemento <noscript> (tag introdutória e de fechamento) 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 salvaremos 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!');
    });
});
javascript

Em seguida, vamos integrar o script em um documento HTML que está localizado 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 principais são:

  • async: Faz com que scripts externos sejam baixados em paralelo com o carregamento da página e executados assim que estiverem disponíveis, mesmo antes do carregamento completo da página.
  • crossorigin: Define o modo de requisição HTTP CORS para o script.
  • defer: Se o atributo defer for definido, um script externo também será baixado paralelamente à interpretação do código da página. No entanto, ele só será executado assim que a página tiver sido totalmente interpretada.
  • integrity: Para aumentar a segurança, você pode adicionar o atributo integrity ao HTML <script>. Ele garante que os navegadores possam verificar o script que foi recuperado. Isso garante que o script não seja carregado se o código-fonte tiver sido manipulado.
  • nomodule: Com nomodule, você garante que seus scripts não sejam executados em navegadores que suportam módulos ES2015.
  • referrerpolicy: Se você quiser especificar quais informações do referenciador devem ser enviadas quando um script for chamado, use o atributo referrerpolicy. Os valores possíveis incluem no-referrer (nenhuma página de referência) e strict-origin (somente o domínio de origem é enviado como referência).
  • src: O atributo src especifica o URL de um script externo.
  • type: Com esse atributo (agora opcional), você pode especificar o conteúdo do elemento HTML <script>. Além do script clássico, também são possíveis módulos ECMAScript (module) e mapas de importação (importmap) com regras para importações de módulos ECMAScript.
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 privacidade
  • Domain Connect grátis para configurar DNS fácil
Este artigo foi útil?
Ir para o menu principal