Aula 25

📄Formulários com Validação e JavaScript

🎯Objetivo da aula

Praticar a manipulação de formulários HTML com validação usando JavaScript. A cada exercício, novos conceitos serão aplicados, como entrada numérica, radio, checkbox, getElementById, querySelector, condicionais if, operadores lógicos, estilização com style.color, e manipulação do innerText.

✅ Exercício 1 – Validação de nome

Enunciado:
Peça o nome de um usuário e exiba a frase: "Olá, [nome]!".

Código:

Explicação:
Use a tag <input> para a entrada do nome. O botão usará a função cumprimentar() para ler o valor com getElementById().value e exibir usando innerText em uma <p>.

✅ Exercício 2 – Soma de dois números

Enunciado:
Solicite dois números e mostre a soma.

Código:

Explicação:

Use dois <input type="number"> e parseInt para converter os valores antes de somar.

✅ Exercício 3 – Par ou Ímpar

Enunciado:
Peça um número e diga se ele é par ou ímpar.

Código:

Explicação:
Use o operador % para saber se o número é divisível por 2. Use innerText para exibir o resultado.

✅ Exercício 4 – Maioridade

Enunciado:
Verifique se uma pessoa tem 18 anos ou mais.

Código:

Explicação:
Use uma condicional if simples comparando idade >= 18.

✅ Exercício 5 – Senha correta

Enunciado

Crie um campo de senha e verifique se o valor digitado é exatamente 12345.

Código

Explicação

Utilizamos:

<input type="password"> para esconder os caracteres.
.value para capturar a senha.
if para comparar com "12345".
.innerText e .style.color para exibir o resultado colorido.

✅ Exercício 6 – Cálculo de média

Enunciado

Solicite três notas, calcule a média e informe se o aluno foi aprovado (média ≥ 6).

Código

Explicação

.parseFloat() converte o texto em número real.
toFixed(2) limita a média a 2 casas decimais.
A lógica usa o if para avaliar aprovação.

✅ Exercício 7 – Concordar com termos

Enunciado

Só permita prosseguir se o aluno marcar a opção de que leu e concorda com os termos.

Código

Desafio! 👺

👺 Desafio – Formulário de Interesse em Cursos

Enunciado:
Crie uma página com 3 opções de cursos (Front-End, Back-End, Design) usando checkboxes. Ao clicar no botão “Ver cursos escolhidos”, deverá exibir uma frase listando os cursos marcados.

O que o aluno deverá fazer:

Criar um formulário com 3 caixas de seleção.
Criar um botão com onclick.
Usar if para verificar quais checkboxes estão marcados.
Exibir o resultado com innerText dentro de um parágrafo.
Aplicar CSS simples (fonte, alinhamento e espaçamento).

Google Sites

Report abuse