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.