Come visualizzare frasi random con JavaScript

In questa pillola vedremo come visualizzare frasi random al click su un elemento della pagina.

DEMO

Questo è il semplice codice HTML della demo, da formattare a piacere con i CSS:

<div id="frase">
  <p>Frase di default</p>
</div>
<div id="immagine">
  <img src="nomecartella/nomeimg.ext" alt="" />
</div>

Un div contiene l'elemento che attiva l'evento al click del mouse, in questo caso un'immagine, e un secondo div contiene la frase da visualizzare.

Il codice javascript utilizza la libreria jQuery e, per l'effetto, la libreria jQuery UI.

frasi = new Array();
frasi[0] = "Frase zero";
frasi[1] = "Frase uno";
frasi[2] = "Frase due";
frasi[3] = "Frase tre";
/* ripetere la riga di codice per quanti frasi si vogliono far visualizzare, 
aumentando il valore nelle parentesi quadre */

$(document).ready(function(){
  $('#immagine img').click(function(){
    var frase_random = frasi[Math.floor(Math.random() * frasi.length)];
    $('#frase p').text(frase_random);
    $('#frase').show();
    $('#immagine').effect( "bounce", { times: 3 }, 500 )
  });
});

Le frasi vengono memorizzate in un array, un insieme di oggetti associati ad un indice numerico scritto tra parentesi quadre.

Al click sull'immagine del ranocchio viene generato in modo casuale un numero decimale compreso tra 0 e 1 grazie al metodo javascript Math.random(). Esso viene moltiplicato per il numero degli elementi dell'array (frasi.length) e arrotondato per difetto all'intero più vicino dal metodo Math.floor().
Questo numero identifica l'indice dell'array, quindi la frase da visualizzare.

Facendo un esempio pratico:

• Math.random = 0,5109880554592712
• frasi.length = 4
• 0,5109880554592712 * 4  = 2,0439522218370848 = 2 (Frase due)

La frase sostituirà quella di default grazie al metodo text() di jQuery.

L'effetto buonce (rimbalzo) di jQuery UI fa eseguire all'immagine cliccata 3 rimbalzi in 500 millisecondi.

Per approfondire:

• Javascript Math Object - W3Schools
• Buonce Effect - jQuery UI