.:° JsDir °:. JavaScript .:° Gli script del webmaster e dei collaboratori al sito °:. Bring Your Site To Life®

      Questo script è un menu un po' particolare, diverso da tutti quelli visti fino adesso che si basavano sul DHTML, ma molto semplice e particolarmente adatto ai principianti che userò principalmente per introdurre alcuni metodi e proprietà delle finestre.
      È in effetti un vero e proprio telecomando realizzato con una finestra in pop-up sempre visibile che contiene i links principali al sito.
      Il menu si compone di due script: uno da inserire nella homepage (l'apertura della finestra) ed un altro che posizioneremo nella stessa pop-up.
      In homepage abbiamo questo semplice script, simile ad altri che abbiamo già visto spesso in script precedenti:

<SCRIPT>
<!--
var LarghezzaFinestra=150;
var AltezzaFinestra=150;

function Telecomando()
   {
   var telecomando = window.open("telecomando.html","telecomando","top=0, [...
   ...] left="+eval(screen.width-LarghezzaFinestra-10)+",width="+LarghezzaFinestra+", [...
   ...]height="+AltezzaFinestra+",directories=no,resizable=no,location=no,status=no,scrollbars=no")
   }
//-->
</SCRIPT>
</HEAD>
<BODY  . . .  onLoad="Telecomando()">
. . .
. . .

una semplice funzione che apre una pop-up con window.open() contenente la pagina HTML che costituisce il telecomando vero e proprio.
      Le due variabili si commentano da sè, mentre nei parametri della window.open() le posizioni e le dimensioni della pop-up sono calcolate al volo in relazione alle dimensioni dello schermo dell'utente ed alle dimensioni della pop-up.
      Non mi dilungo sulla window.open() e vi rimando al tutorial relativo.
      L'attivazione del menu è comandata dall'event-handler onLoad() nel tag <BODY...>.

      Passiamo invece alla pagina HTML che costituisce il menu stesso. La riporto per intero:

<HTML>
<HEAD>
	<TITLE>Telecomando</TITLE>
<SCRIPT>
<!--
var Pagine = new Array();
Pagine[0]="euro.html";
Pagine[1]="pippo.html";
Pagine[2]="telefonini.html";
Pagine[3]="modem.html";
Pagine[4]="biglietti.html";

function goLink(pagina)
   {
   self.blur();
   opener.location.href=Pagine[pagina];
   }
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff" onBlur="setTimeout('self.focus()',1000)">
<TABLE BORDER="0" CELLSPACING="5" CELLPADDING="0" WIDTH="100%" HEIGHT="100%">
   <TR><TD>Usa questa finestra per navigare nel sito.	</TD></TR>
   <TR><TD><A HREF="javascript:goLink(0)">Euro</A></TD></TR>
   <TR><TD><A HREF="javascript:goLink(1)">Pippo</A></TD></TR>
   <TR><TD><A HREF="javascript:goLink(2)">Telefonini</A></TD></TR>
   <TR><TD><A HREF="javascript:goLink(3)">Modem</A></TD></TR>
   <TR><TD><A HREF="javascript:goLink(4)">Biglietti</A></TD></TR>
</TABLE>
</BODY>
</HTML>

Il primo elemento che troviamo nello script è un array. Questo contiene semplicemente i nomi dei files HTML che verranno caricati nella finestra principale.
Il secondo elemento è una funzione goLink(pagina).
"pagina" è una variabile che costituisce l'indice dell'array corrispondente alla pagina che vogliamo aprire, l'indice viene passato alla funzione dai link HTML contenuti nella pagina:

<A HREF="javascript:goLink(3)">Modem</A>

      Questo link passa alla funzione il parametro "3" (attenzione che è un numero, non una stringa), e che corrisponderà al quarto elemento dell'array, dal momento che la numerazione degli elementi di un array comincia da zero.
      La funzione esegue due operazioni distinte:
       - nasconde la pop-up con il metodo self.blur();
       - carica la pagina pescata dall'array nella finestra principale.

      Per chi non lo sapesse: "opener" è una proprietà delle finestre (l'oggetto corrispondente è window) e costituisce un riferimento interno di JavaSCript che punta alla finestra generatrice.
      Cosa vuol dire "generatrice"? Se noi chiamiamo "figlia" la pop-up che contiene il menu e "madre" la finestra che contiene la homepage che ha aperto la pop-up, allora "opener" è un riferimento (un "collegamento" se volete) dalla figlia alla madre.
      A questo punto premesso che:
       - window è l'oggetto principale di una finestra del browser;
       - document è una proprietù di window e rappresenta la pagina HTML contenuta;
       - location è una proprietà del documento e rappresenta la URL
       - che, infine, href è una proprietà di location e rappresenta la path della location,
      le due istruzioni:
       - window.document.location.href="pippo.html"
       - opener.document.location.href="pippo.html"
fanno lo stesso lavoro: caricare la pagina "pippo.html" nella finestra. Però mentre la prima carica la pagina nello stesso documento in cui lo script viene eseguito, la seconda carica il documento nella finestra "madre". Le due righe di codice infatti sono assolutamente identiche tranne che per il primo oggetto.
      Rimane solo un'istruzione da vedere, che non sta nello script bensì nel <BODY >:

      Questo event-handler scatta quando la finestra perde il focus, cioè quando va in secondo piano.
      Ciò succede quando il focus lo togliamo con la funzione goLink(), che nasconde il telecomando prima di caricare la pagina desiderata nella finestra principale.
      L'event-handler attiva un temporizzatore (setTimeout() per il quale di nuovo vi rimando al tutorial relativo) che rida il focus alla finestra dopo un secondo.

      "self" infatti è un riferimento alla finestra stessa che lo contiene, e può essere usato esattamente come se fosse un "sinonimo" di window.

	Parli JavaScript? Non tenerlo per te! JsDir cerca collaboratori. Se gli UserScript ti stanno stretti e vuoi inserire delle FAQ, dei Tips&Tricks, o anche uno StaffScript, se vuoi scrivere un tutorial o recensire un libro... insomma se parli JavaScript segui questo link. È un'occasione per farti conoscere e dimostrare le tue capacità!!!