JavaScript para onde
A tag <script>
Em HTML, o código JavaScript é inserido entre as tags <script>e .</script>
Exemplo
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
Exemplos antigos de JavaScript podem usar um atributo de tipo: <script type="text/javascript">.
O atributo type não é obrigatório. JavaScript é a linguagem de script padrão em HTML.
Funções e eventos JavaScript
Um JavaScript functioné um bloco de código JavaScript, que pode ser executado quando "chamado".
Por exemplo, uma função pode ser chamada quando ocorre um evento , como quando o usuário clica em um botão.
Você aprenderá muito mais sobre funções e eventos em capítulos posteriores.
JavaScript em <head> ou <body>
Você pode colocar qualquer número de scripts em um documento HTML.
Os scripts podem ser colocados no <body>, ou na <head>seção de uma página HTML, ou em ambos.
JavaScript em <head>
Neste exemplo, um JavaScript functioné colocado na <head>seção de uma página HTML.
A função é invocada (chamada) quando um botão é clicado:
Exemplo
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
</body>
</html>
JavaScript em <body>
Neste exemplo, um JavaScript functioné colocado na <body>seção de uma página HTML.
A função é invocada (chamada) quando um botão é clicado:
Exemplo
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
Colocar scripts na parte inferior do elemento <body> melhora a velocidade de exibição, porque a interpretação do script torna a exibição mais lenta.
JavaScript externo
Os scripts também podem ser colocados em arquivos externos:
Arquivo externo: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
Scripts externos são práticos quando o mesmo código é usado em muitas páginas da web diferentes.
Os arquivos JavaScript têm a extensão de arquivo .js .
Para usar um script externo, coloque o nome do arquivo de script no srcatributo (source) de uma <script>tag:
Exemplo
<script src="myScript.js"></script>
Você pode colocar uma referência de script externa em <head>ou <body>como desejar.
O script se comportará como se estivesse localizado exatamente onde a <script>tag está localizada.
Scripts externos não podem conter <script>tags.
Vantagens externas do JavaScript
Colocar scripts em arquivos externos tem algumas vantagens:
- Separa HTML e código
- Torna o HTML e o JavaScript mais fáceis de ler e manter
- Arquivos JavaScript em cache podem acelerar o carregamento da página
Para adicionar vários arquivos de script a uma página - use várias tags de script:
Exemplo
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
Referências externas
Um script externo pode ser referenciado de 3 maneiras diferentes:
- Com um URL completo (um endereço web completo)
- Com um caminho de arquivo (como /js/)
- Sem nenhum caminho
Este exemplo usa um URL completo para vincular a myScript.js:
Exemplo
<script src="https://www.w3schools.com/js/myScript.js"></script>
Este exemplo usa um caminho de arquivo para vincular a myScript.js:
Exemplo
<script src="/js/myScript.js"></script>
Este exemplo não usa nenhum caminho para vincular a myScript.js:
Exemplo
<script src="myScript.js"></script>
Você pode ler mais sobre caminhos de arquivo no capítulo Caminhos de arquivo HTML .