Aula 03 de 10

Contas, perguntas e respostas

Fazer o programa perguntar algo ao usuário e calcular com a resposta.

operadorespromptNumber()`template`

// entendendo

Como funciona

O JavaScript é uma calculadora que fala. Operadores:

+  soma      -  subtração
*  multiplicação      /  divisão
%  resto da divisão (serve pra descobrir par/ímpar)

Pra perguntar algo, use prompt. Ele abre uma caixa, a pessoa digita e o valor volta pro seu código:

let nome = prompt("Qual é o seu nome?");

Cuidado nº 1 do curso: o prompt devolve sempre texto, mesmo quando a pessoa digita um número. Pra virar número de verdade, embrulhe com Number(...):

let idade = Number(prompt("Sua idade?"));

E pra juntar texto com variável sem ficar colando com +, existe a template literal — crase no lugar das aspas e ${ } no meio:

console.log(`Salve ${nome}, você tem ${idade} anos`);

// mão na massa

Agora é com você

Os campos abaixo estão vazios de propósito. Escreva, clique em Rodar e veja o resultado. Errou? Ótimo — leia o erro e tente de novo. (Atalho: Ctrl+Enter roda o código.)

A conta do lanche

Um lanche custa R$ 18,50 e você vai comprar 3. Crie as variáveis, calcule o total numa terceira variável e mostre no console.

a3e1.js

let preco = 18.50;
let quantidade = 3;

// calcule o total


// mostre o total

Preciso de uma dica

let total = preco * quantidade;

Observação: Em JavaScript o separador decimal é ponto, não vírgula. 18.50 · 18,50 (o JS entende como duas coisas separadas).

A pegadinha das aspas

Rode o código abaixo como está e observe os resultados. Depois responda no comentário: por que "5" + 3 não deu 8?

a3e2.js

console.log( 5 + 3 );
console.log( "5" + 3 );
console.log( "5" * 2 );

// sua resposta aqui (como comentário):
// ...

Preciso de uma dica

Quando um dos lados do + é texto, o JS entende que você quer colar (concatenar), não somar. Já o * não faz sentido com texto, então ele converte pra número.

Observação: Isso vai ser a fonte de bug número 1 do curso. Sempre que aparecer um resultado esquisito grudado tipo "53", desconfie: tem texto onde deveria ter número.

Perguntando a idade

Pergunte a idade da pessoa com prompt, converta pra número e mostre quantos anos ela terá no ano que vem.

a3e3.js

// pergunte a idade e converte para número


// mostre a idade do ano que vem

Preciso de uma dica

let idade = Number(prompt("Sua idade?")); e depois console.log(idade + 1);

Observação: Teste de propósito sem o Number(): digite 17 e veja sair 171 em vez de 18. Entender esse bug agora te salva mais pra frente.

Template literal

Pergunte o nome e a cidade da pessoa e monte uma única frase usando crase e ${ }. Mostre com alert.

a3e4.js

let nome = prompt("Qual seu nome?");
let cidade = prompt("De onde você é?");

// monte a frase usando crase e ${ }

Preciso de uma dica

A crase fica na tecla ao lado do 1, à esquerda do teclado. Modelo: alert(`Salve ${nome}, de ${cidade}!`);

Observação: Compare: com + você escreveria "Salve " + nome + ", de " + cidade + "!". A template literal é mais limpa e erra menos espaço.

// desafio

rachar a conta do rolê

Desafio: rachar a conta do rolê

Pergunte o valor total da conta e quantas pessoas estavam. Calcule quanto cada um paga e mostre com uma frase bonita usando template literal.

a3d1.js DESAFIO

// pergunte o valor da conta e o número de pessoas


// calcule quanto cada um paga


// mostre o resultado numa frase

Preciso de uma dica

Não esqueça o Number() nos dois prompts. Pra arredondar bonito em 2 casas: valorPorPessoa.toFixed(2).

Observação: Se aparecer NaN na tela, é o JS dizendo "Not a Number" — quer dizer que você tentou fazer conta com algo que não é número. Quase sempre é Number() faltando.

Aula 02 Aula 04