Exemplo de JavaScript Olá Mundo – Acervo Lima Tutorials

Resumo : Este tutorial ajuda você a começar a usar JavaScript, mostrando como incorporar código JavaScript em uma página HTML.

Para inserir JavaScript em uma página HTML, você usa o <script>elemento. Existem duas maneiras de usar o <script>elemento em uma página HTML:

Incorpore o código JavaScript diretamente na página HTML.
Faça referência a um arquivo de código JavaScript externo.

Incorporar código JavaScript em uma página HTML

Colocar código JavaScript <script>diretamente dentro do elemento não é recomendado e deve ser usado apenas para prova de conceito ou para fins de teste.

O código JavaScript no <script>elemento é interpretado de cima para baixo. Por exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Hello World Example</title>
    <script>
        alert('Hello, World!');
    </script>
</head>
<body>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

No <script>elemento, usamos a alert()função para exibir a Hello, World! mensagem.

Incluir um arquivo JavaScript externo

Para incluir um JavaScript de um arquivo externo:

Primeiro, crie um arquivo cuja extensão seja .js, por exemplo, app.jse coloque-o no jsdiretório. js Observe que, embora não seja obrigatório colocar o arquivo JavaScript no diretório, isso é considerado uma boa prática.
Em seguida, use a URL do arquivo de código-fonte JavasScript no srcatributo do <script>elemento.

O seguinte mostra o conteúdo do arquivo app.js:

alert('Hello, World!');Linguagem de código:  JavaScript  ( javascript )

O seguinte exibe o conteúdo do helloworld.htmlarquivo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Hello World Example</title>
    <script src="js/app.js"></script>
</head>
<body>

</body>
</html>Linguagem de código:  HTML, XML  ( xml )

Se você iniciar o helloworld.htmlarquivo no navegador da web, verá um alerta que exibe a Hello, World!mensagem.

Observe que você pode carregar um arquivo JavaScript de um servidor remoto. Isso permite que você forneça JavaScript de vários domínios, por exemplo, rede de distribuição de conteúdo (CDN) para aumentar a velocidade de carregamento da página.

Quando você tem vários arquivos JavaScript em uma página, o mecanismo JavaScript interpreta os arquivos na ordem em que aparecem. Por exemplo:

<script src="js/service.js"></script>
<script src="js/app.js"></script>Linguagem de código:  HTML, XML  ( xml )

Neste exemplo, o mecanismo JavaScript interpretará os service.jsarquivos app.jssequencialmente. Ele conclui a interpretação do service.jsarquivo antes de passar para o app.jsarquivo.

Para uma página que inclui muitos arquivos JavaScript externos, a página em branco pode ser exibida durante a fase de renderização.

Para evitar isso, inclua o arquivo JavaScript logo antes da </body>tag, conforme mostrado neste exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Hello World Example</title>
</head>
<body>
 
   <!-- end of page content here-->
   <script src="js/service.js"></script>
   <script src="js/app.js"></script>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

Os atributos async e defer

Para modificar como o navegador carrega e executa arquivos JavaScript, você usa um dos dois atributos do <script>elemento: asynce defer. Esses atributos têm efeito apenas nos arquivos de script externos.

atributo assíncrono

O asyncatributo instrui o navegador da web a executar o arquivo JavaScript de forma assíncrona. Entretanto, isso não garante que os arquivos de script serão executados na ordem em que aparecem. Por exemplo:

<script async src="service.js"></script>
<script async src="app.js"></script>Linguagem de código:  HTML, XML  ( xml )

O app.jsarquivo pode ser executado antes do service.jsarquivo. Portanto, você deve garantir que não haja dependência entre eles.

atributo adiar

O deferatributo solicita que o navegador da web execute o arquivo de script após a análise do documento HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript defer demonstration</title>
    <script defer src="defer-script.js"></script>
</head>
<body>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

Mesmo colocando o <script>elemento na <head>seção, o script irá esperar até que o navegador receba a </html>tag de fechamento para iniciar a execução.

Resumo

Use <script>element para incluir um arquivo JavaScript em uma página HTML.
O asyncatributo do <script>elemento instrui o navegador da web a buscar o arquivo JavaScript em paralelo e, em seguida, analisá-lo e executá-lo assim que o arquivo JavaScript estiver disponível.
O deferatributo do <script>elemento permite que o navegador da web execute o arquivo JavaScript após a análise do documento.