Carregando...

Introdução ao JavaScript

O HTML dá estrutura à página. O CSS dá-lhe aspeto. Uma montra pronta continua calada até acontecer algo: um clique, um valor escrito, uma mensagem depois do carregamento. JavaScript é a linguagem que faz isso no navegador.

O que é JavaScript?

JavaScript é uma linguagem de programação. Escreve instruções e o navegador executa-as uma a uma. Não é marcação (isso é HTML) nem folha de estilo (isso é CSS). Na Web, o trabalho do dia a dia é o comportamento: atualizar texto, reagir ao utilizador, calcular um valor e — mais à frente neste curso — carregar dados.

Linguagem de execução, não um documento

As etiquetas HTML dão nome a pedaços de conteúdo. As regras CSS descrevem como se veem. As instruções JavaScript dizem ao computador para fazer algo: imprimir uma mensagem, alterar um nó na página ou somar dois números. Já sabe HTML suficiente para ligar um script à página. Este curso ensina a linguagem que corre dentro desse script.

📊 Página estática vs página com JavaScript

Situação Sem JavaScript Com um script curto
A página acabou de carregar O título fica exatamente como no HTML Um script pode reescrevê-lo depois do carregamento
O visitante clica num botão O botão, sozinho, não reage de forma útil Mais tarde: o código corre no clique
Precisa de um total ou de uma verificação HTML não calcula; CSS não decide JavaScript calcula e depois mostra o resultado

Mantenha as três camadas separadas. Estrutura é HTML. Aspeto é CSS. Este curso é a terceira camada: o que a página faz.

Primeiro olhar a uma instrução

Uma instrução é uma ordem. O exemplo escreve uma linha na consola de programador — ferramenta para quem programa, não a página visível. Vai usar muito a consola.

Uma primeira instrução

javascript 
console.log("Hello, JavaScript");

O que esta instrução faz

  • console.log é uma função integrada que imprime na consola
  • O texto entre aspas é uma cadeia — dados de texto
  • O ponto e vírgula termina a instrução (hábito seguro neste curso)
  • Na página ainda não muda nada; é só um registo
    Abra as ferramentas de programador (muitas vezes F12) e veja o separador Console depois de correr o script.

Ver JavaScript numa página

Para mudar o que o visitante vê, o script fala com a página. Abaixo, um parágrafo HTML começa com uma frase. Um <script> embutido encontra esse parágrafo por id e substitui o texto. O sítio certo para scripts fica na sessão seguinte; aqui basta um ficheiro.

HTML com um script embutido

html 
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Demo</title>
</head>
<body>
<h1>Welcome</h1>
<p id="msg">This line is from HTML only.</p>
<script>
document.getElementById("msg").textContent =
"JavaScript rewrote this sentence.";
</script>
</body>
</html>

O que mudou

Sem o script, o parágrafo original fica. Com o script, o navegador lê primeiro o HTML, executa as instruções e mostra a frase nova. O mesmo esqueleto — comportamento diferente após o carregamento.

JavaScript também calcula

Por ser linguagem de programação, trabalha com números e nomes, não só com etiquetas. Este exemplo mínimo não fala de cor nem de títulos. Calcula um total e regista-o. Variáveis e tipos vêm depois; aqui basta ver que o código calcula.

Um cálculo pequeno

javascript 
const price = 120000;
const taxRate = 0.09;
console.log(price + price * taxRate);

O que este curso é (e não é)

Ficamos no navegador: bases da linguagem, DOM, eventos, formulários e fetch. Não começamos com framework, Node.js nem TypeScript. Sem essas ferramentas já escreve scripts úteis para a página. As sessões opcionais são extra; não são obrigatórias no percurso principal.

Experimente

  1. Crie um ficheiro chamado intro.html.
  2. Cole o exemplo HTML com script, grave e abra no navegador.
  3. Confirme que o parágrafo mostra a frase reescrita, não o texto HTML original.
  4. Altere a cadeia em textContent para uma frase sua, grave e atualize.
  5. Opcional: acrescente console.log("Hello, JavaScript"); no mesmo <script>, grave, atualize e encontre a linha no separador Console.

Erros comuns

  • Tratar JavaScript como outra forma de escrever títulos e parágrafos — deixe a estrutura no HTML; o JS altera ou acrescenta quando for preciso
  • Esperar que o CSS reaja a um clique ou calcule um total — CSS dá estilo; não corre lógica de programa
  • Deixar a única cópia de texto importante só no script, de modo que sem JS a página fique vazia
  • Confundir a consola com a página visível: console.log não substitui um título no ecrã

Resumo

  • JavaScript é uma linguagem de programação que acrescenta comportamento às páginas no navegador
  • HTML estrutura o conteúdo; CSS controla a apresentação; JavaScript decide o que a página faz
  • Uma instrução é uma ordem, como console.log("Hello, JavaScript");
  • Um script embutido pode encontrar um elemento e alterar o textContent após o carregamento
  • JavaScript também calcula valores, não toca só na marcação
  • Este curso fica no navegador e não exige um framework
  • Pratique editando um script pequeno e atualizando o navegador

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
7
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 3
Javascript Tutorial