JavaScript: Introdução

O que é isso e para que serve?

Imagine que você é o diretor do seu próprio filme e seu computador é um estúdio de cinema. HTML é como o roteiro e o cenário (texto, imagens, botões, tabelas). CSS é o figurinista e o iluminador (cores, fontes, disposição bonita). E JavaScript são os atores e os efeitos especiais! É o JS que faz tudo se mover, reagir a cliques de botões, calcular, mostrar janelas pop-up, mudar imagens e até criar jogos.

Se um site fosse uma pessoa, então:

• HTML — o esqueleto e a pele (estrutura).
• CSS — a roupa e a maquiagem (aparência).
• JavaScript — o cérebro e os músculos (lógica e ações).

Sem JavaScript, um site seria apenas um livro chato que você só pode ler, mas não pode folhear, clicar em links, jogar ou preencher formulários. O JS torna as páginas da web "vivas".

Onde o JavaScript é usado?

• Em toda a internet: VK, YouTube, jogos no navegador (por exemplo, Agar.io), calculadoras online, mapas (Yandex.Maps), editores de código (como aquele em que você está lendo este artigo agora).
• Até em servidores (com Node.js) — por exemplo, para processar mensagens em chats ou armazenar dados.
• Em aplicativos móveis (React Native) e em desktops (Electron — nele são escritos o Discord e o VS Code).

JavaScript é a linguagem mais popular do mundo! Por quê? Porque ela está embutida diretamente no navegador. Você não precisa instalar nada (ao contrário do Python, que precisa ser baixado). Abriu o bloco de notas, escreveu o código, salvou como .html — e pronto! Pode executar com um clique duplo.

Uma diferença importante do Python: em Python, o código é executado por si só no console, enquanto em JavaScript ele está sempre vinculado a uma página da web. O JS não sabe criar janelas gráficas sozinho (como o pygame), mas sabe gerenciar o que já está na tela — botões, texto, imagens.

Exemplos de código com explicação

A maneira mais simples de começar é escrever o código diretamente no navegador. Pressione F12 (ou clique com o botão direito → "Inspecionar") e vá para a aba "Console". Lá você pode digitar comandos. Mas nós vamos escrever páginas completas.

Crie um arquivo test.html no seu computador, abra-o no bloco de notas e cole o código dos exemplos. Depois salve e abra no navegador.

Exemplo 1: Olá, mundo! (o primeiro programa)

// Isto é um comentário de uma linha. Ele não é executado.
/* E isto é um comentário de várias linhas.
   Ele serve para explicar o código. */

// O comando alert() mostra uma janela pop-up com uma mensagem.
alert("Hello, world! JavaScript is working!");

// O comando console.log() exibe texto no console do desenvolvedor.
// Para ver o resultado, pressione F12 e abra a aba Console.
console.log("Esta é uma mensagem no console. Você é demais!");

// O comando document.write() escreve texto diretamente na página.
document.write("<h1>Este é um título criado pelo JavaScript!</h1>");

O que vai acontecer?

• Primeiro, uma janela com texto aparecerá.
• Depois, no console (F12), aparecerá a segunda mensagem.
• No final, um título grande aparecerá na página.

Em Python, o primeiro programa é simplesmente print("Hello"). Em JS, usamos alert() ou console.log(). A diferença é que o JS vive no navegador, então ele tem acesso às janelas e à própria página.

Exemplo 2: Variáveis — caixinhas para dados

// Uma variável é como uma caixa com um rótulo.
// Em Python você escreve: nome = "João"
// Em JS usamos a palavra-chave let (forma moderna).

let nome = "Maria";           // String (texto)
let idade = 12;               // Número
let gostaDePizza = true;      // Valor booleano (sim/não)
let caixaVazia = null;        // Vazio (nada)

// Vamos exibir tudo no console:
console.log("Nome:", nome);
console.log("Idade:", idade);
console.log("Gosta de pizza?", gostaDePizza);

// Podemos concatenar strings:
let saudacao = "Olá, " + nome + "! Você tem " + idade + " anos.";
console.log(saudacao);

// Ou podemos usar template strings (como f-strings em Python, mas com ${}):
let melhorSaudacao = `Olá, ${nome}! Você tem ${idade} anos.`;
console.log(melhorSaudacao);

// Vamos mudar o valor da variável:
idade = 13;  // A Maria fez aniversário!
console.log("Agora a idade é:", idade);

Explicação: Variáveis servem para armazenar informações. let é como var em Python, só que em JS é obrigatório escrever let (ou const para constantes). Observe o ponto e vírgula ; no final de cada linha — em Python não tem, mas em JS ele é colocado (embora às vezes funcione sem ele, é melhor sempre colocar).

Template strings (com crases `` ` ``) são muito convenientes — você insere variáveis diretamente no texto através de ${}.

Exemplo 3: Operador condicional if (como na vida: "Se... então...")

let idadeUsuario = 15;

// Se a idade for maior ou igual a 18:
if (idadeUsuario >= 18) {
    console.log("Você é adulto! Pode assistir filmes de terror.");
} else if (idadeUsuario >= 12) {
    console.log("Você é adolescente! Pode jogar a maioria dos jogos.");
} else {
    console.log("Você é criança. Melhor ler um livro.");
}

// Outro exemplo: verificar se um número é par
let numero = 7;
if (numero % 2 === 0) {  // % é o resto da divisão
    console.log("O número é par.");
} else {
    console.log("O número é ímpar.");
}

// Observe: em JS, para comparação, usa-se === (três iguais),
// e não == (dois iguais). Dois iguais é uma comparação "não estrita",
// que pode dar resultados estranhos (por exemplo, 5 == "5" é verdadeiro,
// embora número e string sejam tipos diferentes). Sempre use ===.

O