Execução do Código e Estrutura Básica JavaScript

Para dominar o JavaScript, o primeiro passo é compreender como o computador lê o código. O processo parece muito com a leitura de um livro: o navegador lê o arquivo de cima para baixo e da esquerda para a direita.

Cada linha de comando é processada sequencialmente. A segunda linha só começa a ser executada após a conclusão total da primeira. Podemos visualizar esse comportamento claramente com a função alert(). Como essa função pausa o navegador até que o botão "OK" seja clicado, ela serve como uma ferramenta perfeita para demonstrar essa ordem.

Considere o seguinte arquivo index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Teste de Ordem</title>
  </head>
  <body>
    <script>
      alert("Primeira mensagem: Início");
      alert("Segunda mensagem: Meio");
      alert("Terceira mensagem: Fim");
    </script>
  </body>
</html>

Ao carregar esta página, é impossível visualizar a segunda mensagem antes de fechar a primeira. O navegador segue uma fila rigorosa de tarefas, executando uma instrução por vez.

Onde Posicionar o Script

Para garantir que o conteúdo visual da página (textos, imagens, botões) apareça para o usuário o mais rápido possível, existe uma prática essencial.

A recomendação padrão é posicionar a tag <script> no final do corpo do documento, logo antes do fechamento da tag </body>. Isso assegura que todos os elementos visuais sejam carregados e desenhados na tela antes que o navegador precise parar para processar o código JavaScript.

Instruções e Ponto e Vírgula

O código JavaScript é formado por instruções. Uma instrução é basicamente uma ordem única enviada ao computador. Para manter o código organizado e indicar onde uma ordem termina e a próxima começa, usamos o ponto e vírgula (;).

alert("Olá");
alert("Tudo bem?");

O exemplo acima apresenta duas instruções distintas. A primeira exibe "Olá" e encerra com ponto e vírgula. A segunda exibe "Tudo bem?" e também finaliza com o mesmo sinal. Embora os navegadores modernos consigam entender o código apenas com a quebra de linha, o uso explícito do ponto e vírgula é a prática mais segura para evitar erros.

Comentários

Durante o desenvolvimento, é comum deixar anotações no próprio arquivo para explicar o funcionamento de um trecho específico. Essas anotações são chamadas de comentários. O navegador ignora completamente qualquer texto marcado como comentário, ou seja, ele não executa essas linhas.

Para criar um comentário de uma única linha, usamos duas barras //.

// A linha abaixo faz uma soma matemática simples
const sum = 10 + 5;

// Exibe o resultado da soma
alert(sum);

O uso de comentários é fundamental para a documentação e manutenção do código. Isso permite que você ou outros desenvolvedores compreendam a lógica aplicada mesmo meses ou anos depois da escrita original.

Resumo

Leitura Sequencial: O navegador executa uma linha de cada vez, sempre de cima para baixo.
Melhor Prática: O ideal é colocar o <script> no final da página, antes do </body>, para priorizar o carregamento visual.
Instruções: São comandos individuais que devem ser finalizados com ponto e vírgula (;).
Comentários: O uso de // permite escrever notas que não afetam a execução do programa.