Como adicionar JavaScript ao HTML
Neste artigo, vamos entender como adicionar JavaScript ao HTML. Existem três maneiras de fazer isso:
-
Inserir o código JS dentro de uma tag <script>
-
Conectar um arquivo externo
-
Escrever o código diretamente dentro da tag HTML usando atributos especiais
Vamos analisar cada método para entender seus prós e contras.
Inserindo código dentro da tag <script> Copiar link
A forma mais simples de inserir código JS em uma página HTML é usar a tag <script>. Ela informa ao navegador que todo o conteúdo deve ser interpretado como um script executável, e não como texto ou código HTML.
Por exemplo, vamos adicionar um script que exibe a data e hora atuais:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Date and Time</title>
</head>
<body>
<script>
let date = new Date();
alert("Now " + date);
</script>
</body>
</html>
Quando a página carregar, aparecerá uma notificação com a data e hora atuais.
Você pode escrever um programa inteiro dentro da tag <script>. Como exemplo, vamos criar um relógio eletrônico:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Electronic Clock</title>
<script>
function displayTime() {
let element = document.getElementById("clock"); // Find element with id="clock"
let now = new Date(); // Get current time
element.innerHTML = now.toLocaleTimeString(); // Display time
setTimeout(displayTime, 1000); // Call the function every second
}
window.onload = displayTime; // Start displaying the time after the document is loaded
</script>
</head>
<body>
<h1>Electronic Clock</h1>.
<div id="clock"></div>
</body>
</html>
Perfeito! Você usou JavaScript para adicionar a hora atual a um elemento HTML, que é atualizado a cada segundo.
Os comentários explicam detalhadamente o que o script faz. Ele encontra o elemento com id="clock" dentro da tag <div> logo abaixo do cabeçalho. Em seguida, obtém a hora atual, exibida imediatamente após o carregamento do documento e atualizada a cada segundo.
Parece conveniente, mas essa abordagem tem algumas desvantagens. Imagine que você queira mostrar a hora em todas as páginas do site. Nesse caso, será necessário duplicar o conteúdo da tag <script>.
Outro problema é que quanto maior o script, pior fica a legibilidade do código. No exemplo acima há apenas uma função, mas se você precisar de 5, 10 ou 20, é mais prático usar o próximo método: conectar arquivos JS externos.
Conectando arquivos externos Copiar link
A tag <script> também pode ser usada para conectar JavaScript de arquivos externos por meio do atributo src. Pode ser um arquivo criado por você ou uma biblioteca JS que adiciona funcionalidades à página.
Por exemplo, vamos mover o script do relógio para um arquivo separado:
# Time.js file
function displayTime() {
let element = document.getElementById("clock"); // Find element with id="clock"
let now = new Date(); // Get current time
element.innerHTML = now.toLocaleTimeString(); // Display time
setTimeout(displayTime, 1000); // Call the function every second
}
window.onload = displayTime; // Start displaying the time after the document is loaded
Agora removemos todo o JS do HTML e deixamos apenas a referência ao arquivo:
#File time.html
<html>
<head>
<meta charset="utf-8">
<title>Electronic Clock</title>
<script src="./time.js"></script>
</head>
<body>
<h1>Electronic Clock</h1>.
<div id="clock"></div>
</body>
</html>.
O resultado é o mesmo: você adicionou a hora atual ao <div> usando JavaScript.
Vantagens dessa abordagem:
-
Os arquivos HTML ficam mais simples
-
Todo o código JS pode ficar em um único arquivo
-
Se várias páginas usarem o mesmo script, ele será carregado apenas uma vez e reutilizado a partir do cache do navegador
JavaScript dentro de tags HTML Copiar link
Você pode inserir JavaScript diretamente em uma tag HTML usando atributos especiais como onclick, onmouseover, onkeypress, onload, etc.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript inside an HTML tag</title>
</head>
<body>
<button onclick="alert('Hi! This is how JS works too')">Click me</button>
<button onmouseover="alert('This works too')">Hover over me</button>
</body>
</html>.
Ao clicar no primeiro botão, aparecerá uma notificação. Ao passar o mouse sobre o segundo, outra mensagem será exibida.
Também é possível adicionar vários manipuladores ao mesmo elemento:
<button onclick="alert('Hi! This is how JS works too')" ; onmouseover="alert('This works too')">Click me</button>
No entanto, isso é considerado uma má prática. A maioria dos desenvolvedores prefere separar conteúdo e comportamento. Além disso, como você pode ver, usar manipuladores diretamente no HTML prejudica bastante a legibilidade do código.
Onde é melhor colocar os scripts Copiar link
Tecnicamente, não há restrições para inserir a tag <script>. Você pode adicionar JavaScript no <head> ou no <body>, no início ou no final do documento.
Porém, normalmente os scripts são colocados no final do corpo, logo antes da tag </body>. Isso acelera o carregamento da página e permite que o usuário veja o conteúdo mais rapidamente.
Cada tag <script> bloqueia a renderização da página até que o JavaScript seja totalmente carregado e executado. Arquivos externos (especialmente bibliotecas grandes) podem atrasar bastante a exibição do conteúdo, principalmente em conexões lentas.
Você só deve colocar scripts no <head> se houver um motivo claro. Caso contrário, o melhor é adicioná-los no final do documento, antes do fechamento do </body>.