Menu gerarchico a cascata
Massimo Valente
Rappresenta la soluzione pi∙ efficace per consentire al visitatore la navigazione ordinata e funzionale di un sito Web che abbia un minimo di complessitα. Un esempio ci permette di illustrarne codice e struttura…
La staticitα del linguaggio standard del Web, infatti, non ha
finora permesso l’inserimento di elementi dinamici, se non attraverso l’adozione
di controlli ActiveX o Applet Java. Le potenzialitα del Dynamic Html permettono di
evitare l’uso di applicazioni esterne, grazie all’inserimento nel documento di
codice JavaScript e all’utilizzo di fogli stile a cascata (CSS). L’esempio di
menu gerarchico a cascata esaminato in queste pagine non Φ il solo reperibile in Rete
nΘ, probabilmente, il pi∙ semplice da comprendere e configurare. Tale complessitα Φ
giustificata dalla presenza di codice ½multipiattaforma╗, che rende compatibile
l’esempio con le versioni di quarta generazione dei due browser pi∙ diffusi.
Sul CD-ROM allegato alla rivista Φ presente un altro esempio di menu gerarchico (con
diversa struttura) compatibile esclusivamente con MS Internet Explorer. Vi rimandiamo a
quell’esempio per un confronto col codice che andremo a esaminare.
HTML 4.0 consente fogli stile e codice Javascript in file esterni indipendenti dal
documento, assegnando loro un’estensione css e js. In questo modo si ha un duplice
vantaggio: la struttura del codice sorgente del documento Html Φ alleggerita e
semplificata e, soprattutto, il file esterno .js o css viene condiviso, grazie a un
semplice richiamo, da pi∙ documenti i quali non dovranno far altro che recuperarlo dalla
cache del browser. In questo modo il volume di trasferimento dati che si genera dal lato
server al lato client diminuisce considerevolmente. La struttura del menu gerarchico che
si va a esaminare si compone di quattro file:
menu.htm
menu.js
arrays.js
immagine.gif
L’esempio Φ rivolto alla realizzazione di un menu che visualizzi un massimo di tre
livelli gerarchici, ma altri possono essere aggiunti o rimossi. Essendo una struttura
gerarchica i menu superiori annidano, a loro volta, menu inferiori. Seguendo la sintassi
JavaScript si definiscono ½parent╗ i menu che annidano altri menu, e ½child╗ quelli
annidati.
╚ ovvio, alla luce di quanto descritto, che il menu intermedio tra il pi∙ alto e il pi∙
basso della gerarchia Φ annidato in quello superiore e annidi contemporaneamente quello
inferiore.
Menu.htm
Il file menu.htm contiene all’interno del tag <HEAD> una parte, seppur minima,
di codice JavaScript.
La prima parte contenuta tra <SCRIPT></SCRIPT> determina tipo e versione dei
browser che possono accedere al documento. Come precedentemente accennato,
quest’esempio Φ visualizzabile solo con le versioni 4 di Netscape Navigator e
Internet Explorer. La seconda parte contiene alcuni parametri variabili che permettono di
modificare, attraverso la manipolazione dei valori, l’aspetto e la struttura del
menu. Nel dettaglio, i parametri modificabili sono riportati nella tabella. Il parametro
overFnt modifica dinamicamente il colore del testo quando la voce di menu viene
selezionata (da black a white). Tale effetto per≥, per le ben note incompatibilitα tra
Navigator ed Explorer, Φ apprezzabile solo per gli utenti del browser Microsoft. In IE,
poi, il puntatore del mouse assume, quando Φ selezionata una voce attiva, l’aspetto
di una mano (hand). La terza parte di codice JavaScript richiama, attraverso i due
riferimenti:
Document.write("<SCRIPT LANGUAGE='JavaScript'
SRC='arrays.js'><\/SCRIPT>");
document.write("<SCRIPT LANGUAGE='JavaScript'
SRC='menu.js'><\/SCRIPT>");
i due file .js esterni contenenti il codice necessario al corretto
funzionamento del menu. Tali riferimenti sono fondamentali e non possono in alcun modo
essere omessi; a meno che il codice JavaScript venga inserito all’interno del
documento Html, ovvero venga cambiato nome ai file collegati.
All’interno del tag <BODY> vengono definiti i livelli dell’oggetto array,
attraverso l’assegnazione di variabili con prefisso arMenu:
<A HREF="/"
onMouseOver="popUp('elMenu1',event)"
onMouseOut="popDown('elMenu1')">Menu gerarchico a cascata</A>
Il gestore di eventi onMouseOver considera la posizione del puntatore del mouse in riferimento a un collegamento ipertestuale, e richiama la funzione popUp. elMenu Φ il primo argomento di popUp e non va confuso con l’oggetto array. Gli argomenti sono oggetti, valori o variabili richiesti per l’elaborazione di un metodo o di una funzione, e lavorano esclusivamente con riferimento a esse. In particolare, onMouseOver Φ attivato quando il puntatore del mouse abbandona l’area del link testuale. Al contrario onMouseOut viene attivato quando il puntatore entra nell’area di link. La funzione popDown Φ necessaria a Navigator, mentre Internet Explorer passa implicitamente l’oggetto event a ogni funzione che lo richiami.
Arrays.js
Gli array rappresentano, in JavaScript, uno strumento per indicizzare le informazioni come collezioni ordinate di dati. Il file arrays.js sviluppa, in quest’ottica, il contenuto di ogni voce presente nel menu.
arMenu1 = new Array
("Argomento A","http://inews.tecnet.it",1,)
Il testo da assegnare alla voce di menu e il relativo link, vanno
inseriti tra apici doppi. Il valore 1 indica l’esistenza di un menu ½child╗
annidato. Un valore pari a 0, invece, indica l’assenza di link annidati.
L’oggetto array arMenu1 si trova al livello pi∙ alto della gerarchia, e da esso
discendono tutti gli altri. arMenu1 viene richiamato dall’elemento elMenu1 presente
nel file menu.htm. Per creare livelli che discendono da arMenu1 Φ necessario creare
ulteriori menu ½child╗. Per fare questo si adotta una numerazione progressiva:
arMenu1_1 = new Array
arMenu1_2 = new Array
arMenu1_3 = new Array
Per inserire un altro menu ½child╗ a un livello gerarchico inferiore,
per esempio, in arMenu1_1, Φ sufficiente inserire una numerazione del tipo:
arMenu1_1_1 = new Array
arMenu1_1_2 = new Array
Si consideri, come esempio chiarificatore, di voler aggiungere un terzo
livello di menu inferiore (di nome ½Argomento A3╗) al seguente codice:
arMenu1_1 = new Array(
"Argomento A1","http://inews.tecnet.it",1,
"Argomento A2","http://inews.tecnet.it",1
Va inserita una semplice stringa di codice con suffisso 1, che aggiunge
il riferimento al nuovo livello ½child╗:
arMenu1_1 = new Array
("Argomento A1","http://inews.tecnet.it",1,
"Argomento A2","http://inews.tecnet.it",1,
"Argomento A3","http://inews.tecnet.it",1)
Giα sono presenti due livelli ½child╗ che fanno riferimento a
Argomento A1 e Argomento A2:
arMenu1_1_1 = new Array
("Link 01","http://inews.tecnet.it",0,)
arMenu1_1_2 = new Array
("Link 01","http://inews.tecnet.it",0,)
A questi va aggiunto un terzo livello di nome arMenu1_1_3:
arMenu1_1_3 = new Array
("Link 01","http://inews.tecnet.it",0,)
Menu.js
Il file menu.js contiene gran parte del codice JavaScript. La sua
struttura Φ complessa e risente, come giα accennato, della pesantezza dovuta al doppio
codice per il corretto funzionamento con Navigator ed Explorer.
Per esempio, la funzione popUp che assegna al mouse le coordinate X e Y deve essere
espressa cos∞:
function popUp(menuName,e)
{
if (!areCreated) return;
hideAll();
currentMenu = eval(menuName);
xPos = (NS4) ? e.pageX : event.x;
yPos = (NS4) ? e.pageY : event.y;
currentMenu.moveTo(xPos,yPos);
}
Ci≥ in quanto Navigator assegna le coordinate in riferimento a xPos e
yPos, mentre Explorer si serve di event.x ed event.y.
Le numerose incompatibilitα tra i due browser pi∙ diffusi sono tra le cause principali
dello scarso utilizzo di Dynamic Html da parte degli sviluppatori Web. La complessa
struttura dell’esempio esaminato in queste pagine, Φ sintomatica dei limiti
oggettivi che l’utenza non professionale pu≥ incontrare nella gestione di codice
doppio. La causa di una tale stortura va ricercata nelle diverse strategie di sviluppo che
Microsoft e Netscape hanno adottato. L’impressione, supportata dai fatti, Φ che da
tale contrapposizione sarα il modello di Microsoft a imporsi come standard per il futuro
Dynamic Html.
Il modello proposto da Netscape ha nei layer e nei JSSS i suoi punti qualificanti; ma
proprio su tali strumenti il W3C si Φ pronunciato negativamente, rifiutandone la
standardizzazione.
I layer sono stati introdotti in Navigator 4, che a tutt’oggi Φ l’unico browser
che li supporti. I layer (livelli) sono sezioni indipendenti di una pagina Html, e come
tali possono essere sovrapposti gli uni agli altri fino a un massimo di 10 livelli.
Attraverso manipolazioni pi∙ o meno complesse dei singoli livelli, Φ possibile creare
animazioni ed effetti speciali, oltre a posizionare in modo dinamico testi e oggetti
all’interno della pagina. Netscape riconosce tali strumenti attraverso la marcatura
<LAYER>, <SPAN> o <DIV>, mentre Microsoft riconosce soltanto gli ultimi
due tag.
Altro punto fondamentale della visione di Netscape per DHTML sono i fogli di stile Java
Assisted (JSSS). Attraverso i JSSS, Netscape controlla la formattazione del testo e la
disposizione degli elementi della pagina. Per fare questo, JSSS introduce tre nuovi
modelli: ½tags╗, ½classes╗ e ½ids╗, che permettono di definire il valore di ogni
singolo attributo del documento. Il limite maggiore dei fogli di stile JSSS Φ
nell’impossibilitα di modificare il contenuto della pagina una volta caricata. A
differenza di quanto accade con i fogli di stile CSS1, infatti, all’atto del
caricamento di un documento, gli stili diventano definitivi. La soluzione al problema
delle incompatibilitα tra Netscape ed Explorer, va trovata nella ricerca di uno standard
comune che porti i due contendenti su una strada di sviluppo univoco. Agli sviluppatori di
siti Web non rimane che sperare nel futuro e, nel breve periodo, servirsi di un editor
(come Macromedia Dreamweaver) che generi automaticamente codice compatibile con IE4 e NN4.
(mvalente@tecnet.it)