Embedded Files
Revisão Prática: Variáveis, Entrada de Dados, Cálculos e Formatação
🎯 Objetivo da Aula
Relembrar os principais conceitos do bimestre de forma prática e contextualizada. Os alunos irão revisar a declaração de variáveis, uso do prompt() para entrada de dados, alert() para exibição de informações, conversão com Number() e formatação de valores com toFixed(2).
📚 Introdução
Você está voltando do recesso e, antes de seguirmos com novos conteúdos, vamos revisar os principais comandos que usamos em JavaScript. Essa revisão vai te ajudar a lembrar como trabalhar com variáveis, capturar valores do usuário, fazer contas e exibir o resultado com clareza.
✅ Parte 1 — Relembrando com exemplo
Copie este exemplo abaixo e observe o que está acontecendo:
<script>
let n1 = prompt("Digite um número:");
let n2 = prompt("Digite outro número:");
// Sem conversão, o JavaScript junta os valores como texto.
alert("Sem usar Number(): " + n1 + n2); // Exemplo: se digitar 2 e 3 → mostra 23
// Com conversão, o cálculo funciona corretamente.
n1 = Number(n1);
n2 = Number(n2);
let soma = n1 + n2;
alert("Com Number(): " + soma); // Exibe 5
</script>
💻 Parte 2 — Criação da pasta e dos arquivos
Vá até sua pasta com seu nome dentro da pasta Programação para Web.
Crie uma nova pasta chamada revisao.
Dentro dela, crie 3 arquivos:
exercicio1.html
exercicio2.html
exercicio3.html
Hora do exercício! 🏋️🔥
🧪 Exercício 1 — Soma de Dois Números
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exercício 1</title>
</head>
<body>
<h2>Exercício 1 - Soma de Dois Números</h2>
<script>
// Peça ao usuário dois números com prompt()
// Converta os dois valores usando Number()
// Some os dois números e guarde o resultado em uma variável
// Mostre a soma com alert()
// Exemplo de saída: "A soma é 12"
</script>
</body>
</html>
🧪 Exercício 2 — Total de uma Compra com 3 Itens
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exercício 2</title>
</head>
<body>
<h2>Exercício 2 - Total da Compra</h2>
<script>
// Peça ao usuário o valor de 3 produtos diferentes
// Use Number() para converter os valores recebidos
// Some os três valores
// Use toFixed(2) para mostrar o total com duas casas decimais
// Mostre o resultado com alert()
// Exemplo: "O total da sua compra é R$ 74.90"
</script>
</body>
</html>
🧪 Exercício 3 — Pontuação de uma Partida
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exercício 3</title>
</head>
<body>
<h2>Exercício 3 - Pontuação de uma Partida</h2>
<script>
// Simule uma partida de um jogo onde:
// - Cada inimigo derrotado vale 10 pontos
// - Cada item especial coletado vale 15 pontos
// - Cada moeda vale 1 ponto
// Peça ao usuário:
// - Quantos inimigos ele derrotou
// - Quantos itens especiais pegou
// - Quantas moedas juntou
// Converta todos os valores com Number()
// Calcule a pontuação total
// Mostre o resultado com alert()
// Exemplo: "Sua pontuação final foi 235 pontos"
</script>
</body>
</html>
🎯 Desafio Extra — Estilizando a Página com CSS
Após finalizar os três exercícios de revisão, os alunos deverão escolher um dos arquivos criados (preferencialmente o exercicio2.html, que lida com dinheiro) e aplicar um estilo visual simples usando a tag <style>.
✅ Instruções do Desafio:
Abra o arquivo escolhido (por exemplo, exercicio2.html).
Acima da tag <script>, adicione a tag <style> dentro do <head>.
Aplique as seguintes mudanças visuais na página:
Cor de fundo clara (#4ba360 ou parecida);
Fonte sans-serif (como Arial);
Título (<h2>) centralizado e com cor branca;
Corpo do texto com padding (espaçamento interno);
Deixe o resultado mais agradável para quem abrir o arquivo no navegador.
<style>
body {
background-color: #4ba360; /* fundo claro */
font-family: Arial, sans-serif; /* fonte sem serifa */
padding: 20px; /* espaçamento interno */
text-align: center; /* centraliza o conteúdo */
}
h2 {
color: #f4f4f4; /* azul escuro */
}
</style>
Google Sites
Report abuse