Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 49 di 49
  • livello principiante
Indice lezioni

L'istruzione "eval" - II

Come aggirare le differenti interpretazioni dei Browser
Come aggirare le differenti interpretazioni dei Browser
Link copiato negli appunti

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

Ti consigliamo anche