2
respostas

[Bug] Hora da Pratica - Ultimo desafio

Gostaria de compartilhar uma experiencia que tive tentando resolver um problema deste codigo.

let nome = prompt('Olá para continuarmos digite seu nome: ');
alert(seja bem vindo ${nome});

O problema deste codigo é que quando recarregava a pagina, ele aparecia direto "Seja bem vindo null", na tentativa de resolver este problema descobri que o navegador executa o código, e de fato o primeiro resultado é nulo, pois não teve ainda interação com o usuario. Usando uma função do JavaScript chamada de .getItem através da propriedade LocalStorage, é possivel fazer uma verificação, para que se o resultado for nulo ele espera a interação do usuario. Meu codigo ficou assim:

let nome = localStorage.getItem('nome');

if (nome === null) {
nome = prompt('Olá, para continuar por gentileza digite seu nome');
localStorage.setItem('nome', nome);
}
alert(Seja bem vindo ${nome});

NEM TUDO SÂO FLORES..
Rodei o codigo, e ainda continuou apresentando falha, peguei o resultado do console, e fui pedir ajuda pro Chat, descobri que isso é medida de segurança do navegador, ele bloqueia funções que são executadas automaticamente, sem o usuário clicar ou interagir com a página antes. Depois que cliquei na pagina do Navegador antes de salvar o código, o progama rodou normalmente.

2 respostas

Oi, Vagner! Como vai?

Gostei da sua análise e da forma como você investigou o comportamento do código até encontrar a causa do problema. Seu uso do localStorage para evitar o valor null mostrou iniciativa e curiosidade em entender como o JavaScript funciona no navegador. Além disso, buscar o console e analisar a mensagem de bloqueio foi uma atitude muito importante no processo de aprendizado.

Dica: sempre utilize crases (`) em mensagens com ${variavel} no JavaScript, assim a interpolação funciona corretamente. Veja este exemplo: alert(\Seja bem-vindo ${nome}`)`.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

E ai Vagner.
Tudo bem?
Muito boa a sua análise do problema!
Você demonstrou algo muito importante na programação: investigar o comportamento do código, testar hipóteses e usar o console para entender o erro. Isso faz parte do dia a dia de quem desenvolve software.
Sua solução usando localStorage foi interessante porque mostra que você já começou a pensar em persistência de dados e validação antes da execução. Além disso, foi excelente perceber que o navegador possui mecanismos de segurança relacionados à interação do usuário.
Esse tipo de descoberta prática ensina muito mais do que apenas copiar uma resposta pronta.
Porém, existe um detalhe importante: o problema original não acontecia porque o navegador executava o código “antes do usuário”, mas sim porque o prompt() pode retornar null quando o usuário cancela a caixa de diálogo ou quando o navegador bloqueia a interação automática.
Uma outra forma de resolver seria validar o retorno do prompt antes de mostrar o alert:

let nome = prompt('Olá, para continuarmos digite seu nome:');

if (nome !== null && nome.trim() !== '') {
    alert(`Seja bem vindo ${nome}`);
} else {
    alert('Você não digitou um nome.');
}

Outra melhoria importante é usar corretamente as template strings do JavaScript.
No primeiro exemplo faltaram as crases ( ):

alert(`Seja bem vindo ${nome}`);

Seu uso do localStorage também pode ser aproveitado de maneira mais organizada, por exemplo:

let nome = localStorage.getItem('nome');

if (!nome) {
    nome = prompt('Olá, para continuar digite seu nome:');

    if (nome) {
        localStorage.setItem('nome', nome);
    }
}

if (nome) {
    alert(`Seja bem vindo ${nome}`);
}

Nesse caso:

  • o nome fica salvo no navegador;
  • o usuário não precisa digitar novamente ao recarregar a página;
  • evita salvar valores nulos ou vazios.

Parabéns pela iniciativa de pesquisar, testar e entender o motivo do erro.
Esse processo de investigação é exatamente o que ajuda a evoluir na programação.
Avise alguma duvida.
Bons estudos.