INDICE

RIPRODURRE MUSICA A CASO IN UNA POP UP

SPIEGAZIONE DEL CODICE

Il codice completo e come richiamarlo si trovano cliccando qui

Visualizza l'esempio

Prepariamo una pagina HTML con i soliti tag:
<html>
<head>
Ed ora aggiungiamo lo script:

<script language="JavaScript">Dichiarazione del fatto che si sta inserendo codice JavaScript
var num=0Azzeriamo ogni volta la variabile nella quale memorizzeremo il numero estratto
titolo= new Array('rock.mid', 'GMASOCK.MID','anno.mid', 'jamesbond.mid') Attraverso l'array abbiamo la possibiltà di chiamare il singolo file non con il suo nome ma per mezzo della posizione che occupa nell'array stesso.
Ad esempio:
  • 'rock.mid' viene identificato da titolo[0];
  • 'GMASOCK.MID' viene identificato da titolo[1];
  • ...
  • 'jamesbond.mid' viene identificato da titolo[3].
var codice="" Dichiarazione della variabile di nome "codice" nella quale memorizzeremo il codice per l'avvio del brano prescelto. Tale variabile, di tipo stringa, è inizialmente vuota.
     function estrai() { Dichiarazione della funzione che ci permette di ottenere il risultato.
      num=(Math.floor(Math.random()*40000)) % 4 In questa funzione innanzitutto viene calcolato
Math.random()
che genera un numero pseudocasuale maggiore o uguale a zero e minore di uno;
*40000
il numero viene moltiplicato per 40000 così da avere tanti più numeri: se non si fa così i numeri ottenuti sono poco variabili;
Math.floor
si prende l'intero minore del numero ottenuto prima;
% 4
si calcola il resto del numero diviso per 4: i resti possibili sono soltanto 0, 1, 2 e 3 e quindi, in conclusione, otteniamo il nostro scopo.
Se ad esempio i brani sono dieci, sostituire 10 al posto di 4.
Infine il numero ottenuto viene memorizzato nella variabile num attraverso l'istruzione più sopra riportata.
      codice='<embed src ="http://www.webfract.it/GUIDA/'+titolo[num]+'"><p align=center>Ascolta il brano numero '+ num + ' dal titolo '+ titolo[num]+'</p>'; Il codice che permette l'ascolto del brano estratto viene memorizzato nella variabile di nome codice. Si può notare che è stata attuata una concatenazione di stringhe, mediante il +. Alcune parti sono fisse, come ad esempio ' dal titolo ', mentre altre sono variabili.
Le parti fisse vengono chiuse fra apici, mentre quelle variabili no.
ATTENZIONE! Non bisogna andare a capo.
     if(document.all) Se document.all esiste, allora il browser è Explorer. Come è noto, il codice scritto per Explorer non è sempre compatibile con quello scritto per Netscape e dunque siamo costretti a scrivere istruzioni diverse per i due browsers.
     { Inizio della selezione binaria
        document.all('musica').innerHTML=codice; I tag HTML saranno interpretati come codice ed inseriti nell'elemento di nome 'musica' attraverso il metodo innerHTML. 'musica' è il nome dello span che inseriremo nella pagina.
} Parentesi di chiusura della selezione binaria.
     else if(document.getElementById){ Se invece document.getElementById esiste, allora il browser è Explorer 6 o Netscape 6 o Mozilla
     { Inizio della selezione binaria
        document.getElementById("musica").innerHTML =codice
}
Cambia la sintassi, ma l'effetto è sempre quello di inserire il codice nello span di nome "musica".
Viene quindi chiusa la selezione binaria attraverso la parentesi graffa.
else {
alert("il tuo browser non supporta questo metodo")
}
Siamo all'ultima alternativa: il codice precedente non viene riconosciuto e l'utente è avvertito del malfunzionamento del metodo.
}
Parentesi di chiusura della funzione estrai()
</script>
</head>
Fine script e chiusura dell'intestazione del documento.
<body onload="estrai()"> La funzione estrai() viene caricata all'apertura della pagina.
<span id="musica"></span> Uno span è in pratica una sorta di foglio trasparente che viene "incollato" sopra alla pagina di testo. All'interno dei tags <span> e </span> può essere inserito tutto quanto si trova normalmente in una pagina HTML, come testo, immagini, tabelle, marquees, collegamenti ipertestuali. Nel nostro esempio inseriremo dei suoni. L'attributo id dà un nome allo span, che altrimenti non potrebbe essere richiamato, ad esempio, nei codici Javascript.
</body>
</html>
Chiusura del corpo del documento e della pagina HTML.
NOTA: come in tutti gli scripts javascript, occorre fare molta attenzione alla sintassi per non generare un messaggio d'errore. In particolare, javascript distingue fra maiuscole e minuscole.

Per approfondimenti sulla gerarchia degli oggetti in JavaScript cliccare qui

Per approfondimenti sul DOM (modelli ad oggetto del documento) consigliamo un interessante articolo su HTML.it

Visualizza l'esempio


INDICE INDIETRO

©2004 www.webfract.it