Learn web development

Matemática básica no JavaScript — números e operadores

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Neste ponto do curso estaremos discutindo matemática em JavaScript — Como podemos usar operadores e outros recursos para manipular números e fazer cálculos.

Pré-requisitos: Conhecimento básico em informática, uma compreensão básica de HTML e CSS, uma compreensão do que é o JavaScript.
Objetivo: Ganhar familiaridade com o báscio em metemática no JavaScript.

Todo mundo ama matemática

Ok, talvez não. Alguns de nós gostam de matemática, alguns de nós tem a odiado desde que tivemos que aprender a tabuada de multiplicação e divisão na escola, e alguns de nós estão em algum lugar no meio dos dois cenários. Mas nenhum de nós pode negar que a matemática é uma parte fundamental da vida sem a qual não poderíamos ir muito longe. Isso é especialmente verdadeiro quando estamos aprendendo a programar em  JavaScript (ou em qualquer outra linguagem, diga-se de passagem) — muito do que fazemos se baseia no processamento de dados numéricos, cálculo de novos valores, etc. Assim você não ficará surpreso em aprender que o JavaScript tem uma configuração completa de funções matemáticas disponíveis.

Este artigo discute apenas as partes básicas que você precisa saber agora.

Tipos de números

Em programação, até mesmo o humilde sistema de números decimais que todos nós conhecemos tão bem é mais complicado do você que possa pensar. Usamos diferentes termos para descrever diferentes tipos de números decimais, por exemplo:

  • Integers (inteiros) são números inteiros, ex. 10, 400 ou -5.
  • Números de ponto flutuante (floats) tem pontos e casas decimais, por exemplo 12.5 e 56.7786543.
  • Doubles são tipos de floats que tem uma precisão maior do que os números de ponto flutuante padrões (significando que eles são mais precisos, possuindo uma grande quantidade de casas decimais).

Temos até mesmo diferentes tipos de sistemas numéricos! O decimal tem por base 10 (o que significa que ele usa um número entre 0–9 em cada casa), mas temos também algo como:

  • Binário — A linguagem de menor level dos computadores; 0s e 1s.
  • Octal — Base 8, usa um caractere entre 0–7 em cada coluna.
  • Hexadecimal — Base 16, usa um caractere entre 0–9 e depois um entre a–f em cada coluna. Você pode já ter encontrado esses números anteriormente, trabahando com cores no CSS.

Antes de se preocupar com seu cérebro estar derretendo, pare agora mesmo! Para um começo, vamos nos ater aos números decimais no decorrer desse curso; você raramente irá se deparar com a necessidade de começar a pensar sobre os outros tipos, se é que vai precisar algum dia.

A segunda boa notícia é que diferentemente de outras linguagens de programação, o JavaScript tem apenas um tipo de dados para números, você advinhou, Number. Isso significa que qualquer que seja o tipo de números com os quias voceê está lidando em JavaScript, você os manipula do mesmo jeito.

Tudo é número para mim

Vamos brincar rapidamente com alguns números para nos familiarizarmos com a sintaxe básica que precisamos. Insira os comandos listados abaixo em seu console JavaScript, ou use o console simples incorporado abaixo se preferir.

Abra em uma nova janela

  1. Primeiramente, vamos declarar duas variáveis e as inicializar com um integer e um float, respectivamente, então digitaremos os nomes das variávei para verificar se está tudo em ordem:
    var meuInt = 5;
    var meuFloat = 6.667;
    meuInt;
    meuFloat;
  2. Valores numéricos são inseridos sem aspas — tente declarar e inicializar mais duas variáveis contendo números antes de seguir em frente.
  3. Agora vamos checar se nossas duas variáveis originais são do mesmo tipo de dados. Há um operador chamado typeof no JavaScript que faz isso. Insira as duas linhas conforme mostradas abaixo:
    typeof meuInt;
    typeof meuFloat;
    Você deve obter "number" de volta nos dois casos — isso torna as coisas muito mais fáceis para nós do que se diferentes tipos de npumeros tivessem diferentes tipos de dados, e tivéssemos que lidar com eles em diferentes maneiras. Ufa!

Operadores aritiméticos

São os operadores que utilizamos para fazer as operações aritiméticas básicas:

Operador Nome Propósito Exemplo
+ Adição Adiciona um número a outro. 6 + 9
- Subtração Subtrai o número da direita do número da esquerda. 20 - 15
* Multiplicação Multiplica um número pelo outro. 3 * 7
/ Divisão Divide o número da esquerda pelo número da direita. 10 / 5
% Restante (Remainder - as vezes chamado de modulo)

Retorna o resto da divisão em números inteiros do número da esquerda pelo número da direita.

8 % 3 (returna 2, como três cabe duas vezes em 8, deixando 2 como resto.)

Nota: Você verá algumas vezes números envolvidos em aritimética chamados de operandos.

Nós provavelmente não precisamos ensinar a você como fazer matemática básica, mas gostaríamos de testar seu entendimento da sintaxe envolvida. Tente inserir os exmplos abaixo no seu console JavaScript, ou use o console incorporado visto anteriormentese preferir, para se familiarizar com a sintaxe.

  1. Primeiro tente inserir alguns exemplos simples por sua conta, como
    10 + 7
    9 * 8
    60 % 3
  2. Você pode tentar declarar e inicializar alguns números dentro de variáveis, e tentar usá-los nas operações — as variáveis irão se comportar exatamente como os valores que elas armazenam para a finalidade das operações. Por exemplo:
    var num1 = 10;
    var num2 = 50;
    9 * num1;
    num2 / num1;
  3. Por último, nessa seção, tente inserir algumas expressões mais complexas, como:
    5 + 10 * 3;
    num2 % 9 * num1;
    num2 + num1 / 8 + 2;

Alguns dos exemplos do último bloco podem não ter retornado os valores que você estava esperando; a seção abaixo pode lhe fornecer o porquê.

Precedência de operador

Vamos olhar para o último exemplo, assumindo que num2 guarda o valor 50 e num1 possui o valor 10 (como iniciado acima):

num2 + num1 / 8 + 2;

Como um ser humano, talvez você leia isso como "50 mais 10 é igual a 60", depois "8 mais 2 é igual a 10", e então "60 dividido por 10 é igual a 6".

No entanto seu navegador vai ler "10 dividido por 8 é igual a 1.25", então "50 mais 1.25 mais 2 é igual a 53.25".

Isso acontence por causa da precedência de operadores — algumas operações serão aplicadas antes de outras quando calcularmos o resultado de uma soma (referida em programação como uma expressão).  A precedência de operadores em JavaScript é semelhante ao ensinado nas aulas de matemática na escola — Multiplicação e divisão são realizados primeiro, depois a adição e subtração (a soma é sempre realizada da esquerda para a direita).

If you want to override operator precedence, you can put parentheses round the parts that you want to be explicitly dealt with first. So to get a result of 6, we could do this:

(num2 + num1) / (8 + 2);

Try it and see.

Note: A full list of all JavaScript operators and their precedence can be found in Expressions and operators.

Increment and decrement operators

Sometimes you'll want to repeatedly add or subtract one to/from a numeric variable value. This can be conveniently done using the increment (++) and decrement(--) operators. We used ++ in our  "Guess the number" game back in our first splash into JavaScript article, when we added 1 to our guessCount variable to keep track of how many guesses the user has left after each turn.

guessCount++;

Note: They are most commonly used in loops, which you'll learn about later on in the course. For example, say you wanted to loop through a list of prices, and add sales tax to each one. You'd use a loop to go through each value in turn and do the necessary calculation for adding the sales tax in each case. The incrementor is used to move to the next value when needed. We've actually provided a simple example showing how this is done — check it out live, and look at the source code to see if you can spot the incrementors! We'll look at loops in detail later on in the course.

Let's try playing with these in your console. For a start, note that you can't apply these directly to a number, which might seem strange, but we are assigning a variable a new updated value, not operating on the value itself. The following will return an error:

3++;

So, you can only increment an existing variable. Try this:

var num1 = 4;
num1++;

Okay, strangeness number 2! When you do this, you'll see a value of 4 returned — this is because the browser returns the current value, then increments the variable. You can see that it's been incremented if you return the variable value again:

num1;

The same is true of -- : try the following

var num2 = 6;
num2--;
num2;

Note: You can make the browser do it the other way round — increment/decrement the variable then return the value — by putting the operator at the start of the variable instead of the end. Try the above examples again, but this time use ++num1 and --num2.

Assignment operators

Assignment operators are operators that assign a value to a variable. We have already used the most basic one, =, loads of times — it simply assigns the variable on the left the value stated on the right:

var x = 3; // x contains the value 3
var y = 4; // y contains the value 4
x = y; // x now contains the same value y contains, 4

But there are some more complex types, which provide useful shortcuts to keep your code neater and more efficient. The most common are listed below:

Operator Name Purpose Example Shortcut for
+= Addition assignment Adds the value on the right to the variable value on the left, then returns the new variable value x = 3;
x += 4;
x = 3;
x = x + 4;
-= Subtraction assignment Subtracts the value on the right from the variable value on the left, and returns the new variable value x = 6;
x -= 3;
x = 6;
x = x - 3;
*= Multiplication assignment Multiples the variable value on the left by the value on the right, and returns the new variable value x = 2;
x *= 3;
x = 2;
x = x * 3;
/= Division assignment Divides the variable value on the left by the value on the right, and returns the new variable value x = 10;
x /= 5;
x = 10;
x = x / 5;

Try typing some of the above examples into your console, to get an idea of how they work. In each case, see if you can guess what the value is before you type in the second line.

Note that you can quite happily use other variables on the right hand side of each expression, for example:

var x = 3; // x contains the value 3
var y = 4; // y contains the value 4
x *= y; // x now contains the value 12

Note: There are lots of other assignment operators available, but these are the basic ones you should learn now.

Active learning: sizing a canvas box

In this exercise, you will manipulate some numbers and operators to change the size of a box. The box is drawn using a browser API called the Canvas API. There is no need to worry about how this works — just concentrate on the math for now. The width and height of the box (in pixels) are defined by the variables x and y, which are initially both given a value of 50.

Open in new window

In the editable code box above, there are two lines marked with a comment that we'd like you to update to make the box grow/shrink to certain sizes, using certain operators and/or values in each case. Let's try the following:

  • Change the line that calculates x so the box is still 50px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator.
  • Change the line that calculates y so the box is 75px high, but the 75 is calculated using the numbers 25 and 3 and an arithmetic operator.
  • Change the line that calculates x so the box is 250px wide, but the 250 is calculated using two numbers and the remainder (modulo) operator.
  • Change the line that calculates y so the box is 150px high, but the 150 is calculated using three numbers and the subtraction and division operators.
  • Change the line that calculates x so the box is 200px wide, but the 200 is calculated using the number 4 and an assignment operator.
  • Change the line that calculates y so the box is 200px high, but the 200 is calculated using the numbers 50 and 3, the multiplication operator, and the addition assignment operator.

Don't worry if you totally mess the code up. You can always press the Reset button to get things working again. After you've answered all the above questions correctly, feel free to play with the code some more or create your own challenges.

Comparison operators

Sometimes we will want to run true/false tests, then act accordingly depending on the result of that test — to do this we use comparison operators.

Operator Name Purpose Example
=== Strict equality Tests whether the left and right values are identical to one another 5 === 2 + 4
!== Strict-non-equality Tests whether the left and right values not identical to one another 5 !== 2 + 3
< Less than Tests whether the left value is smaller than the right one. 10 < 6
> Greater than Tests whether the left value is greater than the right one. 10 > 20
<= Less than or equal to Tests whether the left value is smaller than or equal to the right one. 3 <= 2
>= Greater than or equal to Tests whether the left value is greater than or equal to the right one. 5 >= 4

Note: You may see some people using == and != in their tests for equality and non-equality. These are valid operators in JavaScript, but they differ from ===/!==. The former versions test whether the values are the same but not whether the values' datatypes are the same. The latter, strict versions test the equality of both the values and their datatypes. The strict versions tend to result in fewer errors, so we recommend you use them.

If you try entering some of these values in a console, you'll see that they all return true/false values — those booleans we mentioned in the last article. These are very useful, as they allow us to make decisions in our code, and they are used every time we want to make a choice of some kind. For example, booleans can be used to:

  • Display the correct text label on a button depending on whether a feature is turned on or off
  • Display a game over message if a game is over or a victory message if the game has been won
  • Display the correct seasonal greeting depending what holiday season it is
  • Zoom a map in or out depending on what zoom level is selected

We'll look at how to code such logic when we look at conditional statements in a future article. For now, let's look at a quick example:

<button>Start machine</button>
<p>The machine is stopped.</p>
var btn = document.querySelector('button');
var txt = document.querySelector('p');

btn.addEventListener('click', updateBtn);

function updateBtn() {
  if (btn.textContent === 'Start machine') {
    btn.textContent = 'Stop machine';
    txt.textContent = 'The machine has started!';
  } else {
    btn.textContent = 'Start machine';
    txt.textContent = 'The machine is stopped.';
  }
}

Open in new window

You can see the equality operator being used just inside the updateBtn() function. In this case, we are not testing if two mathemetical expressions have the same value — we are testing whether the text content of a button contains a certain string — but it is still the same principle at work. If the button is currently saying "Start machine" when it is pressed, we change its label to  "Stop machine", and update the label as appropriate. If the button is currently saying "Stop machine" when it is pressed, we swap the display back again.

Note: Such a control that swaps between two states is generally referred to as a toggle. It toggles between one state and another — light on, light off, etc.

Summary

In this article we have covered the fundamental information you need to know about numbers in JavaScript, for now. You'll see numbers used again and again, all the way through your JavaScript learning, so it's a good idea to get this out of the way now. If you are one of those people that doesn't enjoy math, you can take comfort in the fact that this chapter was pretty short.

In the next article, we'll explore text and how JavaScript allows us to manipulate it.

Note: If you do enjoy math and want to read more about how it is implemented in JavaScript, you can find a lot more detail in MDN's main JavaScript section. Great places to start are our Numbers and dates and Expressions and operators articles.

Etiquetas do documento e colaboradores

 Colaboradores desta página: MattBizzo, rubenfaria
 Última atualização por: MattBizzo,