INDICE

CREARE UN JUKEBOX 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
function suona(brano)Dichiarazione della funzione di nome "suona". Dentro la parentesi abbiamo scritto il parametro di nome "brano" che, come vedremo, fornirà il valore di input alla funzione stessa.
{ Parentesi di apertura delle istruzioni della funzione
var lista='<embed src="http://www.webfract.it/GUIDA/' + brano + '" hidden=true loop=true autostart=true volume=70>'; Alla variabile di nome "lista" viene assegnato il codice che serve per inserire un suono in una pagina web. Le parti fisse del codice vengono racchiusa tra parentesi, mentre quelle variabili senza. Il tutto viene concatenato con il +. Notare come, nel nostro caso, la variabile sia brano, che è il parametro che avevamo dichiarato tra parentesi dopo il nome della funzione.
     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=lista; 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 =lista
}
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 suona(brano)
</script>
</head>
Fine script e chiusura dell'intestazione del documento.
<body bgcolor="#f1f1a1"> Ecco il corpo della pagina. Abbiamo inserito anche un colore di sfondo, ovviamente non necessario al funzionamento del jukebox
<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.
<p align=center><table border=1 width=107>
<tr><td>
<img src="http://www.webfract.it/GUIDA/jukebox.jpg" width=107 height=63>
Abbiamo inserito un'immagine in una tabella per una gradevole visualizzazione del jukebox.
<tr><td><p align=center><b>SCEGLI<form name="mioForm">
<select name="elenco" onChange="suona(window.document.mioForm.elenco.options[selectedIndex].value)">
<option selected value="none">  Muto
<option value="rock.mid">  Rock
<option value="GMASOCK.MID">  Gmasock
<option value="anno.mid">  Anno
<option value="jamesbond.mid">  Jamesbond
<option value="demo.mp3">  Demo.mp3
</select>
</form>
La lista delle canzoni del jukebox è stata inserita nell'elenco a discesa di nome "elenco" del form di nome "mioForm".
La chiave del programma sta nella riga di codice onChange="suona(window.document.mioForm.elenco.options[selectedIndex].value)" che significa che, quando l'utente effettua una nuova scelta nell'elenco a discesa, deve essere chiamata la funzione "suona". Al posto del parametro "brano" viene automaticamente sostituito window.document.mioForm.elenco.options[selectedIndex].value, cioè il nome del brano selezionato (che dovrà corrispondere al nome del brano memorizzato del proprio server).
Notiamo infine che la prima scelta della lista ha valore (value) "none" e quindi non produce alcun effetto oppure interrompe il suono che era stato avviato prima.
</table></p> Chiusura della tabella
</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 sui form e sugli elenchi a discesa 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