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à.
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 |