“Hello World” em JavaScript
Aprenda como executar o primeiro código JavaScript que exibe a famosa mensagem Hello, World!.
English version: https://www.javascripttutorial.net/javascript-hello-world/
Esse tutorial ajudará você a iniciar no JavaScript, mostrando como incorporar o código JavaScript em uma página HTML.
Para inserir JavaScript em uma página HTML use o elemento <script>. Existem duas maneiras de usar o elemento <script> 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.
Incorpore código JavaScript em uma página HTML
Colocar o código JavaScript diretamente dentro do elemento <script> não é recomendado e deve ser usado somente para prova de conceito ou para testes.
O código JavaScript diretamente no elemento <script> é interpretado de cima para baixo. Por Exemplo:
No elemento <script>, usamos a função alert() para exibir a mensagem Hello, World!.
Incluir um arquivo JavaScript externo
Para incluir um código JavaScript de um arquivo externo:
- Primeiro, crie um arquivo cuja extensão seja
.js, por exemploapp.jse coloque ele dentro do diretóriojs. Observe que colocar o arquivo JavaScript dentro do diretóriojsnão é obrigatório, entretanto é uma boa prática. - Então use a URL do arquivo com o código fonte JavaScript (caminho do arquivo que você acabou de criar) no atributo
src=''do elemento<script>.
O código abaixo seria o conteúdo do arquivo app.js:
E a seguir o código do arquivo helloworld.html:
Se você abrir o arquivo helloworld.html no navegador de internet, verá uma caixa de diálogo “popup” com a mensagem Hello, World!.
Observe que você pode carregar um arquivo JavaScript de um servidor remoto. Isso permite carregar JavaScript de vários domínios, por exemplo, de uma rede de entrega de conteúdo (Content Delivery Network — CDN) para acelerar o carregamento do conteúdo.
Quando você possuir múltiplos arquivos JavaScript em uma página, o motor JavaScript interpreta os arquivos na ordem em que eles aparecem. Veja o exemplo:
O motor JavaScript irá interpretar os arquivos service.js e depois o app.js na sequência. Interpretando completamente o arquivo service.js primeiro antes de interpretar o arquivo app.js.
Para a página que inclui muitos arquivos JavaScript externos, uma página em branco é exibida durante a fase de renderização. Para evitar isso, inclua os arquivos JavaScript imediatamente antes da tag <\body>, como mostrado nesse exemplo:
Os atributos async e defer
Para alterar como o código JavaScript é carregado e executado, use um dos dois atributos async ou defer no elemento <script>.
Esses atributos fazem efeito somente em arquivos de script externos.
async
O atributo async, se visível, instrui o navegador web a executar o arquivo JavaScript de forma assíncrona, se possível. O atributo async não garante que os arquivos de script sejam executados na ordem que aparecem. Por exemplo:
O arquivo app.js pode ser executado antes do arquivo service.js, portanto, você deve garantir que não haja dependências entre eles.
defer
O atributo defer, se visível, solicita que o navegador de internet execute o arquivo de script após a análise do documento.
Mesmo colocando o elemento <script> na seção <head>, o script vai aguardar o navegador receber a tag de fechamento do elemento <html> para começar a executar.
Resumo
- Use o elemento
<script>para incluir arquivos JavaScript em uma página HTML. - O atributo
asyncno elemento<script>instrui o navegador a buscar o arquivo JavaScript em paralelo e, em seguida, analisar e executar assim que o arquivo JavaScript estiver disponível. - O atributo
deferno elemento<script>permite ao navegador executar o arquivo JavaScript depois do documento ter sido analisado.
Veja o índice de todos os tutoriais JavaScript
Confira uma série de outros tutoriais JavaScript que eu escrevi, clicando no link abaixo: