Operadores Matemáticos em JavaScript: Somar +, Subtrair -, Multiplicar *, Dividir / e Exponenciação (math.pow)

Neste tutorial de nosso Curso de JavaScript online grátis, vamos aprender como fazer as 4 operações básicas da Matemática e usar seus operadores para realizar operações aritméticas.

Tutorial anterior: Conversão entre números e strings

Operação Matemática em JS

Vamos voltar no tempo agora e aprender a fazer as operações matemáticas de adição, subtração, multiplicação e divisão.

A novidade é ... nenhuma. É a mesma coisa!
Mas só para dizer que não tudo exatamente igual, o símbolo de multiplicar é o asterisco: *
Já o símbolo de dividir é uma barra: /

Vamos criar um Script que pede dois números ao usuário, via método prompt() e exibe a soma, diferença, produto e divisão do primeiro pelo segundo:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var num1 = prompt("Primeiro numero: ");
    num1 = parseInt(num1);

    var num2 = prompt("Segundo  numero: ");
    num2 = parseInt(num2);

    var soma = num1+num2;
    var sub  = num1-num2;
    var mult = num1 * num2;
    var div  = num1/num2;
    document.write("Adição        = ", soma, "<br>");
    document.write("Subtração     = ", sub, "<br>");
    document.write("Multiplicação = ", mult, "<br>");
    document.write("Divisão       = ", div);
   </script>

 </head>
</html>

Código JavaScript comentado

A primeira coisa diferente no nosso script é:
num1 = parseInt(num1)

Vamos lá.
Primeiro, pedimos ao leitor do seu site que forneça o primeiro valor, ele vai ser armazenado em num1 como uma string.

Vamos usar o operador de atribuição = para mudar o valor na variável num1.
Antes era uma string, agora vai receber um novo valor, que é um número: parseInt(num1)

Ou seja: num1 = parseInt(num1)
Deve ser lido como: "O novo valor de num1 é o antigo valor de num1 transformado em inteiro"

Faremos bastante isso em nosso curso, ok?

Depois, em nosso código JS, declaramos e inicializamos quatro variáveis: soma, sub, mult e div, que armazenarão os resultados das operações matemáticas de soma, subtração, multiplicação e divisão, respectivamente.

Lembrando que após escrever (write()) cada resultado, precisamos escrever na página uma quebra de linha também. No HTML, fazemos a quebra de linha com a tag <br>

Se preferir, é possível abreviar mais ainda o código e evitando de escrever as novas variáveis:


   <script type="text/javascript">
    var num1 = prompt("Primeiro numero: ");
    num1 = parseInt(num1);

    var num2 = prompt("Segundo  numero: ");
    num2 = parseInt(num2);

    document.write("Adição        = ", num1+num2, "<br>");
    document.write("Subtração     = ", num1-num2, "<br>");
    document.write("Multiplicação = ", num1*num2, "<br>");
    document.write("Divisão       = ", num1/num2);
   </script>

Exercício de JavaScript

Eu digitei a seguinte sequência de código em um script JS:
var teste;
teste = 1 ;
teste = teste +1 ;
teste = teste * teste

Ao final, eu escrevi document.write(teste) no meu documento HTML.
Se programar o código acima, apenas lendo, você poderia dizer qual o valor que vai aparecer, da variável teste ?

Digite nos comentários sua resposta.
Em seguida crie um script JS com o código e rode para ver o resultado. Você acertou?
Não vale mentir :)

Exponenciação em JavaScript (elevado a): método pow()

As quatro operações Matemáticas básicas de soma, diferença, produto e divisão, são bem simples e sem mistério, como explicadas acima, basta usar os operadores: + - * /

Porém, existe uma outra operação muito importante e usada, a exponenciação.
É o famoso: ... elevado a ...

Por exemplo:
2 elevado a 2 = 2² = 2 * 2 = 4
3 elevado a 2 = 3² = 3 * 3 = 9
2 elevado a 3 = 2³ = 2 * 2 * 2 = 8

Lembrou, né?

Não tem um operador ( + - * /) pra fazer isso, diretamente.
Em JavaScript, usamos o método pow()

Sintaxe:
Math.pow(x , y)

Ele vai retornar: x elevado a y.
Vamos ver um exemplo de um site, com um script JS que solicita dois números ao usuário e retorna o valor do primeiro elevado ao segundo:


<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var num1 = prompt("Primeiro numero: ");
    num1 = parseInt(num1);

    var num2 = prompt("Segundo  numero: ");
    num2 = parseInt(num2);

    document.write(num1," elevado a ", num2, " = ", Math.pow(num1, num2) );
   </script>

 </head>
</html>

Nenhum comentário:

Postar um comentário