Obiettivo del tutorial: Definizione del codice JavaScript necessario per caricare un'immagine casuale ogni volta che si apre la pagina web in cui è inserito il tale codice javascript.

In questo tutorial vedremo un semplice programmino javascript che permette di caricare una immagine casuale tra tutte quelle immagazzinate in un vettore.

Prima di iniziare con il codice di questo tutorial vi segnalo due risorse che potrebbero esservi utili:

  Array JavaScript - Teoria ed Esempi
La Sintassi JavaScript necessaria per lavorare con gli array.

  Math.random - Generare numeri casuali con JavaScript
Come funziona math.random ? un esempio per generare numeri casuali.
Se già conoscete array e generazione di numeri casuali, potete partire direttamente con questo tutorial.

Esempio del caricatore di un'immagine casuale:

Notate come facendo un refresh della pagina l'immagine cambia.

Il codice per generare un'immagine casuale con Javascript

<script language="JavaScript">
<!--
img = new Array()
ran = Math.floor(4 * Math.random());
img[0] = 'immagine1.jpg';
img[1] = 'immagine2.jpg';
img[2] = 'immagine3.gif';
img[3] = 'immagine4.jpg';
document.write("<img src=\""+img[ran]+"\">");
// -->
</script>

Per utilizzare l'esmpio sopra, inseritelo all'interno dei tag "body".

Spiegazione algoritmo di funzionamento
Come struttura dati per memorizzare l'indirizzo web delle immagini è stato usato un vettore, nel quale ho inserito un link per ogni "cella" del vettore. Successivamente utilizzando "ran" (numero casuale tra 1 e 4) faccio la scelta dell'immagine da visualizzare.
Il metodo Math.floor(numero) visualizza l'intero più vicino a "numero".

ES: Math.floor(12.5) diventa 12.

Il numero casuale da passare a Math.floor viene generato con il metodo Math.random() (vedi Esempio Math.random).
Per ottenere un numero casuale tra 0 e 4 moltiplico il numero casuale restituito da math.random() per 4.

Bene con quest'ultima considerazione l'esempio dovrebbe essere chiaro.