Saber expressões aritméticas é fundamento para desenvolvimento de animações em javascript, desde movimentações de ponto a ponto à coisas complexas com seqüências aleatórias.

Operadores matemáticos:

“+” O operador de adição. Vale lembrar que o + também é usado para concatenar strings.

“-” O operador de subtração.

“*” O operador de multiplicação. (O nome do caracter é asterisco, não asteristico!)

“/” O operador de divisão.

“%” O operador de módulo. Com o módulo podemos obter o resto de uma divisão.

“++” Pré ou pós-incremento. Utilizado para incrementar uma variável em uma unidade.
“–“ Pré ou pós-decremento. Utilizado para decrementar uma variável em uma unidade.

Declarando números

Declarar números é realmente muito simples:
Declarando números inteiros

var numero = 10;
numero = 007; // apenas 7 pra todos os efeitos
numero = -5; // sim, temos números negativos!

O único detalhe que posso ressaltar aqui é sobre a declaração de números decimais. No nosso padrão de numeração, o separador decimal é a vírgula “,”, porém o Javascript adota o sistema inglês, que usa o ponto “.” como separador decimal.

Declarando números decimais

var numero = 7.339;
numero = 0.56;
numero = .56 // o mesmo efeito da declaração acima

Talvez você ache um insulto a sua inteligência mas, vou deixar aqui claro que você não deve usar separadores de milhar nos números, ou seja, 1256 é apenas 1256, não 1.256, nem 1,256. =) #FIKADIKA

Se você colocar uma vírgula no número, o interpretador Javascript apenas vai ignorar tudo o que estiver após ela, além dela própria.

Adição

A famosa “continha de mais”. Não há muitos segredos em usar a adição, assim como na vida real. Veja um exemplo:

var numero1 = 10;
var numero2 = 15;
alert( numero1 + numero2 );

O único cuidado que você deve ter é que, o sinal de adição “+” também é usado para concatenar strings, lembra-se? A ordem com que as operações são processadas é da esquerda para a direita (supondo apenas adições neste exemplo). Se o interpretador Javascript encontrar uma string, ele começará a concatenar tudo o que encontrar, ao invés de somar. Acompanhe alguns exemplos:

var numero1 = 13;
var numero2 = 6;
alert( numero1 + numero2 + " é um número legal!" );

Para entender o que aconteceu acima, vamos ler a expressão como o interpretador Javascript a entendeu. Partindo da esquerda, ele encontrou um número na variável numero1 e outro número na variável numero2. Como eram dois números e o sinal de mais entre eles, uma adição foi feita resultando num número: 19. Na sequência, ele encontrou uma string ” é um número legal!” que deveria se juntar ao número anteriormente obtido (19). Como a operação seria entre um número e uma string, o interpretador fez uma concatenação, ao invés de uma soma.

Não entendeu toda a teoria acima? Um exemplo pode ajudá-lo:

var numero1 = 13;
var numero2 = 71;
alert( "Um número legal: " + numero1 + numero2 );

Notou que a soma dos números não ocorreu? Isso aconteceu pois as operações, neste caso, partiram da esquerda conforme: uma string com um número, houve uma concatenação e a saída foi uma string. A string de saída da operação anterior com o outro número, mais uma vez uma string com um número, outra concatenação.

Isto significa que sempre que o interpretador encontrar uma string e um número e, tiver de decidir entre somar ou concatenar, ele sempre fará a concatenação, mesmo que a string esteja na forma de um número, exemplo: “15″.

É possível explicitar ao interpretador para fazer a soma dos números antes de tentar as outras operações. Assim como na matemática, basta usarmos os parênteses em volta da expressão. Os parênteses instruirão o interpretador a fazer aquela operação antes das demais. Isso se chama precedência.

Agora que muito já foi dito sobre a adição, explicar e entender as outras três operações básicas, será fácil! =)

Subtração

“Continha de menos” para os mais íntimos. Bastante simples e direto:
Exemplos de subtração

var numero1 = 15;
var numero2 = 10;
alert( numero1 - numero2 ); // 5
alert( 10 - 15 ); // -5, o resultado pode ser negativo
alert( 3.53 - 2 ); // 1.5299999999999998 (discussão abaixo)

A terceira opção deu um resultado no mínimo curioso, certo? Naturalmente aquela subtração teria como resultado 1.53 mas, como você pode ver, isso não acontece. A solução para isso é arredondar o número para um número de casas decimais aceitável ou desejado.

O sinal de subtração é usado também para criar números negativos. Sendo assim, podemos ter uma operação do tipo:
O sinal de subtração para números negativos

alert( 10 - -5 ); // 15

Como eu tenho certeza que você se lembra, quando fazemos a subtração de um número negativo, na verdade faremos uma soma. Isso é o que ocorre no exemplo acima. Lembra-se? “Menos com menos dá mais!” =)

Multiplicação

Quando aprendemos a multiplicação na escola, usamos para ela um destes dois operadores: o ponto “.” e o xis “x”. Em programação, não usamos nem um, nem outro. O operador de multiplicação aqui é o asterisco “*” (e como já dito antes, não asteristico!).

A multiplicação é muito simples e, alguns exemplos o ajudarão a relembrar tudo o que você precisa saber:
Exemplos de multiplicação

var numero1 = 7;
var numero2 = 3;
alert( numero1 * numero2 ); // 21
alert( numero2 * numero1 ); // sim! "A ordem dos fatores não altera o produto." =)
alert( 7 * -3 ); // -21, o resultado pode ser negativo
alert( -7 * -3 ); // 21, "menos com menos dá mais!"

Divisão

Para aqueles que não apreciam muito a matemática, a divisão é certamente a operação mais odiada! Talvez por ser, dentre as 4 operações básicas, a mais complicada de se calcular mental ou manualmente. Mas veja agora com outros olhos! Você está trabalhando com um computador, é ele quem fará os cálculos para você! =)

Se você tem uma vaga lembrança da sua professora primária lhe ensinando a divisão, deve lembrar-se que existem divisões com resto. Aqui, o operador de divisão faz os cálculos para obter o quociente mais exato possível, sempre com resto zero. É exatamente igual o que uma calculadora faz. Nós podemos obter o resto de uma divisão também, mas isso é feito com o próximo operador que veremos, o módulo. Por ora, vejamos alguns exemplos de divisão:
Exemplos de divisão

var numero1 = 20;
var numero2 = 5;
alert( numero1 / numero2 ); // 4
alert( numero2 / numero1 ); // 0.25, a ordem na divisão é importante
alert( -20 / 5 ); // -4
alert( -20 / -5 ); // 4
alert( 22 / 4 ); // 5.5

Da lista de exemplos acima, note o último exemplo: 22 dividido por 4. Como você deve saber mentalmente, 22 não é múltiplo de 4, logo esta divisão não será exata. E foi justamente isso o que aconteceu.

Se pegarmos o múltiplo de 4 mais próximo de 22, que seja menor que o próprio 22, obteremos o 20. 22 menos 20 dá 2, que seria o resto de nossa divisão. Porém, os cálculos não param por aí. O interpretador fará também a divisão do resto 2 por 4, que mentalmente podemos chegar em: meio. Por isso o resultado da divisão é 5.5.

Módulo

O módulo não é um operador que conhecemos na escola, muito embora já saibamos como calculá-lo. O módulo é usado para obter o resto de uma divisão:
Exemplos com o operador de módulo

var numero1 = 20;
var numero2 = 6;
alert( numero1 % numero2 ); // 2
alert( 17 % 2 ); // 1
alert( 16 % 4 ); // 0

O módulo poderá ser qualquer número menor que o divisor, inclusive zero.

As utilidades do módulo são muitas, dividir uma listagem de itens em duas, três, quatro, n colunas… Verificar se cada linha de uma tabela é par ou ímpar e colocar cores diferentes a cada uma delas (conhecido como “zebrar uma tabela”) e assim vai…

Precedência

Dicionário. Vamos ver o quanto você se lembra de uma das regrinhas básicas do ensino fundamental. Olhando para o código abaixo, qual seria o valor armazenado na variável resultado?
Precedência?

var resultado = 7 + 3 * 2;

20? 13? 9999? =) A resposta certa é 13. Caso você saiba o motivo, ótimo! Caso não consiga se lembrar, recomendo continuar a leitura deste tópico.

Na matemática, a multiplicação e a divisão têm precedência sobre a adição e a subtração, ou seja, têm prioridade, devem ser feitas primeiro! Por isso o resultado é 13! Primeiro fazemos a multiplicação 3 vezes 2, que dá 6 para daí somar com 7, resultando no 13.

Caso você esteja se perguntando sobre o módulo, o módulo é uma divisão, logo tem a mesma precedência da divisão.

E quando os operadores têm a mesma precedência, quem eu devo fazer antes? Neste caso, faça as operações normalmente, da esquerda para a direita. Exemplos? Claro!

var resultado = 6 / 3 * 2;
alert( resultado );

E se alterarmos um pouco a ordem? Colocando a multiplicação antes da divisão:

var resultado = 2 * 3 / 6;
alert( resultado );

Definindo a precedência

Lembra-se do nosso exemplo com adição e multiplicação, onde eu disse que a multiplicação sempre é feita antes da adição? Haverá casos em que você realmente deseja que a soma seja feita antes. Para esses casos, os parênteses irão ajudar você a definir a precedência como desejar. Acompanhe:

var resultado = 7 + 3 * 2;
alert( resultado ); // 13
// com os parênteses, forçando a precedência da adição:
var resultado = ( 7 + 3 ) * 2;
alert( resultado ); // 20

O primeiro exemplo eu já havia mostrado. Note no segundo exemplo que adicionamos os parênteses em torno da adição, isto indica que ela deve ser feita primeiro!

Na matemática primária, aprendemos a usar parênteses “()”, colchetes “[]” e chaves “{}” para expressar vários níveis de precedência. Em programação, usamos apenas parênteses. Desta forma, você pode definir todas as precedências que precisar, sempre com parênteses.
Pré-incremento/decremento e pós-incremento/decremento

Muitas vezes precisamos fazer um contador qualquer, onde vamos aumentando ou diminuindo um valor qualquer até outro valor qualquer, explícito ou não. Nesses casos, onde incrementamos ou decrementamos o valor de uma variável, é que podemos usar os operadores de pré ou pós incremento/decremento.

Entender esses operadores é fácil, quando incrementamos o valor de uma variável, o incremento é de uma unidade. Quando decrementamos, também é uma unidade. A diferença é apenas entre pré ou pós. Veja a sequência de exemplos para entender melhor:

var x = 3;
x++;
alert( x ); // 4

x = 3;
++x;
alert( x ); // 4

No exemplo acima, as operações de incremento apareceram destacadas. Na primeira metade do exemplo, eu usei o pré-incremento. Vamos entender o que houve ali:

Na primeira linha eu declarei que a variável x vale 3. Na sequência eu fiz um pós-incremento nela. Por fim, exibe seu valor: 4. Vamos entender agora a segunda parte:

Logo após a primeira metade, eu redeclarei a variável x com o valor 3. Fiz um pré-incremento e exibi o valor da variável na sequência: 4, também.

Nenhuma diferença? Neste caso não. Mas veja um exemplo aonde atribuiremos o valor (pré ou pós-incrementado) a uma nova variável.

var x = 3;
var y = x++; // atribuindo com pós-incremento
alert( y ); // 3

x = 3;
y = ++x; // atribuindo com pré-incremento
alert( y ); // 4

Agora sim temos a diferença! Na primeira metade, quando fazemos a atribuição com pós-incremento, o interpretador primeiro faz a atribuição e após isso faz o incremento (agora o pós-incremento faz sentido? =). Na segunda metade, primeiro se faz o incremento e depois a atribuição, o que justifica o nome pré-incremento!

Por fim, vale lembrar que apesar de eu ter usado apenas os operadores de incremento nos exemplos, tudo o que foi dito também vale para os operadores de decremento. Veja o último exemplo, reescrito usando os operadores de decremento:

var x = 3;
var y = x--; // atribuindo com pós-decremento
alert( y ); // 3

x = 3;
y = --x; // atribuindo com pré-decremento
alert( y ); // 2

Esse Texto é Originalmente de um site que não consegui acessar, mas de qualquer forma fica aqui a Referencia: www.aprendajs.klaus.pro.br/operacoes-matematicas.html

Leia Também:

• Retornando largura com clientWidth (Javascript).
• Input Text Placeholder
• Operador Ternário (JavaScript)
• Hack para Safari 4, Firefox 3.5, Chrome 3 e muito mais com um JS
• Passando Variáveis JavaScript para PHP