Nei precedenti numeri di questa mailing list abbiamo più volte sottolineato il peso e l'importanza dei menu all'interno dei siti Web. Contenstualmente abbiamo mostrato diverse soluzioni fornite da Javascript per organizzare al meglio le risorse di un sito. Questa settimana torniamo sull'argomento per trattare di uno script molto interessante, che ha nella semplicità di impostazione e nella versatilità i suoi punti di forza. Il codice che mostriamo di seguito utilizza sintassi propria del linguaggio di scripting armonizzato con le proprietà dei classici form HTML. Attraverso dei menu a tendina è possibile scegliere il link e cliccare sul pulsante di submit per raggiungerlo; ma non è questa la peculiarità principale dello script. L'esempio si compone di due campi SELECT, uno dei quali ospita i nomi delle categorie principali e l'altro, volta per volta, le relative sottocategorie. In questo modo si realizza una menu che cambia dinamicamente le proprie voci in base alla categoria selezionata.
Il file si compone di 1 file:
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento al file sopracitato, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
esempio.htm
Il file esempio.htm è una seplice pagina HTML nella quale inserire il codice necessario al funzionamento dello script. Tale codice va integralmente inserito nel corpo del documento e non, come accade solitamente, tra gli elementi <head>.
Ecco il codice integrale:
form name="doublecombo"
<select name="example" size="1"
onchange="redirect(this.options.selectedindex)">
<option>javascript</option>
<option>servizi</option>
<option>raccolte</option>
</select>
<select name="stage2" size="1">
<option value="https://www.html.it/jscript/corso/index.html">corso
javascript</option>
<option value="https://www.html.it/jscript/raccolta.htm">350
esempi</option>
<option
value="https://www.html.it/articoli/javascript.htm">articoli</option>
<option value="https://www.html.it/mailing/jscript.htm">mailing
list</option>
<option value="https://www.html.it/archivio/javascript.htm">archivio
arretrati</option>
</select>
<input type="button" name="test" value="vai" onclick="go()">
<script type="text/javascript" language="javascript">
<!--
var groups=document.doublecombo.example.options.length
var group=new array(groups)
for (i=0; i<groups; i++)
group[i]=new array()
group[0][0]=new option("corso
javascript","https://www.html.it/jscript/corso/index.html")
group[0][1]=new option("350 esempi","https://www.html.it/jscript/raccolta.htm")
group[0][2]=new option("articoli","https://www.html.it/articoli/javascript.htm")
group[0][3]=new option("mailing list","https://www.html.it/mailing/jscript.htm")
group[0][4]=new option("archivio
arretrati","https://www.html.it/archivio/javascript.htm")
group[1][0]=new option("mailing list","https://www.html.it/mailing")
group[1][1]=new option("forum","https://www.html.it/forum")
group[1][2]=new option("chatroom","https://www.html.it/chat.htm")
group[1][3]=new option("controlli","https://www.html.it/controllo")
group[2][0]=new option("300 applet java","https://www.html.it/java")
group[2][1]=new option("130 demo dynamic html","https://www.html.it/dynamic")
group[2][2]=new option("2000 gif animate","https://www.html.it/grafica/gif.htm")
group[2][3]=new option("500 sfondi","https://www.html.it/grafica/sfondi.htm")
group[2][4]=new option("450 font","https://www.html.it/font")
var temp=document.doublecombo.stage2
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}
function go(){
location=temp.options[temp.selectedindex].value
}
//-->
</script>
/form
Come scritto in apertura lo script fa massiccio uso dei form HTML ed infatti il codice è contenuto integralmente tra i tag <FORM></FORM>.
In apertura nominiamo il form "doublecombo" per richiamarlo successivamente all'interno della sintassi Javascript.
Le prime righe di codice impostano il menu che appare all'apertura di pagina con le tre categorie principali che abbiamo creato (Javascript, Servizi e Raccolte):
<select name="example" size="1"
onChange="redirect(this.options.selectedIndex)">
<option>Javascript</option>
<option>Servizi</option>
<option>Raccolte</option>
</select>
A queste categorie non va associato alcun link, perchè deputate a mostrare le relative sottocategorie.
Il codice immediatamente successivo imposta la sottocategoria da visualizzare all'apertura del documento. In altre parole impostiamo la sottocategoria di default, che abbiamo deciso essere "Javascript":
<select name="stage2" size="1">
<option value="https://www.html.it/jscript/corso/index.html">Corso
Javascript</option>
<option value="https://www.html.it/jscript/raccolta.htm">350
esempi</option>
<option
value="https://www.html.it/articoli/javascript.htm">Articoli</option>
<option value="https://www.html.it/mailing/jscript.htm">Mailing
list</option>
<option value="https://www.html.it/archivio/javascript.htm">Archivio
arretrati</option>
</select>
Il tasto di submit completa questo primo blocco di codice:
<input type="button" name="test" value="VAI" onClick="go()">
Successivamente vanno create le sottocategorie dinamiche, cioè visualizzate ad ogni variazione delle principali.
In precedenza abbiamo impostato la sottocategoria di default che, in questo caso, dobbiamo ripetere per consentire di tornare a "Javascipt" anche quando si è passati a "Risorse" o "Servizi":
group[0][0]=new Option("Corso Javascript","https://www.html.it/jscript/corso/index.html")
group[0][1]=new Option("350 esempi","https://www.html.it/jscript/raccolta.htm")
group[0][2]=new Option("Articoli","https://www.html.it/articoli/javascript.htm")
group[0][3]=new Option("Mailing list","https://www.html.it/mailing/jscript.htm")
group[0][4]=new Option("Archivio arretrati","https://www.html.it/archivio/javascript.htm")
Ad ogni voce sono assegnati due valori numerici che rappresentano il gruppo (in questo caso "0") e il numero progressivo della voce di menu (in questo caso "0", "1", "2" ecc.). Il nome e il link della voce vanno, poi, inseriti tra parentesi tonde:
("Corso Javascript","https://www.html.it/jscript/corso/index.html")
In questo caso specifico la voce appare sul menu come "Corso Javascript" e viene associata al link "https://www.html.it/jscript/corso/index.html". Stessa procedura per le altre voci della sottocategoria associata a "Javascript".
Le altre sottocategorie vanno impostate nello stesso modo con l'eccezione che il gruppo si chiama "1" (per i "servizi") e "2" (per le "raccolte"). Per la seconda categoria (servizi) le voci sono impostate in questo modo:
group[1][0]=new Option("Mailing list","https://www.html.it/mailing")
Mentre per la terza e ultima voce (raccolte):
group[2][0]=new Option("Mailing list","https://www.html.it/mailing")
