Introdução ao Javascript
Data @11/03/2025
Professor a adevair vitorio
O que é JavaScript?
JavaScript (ou simplesmente JS) é uma linguagem de programação usada para
tornar as páginas da web dinâmicas. Enquanto HTML define a estrutura da
página e CSS cuida do estilo, o JavaScript permite adicionar interatividade,
como botões que respondem a cliques, formulários que validam informações e
animações visuais.
Entrada e Saída de Dados no JavaScript
Em JavaScript, podemos interagir com o usuário através de caixas de diálogo,
como alert , prompt e console.log . Esses métodos são muito úteis para exibir
informações e coletar dados do usuário.
🔹 alert() : Exibindo uma Mensagem
O alert() exibe uma caixa de diálogo com um texto e um botão "OK". Ele é usado
para mostrar informações ao usuário.
alert("Bem-vindo ao JavaScript!");
Quando esse código é executado, uma janela pop-up aparece com a
mensagem.
🔹 prompt() : Solicitando Informações
O prompt() permite que o usuário insira um valor. Esse valor pode ser
armazenado em uma variável para ser usado no código.
Introdução ao Javascript 1
let nome = prompt("Qual é o seu nome?");
alert("Olá, " + nome + "! Seja bem-vindo.");
1. O JavaScript exibe um campo de entrada pedindo o nome do usuário.
2. O nome digitado é armazenado na variável nome .
3. Em seguida, o alert() mostra uma mensagem personalizada.
🔹 console.log() : Exibindo no Console
O console.log() exibe informações no console do navegador, sem interromper o
fluxo do programa.
console.log("Essa mensagem será exibida no console.");
O console pode ser acessado pressionando F12 no navegador e indo até a aba
"Console".
📝JavaScript
Lista de Exercícios – Entrada e Saída de Dados em
Exercícios:
1️⃣ Saudação Simples
Peça ao usuário seu nome usando prompt().
Exiba uma mensagem de boas-vindas usando alert().
Exemplo de saída: "Olá, João! Bem-vindo ao nosso site!"
2️⃣ Calculadora de Soma
Peça dois números ao usuário.
Some esses números e mostre o resultado com alert().
Introdução ao Javascript 2
3️⃣ Verificador de Idade
Peça a idade do usuário.
Use console.log() para exibir se ele é maior de idade (18 anos ou mais).
4️⃣ Multiplicação de Números
Peça dois números ao usuário.
Multiplique os valores e exiba o resultado no console.log().
5️⃣ Boas-Vindas Personalizadas
Peça ao usuário seu nome e cidade.
Exiba uma mensagem no formato:
"Olá, Maria! Que bom saber que você é de São Paulo!"
6️⃣ Calculadora de Média
Peça ao usuário três notas.
Calcule a média das notas e exiba o resultado usando alert().
7️⃣ Dobro de um Número
Peça um número ao usuário.
Mostre o dobro desse número usando alert().
8️⃣ Tabuada de um Número
Peça um número ao usuário.
Exiba a tabuada desse número (de 1 a 10) no console.
9️⃣ Pergunta de Sim ou Não
Pergunte ao usuário se ele gosta de programação (prompt()).
Exiba uma resposta diferente para "sim" e "não" com alert().
🔟 Cálculo de Idade no Futuro
Peça o ano de nascimento do usuário.
Calcule e mostre quantos anos ele terá em 2050.
Exercícios Especiais:
Introdução ao Javascript 3
1️⃣ Simulador de Notificação Push
Peça ao usuário para inserir uma mensagem de notificação usando
prompt().
Exiba essa mensagem em um alert(), simulando uma notificação.
Exemplo: " 📢 Nova mensagem: Não se esqueça da reunião às 15h!"
2️⃣ Simulação de Login
Peça um nome de usuário e uma senha (não precisa validar a senha de
verdade).
Exiba uma mensagem de boas-vindas se o login for bem-sucedido.
Exemplo: "Bem-vindo, João!"
3️⃣ Calculadora de DPI para Telas
Peça ao usuário a largura e a altura de um dispositivo móvel em pixels.
Calcule a resolução total multiplicando os valores e exiba no console.
Exemplo: Se o usuário digitar 1080 e 1920, o console deve mostrar:
"A resolução da tela é: 2.073.600 pixels"
4️⃣ Simulação de Vibração (Apenas em Dispositivos Móveis)
Peça ao usuário um tempo de vibração em milissegundos.
Use navigator.vibrate() para fazer o dispositivo vibrar (em navegadores que
suportam).
Exemplo de código:
let tempo = prompt("Digite o tempo de vibração em milissegundos:");
navigator.vibrate(parseInt(tempo));
alert("Seu dispositivo vibrou por " + tempo + "ms!");
5️⃣ Modo Escuro e Claro
Peça ao usuário para escolher entre "claro" e "escuro" (usando prompt()).
Se escolher "escuro", altere o document.body.style.backgroundColor para
black e a cor do texto para white.
Introdução ao Javascript 4
Se escolher "claro", altere as cores para white e black.
Exemplo:
let tema = prompt("Escolha um tema: claro ou escuro?");
if (tema.toLowerCase() === "escuro") {
document.body.style.backgroundColor = "black";
document.body.style.color = "white";
} else {
document.body.style.backgroundColor = "white";
document.body.style.color = "black";
}
Introdução ao Javascript 5
