Uso do JavaScript

<script> etiqueta

No HTML, o código JavaScript deve estar localizado dentro de <script> com </script> entre etiquetas.

Exemplo

<script>
document.getElementById("demo").innerHTML = "meu primeiro JavaScript";
</script>

Experimentar pessoalmente

Comentário:Exemplos antigos de JavaScript podem usar type A propriedade: <script type="text/javascript">.

Comentário:A propriedade type não é necessária. O JavaScript é o linguagem de script padrão no HTML.

Funções e eventos JavaScript

JavaScript funçãoÉ um bloco de código JavaScript que pode ser executado ao ser chamado.

Por exemplo, quando ocorreeventoao chamar a função, por exemplo, quando o usuário clicar em um botão.

Dica:Você aprenderá mais sobre funções e eventos em capítulos futuros.

JavaScript dentro do <head> ou <body>

Você pode inserir quantos scripts quiser em um documento HTML.

Os scripts podem ser colocados no HTML da página <body> ou <head> partes, ou ambos os lados.

JavaScript dentro do <head>

Neste exemplo, a função JavaScript é colocada na página HTML <head> Parte.

Esta função será chamada quando o botão for clicado:

Exemplo

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "O parágrafo foi alterado.";
}
</script>
</head>
<body>
<h1>Uma página da web</h1>
<p id="demo">Um parágrafo</p>
<button type="button" onclick="myFunction()">Experimente</button>
</body>
</html>

Experimentar pessoalmente

JavaScript dentro do <body>

Neste exemplo, a função JavaScript é colocada na página HTML <body> Parte.

Esta função será chamada quando o botão for clicado:

Exemplo

<!DOCTYPE html>
<html>
<body> 
<h1>Página da Web</h1>
<p id="demo">Um parágrafo</p>
<button type="button" onclick="myFunction()">Experimente</button>
<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "O parágrafo foi alterado.";
}
</script>
</body>
</html>

Experimentar pessoalmente

Dica:Coloque o script em <body> no final do elemento, melhorando a velocidade de exibição, pois a compilação do script pode atrasar a exibição.

Script externo

O script pode ser colocado no arquivo externo:

Arquivo externo: myScript.js

function myFunction() {
   document.getElementById("demo").innerHTML = "O parágrafo foi alterado.";
}

Os scripts externos são úteis, se o mesmo script é usado em muitos sites diferentes.

A extensão do arquivo do JavaScript é .js.

Para usar scripts externos, insira <script> a tag src na propriedade (source) do script:

Exemplo

<script src="myScript.js"></script>

Experimentar pessoalmente

Você pode inserir scripts em <head> ou <body> ao inserir referências de scripts externos.

O comportamento do script depende de onde ele é colocado <script> o mesmo em uma tag.

Comentário:Os scripts externos não podem conter <script> Tags.

Vantagens do JavaScript externo

Colocar scripts em arquivos externos tem as seguintes vantagens:

  • Isola HTML e código
  • Torna HTML e JavaScript mais fáceis de ler e manter
  • Os arquivos JavaScript em cache podem acelerar o carregamento da página

Para adicionar vários arquivos de script a uma página - use vários tags script:

Exemplo

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

Referência externa

Os scripts externos podem ser referenciados por URL completa ou caminho relativo ao arquivo atual da página:

Este exemplo usa URL completa para linkar ao script:

Exemplo

<script src="https://www.codew3c.com/js/myScript1.js"></script>

Experimentar pessoalmente

Este exemplo usa um script localizado na pasta especificada no site atual:

Exemplo

<script src="/js/myScript1.js"></script>

Experimentar pessoalmente

Este exemplo liga ao script na mesma pasta da página atual:

Exemplo

<script src="myScript1.js"></script>

Experimentar pessoalmente

Você pode Caminho do arquivo HTMLAprenda mais sobre caminhos de arquivos aqui.