Nesse artigo, vamos mostrar como pode ser adicionado o JavaScript no HTML. O JavaScript é flexível e por isso seu código pode ser inserido em qualquer lugar em um documento HTML. Desde que seja inserido entre as tags <script>…</script>. No entanto, as formas mais usadas para inserir o JavaScript em um arquivo HTML são as seguintes:
- Script entre as tags <head> … </ head>.
- Script entre as tags <body> … </ body>.
- Script entre as tags <body> … </ body> e <head> … </ head>.
- Script em um arquivo externo e, em seguida, incluído entre as tags <head> … </ head>.
No seguimento desse tópico, veremos como podemos inserir o JavaScript de maneiras diferentes em um arquivo HTML.
JavaScript entre as tags <head> … </ head>
Se você quiser que um script seja executado em algum evento, por exemplo, quando um usuário clicar em algum lugar, mostrar uma determinada mensagem, basta você inserir esse script no cabeçalho da página.
<html> <head> <script type="text/javascript"> <!-- function mensagem() { alert("Olá Mundo!"); } //--> </script> </head> <body> <input type="button" onclick="mensagem()" value="Diga Olá" /> </body> </html>
Resultado:
JavaScript entre as tags <body> … </ body>
Se você precisar de um script para ser executado enquanto a página é carregada para que o script gere conteúdo na página, o script vai para a parte <body> do documento. Nesse caso, você não teria nenhuma função definida usando JavaScript. Dê uma olhada no código a seguir.
<html> <head> </head> <body> <script type="text/javascript"> <!-- document.write("Olá Mundo!") //--> </script> <p>Este é o corpo da página</p> </body> </html>
Resultado
Este é o corpo da página
JavaScript entre as tags <body>…</body> e <head>…</head>
Você pode colocar seu código JavaScript entre as tags <head>… </head> e <body>…</body>, veja o exemplo a seguir:
<html> <head> <script type="text/javascript"> <!-- function mensagem() { alert("Olá Mundo!") } //--> </script> </head> <body> <script type="text/javascript"> <!-- document.write("Olá Mundo!") //--> </script> <input type="button" onclick="mensagem()" value="Diga Olá" /> </body> </html>
Este código irá produzir o seguinte resultado –
JavaScript de um arquivo externo
À medida que você começa a trabalhar mais intensamente com o JavaScript, provavelmente descobrirá casos em que você está reutilizando código JavaScript idêntico em várias páginas de um site.
Você não está restrito a manter código idêntico em vários arquivos HTML. A tag de script fornece um mecanismo para permitir que você armazene JavaScript em um arquivo externo e, em seguida, inclua-o em seus arquivos HTML.
Aqui está um exemplo para mostrar como você pode incluir um arquivo JavaScript externo em seu código HTML usando a tag de script e seu atributo src .
<html> <head> <script type="text/javascript" src="nomedoarquivo.js" ></script> </head> <body> ....... </body> </html>
Para usar JavaScript de uma fonte de arquivo externa, você precisa escrever todo o código-fonte JavaScript em um arquivo de texto simples com a extensão “.js” e incluir esse arquivo como mostrado acima. Um detalhe importante é que quando o arquivo for .js ele não necessitará das tags <script>…</script>. Pois sua extensão já mostra que é um código em JavaScript.
Por exemplo, você pode manter o seguinte conteúdo no arquivo nomedoarquivo.js e, em seguida, usar a função digaOla no seu arquivo HTML depois de incluir o arquivo nomedoarquivo.js.
function digaOla() { alert("Olá Mundo"); }
Bem, nesse artigo mostramos como adicionar o JavaScript no HTML de 3 maneiras diferentes, espero que tenham tirado proveito deste tópico.
Deixem um comentário, sobre este artigo!
