Il codice completo e come richiamarlo si trovano cliccando qui
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=0 | Azzeriamo 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:
| ||
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
| ||
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 |
©2004 www.webfract.it