Embedded Files
📌 Lista de Exercícios Práticos em JavaScript (Parte 1)
📍 Execução no Visual Studio Code – formato de script .js
🎯 Objetivos da aula:
✅ Fixar o uso de variáveis, tipos de dados, operadores e estruturas de decisão.
✅ Escrever códigos com diferentes contextos do dia a dia.
📄 Exemplo
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo 1</title>
</head>
<body>
<h2>Exemplo 1 - Estoque de Produtos</h2>
<script>
let produto = prompt("Digite o nome do produto:");
let quantidade = prompt("Digite a quantidade:");
let preco = prompt("Digite o preço unitário:");
let total = quantidade * preco;
document.write("<p>Produto: " + produto + "</p>");
document.write("<p>Quantidade: " + quantidade + "</p>");
document.write("<p>Preço unitário: R$ " + preco + "</p>");
document.write("<p>Valor total em estoque: R$ " + total + "</p>");
</script>
</body>
</html>
📌 O que é document.write?
O document.write() é um comando do JavaScript usado para escrever informações diretamente na tela do navegador, dentro da página HTML.
Ele é útil para mostrar textos, números, cálculos e resultados simples. Sempre que você usar document.write("Olá!"), o navegador vai exibir essa mensagem na tela.
✅Exemplo
document.write("Bem-vindo ao site!");
➡️ Ao executar esse código, o navegador mostrará a frase “Bem-vindo ao site!” no corpo da página.
⚠️ Importante: O document.write é ótimo para aprender e fazer testes simples, mas não é usado em sites profissionais. Em projetos reais, usamos métodos mais modernos como innerHTML e DOM.
Hora do exercício! 🏋️🔥
📁 Organização dos Arquivos da Aula 10
Para manter seus exercícios organizados, siga as instruções abaixo:
Vá até a Área de Trabalho do seu computador.
Abra a pasta chamada Programação Web.
Dentro dela, localize (ou crie) uma pasta com o seu nome completo.
Agora, dentro da pasta com seu nome, crie uma nova pasta chamada aula 10.
Todos os arquivos .html desta aula deverão ser salvos dentro da pasta aula 10.
📌 Exemplo do caminho final:
Área de Trabalho > Programação Web > João da Silva > ex1.html
Organização faz parte da prática de programação! 💻
1️⃣ Exercício 1 - Conversão de Moeda
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exercício 2</title>
</head>
<body>
<h2>Exercício 2 - Conversor de Reais para Dólar</h2>
<script>
// 1. Peça ao usuário quanto ele tem em reais.
// 2. Peça a cotação atual do dólar.
// 3. Calcule quantos dólares ele conseguiria comprar.
// 4. Exiba os dados e o resultado na tela.
</script>
</body>
</html>
2️⃣ Exercício 2 - Tempo Total de Filme
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exercício 3</title>
<style>
body {
/* fundo bege claro, texto alinhado ao centro */
}
h1 {
/* fonte itálica, cor marrom */
}
p {
/* tamanho de fonte 15px, cor cinza escuro */
}
</style>
</head>
<body>
<h1>Exercício 3 - Tempo Total de Filme</h1>
<script>
// Peça ao usuário:
// - duração do filme em horas
// - minutos extras
// Calcule o tempo total em minutos
// Mostre o resultado com document.write()
</script>
</body>
</html>
3️⃣ Exercício 3 - Soma de Três Produtos
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exercício 4</title>
</head>
<body>
<h2>Exercício 4 - Soma de Três Produtos</h2>
<script>
// 1. Peça o valor do primeiro produto.
// 2. Peça o valor do segundo produto.
// 3. Peça o valor do terceiro produto.
// 4. Some os três valores.
// 5. Mostre o valor total da compra na tela.
</script>
</body>
</html>
⚠️ O comando prompt() sempre retorna um texto (string), mesmo que o usuário digite um número.
Se os valores forem "10" + "20" + "30", o resultado será "102030" (texto), e não a soma real dos número .
✅ Solução: Number()
O Number() converte a string para número:
let num1 = prompt("Digite o valor do primeiro produto:");
num1 = Number(prod1);
4️⃣ Exercício 4 - Média de Três Notas
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exercício 5</title>
</head>
<body>
<h2>Exercício 5 - Média de Notas</h2>
<script>
// 1. Peça três notas diferentes ao usuário.
// 2. Calcule a média das três notas.
// 3. Exiba as notas e a média final na tela.
</script>
</body>
</html>
5️⃣ Exercício 5 - Cálculo de Quilometragem com Combustível
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exercício 6</title>
</head>
<body>
<h2>Exercício 6 - Distância com Combustível</h2>
<script>
// 1. Peça ao usuário quantos litros de combustível ele tem.
// 2. Peça quantos quilômetros o carro faz por litro.
// 3. Calcule quantos quilômetros ele pode rodar.
// 4. Exiba o resultado na tela com document.write().
</script>
</body>
</html>
Google Sites
Report abuse