Tutorial anterior: Como receber dados do usuário
- Baixe nosso PDF: Apostila de JavaScript
Trabalhando com Dados do Usuário
Depois, vamos pedir outro número ao usuário, e vamos armazenar na variável num2.
Por fim, vamos exibir o resultado da soma dessas duas variáveis, no documento HTML.
Nosso código HTML/JS fica:
<!DOCTYPE html> <html> <head> <title>Curso JavaScript Progressivo</title> <script type="text/javascript"> var num1 = prompt("Primeiro numero: "); var num2 = prompt("Segundo numero: "); document.write("Soma = ", num1+num2); </script> </head> </html>
Digitando 1 num primeiro prompt() e 2 no segundo, temos o resultado:
12
Ou seja: 1 + 2 = 12
É...
Acho que o JavaScript não é muito com Matemática, não é mesmo?
É sim! Mas foi a gente que errou!
E por um motivo bem simples: quando o usuário digita algo para o método prompt(), este método armazena a informação digitada na forma de STRING.
Ou seja, não é 1, é "1" que está armazenado na variável num1, é um texto.
Não é 2, é "2".
Então, fizemos: "1" + "2" = "12"
Ou seja, agrupamos, concatenamos duas strings, grudamos uma na outra!
String para Inteiro: parseInt()
Para calcularmos corretamente a soma, precisamos usar uma função que já vem, por natureza, no JavaScript, a parseInt().Para transformar "2" em 2, basta fazer: parseInt("2")
Ou seja, essa função recebe uma string e transforma num inteiro.
Vamos calcular a soma novamente, mas ao invés e usar num1 e num2, vamos usar parseInt(num1) e parseInt(num2) e ver o resultado:
<!DOCTYPE html> <html> <head> <title>Curso JavaScript Progressivo</title> <script type="text/javascript"> var num1 = prompt("Primeiro numero: "); var num2 = prompt("Segundo numero: "); document.write("Soma = ", parseInt(num1) + parseInt(num2) ); </script> </head> </html
O resultado da soma fica:

Agora sim! O JS somou dois inteiros e exibiu a soma corretamente.
Faça um teste: digite um número decimal (lembre-se de usar ponto ao invés de vírgula).
String para Decimal: parseFloat()
Se digitar 0.5 para o primeiro número e 1.5 para o segundo, o resultado do parseInt() será um bizarro 1. Isso mesmo:0.5 + 1.5 = 1
Isso acontece pois usamos número decimais (flutuantes) na função parseInt(), que deve receber apenas números inteiros.
A maneira correta de transformar string para decimais (flutuantes) é usando a função parseFloat(), veja como fica o código:
<!DOCTYPE html> <html> <head> <title>Curso JavaScript Progressivo</title> <script type="text/javascript"> var num1 = prompt("Primeiro numero decimal: "); var num2 = prompt("Segundo numero decimal: "); document.write("Soma = ", parseFloat(num1) + parseFloat(num2) ); </script> </head> </html>
Conversão de Números para Strings
Para converter um número, seja ele inteiro ou decimal, em uma string, é bem simples: basta concatenar ele com uma String vazia.Ou seja, 'somar' o número com "", veja:
1 + "" = "1"
2.9 + "" = "2.9"
2112 + "" = "2112"
Ou seja, o JavaScript entende que se somar um número com uma String, o resultado deve ser uma nova string, cuja concatenação é o número mais uma string vazia, ou seja, o número na forma de string.
Durante nosso curso precisaremos fazer essas conversões diversas vezes, dependendo do tipos de dados em JavaScript que queremos trabalhar.
Nenhum comentário:
Postar um comentário