Abbiamo detto finora che la difficoltà della programmazione JavaScript sta tutta nella diversità dei DOM dei browser. L'istruzione eval è tutto ciò che ci serve per aggirare questo ostacolo. Eval infatti trasforma la stringa racchiusa tra parentesi tonde in codice JavaScript.
La sintassi è la seguente:
eval ("stringa da valutare");
Ad esempio: per assegnare l'invisibilità a un livello dovremmo scrivere:
- Con Netscape 4: document.layers["mioLiv"].visibility= "hide";
- Con Internet Explorer 4: document.all["mioLiv "].style.visibility= "hidden";
- Con Internet Explorer 6: document.getElementById["mioLiv "].style.visibility= "hidden";
Prendiamo ad esempio la pagina seguente, realizzata con i livelli, descritti attraverso i fogli di stile incorporati:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
#mioLiv {
background-color:orange;
width:300px;
height:300px;
border:1px;
visibility:show;
}
</style>
<script type="text/javaScript">
function nascondi(){
//istruzioni
}
</script>
</head>
<body>
<!-- chiamata diretta a una funzione JavaScript-->
<a href="javascript:nascondi();">nascondi il livello</a><br/>
<div id="mioLiv"><br/><br/><br/></div>
</body>
</html>
dovremmo scrivere la funzione nascondi() in questo modo:
function nascondi() {
if (document.all) {
document.all["mioLiv"].style.visibility="hidden";
/*cambio la visibilità da visibile a invisibile con IE*/
} else if (document.layers){ //NN4
document.layers["mioLiv"].visibility="hide";
} else if (document.getElementById) { //NN6 ed Opera
document.getElementById("mioLiv").style.visibility="hidden";
}
}
In questo modo "sprechiamo" però del codice, perché ripetiamo la stessa istruzione in tre diversi casi. C'è allora da chiedersi se ci sia il modo di scrivere una volta soltanto l'istruzione comune (quella che imposta l'invisibilità) e rendere variabili delle porzioni di codice.
Inoltre potremmo poi desiderare nuovamente la visualizzazione del livello appena nascosto.
Ci occorrebbe quindi una funzione mostra() di questo genere:
function mostra() {
if (document.all) {
document.all["mioLiv"].style.visibility="visible";
} else if (document.layers){
document.layers["mioLiv"].visibility="show";
} else if (document.getElementById) {
document.getElementById("mioLiv").style.visibility="visible";
}
}
richiamata da questa riga di codice, da inseire nel BODY del documento:
<a href="javascript:mostra();">mostra il livello</a>
È evidente però che stiamo scrivendo del codice doppio, perché le due funzioni sono molto simili fra di loro.
L'istruzione eval è la soluzione a tutti i nostri problemi. Per prima cosa notiamo che tutte le istruzioni hanno delle parti comuni. L'istruzione infatti è così composta:
documento+parA+"mioLiv"+parB+visibilita+"="+nascosto+";"
dove:
|
Possiamo dunque creare una funzione inzializza() da richiamare subito nella pagina, che crei le variabili che abbiamo indicato in tabella. Infine con eval() possiamo eseguire l'istruzione come somma di tutte le variabili da noi create.
Possiamo poi adattare la sintassi che abbiamo creato, in modo da generare un'ulteriore funzione che ci mostri il livello (prima nascosto):
<!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:visible;
}
</style>
<script type="text/javaScript">
function inizializza(){
if (document.all) {
// creo le variabili per la sintassi di IE
documento="document.all";
/* notare le virgolette precedute dal carattere
* di escape ("), necessario per mantenere inalterata
* la sinassi e per non incorrere in errori
*/
parA="["";
parB=""]";
visibilita=".style.visibility";
nascosto=""hidden"";
visibile=""visible"";
alert(documento+parA+"mioLiv"+parB+visibilita+"="+nascosto+";");
}
else if (document.layers){ //NN4
documento="document.layers";
parA="["";
parB=""]";
visibilita=".visibility";
nascosto=""hide"";
visibile=""show"";
alert(documento+parA+"mioLiv"+parB+visibilita+"="+nascosto+";");
}
else if (document.getElementById) { // Opera e NN6
documento="document.getElementById";
parA="("";
parB="")";
visibilita=".style.visibility";
nascosto=""hidden"";
visibile=""visible"";
alert(documento+parA+"mioLiv"+parB+visibilita+"="+nascosto+";");
}
}
function nascondi() {
/* eseguo l'istruzione tramite eval,
come somma di variabili */
eval(documento+parA+"mioLiv"+parB+visibilita+"="+nascosto+";");
}
function mostra() {
/* istruzione identica alla precedente,
soltando che rende visbile */
eval(documento+parA+"mioLiv"+parB+visibilita+"="+visibile+";");
}
inizializza(); //lancio la funzione che inizializza le variabili
</script>
</head>
<body>
<!-- chiamata diretta a una funzione JavaScript-->
<a href="javascript:nascondi();">nascondi il livello</a><br/>
<a href="javascript:mostra();">mostra il livello</a> <br/>
<div id="mioLiv">
<br/><br/><br/><br/><br/>
</div>
</body>
</html>