Introduzione a JavaScript

Introduzione a JavaScript
Parte 6

Ho ricevuto parecchie mail sul problema di come caricare due pagine con un solo clic del mouse. Fondamentalmente ci sono tre diverse soluzioni a questo problema. La prima possibilità consiste nel creare un pulsante che invoca una funzione quando l'utente vi clicca sopra. Questa funzione carica le due pagine in due frame o apre due nuove finestre. Non è molto difficile se date un'occhiata agli esempi che abbiamo fatto nelle altre parti del tutorial. Abbiamo già tutti gli elementi che ci necessitano.

Abbiamo creato tre frame. Il primo è usato per il pulsante. La prima pagina HTML serve soltanto per aprire i frame e dare loro un nome. Fin qui nulla di nuovo, dato che abbiamo usato questa tecnica nella parte 3 del tutorial per lavorare con i frame. Vi mostrerò comunque lo script usato (Non so se capita anche a voi, ma ogni volta che un autore di un libro d'informatica pensa che qualcosa può anche non essere scritta perché molto semplice, esattamente allora comincio ad avere difficoltà)

frames2.htm

<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
    <FRAMESET COLS="295,*"> 
  <FRAMESET ROWS="100%,*"> 
    <FRAME SRC="loadtwo.htm" NAME="fr1"> 
      </FRAMESET> 
  <FRAMESET ROWS="75%,25%"> 
    <FRAME SRC="cell.htm" NAME="fr2"> 
    <FRAME SRC="cell.htm" NAME="fr3"> 
      </FRAMESET> 
</FRAMESET> 
</HTML>

loadtwo.htm è caricato nel primo frame. Questo è il frame con il pulsante.

loadtwo.htm

<HTML>
<HEAD>
<script language="JavaScript">
<!-- 
  function loadtwo(page2, page3) {
     parent.fr2.location.href=page2;
     parent.fr3.location.href=page3;
}
// -->
</script>
</HEAD>
<BODY>
<FORM NAME="buttons">
     <INPUT TYPE="button" VALUE="2 in un clic!" onClick="loadtwo('frtest1.htm','frtest2.htm')">
</FORM>
</BODY>
</HTML>

La funzione loadtwo() viene invocata quando si clicca sul pulsante. Due stringhe vengono passate alla funzione. Se guardate la funzione loadtwo(), vedete che il secondo frame fr2 carica la pagina definita dalla prima stringa della chiamata di funzione. Se avete diversi pulsanti che aprono diverse pagine potete riusare questa funzione. Dovete soltanto passare le diverse URL (indirizzi) delle pagine.

La seconda tecnica usa i link. Alcuni esempi in giro per Internet riportano qualcosa del genere:
<a href="yourlink.htm onCLick="yourfunction()">
Sembra che questa tecnica non funzioni su tutte le piattaforme, quindi non conviene usarla. C'è comunque un altro metodo per associare uno script ad un link. Possiamo invocare uno script Javascript nel seguente modo:

<a href="javascript:myfunction()">Il mio link</a>

E' molto semplice e sembra funzionare con tutti i browser. Dovete soltanto scrivere javascript: e il nome della vostra funzione come fossero un 'link'. Se invocate la funzione 'loadtwo()' dell'esempio precedente potete aggiornare due frame con un singolo clic su un link.

La terza tecnica per caricare due pagine con un solo clic del mouse può essere applicata usando i pulsanti o i link. Potrebbe essere sufficiente soltanto la seconda tecnica mostrata prima, ma l'approccio che mostreremo ora in certi casi può essere più adatto. Dobbiamo caricare una pagina HTML in un frame, ad esempio in questo modo:
<a href="getfr2.htm" target"fr2">Clicca qui!</a>
Questo lo sappiamo già fare. Quello che facciamo ora è aggiungere una proprietà onLoad al file caricato. Il file getfr2.htm dovrebbe somigliare a questo:

<HTML>
<BODY onLoad="parent.fr3.location.href='getfr3.htm'; return true;">
bla bla bla
</body>
</html>

Naturalmente bisogna aggiungere la proprietà onLoad ad ogni documento che viene caricato nel secondo frame.

Un altro problema comune riguarda il caricamento di nuove pagine in una nuova finestra. La finestra dovrebbe comparire quando l'utente clicca su un link. Dovete aggiungere la proprietà target al vostro tag <a href...>. Esempio:
<a href="goanywhere.html" target="Resource Window">Vai!</a>

Ora diamo uno sguardo ai diversi operatori che potete usare in Javascript. Gli operatori consentono di sintetizzare e migliorare i vostri script. Per esempio, volete verificare se una variabile x è maggiore di 3 e minore di 10. Potreste scrivere il seguente codice:

if (x>3) 
  if (x<10)
    faiqualcosa();

La funzione faiqualcosa() viene invocata se x>3 e x<10. C'è un modo più veloce di scrivere questo:

if (x>3 && x<10) faiqualcosa();

L'operatore && è chiamato AND. C'è anche un operatore OR: potete usarlo, per esempio, se volete controllare se una variabile x è uguale a 5 o un'altra variabile y è uguale a 17:

if (x==5 || y==17) faiqualcosa();

La funzione faiqualcosa() viene invocata quando x==5 oppure y==17. Viene invocata anche quando entrambi i confronti sono veri.
I confronti vengono fatti con l'operatore == (naturalmente ci sono anche <,>,<= e >=): sono gli stessi operatori di C/C++. Un solo = è usato per memorizzare un valore in una variabile. (se conoscete il Pascal ciò può sembrare un po' confuso; l'assegnamento di un valore ad una variabile è fatto in Pascal con l'operatore :=, mentre i confronti vengono fatti con un singolo =).

Se volete verificare se una variabile non è uguale ad un certo numero, è possibile farlo con un semplice !=. Ad esempio: x != 17.

Ci sono molti altri operatori interessanti che possono rendere i vostri script più efficienti. Consultate la documentazione fornita da Netscape per avere una visione completa di tutti gli operatori che è possibile usare in Javascript.

frames2.htm

loadtwo.htm

Sommario - Parte 1 - Parte 2 - Parte 3 - Parte 4 - Parte 5 - Parte 7