L'organizzazione di link è una delle esigenze più sentite dagli sviluppatori Web e può essere affrontata con strumenti diversi. Applet Java o dynamic HTML, per esempio, permettono soluzioni molto avanzate e versatili. Per una panoramica su questi strumenti ti rimandiamo alle omonime sezioni presenti in HTML.it, ed in particolare:
Javascript consente soluzioni meno "spettacolari" ma certamente più semplici da impostare e personalizzare, nonchè più veloci da scaricare rispetto alle applet Java.
Lo script che presentiamo si riferisce ad un menu di link a discesa, che sfrutta per il proprio funzionamento, sia sintassi Javascript che le peculiarità dei classici moduli HTML.
L'esempio si compone di 5 file :
- esempio.htm
- pagina01.htm
- pagina02.htm
- pagina03.htm
- vai.gif
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Il file da visualizzare con il tuo browser è "esempio.htm". Tra i 5 file presenti nello zip allegato, solo questo va modificato ed adattato alle esigenze del proprio menu.
Per facilitare la comprensione di questo script, simuliamo l'esigenza di creare un menu che comprenda 3 link ad altrettante pagine interne al sito:
- pagina01.htm
- pagina02.htm
- pagina03.htm
oltre ad un altro link che rimanda ad una pagina esterna al sito: ad esempio usiamo http://www.html.it
Innanzitutto si deve agire sul codice compreso tra i tag <head> di questa pagina. Solitamente la sintassi Javascript più corposa viene inserita in questo punto, perchè questa è la prima porzione di documento che viene interpretata dal browser. Questa caratteristica permette di produrre gli effetti dello script prima che si carichi il resto della pagina.
Ma veniamo al nostro codice:
<script language=JavaScript>
<!---
function htmlpoint(what) {
var selection = document.menuform.menu.selectedIndex;
var newloc = null;
if (what == 'menù) {
if (selection == 1) newloc ='pagina01.htm';
else if (selection == 2) newloc ='pagina02.htm';
else if (selection == 3) newloc ='pagina03.htm';
else if (selection == 5) newloc ='http://www.html.it';
}
if (newloc) setTimeout("location = '" + newloc + "'", 0);
}
// --->
</script>
Abbiamo chiamato la nostra funzione "htmlpoint", poi abbiamo impostato i vari link, assegnando ad ognuno di essi un numero progressivo di selezione. È importante fare attenzione a questi numeri ed ai link che ad essi si associano, perchè dovranno corrispondere al codice da impostare successivamente.
Alla pagina"pagina01.htm" viene assegnato il numero di selezione "1" e cosi' via fino al terzo link ("pagina03.htm"), quando salta un numero e passa direttamente al "5". Il perchè di questo "salto" è presto detto:
quando si intende lasciare uno spazio bianco nel menu, ovvero si intende non associare alcun link ad una certa voce di menu, nello script non va inserita la riga di selezione e il numero va saltato.
Se si vogliono inserire altre voci al menu è sufficiente aggiungere ulteriori selezioni e link corrispondenti:
if (selection == 1) newloc ='pagina01.htm';
else if (selection == 2) newloc ='pagina02.htm';
else if (selection == 3) newloc ='pagina03.htm';
else if (selection == 5) newloc ='http://www.html.it';
else if (selection == 6) newloc ='http://www.hwupgrade.it';
else if (selection == 7) newloc ='http://www.freeonline.org';
else if (selection == 8) newloc ='http://www.in-it.com';
else if (selection == 9) newloc ='http://www.cellularmania.com';
Impostato il codice compreso tra i tag <head> è necessario agire all'interno del documento nel punto in cui si intende collocare il menu.
Questo il codice:
<form name="menuform">
<select name="menu">
<option>--- risorse ---
<option>pagina01
<option>pagina02
<option>pagina03
<option>
<option>html.it
</select>
<a href="javascript:htmlpoint('menù);"><img src="vai.gif" ALT="Raggiungi questo link" width=48 height=19 border="0"></a>
</form>
A primo acchitto sembra un normale modulo HTML, ed in parte lo è.
Ad ogni campo <OPTION> va associata una voce di menu.
La prima voce:
<OPTION>--- RISORSE ---
non è attiva, in quanto rappresenta il primo campo del menu, cioè quello visualizzato per primo e quindi visibile al caricamento della pagina.
I campi successivi, al contrario, fanno riferimento a quanto impostato in precedenza nella sintassi Javascript. In particolare i diversi campi hanno le seguenti corrispondenze:
<option>Pagina01 ------> if (selection == 1) newloc ='pagina01.htm';
<option>Pagina02 ------> else if (selection == 2) newloc
='pagina02.htm';
<option>Pagina03 ------> else if (selection == 3) newloc ='pagina03.htm';
La quarta opzione, al contrario non ha alcun testo, ed infatti non corrisponde ad alcuna selezione del campo <head>.
La quinta ed ultima opzione ha, invece, la seguente corrispondenza:
<OPTION>HTML.it ------> else if (selection == 5) newloc ='http://www.html.it';
Per ultimo va inserito l'immagine da cliccare per raggiungere la pagina selezionata e la funzione corrispondente:
<a href="javascript:htmlpoint('menù);"><img src="vai.gif" ALT="Raggiungi questo link" width=48 height=19 border="0"></a>
L'immagine è una normale GIF, ed anche il riferimento HTML non ha caratteristiche particolari. Cio' che invece va impostato con attenzione è il riferimento ipertestuale:
<a href="javascript:htmlpoint('menù);">
che va inserito in questa identica forma e che richiama le funzioni scritte in precedenza.
