Falta pouco!

0 dias

0 horas

0 min

0 seg

Confira já seu desconto!
Entrar Ainda não tem acesso?
3
respostas

[Projeto] Meus resultados do desafio 1

Referente ao curso Lógica de programação: explore funções e listas, no capítulo Interagindo com HTML e atividade Desafio: hora da prática

por João Pedro Vieira Da Costa Chaves
| 2.3k xp | 2 posts

[USADO IA NA CONSTUÇÃO DO CODIGO]

  1. Altere o conteúdo da tag h1 com document.querySelector e atribua o seguinte texto: Hora do Desafio.
let titulo = document.querySelector('h1');
titulo.innerHTML = 'Hora do desafio!';

1.1. Alterei o conteúdo da tag p com document.querySelector e atribua o seguinte texto: Escolha um número entre 1 e 10.

let paragrafo = document.querySelector('p');
paragrafo.innerHTML = 'Escolha um número entre 1 e 10';
  1. Crie uma função que exiba no console a mensagem O botão foi clicado sempre que o botão Console for pressionado.
function verificarChute() {
    console.log('Chute verificado');
}

Nessa foi atribuído no botão "Chutar"

  1. Crie uma função que exiba um alerta com a mensagem: Eu amo JS, sempre que o botão Alerta for pressionado.
function alertConsole() {
    console.log('Eu amo JavaScript!');
}

Nessa foi adicionado o botão de "Alerta"

  1. Crie uma função que é executada quando o botão prompt é clicado, perguntando o nome de uma cidade do Brasil. Em seguida, exiba um alerta com a mensagem concatenando a resposta com o texto: Estive em {cidade} e lembrei de você.
function buttonPrompt() {
    let estado = prompt('Qual o seu cidade?');
    console.log(`Estive em ${cidade} e lembrei de você.`);
}

Foi adicionado um botão "Prompt'

  1. Ao clicar no botão soma, peça 2 números inteiros e exiba o resultado da soma em um alerta.
function botaoSoma(){
    let valor1 = prompt('Informe outro um numero:');
    let valor2 = prompt('Informe outro um numero:');
    let resultado = Number(valor1) + Number(valor2);
    console.log(`O valor da soma ${valor1} + ${valor2} é igual a ${resultado}`);
}

Nesse além de ter adicionado um botão, foi sugerido que adiciona-se a função number, que converte as strings para números. Há também uma outra função, parseInt. Também poderia colocar sem os dois, mas por boa prática decidi por a função number

Andei pesquisando sobre essa última questão, as diferenças entre as duas são a forma de conversão e no resultado final.

  • number : Converte a string inteira, aceita números inteiros e decimais. Se houver qualquer caractere inválido, retorna NaN (não é um número). Use Number para conversão geral (inclusive decimais).

  • parseInt: Converte apenas até encontrar um caractere não numérico, sempre retorna um inteiro e pode receber uma base (radix). Use parseInt para inteiros e quando precisar especificar a base.

3 respostas
por Rafaela Petelin Silvério
| 1278.1k xp | 2880 posts
Alura Scuba Team

Oi, João! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Boa escolha ao usar document.querySelector e ao comparar Number com parseInt. Para ajustar: você pode usar alert quando a atividade pedir alerta, corrija buttonPrompt para usar a mesma variável cidade (você declarou estado) e, quando for só texto, prefira textContent em vez de innerHTML.

Uma dica interessante para o futuro é usar addEventListener para ligar os botões e textContent para evitar HTML acidental. Veja este exemplo:


// html simplificado
// <h1>Hora do Desafio</h1>
// <p id="msg">Escolha um numero entre 1 e 10</p>
// <button id="bConsole">Console</button>
// <button id="bAlerta">Alerta</button>
// <button id="bPrompt">Prompt</button>
// <button id="bSoma">Somar</button>

const titulo = document.querySelector('h1');
const msg = document.querySelector('#msg');

titulo.textContent = 'Hora do Desafio';
msg.textContent = 'Escolha um numero entre 1 e 10';

document.querySelector('#bConsole').addEventListener('click', () => {
  console.log('O botao foi clicado');
});

document.querySelector('#bAlerta').addEventListener('click', () => {
  alert('Eu amo JS');
});

document.querySelector('#bPrompt').addEventListener('click', () => {
  const cidade = prompt('Qual a sua cidade?');
  if (cidade) alert(`Estive em ${cidade} e lembrei de voce.`);
});

document.querySelector('#bSoma').addEventListener('click', () => {
  const v1 = parseInt(prompt('Informe um numero:'), 10);
  const v2 = parseInt(prompt('Informe outro numero:'), 10);
  if (Number.isNaN(v1) || Number.isNaN(v2)) {
    alert('Digite numeros inteiros validos');
    return;
  }
  alert(`Soma: ${v1 + v2}`);
});
Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
por João Pedro Vieira Da Costa Chaves
| 2.3k xp | 2 posts

Entendi, eu esqueci de editar.

Sobre o uso de textContent
Você definiu as constantes e atribui as tags e usou para alterar o conteúdo da tag, correto? Isso evita acidentes no HTML, podemos dizer assim.

Eu adorei o uso do addEventListener, deu para entender perfeitamente até simplificou a estrutura do código. Vou usar no futuro. Deu para entender uso da última função, definiu as constantes e inseriu a função parseInt e prompt para inserir um número e colocou um desvio de condicional se o número não for um número, alerte e depois retorne. No final crie um alerta com a soma, correto?

por Rafaela Petelin Silvério
| 1278.1k xp | 2880 posts
Alura Scuba Team

Oi, João Pedro!

Seu entendimento está correto sim: textContent evita interpretação de HTML, addEventListener liga os botões sem poluir o HTML, e na soma você valida com parseInt e tratou NaN.

Fico à disposição. Abraços e bons estudos!