Riprendiamo l'esempio della lezione precedente: potremmo voler far sì che il nostro lavoro non vada buttato, ma che sia riutilizzabile, indipendentemente dal livello. Con un minimo sforzo in più è possibile passare un argomento alle funzioni, in modo da renderla generica. Ecco l'esempio completo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
#mioLiv {
position:absolute;
background-color:orange;
width:300px;
height:20px;
border:1px;
visibility:show;
}
</style>
<script type="text/javaScript">
function inizializza(){
if (document.all) {
documento="document.all";
parA="["";
parB=""]";
visibilita=".style.visibility";
nascosto=""hidden"";
visibile=""visible"";
}
else if (document.layers){
documento="document.layers";
parA="["";
parB=""]";
visibilita=".visibility";
nascosto=""hide"";
visibile=""show"";
}
else if (document.getElementById) {
documento="document.getElementById";
parA="("";
parB="")";
visibilita=".style.visibility";
nascosto=""hidden"";
visibile=""visible"";
}
}
function nascondi(livello) {
eval(documento+parA+livello+parB+visibilita+"="+nascosto+";");
}
//la funzione è dichiarata con l'argomento "livello"
function mostra(livello) {
eval(documento+parA+livello+parB+visibilita+"="+visibile+";");
}
inizializza();
</script>
</head>
<body>
<!-- chiamata diretta a una funzione JavaScript-->
<!--passo alla funzione il parametro "mioliv" che indica il nome del livello-->
<a href="javascript:nascondi('mioliv');">nascondi il livello</a><br/>
<a href="javascript:mostra('mioliv');">mostra il livello</a>
<br/><br/>
<div id="mioliv"><br/><br/><br/><br/><br/></div>
</body>
</html>
Se volessimo essere ancor più raffinati, non dovremmo creare due funzioni diverse, ma un unica funzione che:
- se il livello è nascosto, lo visulizza
- se il livello è visualizzato, lo nasconde
Per farlo basterebbe assegnare la visibilità in maniera variabile, e lo stato della variabile potrebbe essere deciso eseguendo a priori un controllo condizionale. Proviamo ad esprimere "a parole" questo concetto:
- se il livello è visibile --> il nuovo stato è "nascosto"
- se il livello è nascosto --> il nuovo stato è "visibile"
ci troviamo in una tipica situazione da controllo ternario. Proviamo ancora ad esprimerci aancora parole:
stato=(livello_visibile)?nascosto:visibile;
Traduciamo adesso in una sitassi adatta per Internet Explorer:
stato=(document.all["mioLiv"].style.visibility=="visible")?"hidden":"visible";
poi basta assegnare:
document.all["mioLiv"].style.visibility=stato;
Adesso basta fare le debite modifiche, tenendo conto che:
document.all["mioLiv"].style.visibility;
è per noi:
documento+parA+livello+parB+visibilita;
che "hidden" è per noi "nascosto" e "visibile" è per noi "visibile".
Infine non ci resta che cucire il tutto con eval(). Vediamo l'esempio completo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
#mioLiv {
position:absolute;
background-color:orange;
width:300px;
height:20px;
border:1px;
visibility:show;
}
</style>
<SCRIPT TYPE="text/javaScript">
function inizializza(){
if (document.all) {
documento="document.all";
parA="["";
parB=""]";
visibilita=".style.visibility";
nascosto=""hidden"";
visibile=""visible"";
}
else if (document.layers){
documento="document.layers";
parA="["";
parB=""]";
visibilita=".visibility";
nascosto=""hide"";
visibile=""show"";
}
else if (document.getElementById) {
documento="document.getElementById";
parA="("";
parB="")";
visibilita=".style.visibility";
nascosto=""hidden"";
visibile=""visible"";
}
}
function rileva(livello) {
visibilitaLivello=documento+parA+livello+parB+visibilita;
/*se fosse explorer sarebbe:
document.all["mioLiv"].style.visibility
*/
stato = eval("("+visibilitaLivello+"=="+visibile+")?"+nascosto+":"+visibile+";");
eval(documento+parA+livello+parB+visibilita+"=""+stato+"";");
}
inizializza();
</script>
</head>
<body>
<!-- chiamata diretta a una funzione JavaScript-->
<a href="javascript:rileva('mioliv');">nascondi / mostra il livello</a><br/>
<br/><br/>
<div id="mioliv"><br/><br/><br/><br/><br/></div>
</body>
</html>
Con questo ultimo esempio abbiamo ottenuto una funzione per il cambio della visibilità di un livello, sufficientemente generica da essere adeguata a qualsiasi situazione, visto che non dipende né dal nome del livello, né dalla sua visibilità o invisibilità.