 Buono sconto 4% su Toner e Cartucce agli utenti AZpoint. SU Iomiricarico.it!!
Vediamo in questo articolo come caricare un'immagine casuale con JavaScript all'apertura della pagina
<script language="JavaScript">
<!--
img = new Array()
ran = Math.floor(4 * Math.random());
img[0] = 'immagine1.jpg" width="" height="" border=""';
img[1] = 'immagine2.jpg" width="" height="" border=""';
img[2] = 'immagine3.jpg" width="" height="" border=""';
img[3] = 'immagine4.jpg" width="" height="" border=""';
document.write("<img src=\""+img[ran]+"\">");
// -->
</script>
Vediamo come funziona lo script.
Creo la matrice Array istanziandola con una variabile di tipo new.
Anche se Javascript non ha alcun tipo di dati di matrice, è possibile
creare una struttura di matrice definendo un'oggetto Array.
Facendo questo, è possibile creare delle proprietà perché l'oggetto
contenga i dati che occorrono.
img = new Array()
assegno un nome alla matrice con l'operatore uguale =
questo operatore assegna alla variabile di sinistra il valore di quella di destra.
Ogni volta che verrà richiamata la variabile img verrà fatto riferimento alla matrice
e alle proprietà dei dati inseriti.
Adesso creo la variabile per la funzione random, per estrarre un dato casuale,
in questo caso un'immagine e accedere alle proprietà individuali della matrice
ran = Math.floor(4 * Math.random());
L'oggetto Math fornisce costanti e funzioni matematiche oltre a quelle fornite dagli
operatori standard per l'addizione, la sottrazione, la moltiplicazione ecc...,
in cui ogni singolo carattere rappresenta la funzione da eseguire.
L'oggetto Math è considerato statico, ossia non richiede un esempio dell'oggetto
per utilizzare le proprietà e i metodi dell'oggetto. Non occorre la dichiarazione new
per creare una copia dell'oggetto Math.
Il metodo Math.floor(numero) visualizza l'intero più vicino verso lo zero
ES:Math.floor(32.5) diventa 32 fate una prova con gli esempi sotto
<script>document.write(Math.floor(32.5))</script>
Se la parte decimale di N° e' 0.5 il N° viene arrotondato verso l'alto 0
Stesso per i numeri negativi -24.8 diviene -25
<script>document.write(Math.floor(-24.8))</script>
Dopo il metodo Math.floor fra le parentesi tonde inserisco il numero degli elementi della matrice
i questo esempio 4 e li moltiplico utilizzando il metodo Math.random()
il metodo Math.random() estrarrà un'immagine casuale tra quelle inserite negli elementi della matrice
Costruzione elementi matrice
img[0] = 'immagine1.jpg" width="" height="" border=""';
Metodo: identificatore[numero] dove l'identificatore è la variabile img che richiama
la matrice Array, img[0] img[1] img[2] img[3]
Nb. il primo numero assegnato all'identificatore, inserito tra le parentesi quadre deve essere zero [0]
se partiamo da uno [1] img[1] img[2] img[3] img[4] questa immagine non verrà mai visualizzata
img[0] = 'immagine1.jpg" width="" height="" border=""';
se per comodità o praticità volete assegnare al primo identificatore il N° [1]
nodificate la variabile ran in questo modo:
ran = Math.floor(4 * Math.random()+1);
dopo l'identificatore basta inserire le immagini da visualizzare
basta solo img[0] = 'immagine1.jpg'; ma è consigliato inserire le misure delle immagini per evitare
(anche se leggero) un rallentamento nel caricamento dell'immagine dovendo il browser eseguire questa funzione
Questa è la parte che si occupa di visualizzare con l'oggetto document.write l'immagine
document.write("<img src=\""+img[ran]+"\">");
mettiamo il tag <img src= , la variabile img per la matrice Array e fra le parentesi quadre
la variabile ran [ran] per gli identificatori e la funzione random.
Massimo Giari
|
Shopping
