Aula 24

🧠 Praticando Arrays com Formulários Simples

📘 Introdução

Nesta aula, vamos revisar e praticar arrays com formulários simples em HTML. Usaremos comandos que já conhecemos para trabalhar com listas fixas de valores e pequenas interações. Nada de novos conceitos — apenas reforço do que você já domina!

🧰 Comandos importantes que você vai usar:

let lista = ["item1", "item2"] → cria um array
lista.includes(valor) → verifica se um valor está na lista
lista.push(valor) → adiciona um novo item ao final
lista.join(", ") → transforma o array em texto separado por vírgulas
getElementById("id") → acessa um elemento HTML
.value → pega o que foi digitado

✅ Exercício de Exemplo – Lista de convidados

📌 Descrição:
O aluno digita um nome, clica no botão e o sistema diz se a pessoa está na lista de convidados.

💻 Código completo (HTML + JS embutido)

<!DOCTYPE html>

<head>

<title>Lista de Convidados</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f7f7f7;

text-align: center;

padding: 40px;

}

input, button {

padding: 10px;

margin: 10px;

font-size: 16px;

}

#saida {

font-size: 18px;

margin-top: 20px;

font-weight: bold;

}

</style>

</head>

<body>

<h2>🎉 Verifique seu nome na lista de convidados</h2>

<button onclick="verificarNome()">Verificar</button>

const convidados = ["Joana", "Carlos", "Rômulo", "Fernanda", "Lucas"];

function verificarNome() {

let nome = document.getElementById("nomeDigitado").value;

let nomeFormatado = nome.charAt(0).toUpperCase() + nome.slice(1).toLowerCase();

let saida = document.getElementById("saida");

if (convidados.includes(nomeFormatado)) {

saida.innerText = "✅ Bem-vindo(a), " + nomeFormatado + "!";

saida.style.color = "green";

} else {

saida.innerText = "❌ Nome não encontrado na lista.";

saida.style.color = "red";

}

</script>

</body>

</html>

💡 Dica ao aluno:

Tente editar o array com os nomes dos seus colegas e repita o teste. Você também pode mudar as mensagens ou as cores para personalizar sua versão.

1️⃣ Verificação de nome na lista de convidados

Enunciado: Crie um formulário onde o usuário digite seu nome. O sistema deve verificar se esse nome está na lista de convidados.
Explicação: Use um array com alguns nomes e compare com o valor digitado. Exiba uma mensagem de bem-vindo se estiver na lista.

2️⃣ Adicionar fruta à lista

Enunciado: Crie um campo para digitar uma fruta. Ao clicar no botão, a fruta deve ser adicionada à lista existente.
Explicação: Use o método .push() e mostre o array atualizado com .join().

🧠 Explicação dos métodos .push() e .join() em JavaScript

📌 .push() → Adiciona um item ao final do array

Imagine que você tem uma lista de frutas:

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

Se você quiser adicionar uma nova fruta, como "laranja", basta usar:

frutas.push("laranja");

Agora o array fica assim:

["maçã", "banana", "laranja"]

🟢 Resumo: .push() sempre coloca o novo item no fim da lista.

📌 .join() → Transforma o array em texto

Com o mesmo array de frutas:

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

Se quisermos mostrar tudo junto como uma frase, usamos:

frutas.join(", ");

Isso transforma o array em:

"maçã, banana, laranja"

Você pode usar outros separadores também:

frutas.join(" | ") // "maçã | banana | laranja"

🎯 Exemplo completo:

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

frutas.push("laranja");

let lista = frutas.join(", ");

alert("Lista de frutas: " + lista);

🔍 Saída:

Lista de frutas: maçã, banana, laranja

3️⃣ Verificar nome na chamada

Enunciado: O aluno digita o próprio nome e o sistema verifica se ele está na chamada.
Explicação: Faça a verificação com .includes() e normalize o texto com letras maiúsculas/minúsculas, se quiser.

4️⃣ Verificar número sorteado

Enunciado: O usuário digita um número e o sistema diz se ele foi um dos números sorteados.
Explicação: Use um array de números e compare com o digitado. Responda com mensagens diferentes.

5️⃣ Exibir lista de animais

Enunciado: Ao clicar no botão, mostre todos os animais cadastrados.
Explicação: O array já tem os animais. Exiba-os todos formatados na tela com .join().

Google Sites

Report abuse