Em HTML, o código JavaScript é inserido entre as tags <script> e </script>.
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
Exemplos antigos de JavaScript podem usar um atributo type: <script; type="text/javascript">.
O atributo type não é obrigatório. JavaScript é a linguagem de script padrão em HTML.
Uma função JavaScript é 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.
Você pode colocar qualquer número de scripts em um documento HTML.
Os scripts podem ser colocados em <body> ou na seção <head> de uma página HTML, ou em ambos.
Neste exemplo, uma função JavaScript é colocada na seção <head> de uma página HTML.
A função é invocada (chamada) quando um botão é clicado:
<!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>
Experimente você mesmo →
<!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>
Neste exemplo, uma função JavaScript é colocada na seção <body> de uma página HTML.
A função é invocada (chamada) quando um botão é clicado:
<!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>Experimente você mesmo →
<!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 exibição velocidade, porque a interpretação do script retarda a exibição.
Os scripts também podem ser colocados em arquivos externos:
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}Scripts externos são práticos quando o mesmo código é usado em muitas páginas web diferentes.
Os arquivos JavaScript têm a extensão .js.
Para usar um script externo, coloque o nome do arquivo de script no atributo src (source) de uma tag <script>:
<script src="myScript.js"></script>Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>Demo External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>
Você pode colocar uma referência de script externo em <head> ou <body> como desejar.
O script se comportará como se estivesse localizado exatamente onde a tag <script> está localizada.
Scripts externos não podem conter tags <script>.
Colocar scripts em arquivos externos tem algumas vantagens:
Ele separa HTML e código
Torna HTML e JavaScript mais fáceis de ler e manter
Arquivos JavaScript armazenados em cache podem acelerar o carregamento da página
Para adicionar vários arquivos de script a uma página, use diversas tags de script:
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>Um script externo pode ser referenciado de três maneiras diferentes:
Com um URL completo (um endereço da web completo)
Com um caminho de arquivo (como /js/)
Sem nenhum caminho
Este exemplo usa um URL completo para vincular ao myScript.js:
<script src="https://www.w3schools.com/js/myScript.js"></script>Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Click Me</button>
<p>This example uses a full web URL to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="https://www.w3schools.com/js/myScript.js"></script>
</body>
</html>
Este exemplo usa um caminho de arquivo para vincular ao myScript.js:
<script src="/js/myScript.js"></script>Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>This example uses a file path to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="/js/myScript.js"></script>
</body>
</html>
Este exemplo não usa nenhum caminho para vincular ao myScript.js:
<script src="myScript.js"></script>Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>Demo External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>
Você pode ler mais sobre caminhos de arquivos no capítulo HTML Caminhos de arquivo.