Fatorial com laços WHILE e FOR em JavaScript

Neste tutorial de JS, vamos te ensinar a calcular o fatorial de qualquer número, usando apenas o laço FOR ou o laço WHILE, em JavaScript.

• Apostila de JavaScript para download

Obter meu certificado!

Fatorial na Matemática

Em Matemática, dizemos que um número natural N é fatorial quando ele é representado por N! e vale:
N! = N * (N-1) * (N-2) * ... * 3 * 2 * 1

Ou seja, para saber quanto vale x! basta multiplicar x por x-1, depois por x-2, depois por x-3...até chegar na multiplicação por 2 e por 1.

Por exemplo:
5! = 5 x 4 x 3 x 2 x 1 = 120
6! = 6 x 5 x 4 x 3 x 2 x 1 = 720
7! = 7 x 6 x 5 x 4 x 3 x 2 x 1 = 5040

Calcular Fatorial usando Laço FOR

Inicialmente, pedimos ao usuário um número inteiro positivo, maior ou igual a 1 e armazenamos na variável numero.

Depois, inicializamos uma variável resultado com o número 1.
Agora, basta multiplicar resultado por 1, depois por 2, depois por 3...depois por (numero-1) até multiplicar por numero.

Veja como fica.




Código HTML:

<!DOCTYPE html>
<html>
 <head>
   <title>Apostila JavaScript Progressivo</title>
   <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
   Fatorial de: <input id="numero" type="number"> <br />
   <button onclick="fatorial()">Exibir</button><br />
   Resposta: <div id='resposta'></div>
 </body>
</html>

Código script.js:

function fatorial(){
  var numero = parseInt(document.getElementById('numero').value);
  var resposta = document.getElementById('resposta');
  var resultado=1;

  for(var count=1 ; count<=numero ; count++)
   resultado *= count;

  resposta.innerHTML =resultado;
}

Teste:

---

Fatorial de:

Resposta:

---

Fatorial com Laço WHILE

Veja se consegue entender o código do cálculo de um número fatorial usando o laço WHILE.
É basicamente a mesma coisa do FOR, mas temos que criar e inicializar a variável antes do laço e dentro dele temos que fazer o incremento.

script.js:

function fatorial(){
  var numero = parseInt(document.getElementById('numero').value);
  var resposta = document.getElementById('resposta');
  var resultado=1;
  var count=1;

  while(count<=numero){
   resultado *= count;
   count++;
  }

  resposta.innerHTML =resultado;
}

Resultado:

---

Fatorial de:

Resposta:

---

Como Fazer uma Tabuada em JavaScript

Neste tutorial, vamos aprender como programar uma tabuada em JavaScript, de qualquer valor que o usuário deseje, usando o laço FOR.

Este exercício vai nos mostrar a utilidade dos loopings no dia-a-dia de um programador.

Obter meu certificado!

Exemplo de Tabuada

A boa e velha tabuada nada mais é que uma lista de operações de Matemática.

Por exemplo, a tabuada do 3 mostra:
3 x 1 = 3
3 x 2 = 6
3 x 3 = 9
....
3 x10= 30

Como todo bom programador, você deve prestar atenção em padrões.
No exemplo anterior da tabuada do três temos um padrão: o número 3 permanece constante e o outro número varia de 1 até 10.

Variar de tanto até tanto...isso te lembra algo?
Sim, laços! Vamos usar o FOR por exemplo.

Basta usar uma variável count que assume o valor de 1 até 10, veja:

Código HTML:

<!DOCTYPE html>
<html>
 <head>
   <title>Apostila JavaScript Progressivo</title>
   <script type="text/javascript" src="script.js"> </script>
 </head>
 <body>
    <script>tabuada();</script>
 </body>
</html>

script.js:

function tabuada(){
  for(var count=1; count<=10 ; count++)
   document.write("3 x "+count+" = " + (3*count) + "<br />");
}

Resultado:

Tabuada de Qualquer Número

Agora vamos fazer um script bem mais interessante e útil.

Ele vai primeiro pedir ao usuário um número, referente ao valor da tabuada que ele quer e independente do inteiro que ele tenha digitado, o script vai mostrar a tabuada desse número quando ele clicar no botão Exibir

Veja o código HTML + JS, em seguida iremos comentar:
HTML

<!DOCTYPE html>
<html>
 <head>
   <title>Apostila JavaScript Progressivo</title>
   <script type="text/javascript" src="script.js"> </script>
 </head>
 <body>
    Tabuada do número: <input id="num" type="number"> <br />
    <button onclick="tabuada()">Exibir</button><br />
    Tabuada: <br />
    <div id='resposta' style='display:inline'></div>
 </body>
</html>

script.js

function tabuada(){
  var num = parseInt(document.getElementById("num").value);
  var resposta = document.getElementById('resposta');
  var tabuada='';

  for(var count=1; count<=10 ; count++)
   tabuada += num+" x "+count+" = "+
               num*count+"<br />";
  
  resposta.innerHTML = tabuada;
}

Resultado:

---

Tabuada do número:

Tabuada:

---

Vamos lá, primeiro nosso código HTML.
Usamos um campo de input do tipo number para receber um número do usuário.
Em seguida, um botão que chama a função tabuada() ao ser clicado (onclick).

Depois, definimos a div resposta, é nesse bloco que iremos colocar o resultado da tabuada.
Quem vai alterar esse elemento é o JavaScript.

No script, primeiro pegamos o número digitado pelo usuário, que inicialmente é sempre uma string e transformamos em inteiro com a parseInt.

Depois definimos a variável resposta, que é uma referência para a div do HTML onde iremos exibir a tabuada.
Por fim, a string tabuada que vai receber todo o texto da tabuada, inicialmente ela deve ser nula.

Dentro do laço FOR é que vem o pulo do gato.
Vamos sempre incrementar texto a nossa string tabuada: tabuada += nova_string

Cada nova string é uma linha da nossa tabuada, que nada mais é que o produto do número que usuário digitou por 1, 2, 3, ..., 10.

Prontinho, a string tabuada está completa e pronta.
Vamos colocar esse valor no nosso documento através do:
resposta.innerHTML = tabuada;

E é isso, mandamos essa string lá pro corpo do HTML.