Entrar Ainda não tem acesso?
6
respostas

Desafio - Lógica de programação. Help me! :)

Referente ao curso Lógica de programação: mergulhe em programação com JavaScript

por Rayssa Miranda de Abreu Cunha Guedes
| 3.2k xp | 10 posts

O código segue abaixo:

alert("Boas vindas ao nosso site!");
let nome = "Lua";
let idade = 25;
let numeroDeVendas = 50
let saldoDisponivel = 1000;

alert("Erro! Preencha todos os campos");
let mensagemDeErro = "Erro! Preencha todos os campos";
alert(mensagemDeErro);

let nome = prompt("Digite o seu nome");
let idade = prompt("Digite a sua idade");
if (idade >= 18) {alert("Pode tirar a habilitação!");
}
  1. Fiz com base nas aulas e explicação do instrutor, mas como faço para testar o código e conferir se ele funciona normalmente? Lembrando que fiz no VSC, no arquivo app.js, mas quando atualizo a página nada acontece.
  2. Uma dúvida que me apareceu é: logo após a variável do saldo disponível, não seria interessante abrir um if? Pois a informação "Erro! Preencha todos os campos" só seria necessária SE a pessoa não preenchesse todos os campos, pois não? Como posso representar a "ausência de informação" no código?

Agradeço imenso a ajuda!

6 respostas
por Armano Barros Alves Junior
| 4349.9k xp | 9222 posts
Alura Scuba Team

Oi, Rayssa! Como vai?

Você trouxe uma ótima reflexão sobre o uso do if e como validar campos antes de seguir o fluxo. Isso é bem comum no desenvolvimento de interfaces e mostra que você está atenta à lógica por trás da experiência do usuário.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
por Rayssa Miranda de Abreu Cunha Guedes
| 3.2k xp | 10 posts

Obrigada!

Mas ainda estou em dúvidas sobre como validar meu código sem ter que apagar o código base que estamos a trabalhar no curso. Mesmo apagando e tentando esse código do desafio, ele não rodou.

Outra coisa é se não seria mesmo necessário abrir um if após a variável mencionada, e como faço para identificar a ausência de informação do usuário no meu código.

Help me!

por Armano Barros Alves Junior
| 4349.9k xp | 9222 posts
Alura Scuba Team

Oi, Rayssa!

Sobre sua dúvida: como testar seu código no navegador e como identificar a ausência de informação do usuário, vamos por partes.

  1. Para testar seu código no navegador, você precisa linkar o app.js ao HTML. Se você só criar o app.js no VS Code e abrir o .html sem conectar os dois, nada vai acontecer mesmo.

    Veja este exemplo de como montar seu arquivo HTML básico:

    
 <!DOCTYPE html>
 <html lang="pt-br">
 <head>
   <meta charset="UTF-8">
   <title>Meu site</title>
 </head>
 <body>
   <script src="app.js"></script>
 </body>
 </html>

    Salve esse arquivo como index.html na mesma pasta onde está o app.js. Depois, clique com o botão direito no index.html e escolha “Abrir com o Live Server” (se estiver usando a extensão no VS Code), ou apenas abra o arquivo com o navegador.

  2. Sobre usar if para verificar se os campos foram preenchidos: sim, faz sentido!

    Se você quer mostrar a mensagem de erro somente quando o usuário não preencher os campos, pode fazer assim:

    
 let nome = prompt("Digite o seu nome:");
 let idade = prompt("Digite a sua idade:");

 if (nome === "" || idade === "") {
   alert("Erro! Preencha todos os campos");
 } else {
   if (parseInt(idade) >= 18) {
     alert("Pode tirar a habilitação!");
   }
 }

O que esse código faz:

  • Verifica se nome ou idade estão vazios (ausência de informação).
  • Se estiverem, mostra a mensagem de erro.
  • Caso contrário, verifica se a idade é maior ou igual a 18 e mostra a mensagem sobre habilitação.

Dica: prompt sempre retorna uma string, então use parseInt para comparar idade como número.

Fico à disposição.

por Rayssa Miranda de Abreu Cunha Guedes
| 3.2k xp | 10 posts

Obrigada, Armano! O novo código ficaria assim:

alert("Boas vindas ao nosso site!");
let nome = "Lua";
let idade = 25;
let numeroDeVendas = 50
let saldoDisponivel = 1000;

let nome = prompt("Digite o seu nome");
let idade = prompt("Digite a sua idade");

// Se o usuário não preencher algum campo, exibir mensagem de erro;
if (nome === "" || idade === "") {
alert("Erro! Preencha todos os campos");
} else {
if (parseInt(idade) >= 18) {
alert("Pode tirar a habilitação!");
}

Penso que o comando parseInt ainda irei estudar, mas já vejo mais lógica agora.

O que me surgiu agora é se há mesmo a necessidade de um IF após um ELSE, mas acredito que são coisas que ainda vou entendendo com o tempo. Thank you very much!

Criei o html e conectei ao app.js, mas quando abro em extensão live server aparece uma tela branca. Será que é porquê não tem o arquivo CSS?

por Armano Barros Alves Junior
| 4349.9k xp | 9222 posts
Alura Scuba Team

Oi, Rayssa!

Sobre sua última dúvida: a tela branca no navegador usando o Live Server não tem relação com a ausência de um arquivo CSS, e sim com o conteúdo do seu HTML e se há algum erro no seu JavaScript que esteja impedindo a execução do código.

Vamos resolver isso:

  1. Verifique se o HTML está estruturado corretamente e se o app.js está na mesma pasta. Use esse exemplo como base:

    
 <!DOCTYPE html>
 <html lang="pt-br">
 <head>
   <meta charset="UTF-8">
   <title>Meu site</title>
 </head>
 <body>
   <script src="app.js"></script>
 </body>
 </html>

  2. Corrija os conflitos no seu código JS. Você está declarando as variáveis nome e idade duas vezes. Isso pode causar erro e impedir que o código funcione.

    Ajuste seu app.js assim:

    
 alert("Boas vindas ao nosso site!");

 let numeroDeVendas = 50;
 let saldoDisponivel = 1000;

 let nome = prompt("Digite o seu nome:");
 let idade = prompt("Digite a sua idade:");

 // Verifica se os campos foram preenchidos
 if (nome === "" || idade === "") {
   alert("Erro! Preencha todos os campos");
 } else {
   if (parseInt(idade) >= 18) {
     alert("Pode tirar a habilitação!");
   }
 }

  3. Sobre seu comentário do if dentro do else: isso é totalmente válido! Ele representa uma condição dentro de outra, e essa estrutura é chamada de condicional aninhada. Com o tempo, você vai se familiarizar com esse tipo de lógica.

  4. Se ainda aparecer tela branca, aperte F12 no navegador (ou clique com o botão direito e vá em Inspecionar → Console) para ver se há alguma mensagem de erro. Isso vai te ajudar a entender onde o código está travando.

Fico à disposição.

por Rayssa Miranda de Abreu Cunha Guedes
| 3.2k xp | 10 posts

Obrigada pela ajuda!