⚡ Página 4 – Primeiros Poderes de JavaScript

Agora o site vai começar a responder quando alguém clicar.

JavaScript é o poder que faz a página reagir. É como dar vida ao site.

Barra de progresso do curso
Fase atual: Página 4 • 100% desta trilha desbloqueado
Antes de começar

🧠 O que é JavaScript?

JavaScript faz coisas acontecerem quando alguém clica, digita ou interage com a página.

Missão 20

👋 Criar um botão com mensagem

Coloque isso no body:

<button onclick="alert('Olá, pequeno criador!')">
Clique aqui
</button>

Quando clicar, aparece uma mensagem na tela.

Missão 21

🎨 Botão que muda a cor do fundo

<button onclick="document.body.style.background='darkblue'">
Mudar cor
</button>

Ao clicar, o fundo da página muda.

Missão 22

📝 Trocar um texto

<p id="msg">Texto antigo</p>
<button onclick="document.getElementById('msg').innerText='Texto novo!'">
Trocar texto
</button>

O botão encontra o texto e troca o que está escrito.

Missão 23

🔢 Fazer contador de cliques

<p id="contador">Cliques: 0</p>
<button onclick="
numero++;
document.getElementById('contador').innerText='Cliques: ' + numero;
">Clique</button>

<script>
let numero = 0;
</script>

Cada clique aumenta o número.

Missão 24

🎉 Mostrar mensagem secreta

<p id="segredo" style="display:none;">
Você desbloqueou uma mensagem secreta!
</p>

<button onclick="document.getElementById('segredo').style.display='block'">
Revelar segredo
</button>

O texto fica escondido até o clique acontecer.

Missão 25

🧪 Mini laboratório de testes

Junte tudo isso em uma página só:

Essa página vira seu laboratório JavaScript.

Desafio da Página 4

🏆 Desafio JavaScript Gamer

Crie uma página chamada poderes.html com:

Se você conseguir isso, já começou a programar interação de verdade.

Missão Extra

🚀 Projeto sugerido

Crie um “Painel do Herói” com:

Isso já parece o começo de um mini jogo de navegador. Aí o menino vai achar que hackeou a Matrix com carinho.