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>
Ultimi articoli JavaScript
PhantomJS, headless browser per test con JavascriptIl tool ideale per realizzare, da terminale, operazioni in remoto su... |
Creare e leggere QR Code in JavaScriptApplicazioni 'QR Code enabled' per il Web e per il mobile,... |
Jquery UI Map: web-mapping con Google Maps e jQueryUn plugin di jQuery UI per intefacciare applicaizoni Web/mobile con... |
Scrollorama e Scrolldeck, slideshow d'effetto con jQueryPlugin jQuery per ottenere Slideshow con diversi effetti di scrolling |
jCanvas, un primo semplice graficoAlla scoperta della libreria jCanvas, per semplificare il disegno e... |
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida Javascript: tecniche avanzateUna guida dal taglio pratico per approfondire la programmazione a... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |