Executando Código JavaScript

Quando o navegador recebe uma página da web com código HTML e JavaScript, ele a interpreta. O resultado da interpretação são os vários elementos que compõem a página, como botões, campos de entrada, blocos de texto, entre outros, os quais são visualizados no navegador. A interpretação da página da web ocorre de cima para baixo, sequencialmente.

Quando o navegador encontra na página da web um elemento <script> com código JavaScript, o interpretador JavaScript embutido entra em ação. E enquanto ele não termina seu trabalho, a interpretação da página da web não continua.

Vamos considerar um pequeno exemplo e para isso vamos definir o arquivo index.html com o seguinte código:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
    <script>
        document.write("Texto inicial");
    </script>
</head>
<body>
    <h2>Primeiro título</h2>
    <script>
        document.write("Primeiro texto");
    </script>
    <h2>Segundo título</h2>
    <script>
        document.write("Segundo texto");
    </script>
</body>
</html>

Aqui estão três inserções de código JavaScript: uma na seção <head> e uma após cada título.

Ao abrir a página da web no navegador, veremos que o navegador executa o código da página da web sequencialmente:

Aqui vemos que primeiro é executado o código JavaScript da seção head, que imprime algum texto na página da web:

document.write("Texto inicial");

Em seguida, o primeiro elemento HTML padrão <h2> é exibido:

<h2>Primeiro título</h2>

Depois disso, é executada a segunda inserção de código JavaScript:

document.write("Primeiro texto");

Então, o segundo elemento HTML <h2> é exibido:

<h2>Segundo título</h2>

E, por fim, é executada a última inserção de código JavaScript:

document.write("Segundo texto");

Após isso, o navegador concluirá a interpretação da página da web, e a página da web estará completamente carregada. Este momento é muito importante, pois pode afetar o desempenho. Portanto, frequentemente, inserções de código JavaScript vão antes da tag de fechamento </body>, quando a parte principal da página da web já foi carregada no navegador.

Fundamentos da Sintaxe JavaScript

Antes de entrar no estudo detalhado dos fundamentos da linguagem de programação JavaScript, vamos revisar alguns aspectos básicos de sua sintaxe.

O código JavaScript consiste em instruções. Cada instrução representa uma ação. E para separar as instruções umas das outras em JavaScript, após a instrução é colocado um ponto e vírgula:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<script>
document.write("2 + 5 =  "); 
const sum = 2 + 5; 
document.write(sum); 
</script>
</body>
</html>

Aqui no código JavaScript estão definidas três instruções:

document.write("2 + 5 = ")

Isso exibe o texto "2 + 5 = " na página.

const sum = 2 + 5;

Usando o operador const, define a constante sum - um valor que não deve mudar (porque neste caso atribuímos a ele um valor apenas uma vez e não o alteramos mais). E esta constante é igual à soma de 2 + 5.

document.write(sum);

Isso exibe na página o valor da constante sum (ou seja, a soma de 2 + 5).

No entanto, os navegadores modernos podem distinguir claramente instruções individuais, mesmo se estiverem simplesmente em linhas separadas sem ponto e vírgula:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<script>
document.write("2 + 5 =  ")
const sum = 2 + 5
document.write(sum)
</script>
</body>
</html>

Mas para melhorar a legibilidade do código e reduzir o número de possíveis erros, é recomendado definir cada instrução JavaScript em uma linha separada e terminá-la com ponto e vírgula, como no primeiro exemplo.

Blocos de Código

Instruções individuais podem ser agrupadas em blocos de código, que representam algum código contido entre chaves {bloco de código}. Por exemplo, vamos definir a seguinte página:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<script>
document.write("Olá! ");
{
    document.write("Como vai? ");
    document.write("Por que não está respondendo, está dormindo ou o quê? ");
}
document.write("Ok, até logo...");
</script>
</body>
</html>

Aqui, o programa em JavaScript consiste em 4 instruções. Duas dessas instruções estão contidas em um bloco de código:

{
    document.write("Como vai? ");
    document.write("Por que não está respondendo, está dormindo ou o quê? ");
}

Uma instrução é executada antes do bloco de código, e outra é executada após o bloco de código.

Comentários

No código JavaScript, podem ser usados comentários. Os comentários não são processados pelo interpretador JavaScript e não têm efeito no funcionamento do programa. Eles são destinados a fornecer orientação no código, indicando o que faz determinado trecho de código.

Os comentários podem ser de uma única linha, para os quais é usado o duplo slash:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<script>
// exibindo uma mensagem
document.write("2 + 5 =  ")
// declarando uma constante e atribuindo a ela a soma dos números 2 e 5
const sum = 2 + 5
// exibindo o valor da constante sum
document.write(sum)
</script>
</body>
</html>