O que é JavaScript?

O que vais aprender nesta aula:

  • A diferença entre HTML, CSS e JavaScript
  • O papel do JavaScript na web moderna
  • Como usar a consola do navegador para programar

🧠 Teoria (com Analogia e Contexto Real)

Imagina que estás a construir uma casa:

🏠 Analogia da Casa

HTML é a estrutura da casa - as paredes, portas e janelas (conteúdo estático).

CSS é a decoração - as cores das paredes, o tipo de soalho, os móveis (aparência).

JavaScript é a eletricidade e a canalização - permite que as luzes se acendam, as portas se abram automaticamente e a água flua (comportamento interativo).

Porque é que isto importa? Sem JavaScript, os websites seriam estáticos como folhetos de papel. Com JavaScript, podes criar:

  • Aplicações que respondem aos cliques do utilizador
  • Formulários que validam dados em tempo real
  • Conteúdo que se atualiza sem recarregar a página
  • Jogos, animações e experiências interativas
💡 Sabias que? JavaScript foi criado em apenas 10 dias por Brendan Eich em 1995. Originalmente chamava-se "Mocha", depois "LiveScript", e finalmente "JavaScript" para capitalizar a popularidade do Java na altura!

💻 Prática (Orientada e Progressiva)

Abre a consola do teu navegador (F12 ou Ctrl+Shift+J) e experimenta os seguintes exemplos:

Exemplo 1: O teu primeiro comando

Mostra uma mensagem simples na consola - o "Hello World" do JavaScript.

console.log("Olá, mundo!");

Exemplo 2: Fazer cálculos matemáticos

JavaScript pode fazer cálculos como uma calculadora.

console.log(25 + 17); // 42
console.log(100 / 4);  // 25

Exemplo 3: Trabalhar com texto

Concatenação (junção) de strings para criar mensagens dinâmicas.

let saudacao = "Bom dia";
let nome = "Maria";
console.log(saudacao + ", " + nome + "!"); // "Bom dia, Maria!"
⚠️
Dica de Depuração: Se vires mensagens de erro vermelhas na consola, leia-as atentamente! Elas indicam exatamente onde está o problema (linha do código) e o tipo de erro.

✅ Verificação de Conhecimento

Testa o que aprendeste com as seguintes questões de escolha múltipla.

1. Qual é a principal diferença entre HTML/CSS e JavaScript?

HTML e CSS criam conteúdo estático, enquanto JavaScript adiciona comportamento interativo às páginas web.
HTML é para mobile, CSS é para desktop e JavaScript é para tablets.
HTML e CSS são linguagens de programação, enquanto JavaScript é apenas para estilização.

2. O que acontece se escreveres console.log("Teste" (sem o parêntese de fecho)?

O código executa normalmente e mostra "Teste" na consola.
O navegador ignora a linha e continua a executar o resto do código.
O JavaScript lança um erro de sintaxe e o código não executa.

3. Porque é que a consola do navegador é uma ferramenta essencial para programadores JavaScript?

Porque permite ver erros, testar código rapidamente e depurar aplicações em tempo real.
Porque é o único lugar onde o JavaScript pode ser executado na web.
Porque todos os websites precisam de mostrar mensagens na consola para funcionar corretamente.

🧩 Desafio Prático

Cria um programa que apresente informações sobre ti na consola.

Restrições:

  • Usa pelo menos 3 comandos console.log()
  • Inclui o teu nome, idade e uma frase sobre o que esperas aprender
  • Usa variáveis para armazenar os teus dados

Exemplo de output esperado:

// Meu nome é João
// Tenho 25 anos
// Espero aprender a criar aplicações web incríveis!
// Escreve o teu código aqui
let meuNome = "João";
let minhaIdade = 25;
let objetivo = "Espero aprender a criar aplicações web incríveis!";

console.log("Meu nome é " + meuNome);
console.log("Tenho " + minhaIdade + " anos");
console.log(objetivo);
Mostrar Solução 
let meuNome = "João";
let minhaIdade = 25;
let objetivo = "Espero aprender a criar aplicações web incríveis!";

console.log("Meu nome é " + meuNome);
console.log("Tenho " + minhaIdade + " anos");
console.log(objetivo);

📌 Explicação da Solução: Esta solução usa variáveis para armazenar dados pessoais, tornando o código mais legível e fácil de atualizar. A concatenação de strings com o operador + permite criar mensagens dinâmicas. Esta abordagem é mais sustentável do que repetir os valores diretamente nos console.log().

🏠 Voltar ao Início