Sumário
Aula 1 – Primeiros Passos e o famoso “Hello, World!” ................................................... 4
1.1. O que é o JavaScript .......................................................................................... 4
1.2. Preparando o Ambiente ..................................................................................... 4
1.3. Criando seu primeiro arquivo HTML ................................................................... 4
1.4. Entendendo o Código ........................................................................................ 5
1.5. Onde mais posso ver o resultado ....................................................................... 6
1.6. JavaScript Interno x Externo ............................................................................... 6
1.7. Exercício Prático ............................................................................................... 7
AULA 2 – Variáveis e Tipos de Dados ............................................................................ 8
2.1. O que é uma variável ......................................................................................... 8
2.2. Criando Variáveis em JavaScript ........................................................................ 8
2.3. Regras de nomes de variáveis ............................................................................ 9
2.4. Tipos de Dados em JavaScript ........................................................................... 9
2.5. Trabalhando com Strings e Números ............................................................... 10
2.6. Interação com o Usuário ................................................................................. 11
2.7. Convertendo Tipos .......................................................................................... 11
2.8. Exercícios Práticos .......................................................................................... 12
AULA 3 – Operadores e Expressões ............................................................................ 13
3.2. Operadores aritméticos .................................................................................. 13
3.3. Operadores de atribuição ................................................................................ 14
3.4. Precedência de Operadores ............................................................................ 15
3.5. Operadores de comparação ............................................................................ 15
2.6. Operadores lógicos ......................................................................................... 16
2.7. Misturando tudo: expressões compostas ......................................................... 16
2.8 Exercícios Práticos ........................................................................................... 17
AULA 4 – Estruturas Condicionais .............................................................................. 19
4.1. O que é uma estrutura condicional .................................................................. 19
4.2. A estrutura básica do if .................................................................................... 19
4.3. Adicionando o else.......................................................................................... 19
4. 4. Testando múltiplas condições – else if ............................................................ 20
4.5. Aninhando condições...................................................................................... 20
4.6. O operador ternário (?) .................................................................................... 21
4.7. Aplicando interatividade .................................................................................. 21
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 !==.
Os outros (==, !=) fazem conversões automáticas que podem gerar confusões (ex.: "5" ==
5 → true, mesmo tipos diferentes).
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}.`);
Depois modifique o código para mostrar uma mensagem diferente se a média for maior
ou menor que 10 (vamos trabalhar isso mais profundamente na próxima aula, mas vale
testar).
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.");
});
Continua...