JavaScript para iniciantes: fundamentos explicados com exemplos

JavaScript é a linguagem que dá vida às páginas web. Menus que abrem, formulários que validam, jogos no navegador, mapas, chats: tudo isso usa JavaScript. Se já sabes um pouco de HTML e CSS, este é o passo seguinte. Aqui ficam os fundamentos, com exemplos que podes testar já.

Onde escrever e correr JavaScript

O mais rápido: abre o navegador, carrega em F12 e vai ao separador Consola. Escreve 2 + 2 e carrega em Enter. Já estás a correr JavaScript.

Para uma página real, cria um ficheiro script.js e liga-o no HTML, antes do fecho do </body>:

<script src="script.js"></script>

Variáveis e tipos de dados

Usa let para valores que mudam e const para valores fixos:

const nome = "Maria";
let idade = 19;
let estudante = true;
idade = idade + 1;
console.log(nome, idade, estudante);

Os tipos mais comuns são: texto (string), número (number), verdadeiro/falso (boolean), listas (array) e objetos.

Condições

const nota = 14;

if (nota >= 10) {
  console.log("Aprovado");
} else {
  console.log("Reprovado");
}

Compara com === (igual), !== (diferente), >, <, >=, <=. Prefere sempre === a ==, para evitar conversões inesperadas.

Ciclos

for (let i = 1; i <= 5; i++) {
  console.log("Volta número", i);
}

O for repete enquanto a condição for verdadeira. Para percorrer listas, usa também for...of:

const frutas = ["manga", "ananás", "papaia"];
for (const fruta of frutas) {
  console.log(fruta);
}

Funções

Uma função é um bloco de código com nome que podes reutilizar:

function calcularTroco(pago, preco) {
  return pago - preco;
}

console.log(calcularTroco(5000, 3500)); // 1500

Também vais ver a forma curta, chamada arrow function: const dobro = n => n * 2;.

Arrays e objetos

const aluno = {
  nome: "João",
  notas: [12, 15, 17]
};

const soma = aluno.notas.reduce((total, n) => total + n, 0);
const media = soma / aluno.notas.length;
console.log(aluno.nome, media);

Os métodos map, filter e reduce são muito usados para transformar listas. Vale a pena dedicar-lhes um dia de prática.

Mexer na página: o DOM

O JavaScript consegue ler e alterar o HTML. Este exemplo muda o texto de um parágrafo quando clicas num botão:

<p id="mensagem">Olá!</p>
<button id="botao">Clica aqui</button>

<script>
  const botao = document.querySelector("#botao");
  const mensagem = document.querySelector("#mensagem");

  botao.addEventListener("click", () => {
    mensagem.textContent = "Clicaste no botão!";
  });
</script>

Aprendeste três coisas: selecionar um elemento, escutar um evento (clique) e alterar o conteúdo. Com isto já se faz muita coisa.

Erros que todos fazem

• Esquecer de ligar o ficheiro script.js ou ligá-lo antes de o HTML existir.
• Escrever = quando querias ===.
• Esquecer ponto e vírgula ou chaves e perder-se.
• Alterar o HTML com innerHTML a partir de texto que o utilizador escreve, o que abre a porta a problemas de segurança (ver segurança web básica).

Projetos para praticar

1. Calculadora simples com quatro operações.
2. Lista de tarefas que guarda os itens no localStorage.
3. Jogo de adivinhar um número entre 1 e 100.
4. Relógio digital que atualiza todos os segundos.

Mais ideias no nosso artigo de projetos para praticar programação.