Sumário

Aula 1 – Primeiros Passos e o famoso “Hello, World!” ................................................... 5

1.1. O que é o JavaScript .......................................................................................... 5
1.2. Preparando o Ambiente ..................................................................................... 5
1.3. Criando seu primeiro arquivo HTML ....................................................................... 5
1.4. Entendendo o Código ........................................................................................ 6
1.5. Onde mais posso ver o resultado ....................................................................... 7
1.6. JavaScript Interno x Externo ............................................................................... 7
1.7. Exercício Prático ............................................................................................... 8
AULA 2 – Variáveis e Tipos de Dados ............................................................................ 9
2.1. O que é uma variável ......................................................................................... 9
2.2. Criando Variáveis em JavaScript ........................................................................ 9
2.3. Regras de nomes de variáveis .......................................................................... 10
2.4. Tipos de Dados em JavaScript ......................................................................... 10
2.5. Trabalhando com Strings e Números ............................................................... 11
2.6. Interação com o Usuário ................................................................................. 12
2.7. Convertendo Tipos .......................................................................................... 12
2.8. Exercícios Práticos .......................................................................................... 13
AULA 3 – Operadores e Expressões ............................................................................ 14
3.1. O que é uma expressão? ................................................................................. 14
3.2. Operadores aritméticos .................................................................................. 14
3.3. Operadores de atribuição ................................................................................ 15
3.4. Precedência de Operadores ............................................................................ 16
3.5. Operadores de comparação ............................................................................ 16
2.6. Operadores lógicos ......................................................................................... 17
2.7. Misturando tudo: expressões compostas ......................................................... 17
2.8 Exercícios Práticos ........................................................................................... 18
AULA 4 – Estruturas Condicionais .............................................................................. 20
4.1. O que é uma estrutura condicional .................................................................. 20
4.2. A estrutura básica do if .................................................................................... 20
4.3. Adicionando o else.......................................................................................... 20
4. 4. Testando múltiplas condições – else if ............................................................ 21
 4.5. Aninhando condições...................................................................................... 21

4.6. O operador ternário (?) .................................................................................... 22

4.7. Aplicando interatividade .................................................................................. 22
AULA 5 – Estruturas de Repetição (Loops) .................................................................. 30
5.1. O que é uma estrutura de repetição ................................................................. 30
5.2. Estrutura for – Ideal quando sabemos o limite .................................................. 30
5.3. Estrutura while – Ideal quando não sabemos o limite ....................................... 31
5.4. Estrutura do... while – Executa pelo menos uma vez ......................................... 31
5.5. Parando loops com break e continue ............................................................... 32
5.6. Loop dentro de outro loop (aninhamento) ........................................................ 33
5.7. Exercícios Práticos .......................................................................................... 33
AULA 6 – Funções: Reaproveitando e Organizando Código.......................................... 36
6.1. O que é uma função? ...................................................................................... 36
6.2. Estrutura básica de uma função ...................................................................... 36
6.3. Funções com parâmetros ................................................................................ 37
6.5. Escopo de variáveis ......................................................................................... 38
6.6. Parâmetros opcionais e valores padrão............................................................ 38
6.7. Funções anônimas e Arrow Functions .............................................................. 39
6.8. Exercícios Práticos .......................................................................................... 39
AULA 7 – Arrays e Objetos:mazenando e Organizando Dados...................................... 42
7.1. O problema das variáveis soltas ...................................................................... 42
7.2. Arrays ("listas" de valores) ............................................................................... 42
7.3. Métodos úteis de Array .................................................................................... 43
7. 4. Percorrendo Arrays com for ............................................................................. 43
7.5. Exercício Prático 1 ........................................................................................... 44
7. 6. Objetos – Estruturas com nome e valor ........................................................... 44
7.7. Iterando sobre um objeto ................................................................................ 45
7.8. Criando arrays de objetos ................................................................................ 45
7.9. Exercício Prático 2 ........................................................................................... 46
7.10. Exercício Prático 3 ......................................................................................... 46
AULA 8 – DOM (Document Object Model): Manipulando a Página com JavaScript ........ 48
8.1. O que é o DOM ................................................................................................ 48
 8.2. Selecionando elementos HTML ....................................................................... 48
8.3. Alterando conteúdo ........................................................................................ 50
8.4. Alterando estilos via JavaScript ........................................................................ 50
8.5. Criando e adicionando elementos ................................................................... 51
8.6. Removendo elementos ................................................................................... 51
8.7. Exemplo completo: Dinamismo em ação ......................................................... 51
8.8. Exercício Prático 1 ........................................................................................... 52
8.9. Exercício Prático 2 ........................................................................................... 53
8.10. Exercício Prático 3 ......................................................................................... 53
AULA 9 – Eventos: Tornando a Página Interativa .......................................................... 55
9.1. O que são eventos? ......................................................................................... 55
9.2. Usando addEventListener().............................................................................. 55
9.3. Tipos de eventos mais usados ......................................................................... 56

9.4. O objeto do evento .......................................................................................... 57

9.5. Removendo eventos........................................................................................ 57
9.6. Exemplo completo: Interação com botão e texto .............................................. 58
9.7. Exercício Prático 1 ........................................................................................... 58
9.8. Exercício Prático 2 – Validação em tempo real .................................................. 59
9.9. Exercício Prático 3 – Modo Claro/Escuro com alternância ................................. 60
9.10. Exercício Prático 3 – “To-Do List” (Versão Base) .............................................. 60
AULA 1 – PRIMEIROS PASSOS E O FAMOSO “HELLO, WORLD!”

1.1. O QUE É O JAVASCRIPT

JavaScript (ou JS) é uma linguagem de programação interpretada feita para dar vida às
páginas da web.

Enquanto o HTML estrutura o conteúdo e o CSS define o estilo (cores, tamanhos,

fontes), o JavaScript é o que adiciona comportamento lógico, faz os botões
responderem, os formulários validarem, o conteúdo mudar dinamicamente.

Pense assim:

• HTML = esqueleto

• CSS = roupa e aparência

• JavaScript = cérebro e movimento

Sem o JS, a web seria estática.

1.2. PREPARANDO O AMBIENTE

Vamos precisar de:

1. Um navegador moderno (Chrome, Edge, Firefox, etc.).

2. Um editor de texto (Visual Studio Code - VS Code, Notepad++, etc.).

Vamos criar uma pasta para o curso, por exemplo:

JS-Web/

├- aula1/

│ └ [Link]

Abra essa pasta no VS Code (ou o seu editor preferido) e crie o arquivo [Link].

1.3. CRIANDO SEU PRIMEIRO ARQUIVO HTML

No VS Code, digite o seguinte e salve:

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Primeiro Script JS</title>

</head>

<body>

<h1>Bem-vindo ao JavaScript!</h1>

<script>

// Nosso primeiro código JavaScript vai aqui!

alert("Olá, mundo!");

</script>

</body>

</html>

Agora, abra o arquivo [Link] no navegador.

Pronto: vai aparecer uma caixinha de alerta dizendo:

Olá, mundo!

Parabéns, esse é o seu primeiro script JavaScript funcionando dentro de uma página
Web!

1.4. ENTENDENDO O CÓDIGO

Vamos entender o que fizemos:

<script>

alert("Olá, mundo!");

</script>

• A tag <script> indica que o conteúdo dentro dela é um código JavaScript.

• O comando alert() serve para mostrar uma caixinha de mensagem no navegador.

• O texto dentro dos parênteses precisa estar entre aspas, pois é

uma string (sequência de caracteres).

Obs.: tudo entre // é um comentário, ou seja, o navegador ignora. Serve apenas para
deixar anotações dentro do código.
1.5. ONDE MAIS POSSO VER O RESULTADO
Muitas vezes, o JavaScript não mostra coisas direto na tela.

Por isso, usamos o Console do Navegador para acompanhar o que o código faz “nos
bastidores”.

Vamos testar:

Troque dentro da tag <script>:

<script>

[Link]("Olá, mundo!");

</script>

Agora:

1. Abra a página no navegador;

2. Aperte F12;

3. Vá na aba Console;

Você verá que a frase “Olá, mundo!” aparece lá dentro.

O [Link]() é o método mais usado pelos programadores para testar e

acompanhar o funcionamento do código.

1.6. JAVASCRIPT INTERNO X EXTERNO

Nosso código está dentro do HTML, mas nem sempre queremos isso.

Podemos separar o JS num arquivo próprio. Fica mais organizado.

Crie um novo arquivo chamado [Link] na mesma pasta:

// [Link]

alert("Olá, mundo!");

[Link]("Olá, console!");

Agora altere o HTML:

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 <title>JS Externo</title>

</head>

<body>

<h1>Usando arquivo JavaScript externo</h1>

// JavaScript externo

<script src="[Link]"></script>

</body>

</html>

Note o detalhe:

• src="[Link]" indica o caminho do arquivo de script.

• O <script> geralmente é colocado no final do <body>, porque assim o HTML

carrega primeiro e evita erros de elementos “não encontrados”.

1.7. EXERCÍCIO PRÁTICO

Exercício: usar o que aprendemos para criar uma saudação personalizada.

Instruções:

1. Dentro do seu arquivo [Link], adicione:

o Um prompt() perguntando o nome do usuário.

o Um alert() dando boas-vindas com o nome que ele digitou.

Solução:

// [Link]

let nome = prompt("Qual é o seu nome?");

alert("Olá, " + nome + "! Seja bem-vindo(a) ao mundo do JavaScript!");

AULA 2 – VARIÁVEIS E TIPOS DE DADOS

2.1. O QUE É UMA VARIÁVEL

Uma variável é um endereço dentro da memória do computador, onde você guarda
informações para usar mais tarde.

Pense assim:

Você escreve um número num papel e o coloca dentro de uma gaveta rotulada. Sempre
que precisar desse número, basta abrir a gaveta pelo nome da etiqueta.

No JavaScript, você faz algo parecido:

let nome = "Paulo";

let idade = 28;

Essas linhas dizem:

• “Crie uma variável chamada nome e guarde nela o valor "Paulo".

• “Crie uma variável chamada idade e guarde o valor 28.”

Podemos então usar essas variáveis em qualquer lugar do código:

alert("Olá, " + nome + "! Você tem " + idade + " anos.");

O navegador vai montar a mensagem com base nos valores guardados.

2.2. CRIANDO VARIÁVEIS EM JAVASCRIPT

Existem três maneiras de declarar variáveis:

Palavra-chave Pode ser alterada? Escopo Uso atual

var Sim Global ou de Antiga. Ainda

função funciona, mas caiu
em desuso

let Sim Bloco {} Recomendado para

valores que mudam

const Não Bloco {} Recomendado para

valores fixos

Exemplos:

var cidade = "Manaus";

let cor = "Azul";

const pais = "Brasil";

Tentando mudar um valor:

cor = "Verde"; // OK

pais = "Japão"; // ERRO! const não permite reatribuição

Dica: Evite var para novos códigos. Hoje em dia, usamos let e const em praticamente
100% dos casos.

2.3. REGRAS DE NOMES DE VARIÁVEIS

O JavaScript é flexível, mas há algumas regrinhas importantes:

• O nome não pode começar com número (ex.: 1nome ).

• Pode conter letras, números e _ ou $.

• Distingue maiúsculas e minúsculas (ex.: Nome ≠ nome).

• Evite acentos e espaços.

• Use camelCase para nomes compostos:

let primeiroNome = "Paulo";

let idadeUsuario = 30;

2.4. TIPOS DE DADOS EM JAVASCRIPT

JavaScript é uma linguagem dinamicamente tipada, ou seja, uma mesma variável pode
guardar coisas de tipos diferentes ao longo do tempo.

Tipos mais usados:

Tipo Exemplo Descrição

String "Olá, mundo!" Textos entre aspas simples, duplas ou

crases

Number 42, 3.14 Números inteiros ou decimais

Boolean true / false Valores lógicos (verdadeiro ou falso)

Undefined – Variável criada, mas sem valor atribuído

Null null Valor nulo intencional

 Object {nome: "Paulo", idade: 28} Estrutura com múltiplas informações

Array [1, 2, 3] Lista de valores

Exemplo prático:

let texto = "Bem-vindo!";

let numero = 15;

let ligado = true;

let nada; // undefined

let nulo = null;

let reg = {nome: "Paulo", idade: 28};

let vetor = [1, 2, 3];

// let vetor = new Array(1, 2, 3);

[Link](typeof texto); // string

[Link](typeof numero); // number

[Link](typeof ligado); // boolean

[Link](typeof nada); // undefined

[Link](typeof nulo); // object (curiosamente!)

[Link](typeof reg); // object

[Link](typeof vetor); // object

A função typeof mostra o tipo de dado da variável.

2.5. TRABALHANDO COM STRINGS E NÚMEROS

2.5.1. Concatenação de Strings:

let nome = "Paulo";

let saudacao = "Olá, " + nome + "!";

[Link](saudacao);
2.5.2. Template Strings (modernas e elegantes):

let nome = "Paulo";

let idade = 28;

[Link](`Olá, ${nome}! Você tem ${idade} anos.`);

(Note o uso de crases ` — facilitam colocar variáveis no meio do texto).

2.5.3. Operações com números:

let x = 10;

let y = 3;

[Link](x + y); // Soma

[Link](x - y); // Subtração

[Link](x * y); // Multiplicação

[Link](x / y); // Divisão

[Link](x % y); // Resto da divisão

2.6. INTERAÇÃO COM O USUÁRIO

Agora podemos combinar tudo e começar uma conversa com o usuário:

let nome = prompt("Qual é o seu nome?");

let idade = prompt("Quantos anos você tem?");

alert(`Olá, ${nome}! Você tem ${idade} anos.`);

Lembrando: o prompt() retorna sempre uma string. Se for fazer cálculos com o valor
digitado, precisa converter pra número.

2.7. CONVERTENDO TIPOS

O JavaScript permite converter manualmente os valores:

let numero = prompt("Digite um número:");

let doblo = Number(numero) * 2;

alert(`O dobro de ${numero} é ${doblo}.`);

Funções úteis:

• Number() → converte para número

• String() → converte para texto

• Boolean() → converte para verdadeiro/falso

2.8. EXERCÍCIOS PRÁTICOS

Exercício 1:

1. Peça o nome do usuário (prompt).

2. Peça a idade.

3. Mostre na tela uma saudação usando template strings.

4. Em outro alert(), calcule e mostre a idade dobrada.

Solução:

let nome = prompt("Qual é o seu nome?");

let idade = Number(prompt("Quantos anos você tem?"));

alert(`Olá, ${nome}! Você tem ${idade} anos.`);

alert(`Se tivesse o dobro, você teria ${idade * 2} anos!`);

Exercício 2:

1. Peça ao usuário o ano de nascimento e calcule automaticamente a idade.

2. Exiba uma mensagem personalizada dependendo da idade.

Solução:

let nascimento = Number(prompt("Em que ano você nasceu?"));

let anoAtual = new Date().getFullYear();

let idade = anoAtual - nascimento;

alert(`Você tem aproximadamente ${idade} anos!`);

AULA 3 – OPERADORES E EXPRESSÕES

3.1. O QUE É UMA EXPRESSÃO?

Uma expressão é qualquer combinação de valores, variáveis e operadores que o
JavaScript consegue calcular e retornar um resultado.

Exemplo simples:

10 + 20

Resultado: 30

Outros exemplos:

let a = 5;

let b = 10;

let resultado = a * b; // expressão com variáveis

[Link](resultado); // 50

Dica: O valor final que o programa calcula é chamado de avaliação da expressão.

3.2. OPERADORES ARITMÉTICOS

São usados para executar cálculos entre números.

Operador Descrição Exemplo Resultado

+ Adição 5+3 8

- Subtração 8-2 6

* Multiplicação 4*3 12

/ Divisão 10 / 2 5

% Resto da divisão 10 % 3 1

** Exponenciação 2 ** 3 8

Exemplo:

let n1 = 7;
let n2 = 3;

[Link](n1 + n2); // 10

[Link](n1 % n2); // 1

[Link](n1 ** n2); // 343

Dica: o operador + também serve pra concatenar strings!

let nome = "Paulo";

let saudacao = "Olá, " + nome + "!";

[Link](saudacao);

(Mais adiante veremos como isso muda dependendo dos tipos envolvidos.)

3.3. OPERADORES DE ATRIBUIÇÃO

Além do simples =, podemos unir operadores aritméticos e economizar código:

Operador Equivalente a Exemplo

+= x=x+y x += 5

-= x=x-y x -= 2

*= x=x*y x *= 3

/= x=x/y x /= 2

**= x = x ** y x **= 2

Exemplo:

let n = 10;

n += 5; // 15

n *= 2; // 30

[Link](n);
3.4. PRECEDÊNCIA DE OPERADORES
Assim como em matemática, há uma ordem de execução.

1. Parênteses ()

2. Exponenciação **

3. Multiplicação, Divisão e Resto * / %

4. Adição e Subtração + -

Exemplo:

let resultado = 10 + 2 * 3;

[Link](resultado); // 16 (multiplica antes!)

Quer forçar outra ordem?

let resultado = (10 + 2) * 3;

[Link](resultado); // 36

3.5. OPERADORES DE COMPARAÇÃO

Esses operadores avaliam se uma condição é verdadeira ou falsa e retornam
um booleano: true ou false.

Operador Descrição Exemplo Resultado

== Igualdade (valor) 5 == "5" true

=== Igualdade estrita 5 === "5" false

(valor + tipo)

!= Diferença (valor) 5 != "5" false

!== Diferença estrita 5 !== "5" true

> Maior que 8>6 true

< Menor que 3<5 true

>= Maior ou igual 4 >= 4 true

<= Menor ou igual 7 <= 6 false

 Dica: use sempre === e !==.

2.6. OPERADORES LÓGICOS

Esses operadores permitem combinar comparações e construir expressões
complexas.

Operador Nome Resultado

Só é true se ambos os lados forem

&& AND (E)
verdadeiros

É true se qualquer um dos lados for

|| OR (OU)
verdadeiro

! NOT (NÃO) Inverte um valor lógico

Exemplo:

let idade = 20;

let temCarteira = false;

[Link](idade >= 18 && temCarteira); // false

[Link](idade >= 18 || temCarteira); // true

[Link](!temCarteira); // true

2.7. MISTURANDO TUDO: EXPRESSÕES COMPOSTAS

Agora que sabemos calcular, comparar e combinar, podemos criar lógicas mais
interessantes:

let a = 10;

let b = 5;

let c = 15;

let resultado = (a > b && c > a) || b === 5;

[Link](resultado);
Explicando passo a passo:

• a > b → true

• c > a → true

• true && true → true

• b === 5 → true

• true || true → true // resultado

2.8 EXERCÍCIOS PRÁTICOS

Exercício 1:

Crie um arquivo [Link] e adicione:

let num1 = Number(prompt("Digite o primeiro número:"));

let num2 = Number(prompt("Digite o segundo número:"));

let soma = num1 + num2;

let media = (num1 + num2) / 2;

alert(`A soma é ${soma} e a média é ${media}.`);

Solução:

let num1 = Number(prompt("Digite o primeiro número:"));

let num2 = Number(prompt("Digite o segundo número:"));

let soma = num1 + num2;

let media = soma / 2;

if (media >= 10) {

alert(`A soma é ${soma} e a média é ${media}. A média é maior ou igual a 10.`);

} else {

alert(`A soma é ${soma} e a média é ${media}. A média é menor que 10.`);

}
Exercício 2:

Escreva um programa de 4 linhas que:

1. Peça dois números.

2. Exibe somas, diferenças, multiplicações e divisões no console.

Solução:

// 1. Solicita dois números ao usuário

let num1 = Number(prompt("Digite o primeiro número:"));

let num2 = Number(prompt("Digite o segundo número:"));

// 2. Realiza as operações básicas

let soma = num1 + num2;

let diferenca = num1 - num2;

let multiplicacao = num1 * num2;

let divisao = num1 / num2;

// 3. Exibe os resultados no console

[Link](" Resultados das operações:");

[Link](`• Soma: ${soma}`);

[Link](`• Diferença: ${diferenca}`);

[Link](`• Multiplicação: ${multiplicacao}`);

[Link](`• Divisão: ${divisao}`);

AULA 4 – ESTRUTURAS CONDICIONAIS

4.1. O QUE É UMA ESTRUTURA CONDICIONAL

No mundo real, a gente toma decisões o tempo todo:

“Se estiver chovendo, levo guarda-chuva. Senão, vou de bicicleta.”

O JavaScript segue o mesmo princípio. Essas escolhas no código são chamadas

de estruturas condicionais, trechos que dizem ao programa o que deve acontecer
dependendo de uma condição ser verdadeira ou falsa.

4.2. A ESTRUTURA BÁSICA DO IF

A palavra if significa “se”. Com ela, o programa executa um bloco de código somente
se a condição for verdadeira.

let idade = 18;

if (idade >= 18) {

[Link]("Você é maior de idade.");

Se a condição idade ≥ 18 for verdadeira, o código dentro das chaves {} será executado.
Caso contrário, será ignorado.

4.3. ADICIONANDO O ELSE

E se quisermos outra ação quando a condição for falsa? Usamos o else, que significa
“senão”.

let idade = 16;

if (idade >= 18) {

[Link]("Você pode entrar.");

} else {

[Link]("Desculpe, entrada permitida apenas para maiores de idade.");

Aqui, como idade é 16, o primeiro bloco é ignorado e o segundo é executado.

4. 4. TESTANDO MÚLTIPLAS CONDIÇÕES – ELSE IF
Às vezes há mais de duas opções possíveis. Para isso, usamos o else if (leia: “senão,
se”).

let nota = 7;

if (nota >= 9) {

[Link]("Excelente! Parabéns!");

} else if (nota >= 7) {

[Link]("Boa nota!");

} else if (nota >= 5) {

[Link]("Você passou, mas pode melhorar!");

} else {

[Link]("Infelizmente, reprovado.");

O JavaScript lê as condições de cima pra baixo e para quando encontra a primeira

verdadeira. As demais são ignoradas.

4.5. ANINHANDO CONDIÇÕES

Você também pode colocar um if dentro de outro if, mas cuidado pra não perder a
clareza do código.

let idade = 25;

let temCarteira = true;

if (idade >= 18) {

if (temCarteira === true) {

[Link]("Pode dirigir!");

} else {

[Link]("Tem idade, mas precisa da carteira.");

} else {
 [Link]("Menor de idade, não pode dirigir.");

Esse tipo de estrutura é chamada de condicional aninhada.

Dica: Conforme o código cresce, é melhor simplificá-lo usando operadores

lógicos com && e ||.

4.6. O OPERADOR TERNÁRIO (?)

Existe uma forma resumida de escrever condicionais simples: o operador ternário.
Sintaxe:

(condição) ? valorSeVerdadeiro : valorSeFalso;

Exemplo:

let idade = 20;

let mensagem = (idade >= 18) ? "Maior de idade" : "Menor de idade";

[Link](mensagem);

O operador ternário é ótimo pra expressões rápidas, mas não substitui o if em casos que
exigem vários comandos.

4.7. APLICANDO INTERATIVIDADE

Vamos unir tudo e criar scripts que “conversam” com o usuário.

Exemplo 1: Verificando idade

let idade = Number(prompt("Quantos anos você tem?"));

if (idade >= 18) {

alert("Você pode acessar o conteúdo!");

} else {

alert("Acesso restrito a maiores de idade.");

}
Exemplo 2: Reconhecendo números pares e ímpares

let numero = Number(prompt("Digite um número:"));

if (numero % 2 === 0) {

[Link]("O número é par.");

} else {

[Link]("O número é ímpar.");

Exemplo 3: Usando operador ternário

let nota = Number(prompt("Digite sua nota:"));

let resultado = (nota >= 7) ? "Aprovado" : "Reprovado";

alert(`Status: ${resultado}`);

4.8. Exercícios Práticos

Exercício 1:

Escreva um script que:

1. Peça o ano de nascimento do usuário.

2. Calcule automaticamente a idade.

3. Mostre se ele pode ou não votar nas eleições (idade ≥ 16).

Solução:

let nascimento = Number(prompt("Em que ano você nasceu?"));

let anoAtual = new Date().getFullYear();

let idade = anoAtual - nascimento;

if (idade >= 16) {

alert(`Você tem ${idade} anos. Pode votar!`);

} else {
 alert(`Você tem ${idade} anos. Ainda não pode votar.`);

Exercício 2:

Monte um script que:

1. Pergunta duas notas.

2. Calcula a média.

3. Exibe a situação do aluno:

o Média ≥ 7 → “Aprovado”

o De 5 a 6.9 → “Recuperação”

o Abaixo de 5 → “Reprovado”

Solução:

// Pede duas notas ao usuário

let nota1 = Number(prompt("Digite a primeira nota:"));

let nota2 = Number(prompt("Digite a segunda nota:"));

// Calcula a média das duas notas

let media = (nota1 + nota2) / 2;

// Verifica a situação do aluno de acordo com a média

let situacao = ""; // variável para armazenar o resultado

if (media >= 7) {

situacao = "Aprovado";

} else if (media >= 5 && media < 7) {

situacao = "Recuperação";

} else {

situacao = "Reprovado";

}
// Exibe o resultado final no console e também na tela

[Link](`Notas: ${nota1} e ${nota2}`);

[Link](`Média: ${media}`);

[Link](`Situação: ${situacao}`);

alert(`Média: ${media}\nSituação: ${situacao}`);

Exercício 3:

Crie um script que simule um sistema simples de login:

Solução:

// Sistema simples de login

// Definindo um usuário e senha corretos (como se viessem do banco de dados)

const usuarioCorreto = "admin";

const senhaCorreta = "12345";

// Pedindo ao usuário as credenciais

let usuarioDigitado = prompt("Digite seu nome de usuário:");

let senhaDigitada = prompt("Digite sua senha:");

// Verificando se o login está correto

if (usuarioDigitado === usuarioCorreto && senhaDigitada === senhaCorreta) {

alert(" Login realizado com sucesso! Bem-vindo, " + usuarioDigitado + "!");

[Link]("Usuário autenticado com sucesso.");

} else {

alert(" Usuário ou senha incorretos. Tente novamente.");

[Link]("Falha no login — credenciais inválidas.");

}
 Dica: Tente tornar o sistema mais robusto depois, por exemplo, usando condicionais
aninhadas ou ternário pra respostas customizadas.

Versão completa (HTML e JS):

HTML ([Link])

<!DOCTYPE html>

<html lang="pt-BR">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Sistema de Login</title>

<link rel="stylesheet" href="[Link]">

</head>

<body>

<div class="container">

<h2>Login de Acesso</h2>

<form id="loginForm">

<label for="usuario">Usuário:</label>

<input type="text" id="usuario" placeholder="Digite seu usuário" required>

<label for="senha">Senha:</label>

<input type="password" id="senha" placeholder="Digite sua senha" required>

<button type="submit">Entrar</button>

</form>

<p id="mensagem"></p>

</div>

<script src="[Link]"></script>

</body>

</html>
CSS ([Link])

body {

font-family: Arial, sans-serif;

background-color: #f1f1f1;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

.container {

background-color: #fff;

padding: 25px 40px;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0,0,0,0.1);

width: 300px;

h2 {

text-align: center;

color: #333;

label {

display: block;

margin-top: 15px;

font-weight: bold;

}
input {

width: 100%;

padding: 8px;

margin-top: 5px;

border: 1px solid #ccc;

border-radius: 5px;

button {

width: 100%;

margin-top: 20px;

padding: 10px;

background-color: #007bff;

border: none;

color: white;

border-radius: 5px;

font-size: 16px;

cursor: pointer;

button:hover {

background-color: #0056b3;

#mensagem {

text-align: center;

margin-top: 15px;

font-weight: bold;

}
JS ([Link])

// Definindo as credenciais corretas

const usuarioCorreto = "admin";

const senhaCorreta = "12345";

// Capturando elementos

const form = [Link]("loginForm");

const msg = [Link]("mensagem");

// Adicionando o evento de envio do formulário

[Link]("submit", function(event) {

[Link](); // Impede o reload da página

const usuario = [Link]("usuario").[Link]();

const senha = [Link]("senha").[Link]();

// Verificando as credenciais

if (usuario === usuarioCorreto && senha === senhaCorreta) {

[Link] = "green";

[Link] = " Login realizado com sucesso!";

[Link]("Login correto!");

} else {

[Link] = "red";

[Link] = " Usuário ou senha incorretos.";

[Link]("Falha no login.");

});
AULA 5 – ESTRUTURAS DE REPETIÇÃO (LOOPS)

5.1. O QUE É UMA ESTRUTURA DE REPETIÇÃO

Uma estrutura de repetição (ou loop) permite executar o mesmo bloco de código
várias vezes, normalmente até que uma condição seja satisfeita.

Em JavaScript, temos três principais estruturas de repetição:

• for

• while

• do... while

5.2. ESTRUTURA FOR – IDEAL QUANDO SABEMOS O LIMITE

A estrutura for é usada quando sabemos quantas vezes queremos repetir.
Ela junta em uma só linha:

1. A inicialização (onde a contagem começa)

2. A condição (até quando repetir)

3. O incremento (quanto aumenta/decrementa por vez)

Sintaxe:

for (inicialização; condição; incremento) {

// código repetido

Exemplo prático:

for (let i = 1; i <= 5; i++) {

[Link](`Contando... número ${i}`);

Explicando passo a passo:

1. let i = 1 → começa em 1

2. i <= 5 → repete até 5

3. i++ → soma +1 a cada volta

4. Resultado: exibe 1, 2, 3, 4, 5
Exemplo 2 – Tabuada:

let numero = Number(prompt("Digite um número:"));

for (let i = 1; i <= 10; i++) {

[Link](`${numero} x ${i} = ${numero * i}`);

5.3. ESTRUTURA WHILE – IDEAL QUANDO NÃO SABEMOS O LIMITE

A estrutura while executa um bloco enquanto a condição for verdadeira.
Usamos quando não sabemos exatamente quantas vezes o loop deve rodar.

Sintaxe:

while (condição) {

// código repetido

Exemplo prático:

let contador = 1;

while (contador <= 5) {

[Link](`Passo ${contador}`);

contador++; // importante! senão vira loop infinito

Aqui, enquanto contador for menor ou igual a 5, o bloco se repete.

5.4. ESTRUTURA DO... WHILE – EXECUTA PELO MENOS UMA VEZ

A diferença do do... while é que ele executa primeiro, e só depois testa a condição.
Ou seja, o bloco roda pelo menos uma vez, mesmo que a condição seja falsa.

Sintaxe:

do {

// código repetido

} while (condição);
Exemplo:

let senha;

do {

senha = prompt("Digite a senha (dica: 1234):");

} while (senha !== "1234");

alert("Acesso permitido!");

Nesse caso, mesmo que a pessoa acerte a senha de primeira, o código precisa rodar uma
vez antes da checagem.

5.5. PARANDO LOOPS COM BREAK E CONTINUE

Às vezes, queremos interromper um loop antes do fim, usamos o break. Ou, pular
apenas uma iteração específica, com o continue.

Exemplo com break:

for (let i = 1; i <= 10; i++) {

if (i === 5) {

[Link]("Parei no 5!");

break; // encerra completamente o laço

[Link](i);

Exemplo com continue:

for (let i = 1; i <= 5; i++) {

if (i === 3) {

[Link]("Pulei o 3.");

continue; // pula apenas esta volta

[Link](i);

}
5.6. LOOP DENTRO DE OUTRO LOOP (ANINHAMENTO)
Também é possível combinar loops, exemplo clássico: tabuada completa.

for (let i = 1; i <= 3; i++) {

[Link](`Tabuada do ${i}:`);

for (let j = 1; j <= 3; j++) {

[Link](`${i} x ${j} = ${i * j}`);

Resultado: o primeiro for controla a tabuada principal e o segundo multiplica.

É importante controlar com cuidado para não criar loops infinitos.

5.7. EXERCÍCIOS PRÁTICOS

Exercício 1:

Crie um script que:

1. Pergunta um número final.

2. Exibe a contagem de 1 até esse número no console.

Solução:

let limite = Number(prompt("Contar até quanto?"));

for (let i = 1; i <= limite; i++) {

[Link](i);

Exercício 2:

Crie um script que:

1. Recebe um número e soma todos de 1 até ele.

2. Mostra o resultado final.

 Solução:

let numero = Number(prompt("Digite um número:"));

let soma = 0;

for (let i = 1; i <= numero; i++) {

soma += i;

alert(`A soma de 1 até ${numero} é ${soma}`);

(Excelente exercício pra reforçar lógica e controle de variáveis!)

Exercício 3:

Crie um menu simples que continua exibindo opções até o usuário decidir sair.

Solução:

let opcao;

do {

opcao = prompt("Escolha uma opção:\n1 - Olá\n2 - Ajuda\n3 - Sair");

if (opcao === "1") {

alert("Olá, usuário!");

} else if (opcao === "2") {

alert("Ajuda indisponível no momento.");

} else if (opcao !== "3") {

alert("Opção inválida.");

} while (opcao !== "3");

alert("Programa encerrado!");
Exercício 4:

Monte um programa que:

1. Pergunta um número inicial.

2. Mostra uma contagem regressiva até 0.

3. Exibe “Fogo!” no final.

Solução:

let inicio = Number(prompt("Contagem regressiva a partir de:"));

while (inicio >= 0) {

[Link](inicio);

inicio--;

[Link](" Fogo!");
AULA 6 – FUNÇÕES: REAPROVEITANDO E ORGANIZANDO CÓDIGO

6.1. O QUE É UMA FUNÇÃO?

Uma função é um bloco de código nomeado que faz uma tarefa específica e pode ser
reutilizado várias vezes.

Ela existe pra evitar repetição, organizar o código e facilitar manutenção.

Analogia simples: Imagine uma cafeteira. Toda vez que você quer café, não precisa
construir uma máquina do zero, só chama a função “fazerCafé()”.

function fazerCafe() {

[Link]("Colocando o pó...");

[Link]("Aquecendo a água...");

[Link]("Café pronto!");

Chamando a função:

fazerCafe();

Sempre que chamamos fazerCafe(), o código interno é executado novamente.

6.2. ESTRUTURA BÁSICA DE UMA FUNÇÃO

Sintaxe tradicional:

function nomeDaFuncao() {

// comandos aqui

Chamando a função:

nomeDaFuncao();

Exemplo prático:

function saudacao() {

alert("Olá! Seja bem-vindo(a)!");

saudacao();
A cada vez que executamos saudacao(), a mensagem aparece novamente.

6.3. FUNÇÕES COM PARÂMETROS

Podemos deixar as funções flexíveis, passando valores de fora pra dentro.
Esses valores são chamados parâmetros (ou argumentos).

function cumprimentar(nome) {

[Link](`Olá, ${nome}! Tudo bem?`);

cumprimentar("Paulo");

cumprimentar("Alessandra");

cumprimentar("Laís");

cumprimentar("Beatriz");

Aqui, nome é a variável local da função, cada execução recebe um valor diferente.

6.4. Funções com retorno (return)

Nem toda função precisa só “mostrar” algo — muitas vezes precisa calcular e devolver
um valor, pra ser usado em outro lugar.

function somar(a, b) {

return a + b;

let resultado = somar(5, 7);

[Link](`O resultado da soma é ${resultado}`);

Explicando:

• return encerra a função e devolve o valor calculado.

• Podemos armazenar esse resultado em uma variável ou usá-lo direto em outra

expressão.

Exemplo:

[Link](somar(2, 3) * 4); // 20
6.5. ESCOPO DE VARIÁVEIS
O escopo define onde uma variável “vive” e onde ela pode ser acessada.

Escopo global: Variáveis criadas fora de funções → visíveis em qualquer parte do código.

let mensagem = "Olá, mundo!";

function exibir() {

[Link](mensagem); // Funciona!

Escopo local: Variáveis criadas dentro da função → só existem ali.

function teste() {

let local = "Sou interna!";

[Link](local);

teste();

[Link](local); // ERRO! Não existe fora da função

Boa prática: use variáveis locais sempre que possível. Reduz o risco de conflitos e
deixa o código mais previsível.

6.6. PARÂMETROS OPCIONAIS E VALORES PADRÃO

Podemos definir valores padrão pros parâmetros (ES6+).

function saudacao(nome = "visitante") {

[Link](`Olá, ${nome}!`);

saudacao(); // "Olá, visitante!"

saudacao("Paulo"); // "Olá, Paulo!"

6.7. FUNÇÕES ANÔNIMAS E ARROW FUNCTIONS
Com o tempo, o JavaScript evoluiu, e trouxe formas mais compactas de escrever
funções.
As Arrow Functions (funções de seta =>) são a versão moderna e elegante.

Sintaxe:

const somar = (a, b) => {

return a + b;

};

Se a função tiver uma única linha, o return pode ser omitido:

const dobrar = n => n * 2;

[Link](dobrar(5)); // 10

São muito usadas em códigos modernos e frameworks como React, Vue e [Link].

6.8. EXERCÍCIOS PRÁTICOS

Exercício 1:

Crie uma função que:

1. Pede dois números ao usuário.

2. Chama uma função somar() que faz a soma.

3. Mostra o resultado num alerta.

Solução:

function somar(a, b) {

return a + b;

let n1 = Number(prompt("Digite o primeiro número:"));

let n2 = Number(prompt("Digite o segundo número:"));

alert(`A soma é ${somar(n1, n2)}`);

Exercício 2:

Monte uma minicalculadora que usa funções separadas para cada operação:

Solução:

function somar(a, b) { return a + b; }

function subtrair(a, b) { return a - b; }

function multiplicar(a, b) { return a * b; }

function dividir(a, b) { return a / b; }

let x = Number(prompt("Primeiro número:"));

let y = Number(prompt("Segundo número:"));

let opcao = prompt("Escolha uma operação: +, -, *, /");

if (opcao === "+") alert(somar(x, y));

else if (opcao === "-") alert(subtrair(x, y));

else if (opcao === "*") alert(multiplicar(x, y));

else if (opcao === "/") alert(dividir(x, y));

else alert("Operação inválida!");

Exercício 3:

Crie uma função que recebe peso e altura e devolve o IMC.

Mostre uma mensagem conforme o resultado (Calculadora de IMC).

Solução:

function calcularIMC(peso, altura) {

return peso / (altura * altura);

let peso = Number(prompt("Qual é o seu peso (kg)?"));

let altura = Number(prompt("Qual é a sua altura (m)?"));

let imc = calcularIMC(peso, altura);

if (imc < 18.5) {

alert(`IMC = ${[Link](2)}. Abaixo do peso.`);

} else if (imc < 25) {

alert(`IMC = ${[Link](2)}. Peso normal.`);

} else if (imc < 30) {

alert(`IMC = ${[Link](2)}. Sobrepeso.`);

} else {

alert(`IMC = ${[Link](2)}. Obesidade.`);

}
AULA 7 – ARRAYS E OBJETOS:MAZENANDO E ORGANIZANDO DADOS

7.1. O PROBLEMA DAS VARIÁVEIS SOLTAS

Imagine que queremos guardar o nome de três alunos:

let aluno1 = "Paulo";

let aluno2 = "Beatriz";

let aluno3 = "Lucas";

Agora imagine 30 alunos. Nada prático.

Por isso o JavaScript nos oferece estruturas capazes de guardar vários valores dentro de
uma variável, os Arrays, e estruturas que agrupam informações específicas sobre um
mesmo elemento, os Objetos.

7.2. ARRAYS ("LISTAS" DE VALORES)

Um array é uma lista indexada que guarda vários valores numa só variável, separados
por vírgulas e dentro de colchetes [].

let frutas = ["maçã", "banana", "laranja"];

Cada item tem uma posição (índice, começando em **0.

Índice Valor

0 "maçã"

1 "banana"

2 "laranja"
Acessando itens:

[Link](frutas[0]); // maçã

[Link](frutas[2]); // laranja

Modificando itens:

frutas[1] = "uva";

[Link](frutas); // ["maçã", "uva", "laranja"]

7.3. MÉTODOS ÚTEIS DE ARRAY
O JavaScript tem vários métodos nativos que ajudam a manipular listas.

Método Função Exemplo

push() Adiciona no final [Link]("pera")

pop() Remove o último [Link]()

unshift() Adiciona no início [Link]("morango")

shift() Remove o primeiro [Link]()

length Quantidade de itens [Link]

Exemplo prático:

let numeros = [10, 20, 30];

[Link](40); // [10, 20, 30, 40]

[Link](); // [10, 20, 30]

[Link](`Total de números: ${[Link]}`);

7. 4. PERCORRENDO ARRAYS COM FOR

Podemos “andar” pela lista usando um loop:

let cores = ["vermelho", "azul", "verde"];

for (let i = 0; i < [Link]; i++) {

[Link](cores[i]);

Ou de forma mais elegante com o for...of:

for (let cor of cores) {

[Link](cor);

O for...of lê cada item diretamente, sem precisar controlar o índice manualmente.

7.5. EXERCÍCIO PRÁTICO 1
Monte um script que:

1. Cria um array com ao menos 5 itens de mercado.

2. Mostra todos eles numerados (1°, 2°, 3°…) no console.

Solução:

let compras = ["roz", "feijão", "macarrão", "óleo", "sal"];

for (let i = 0; i < [Link]; i++) {

[Link](`${i + 1}º item: ${compras[i]}`);

7. 6. OBJETOS – ESTRUTURAS COM NOME E VALOR

Um objeto é uma coleção de propriedades nomeadas. Enquanto um array usa índices
numéricos, o objeto usa nomes (chaves).

Sintaxe:

let pessoa = {

nome: "Paulo",

idade: 28,

cidade: "São Paulo"

};

A estrutura geral é { chave: valor, chave: valor }.

Acessar propriedades:

[Link]([Link]);

[Link](pessoa["idade"]);

Alterar valores:

[Link] = 29;
Adicionar novas propriedades:

[Link] = "Desenvolvedor";

7.7. ITERANDO SOBRE UM OBJETO

Para percorrer um objeto, usamos o for...in:

let carro = {

modelo: "Civic",

ano: 2020,

cor: "prata"

};

for (let chave in carro) {

[Link](`${chave}: ${carro[chave]}`);

Resultado:

modelo: Civic

ano: 2020

cor: prata

7.8. CRIANDO ARRAYS DE OBJETOS

E se quisermos guardar várias pessoas, vários produtos, ou vários carros?

Podemos combinar arrays e objetos!

let alunos = [

{ nome: "Paulo", idade: 29 },

{ nome: "Beatriz", idade: 25 },

{ nome: "Lucas", idade: 32 }

];

for (let aluno of alunos) {

 [Link](`${[Link]} tem ${[Link]} anos`);

Esse padrão, array de objetos, é um dos mais usados no JavaScript moderno.

Quase todas as aplicações web trabalham com esse formato (ex.: APIs, bancos de
dados, etc).

7.9. EXERCÍCIO PRÁTICO 2

Monte um catálogo de produtos com nome e preço. Depois, mostre todos os produtos e
calcule o total.

Solução:

let produtos = [

{ nome: "Camiseta", preco: 50 },

{ nome: "Calça", preco: 100 },

{ nome: "Tênis", preco: 200 }

];

let total = 0;

for (let item of produtos) {

[Link](`${[Link]} - R$${[Link]}`);

total += [Link];

[Link](`Total R$${total}`);

7.10. EXERCÍCIO PRÁTICO 3

Crie um script que:

1. Cria um array vazio: let tarefas = [].

2. Usa um loop com prompt() para adicionar ("Sair" encerra).

3. No fim, mostra todas as tarefas cadastradas.

 Solução:

let tarefas = [];

let entrada;

do {

entrada = prompt("Digite uma tarefa (ou 'sair' para encerrar");

if (entrada && [Link]() !== 'sair') {

[Link](entrada);

} while (entrada && [Link]() !== 'sair');

[Link]("Tarefas cadastradas:");

for (let t of tarefas) {

[Link]("- " + t);

}
AULA 8 – DOM (DOCUMENT OBJECT MODEL): MANIPULANDO A PÁGINA COM
JAVASCRIPT

8.1. O QUE É O DOM

DOM (Document Object Model) é uma espécie de ponte entre o HTML e o JavaScript.
Ele representa a página web como uma árvore de objetos, em que cada tag vira
um nó manipulável.

Por exemplo, este HTML:

<h1>Olá, mundo!</h1>

<p>Seja bem-vindo(a)</p>

É interpretado pelo navegador como uma árvore:

Document

├─ html

│ ─ head

│ └─ body

│ ├─ h1 ("Olá, mundo!")

│ └─ p ("Seja bem-vindo(a)")

Com o JavaScript, podemos “navegar” nessa árvore.

Exemplo: mudar o texto do <p> por meio do JS!

8.2. SELECIONANDO ELEMENTOS HTML

O primeiro passo pra manipular o DOM é selecionar o elemento desejado.

Há diversas formas, e o ideal é conhecer todas:

8.2.1. getElementById()

Pega um elemento com um id específico:

<p id="mensagem">Texto original</p>

<script>

const msg = [Link]("mensagem");

[Link] = "Texto alterado via JavaScript!";

</script>

8.2.2. querySelector() e querySelectorAll()

Seleciona o primeiro elemento que corresponde a um seletor CSS.

<p class="texto">Olá!</p>

<script>

const paragrafo = [Link](".texto");

[Link] = "Texto modificado!";

</script>

querySelectorAll() retorna vários elementos (como uma lista):

const paragrafos = [Link]("p");

[Link](paragrafos[0], paragrafos[1]);

Outros métodos úteis:

Método O que retorna

getElementsByClassName("classe") Todos os elementos com aquela classe

getElementsByTagName("tag") Todos os elementos com aquela tag

(ex.: p, div, h1)
8.3. ALTERANDO CONTEÚDO
Depois de acessar o elemento, podemos mudar seu texto, HTML interno ou até
atributos:

const titulo = [Link]("h1");

[Link] = "Novo título (texto simples)";

[Link] = "<em>Novo título</em> (com HTML)";

• textContent → modifica apenas o texto.

• innerHTML → pode inserir HTML diretamente (mas requer cuidado!).

8.4. ALTERANDO ESTILOS VIA JAVASCRIPT

Podemos mudar cores, tamanhos e outros estilos:

const corpo = [Link];

[Link] = "lightblue";

[Link] = "Arial";

Ou alterar o estilo de um elemento específico:

const paragrafo = [Link]("p");

[Link] = "darkred";

[Link] = "20px";

Importante: Quando for usar propriedades CSS que têm hífen (background-color),
no JS usa-se camelCase:

backgroundColor, fontSize, borderRadius, etc.

8.5. CRIANDO E ADICIONANDO ELEMENTOS
Podemos criar novos elementos e colocá-los na página dinamicamente.

const novoParagrafo = [Link]("p");

[Link] = "Parágrafo criado com JavaScript!";

[Link](novoParagrafo);

• createElement("tag") → cria o elemento.

• appendChild() → adiciona ao final de outro elemento (nesse caso, o body).

Podemos também inserir dentro de contêineres específicos:

const div = [Link]("caixa");

[Link](novoParagrafo);

8.6. REMOVENDO ELEMENTOS

Para remover, usamos o .remove() direto:

const elemento = [Link]("p");

[Link]();

Ou podemos remover um filho específico:

const container = [Link]("lista");

const item = [Link]("#lista li");

[Link](item);

8.7. EXEMPLO COMPLETO: DINAMISMO EM AÇÃO

HTML:

<h1 id="titulo">Bem-vindo!</h1>

<button id="botao">Mudar título</button>

<script src="[Link]"></script>

JavaScript ([Link]):
const botao = [Link]("botao");

const titulo = [Link]("titulo");

[Link]("click", () => {

[Link] = "Título alterado com sucesso!";

[Link] = "green";

});

8.8. EXERCÍCIO PRÁTICO 1

Crie um HTML com:

<h2 id="titulo">Clique no botão abaixo</h2>

<button id="btn">Clique aqui</button>

JavaScript:

1. Capture o botão e o h2.

2. Ao clicar, troque o texto do título para algo novo.

3. Mude a cor e o tamanho da fonte do título.

Solução:

const btn = [Link]("btn");

const titulo = [Link]("titulo");

[Link]("click", () => {

[Link] = "Você clicou!";

[Link] = "blue";

[Link] = "24px";

});
8.9. EXERCÍCIO PRÁTICO 2
Monte uma página que:

1. Tenha um <ul id="lista"></ul> e um <button id="adicionar">Adicionar

item</button>

2. Ao clicar no botão, adicione um novo <li> com texto incremental (“Item 1”, “Item
2”, etc.)

Solução:

const lista = [Link]("lista");

const botao = [Link]("adicionar");

let contador = 1;

[Link]("click", () => {

const li = [Link]("li");

[Link] = `Item ${contador++}`;

[Link](li);

});

8.10. EXERCÍCIO PRÁTICO 3

Crie um botão que alterna entre dois modos visuais da página, um Modo Claro e um
Modo Escuro.

Solução:

HTML:

<button id="modo">Trocar tema</button>

JS:

const botao = [Link]("modo");

const corpo = [Link];

let escuro = false;

[Link]("click", () => {
 escuro = !escuro;

[Link] = escuro ? "#222" : "#fff";

[Link] = escuro ? "#fff" : "#000";

});
AULA 9 – EVENTOS: TORNANDO A PÁGINA INTERATIVA

9.1. O QUE SÃO EVENTOS?

Um evento é qualquer ação que acontece na página, e que o JavaScript pode escutar e
reagir.

Exemplos de eventos comuns:

Tipo Ação do Usuário

click Clique em um botão ou elemento

mouseover Quando o mouse passa por cima

mouseout Quando o mouse sai de um elemento

keydown Pressionar uma tecla

keyup Soltar uma tecla

input Quando se digita algo num campo

scroll Quando a página é rolada

load Quando a página termina de carregar

9.2. USANDO ADDEVENTLISTENER()

O método addEventListener() escuta o evento e executa uma função quando ele
ocorre.

Sintaxe:

[Link]("tipoDeEvento", função);

Exemplo básico:

<button id="botao">Clique em mim!</button>

<script>

const botao = [Link]("botao");

[Link]("click", () => {
 alert("Você clicou no botão!");

});

</script>

Atenção: A função dentro do listener é chamada de callback — porque ela “volta”

quando o evento acontece.

9.3. TIPOS DE EVENTOS MAIS USADOS

9.3.1. Evento de clique (click)

[Link]("click", () => {

[Link]("Botão clicado!");

});

9.3.2. Passar o mouse (mouseover e mouseout)

const caixa = [Link]("#caixa");

[Link]("mouseover", () => {

[Link] = "lightgreen";

});

[Link]("mouseout", () => {

[Link] = "lightgray";

});

9.3.3. Evento de teclado (keydown, keyup)

[Link]("keydown", (evento) => {

[Link](`Você pressionou: ${[Link]}`);

});
9.3.4. Evento de digitação (input)

<input id="nome" placeholder="Digite seu nome" />

<script>

const campo = [Link]("nome");

[Link]("input", () => {

[Link]([Link]);

});

</script>

Atenção: Toda vez que o usuário digitar algo, o console mostrará em tempo real.

9.4. O OBJETO DO EVENTO

Toda função de evento recebe um objeto automático com detalhes sobre o que
aconteceu.
Exemplo:

[Link]("click", (evento) => {

[Link]([Link], [Link]); // posição do clique na tela

});

O evento (ou e) contém propriedades úteis:

• target → quem foi clicado

• key → qual tecla foi pressionada

• clientX/Y → posição do mouse

• type → tipo do evento

9.5. REMOVENDO EVENTOS

Podemos remover um evento usando removeEventListener().

function clicar() {
 alert("Primeiro clique!");

[Link]("click", clicar);

[Link]("click", clicar);

Atenção: Aqui, o alerta aparecerá apenas uma vez — depois disso, o evento é
removido.

9.6. EXEMPLO COMPLETO: INTERAÇÃO COM BOTÃO E TEXTO

<h2 id="titulo">Clique no botão</h2>

<button id="botao">Mudar texto</button>

<script>

const botao = [Link]("botao");

const titulo = [Link]("titulo");

[Link]("click", () => {

[Link] = "O texto foi alterado!";

[Link] = "blue";

});

</script>

9.7. EXERCÍCIO PRÁTICO 1

Crie um botão que conte quantas vezes foi clicado.

HTML:

<button id="contador">Clique em mim</button>

<p id="resultado">Cliques: 0</p>

JS:

const botao = [Link]("contador");

const resultado = [Link]("resultado");

let contador = 0;

[Link]("click", () => {

contador++;

[Link] = `Cliques: ${contador}`;

});

9.8. EXERCÍCIO PRÁTICO 2 – VALIDAÇÃO EM TEMPO REAL

HTML:

<input id="nome" placeholder="Digite pelo menos 3 letras">

<p id="aviso"></p>

JS:

const nome = [Link]("nome");

const aviso = [Link]("aviso");

[Link]("input", () => {

if ([Link] < 3) {

[Link] = "Digite pelo menos 3 letras.";

[Link] = "red";

} else {

[Link] = "Nome válido!";

[Link] = "green";

});
9.9. EXERCÍCIO PRÁTICO 3 – MODO CLARO/ESCURO COM ALTERNÂNCIA
HTML:

<button id="trocar">Alternar tema</button>

JS:

const botao = [Link]("trocar");

const corpo = [Link];

let escuro = false;

[Link]("click", () => {

escuro = !escuro;

if (escuro) {

[Link] = "#222";

[Link] = "#fff";

} else {

[Link] = "#fff";

[Link] = "#000";

});

9.10. EXERCÍCIO PRÁTICO 3 – “TO-DO LIST” (VERSÃO BASE)

Monte uma mini lista de tarefas interativa usando eventos de clique e DOM.

HTML:

<input id="tarefa" placeholder="Nova tarefa">

<button id="add">Adicionar</button>

<ul id="lista"></ul>

JS:

const input = [Link]("tarefa");

const botão = [Link]("add");

const lista = [Link]("lista");

botã[Link]("click", () => {

const texto = [Link]();

if (texto !== "") {

const li = [Link]("li");

[Link] = texto;

[Link](li);

[Link] = "";

});