Come al solito rinviamo il lettore, per ogni approfondimento, al sito dedicato di JavaScript, mentre ci soffermeremo ad illustrare le istruzioni utilizzate per comporre queste pagine.
Cominciamo col descrivere la funzione che consente di aprire il documento in una
finestra esterna, nel qual caso lo script è:
<HTML>
<HEAD>
<TITLE>esempio di JavaScript</TITLE>
<SCRIPT LANGUAGE='JavaScript'>
<!--
function NomeFunzione(){
var nuovaFinestra = window.open ("NomeDocumento.html", "NomeFinestra","copyhistory=YES,menubar=NO,status=YES, resizable=NO,height=500,width=500")
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P ALIGN=CENTER>
corpo<BR>
del<BR>
<A HREF="JavaScript:NomeFunzione()">
documento</A>
</BODY>
</HTML>
|
Analizzando lo script, è facile notare che, rispetto al documento HTML, la parte innovativa è quella scritta in verde.
L'istruzione
<SCRIPT LANGUAGE='JavaScript'> avverte della preseza del nuovo linguaggio. La funzione viene scritta tra le istruzioni
<!-- e
//--> per evitare che venga visualizzata, l'istruzione
</SCRIPT> avverte che sono terminate le istruzioni in JavaScript, mentre il link richiama la funzione al posto del documento. Facento click sul link "
documento" è possibile vedere il risultato dello script.
Per quel che concerne la funzione, non dovrebbero esserci difficoltà per leggerla. Infatti essa crea semplicemente un variabile di nome nuovaFinestra (
var nuovaFinestra) che apre una finestra (
window.open) con le seguenti caratteristiche:
- visualizza il documento NomeDocumento (
"NomeDocumento.html");
- si chiama NomeFinestra (
"NomeFinestra");
- mantiente attiva la proprietà di memorizzare le pagine visitate nell'ultima sessione (
Copyhistory=YES);
- disattiva le voci dei menu (
menubar=NO);
- mantiente attiva la finestra di stato, cioè la barra inferiore (
status=YES);
- non è ridimensionabile (
resizable=NO);
- è alta 500 pixel (
height=500);
- è larga 500 pixel (
width=500);
Da tener presente che in luogo di "YES" e "NO" è possibile scrivere rispettivamente "1" e "0".
Altra funzione utile può essere quella che consente di inviare i documenti in una finestra esterna tramite un
menu a discesa, di cui riportiamo due esempi:
In questo caso lo script è il seguente:
<HTML>
<HEAD>
<TITLE>esempio di menu</TITLE>
<SCRIPT LANGUAGE='JavaScript'>
<!--
function MakeArray() {
var lngth = MakeArray.arguments.length;
for ( i = 0 ; i<lngth ; i++ ) { this[i]=MakeArray.arguments[i] }
}
function prima() {
var select = eval(document.menuform.elements[0].selectedIndex);
if( (select >0) && (select<4) ) {
var intl=new MakeArray( '','documentoA.html','documentoB.html','documentoC.html');
var nuove=intl[document.menuform.elements[0].selectedIndex];
window.open(nuove,"documenti","Toolbar=no,status=no,scrollbars=yes,resizable=yes,menubar=yes,height=500,width=500");
}
}
function seconda() {
var select = eval(document.menuform.elements[1].selectedIndex);
if( (select >0) && (select<5) ) {
var intl=new MakeArray( '','documento1.html','documento2.html','documento3.html','documento4.html');
var nuove=intl[document.menuform.elements[1].selectedIndex];
window.open(nuove,"documenti","Toolbar=no,status=no,scrollbars=yes,resizable=yes,menubar=yes,height=500,width=500");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P ALIGN=CENTER>
<B>
Esempio di menu a discesa:
</B>
<FORM NAME="menuform">
<SELECT NAME="primoMenu" onChange='prima();' >
<option selected> PRIMO MENU
<option> documento A
<option> documento B
<option> documento C
</select>
<SELECT NAME="secondoMenu" onChange='seconda();'>
<option selected> SECONDO MENU
<option> - documento 1
<option> - documento 2
<option> - documento 3
<option> - documento 4
</SELECT>
</form>
</BODY>
</HTML>
|
Senza addentrarci molto nell'interpretazione dello script, prendiamo nota della presenza di tre funzioni:
- la funzione
MakeArray() provvede, incrementando la variabile
i, ad analizzare le voci del menu;
- la funzione
prima(), con
elements[0] in
var select , gestisce il primo menu, con la condizione che l'elemento selezionato sia compreso tra
0 e
4;
- la funzione
seconda(), con
elements[1] in
var select , gestisce il secondo menu, con la condizione che l'elemento selezionato sia compreso tra
0 e
5;
Le funzioni
prima() e
seconda() vengono richiamate da
<FORM NAME="menuform"> quando viene cambiata la selezione rispettivamente nel primo menu (
<SELECT NAME="primoMenu" onChange='prima();' >) o nel secondo (
<SELECT NAME="secondoMenu" onChange='seconda();' >).