Como Gerar Números Aleatórios em JavaScript: A função random()

Nesse tutorial, vamos aprender como gerar qualquer número aleatório, usando o método random do objeto Math do JavaScript.

Estudar por Apostila em PDF

A Função random(): Math.random()

Uma das funcionalidades mais interessantes e importantes da programação, é a possibilidade de usarmos números aleatórios. São usados para criar senhas, na criptografia, em jogos e tudo quanto for programa e script que você imaginar.

No decorrer de nosso curso de JavaScript, você vai perceber a importância de saber gerar e usar números aleatórios.

Mas sem mais enrolação, para gerar um número aleatório de 0 até 1, usamos a função random do objeto Math:

Math.random()

Simplesmente usando e invocando essa função, ela vai te retornar valores de 0.0000... atéééé 0.99999....

Pode gerar o 0, cravado, mas não gera o 1.

Ou seja gera a partir de 0 até 1, sem incluir o 1.00000000...

Gerar números de 0 até 1

Vamos ver, na prática, tais números que sendo gerados.

Nosso código HTML + JS é:

<!DOCTYPE html>

<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
 </head>
 <body>
 <button onclick="gerar()">Gerar</button><br />
 Gerado: <div id="resp"></div>

 <script type="text/javascript">
  function gerar()
  {
    var resp = document.getElementById('resp');
    resp.innerHTML = Math.random();
  }
 </script>
 </body>
</html>

Resultado:

Gerado:

O que fizemos foi o seguinte: criamos um botão, que ao ser pressionado invoca a função gerar() do JavaScript. Depois, uma div de id 'resp', onde iremos usar o JS para inserir um texto ali.

No código JavaScript, temos a função gerar().
Lá, definimos a variável resp, que vai ser ligada a div resp do HTML e onde iremos inserir o valor do número aleatório gerado.

Geramos ele através do comando: Math.random();, que enviamos para a div resp através da propriedade innerHTML.

Gerar números de 0 e até 9: Math.floor

Ok, molezinha gerar números a partir de 0.0 até 1.0 (menor que 1.0...não chega neste valor, é abaixo dele).
Porém, quando vou precisar usar esses números decimais horrorosos e gigantes?

Vou precisar é gerar de 0 até 10, por exemplo. Como fazer?
Simples, basta multiplicarmos por 10.

Se antes gerava de 0.0 até 1.0
Agora o resultado é : 0.0 até 10.0

Mas aí vemos um problema, pode ser gerado: 0.2112
Então multiplicamos por 10: 2.112

Não quero quebrado! Quero um inteiro!
Simples: usa a função Math.floor(), que ela vai arredondar o número decimal para baixo!
Veja:

<!DOCTYPE html>
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
 </head>
 <body>
 <button onclick="gerar()">Gerar</button><br />
 Gerado: <div id="resp"></div>

 <script type="text/javascript">
  function gerar()
  {
    var resp = document.getElementById('resp');
    resp.innerHTML = Math.floor(10* Math.random());
  }
 </script>
 </body>
</html>

Resultado:

Gerado:

Gerar número de 1 até 10

0? Não quero gerar o zero!
Quero que saia algum dos números: 1, 2, 3, 4, 5, 6, 7, 8, 9 ou 10!

E agora, José?
Jovem: se ele gera de 0 até 9, como no exemplo anterior...some 1!

Código HTML + JS:

<!DOCTYPE html>
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
 </head>
 <body>
 <button onclick="gerar()">Gerar</button><br />
 Gerado: <div id="resp"></div>

 <script type="text/javascript">
  function gerar()
  {
    var resp = document.getElementById('resp');
    resp.innerHTML = Math.floor(10* Math.random() + 1);
  }
 </script>
 </body>
</html>

Resultado:

Gerado: