English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial básico do JavaScript

Objeto JavaScript

Função JavaScript

DOM HTML JS

BOM do navegador JS

Tutorial básico de AJAX

Manual de referência do JavaScript

Uso do JavaScript

Uso do JavaScript no HTML

Neste capítulo, você aprenderá como integrar JavaScript ao seu site.

Normalmente, há três métodos para adicionar JavaScript a uma página da web:

  • Pode-se<script>e</script>Inserir código JavaScript entre os marcadores

  • Usarpropriedades de evento (Por exemplo, onclick, onkeypress e outros) insira código JavaScript diretamente dentro dos marcadores HTML

  • Crie um arquivo JavaScript externo e carregue-o via<script>Atributo src do marcador para carregá-lo na página

marcador <script>.

Em HTML, é necessário que<script>e</script>Inserir código JavaScript entre os marcadores.

<script>
document.write("Hello World");
</script>
Teste e veja‹/›

Atenção:Exemplos antigos de JavaScript podem usar o atributo type: <script type="text/javascript">. Desde o HTML5Já não é necessário o atributo type. JavaScript é HTML5O idioma padrão de script desde a versão.

JavaScript no <head> ou <body>.

Você pode inserir qualquer quantidade de scripts em um documento HTML.

Os scripts podem ser colocados em qualquer parte da página HTML.<head>ou <body>, dependendo de quando você deseja carregar o script.

JavaScript dentro do <head>

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

A função será chamada ao clicar no botão:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunc() {
　　document.getElementById("output").innerHTML = "Hello World";
}
</script>
</head>
<h2>JavaScript no Cabeçalho</h2>
<button type="button" onclick="myFunc()">Clique</button>
<p id="output">Este é um Parágrafo</p>
</html>
Teste e veja‹/›

cada<script>tags impedirão o processo de apresentação da página até que todo o código JavaScript seja completamente baixado e executado, então, a colocação delas no início do documento sem motivo legítimo afetará significativamente o desempenho do seu site.

JavaScript dentro do <body>

Neste exemplo, a função JavaScript é colocada na página HTML:seção.

A função será chamada ao clicar no botão:

<!DOCTYPE html>
<html>
<h2>JavaScript no Corpo</h2>
<button type="button" onclick="myFunc()">Clique</button>
<p id="output">Este é um parágrafo</p>
<script>
function myFunc() {
　　document.getElementById("output").innerHTML = "Hello World";
}
</script>
</html>
Teste e veja‹/›

Os scripts devem ser colocados no final da parte do corpo, ao lado</body>antes da tag, o que tornará sua página de web carregar mais rápido, pois pode evitar que a apresentação inicial da página seja interrompida.

colocar código JavaScript em linha

Você também pode usarpropriedades de evento (Por exemplo, onclick, onkeypress e outros) colocam código JavaScript diretamente dentro de tags HTML.

<p onclick="this.innerHTML='Hello World';">Este é o Primeiro Parágrafo (Clique nele)</p>
Teste e veja‹/›

No entanto, deve-se evitar inline de grande quantidade de código JavaScript, pois o JavaScript tornará o HTML confuso e tornará o código JavaScript difícil de manter.

chamar arquivos JavaScript externos

Você também pode colocar código JavaScript em um arquivo separado com a extensão .js e então chamar o arquivo externo de JavaScript usando<script>marcadosrcpropriedade para carregar o arquivo na página.

O exemplo a seguir aponta para um arquivo JavaScript externo:

<script src="myscript.js"></script>
Teste e veja‹/›

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

<script src="myscript_1.js"></script>
<script src="myscript_2.js"></script>

Você pode, conforme necessário,<head>ou<body>Coloque uma referência de script externo.

O comportamento deste script é como se ele estivesse exatamente na<script>na mesma posição que o sinal de marcação.

Atenção:Os arquivos de script externos não podem conter<script>Marca.

Vantagens do JavaScript Externo

Colocar scripts em arquivos externos tem alguns benefícios:

  • Ele separa o JavaScript do HTML

  • Ele torna o HTML e o JavaScript fáceis de ler e manter

  • Os arquivos JavaScript armazenados no cache podem acelerar a carga da página

  • O mesmo script pode ser usado em vários documentos

DicaNormalmente, ao baixar o arquivo JavaScript externo pela primeira vez, ele é armazenado no cache do navegador (como imagens e folhas de estilo), então não é necessário baixar o arquivo várias vezes do servidor web que cria a página. A carga é mais rápida.

Referência de Script Externo

Você pode usar um URL completo ou um caminho relativo ao arquivo atual da página para referenciar scripts externos.

Este exemplo usa um link de URL completo para o script:

<script　src="https://pt.oldtoolbag.com/run/js/myscript.js"></script>
Teste e veja‹/›

Este exemplo usa o script especificado na pasta atual do site:

<script　src="/run/js/myscript.js"></script>
Teste e veja‹/›

Você pode encontrar mais informações em " Caminho de Arquivo HTML Obtenha mais informações sobre os caminhos de arquivo neste capítulo.

Saída do JavaScriptExemplos Comuns de JavaScript