Introduzione al JavaScript

(pubblicato il 16 novembre 2002) -
clicca qui per il download del documento originale -
clicca qui per il download di questo documento

(tratto dal sito: http://www.geocities.com/SiliconValley/7358/script.htm - scritto da Stefan Koch)

Cos'è JavaScript?

JavaScript è un nuovo linguaggio per le pagine Web. Gli script in JavaScript possono essere inclusi nelle vostre pagine HTML. Con JavaScript avete moltissime possibilità di migliorare le vostre pagine HTML con elementi veramente interessanti. Per esempio, potete rispondere agli eventi attivati dagli utenti in modo estremamente facile. Alcuni effetti ora realizzabili con Javascript erano possibili fino a qualche tempo fa soltanto con l'interfaccia CGI. Con l'aiuto di Javascript potete quindi creare pagine molto sofisticate. In Internet è possibile trovare numerosi esempi di script Javascript e vedere pagine potenziate con questo linguaggio. Potete trovare parecchi link in Gamelan (nella sezione JavaScript) ed è possibile trovare la documentazione completa fornita da Netscape in http://developer.netscape.com/docs/manuals/communicator/jsref/.

Qual è la differenza tra Java e JavaScript?

Nonostante i nomi siano quasi uguali, Java non è la stessa cosa di JavaScript! Essi introducono due diverse tecniche per la programmazione su Internet. Java è un linguaggio di programmazione, mentre Javascript, come dice lo stesso nome, è un linguaggio per realizzare script (scripting language). La differenza consiste nel fatto che con Java si possono realizzare veri e propri programmi, mentre spesso si vuole creare un bell'effetto evitando di avere a che fare con la programmazione pura. Quindi l'obiettivo principale di Javascript è quello di essere facile da comprendere e da usare, senza preoccuparsi troppo della programmazione. Si potrebbe dire che Javascript sia piuttosto un'estensione di HTML che un linguaggio di programmazione indipendente. Naturalmente questa non è la definizione 'ufficiale', ma penso che possa rendere più facile la comprensione della differenza tra Java e Javascript. E' possibile trovare ulteriori informazioni sia su Java che su Javascript in Gamelan.

Per approfondimenti su questo argomento potete leggere l'introduzione fornita da Netscape.

Come possono essere eseguiti gli script Javascript?

Il primo browser a supportare Javascript è stato Netscape Navigator 2.0. Naturalmente anche le versioni successive lo supportano. Probabilmente saprete che Java non è supportato da tutte le versioni di Netscape Navigator 2.0 o successive, mentre ciò non è vero per Javascript - anche se ci sono alcuni problemi con le diverse versioni. La versione per Mac, ad esempio, sembra avere molti bug. A breve anche altri browser supporteranno Javascript, come per esempio Microsoft Internet Explorer 3.0, e si diffonderanno rapidamente, per cui questo è il momento opportuno per imparare questa nuova tecnica. Realizzare script con Javascript è veramente semplice; tutto ciò che occorre conoscere sono alcune tecniche di base e qualche trucco per superare i problemi che si possono presentare.
Naturalmente occorre conoscere anche HTML prima di leggere questa introduzione. Potete trovare parecchie risorse online su HTML effettuando una ricerca su 'html' in Yahoo se volete tenervi informati su HTML (Questi documenti online sono aggiornati molto più frequentemente dei libri. Internet si muove velocemente al giorno d'oggi ...).

Ora voglio mostrarvi alcuni piccoli script in modo che possiate comprendere come vengano inseriti all'interno dei documenti HTML e possiate constatare le possibilità che Javascript vi offre. Comincerò con uno script molto piccolo che visualizzerà del testo in un documento HTML.

<html>
<head>
Il mio primo script Javascript!
</head>
<body>
<br>
Questo e' un normale documento HTML.
<br>
  <script language="JavaScript">
    document.write("Questo e' JavaScript!")
  </script>
<br>
Di nuovo in HTML.
</body>
</html>

Se al momento state utilizzando un browser che supporta Javascript avrete la possibilità di veder funzionare questo script. Se il vostro browser non supporta Javascript potrà apparire come output qualcosa di strano ...

Questo e' un normale documento HTML.
Questo e' JavaScript!
Di nuovo in HTML.

Devo ammettere che questo script non è molto utile; potreste scriverlo in HTML molto più velocemente e più breve. Ma quello che volevo mostrare era l'uso dei tag <script>. Potete utilizzare questi tag in qualsiasi punto del documento.

Non voglio annoiarvi con script così banali, quindi procediamo con le funzioni che non sono difficili da capire e sono molto più utili! E' conveniente dichiarare le funzioni tra i tag <head> delle vostre pagine HTML. Le funzioni vengono invocate dagli eventi attivati dall'utente, quindi è ragionevole tenere le loro dichiarazioni tra i tag <head>, in modo tale che vengano caricate prima che un utente possa fare qualcosa che le invochi. Gli script possono essere posti all'interno di un commento per fare in modo che i browser più vecchi, che non supportano Javascript, non li considerino.

<html>
<head>
  <script language="JavaScript">
     function pushbutton()
     {
        alert("Ciao!");
     }
  </script>
</head>
<body>
<form>
  <input type="button" name="Button1" value="Clicca qui" onclick="pushbutton()">
  </form>
</body>
</html>

Se vuoi provare subito questo script e stai usando un browser che supporta Javascript, vai avanti e clicca sul pulsante.

Questo script crea un pulsante che risponde al clic con una finestra con la scritta 'Ciao!'. Non è fantastico? Ma che cosa succede con la presenza di questo script? Come prima cosa la funzione viene caricata e tenuta in memoria, quindi viene creato un pulsante con i classici tag <form> (HTML). A questo punto noterete qualcosa di nuovo tra i parametri del tag <input>: la presenza del parametro 'onclick'. Questo parametro dice al browser quale funzione invocare quando si clicca sul pulsante (naturalmente soltanto se il browser supporta Javascript). Nell'intestazione viene dichiarata la funzione 'pushbutton()' che viene eseguita quando si clicca sul pulsante. C'è anche un'altra novità nello script: il metodo 'alert'. Questo metodo è già dichiarato in Javascript, quindi dovete soltanto invocarlo. Ci sono diversi metodi a disposizione: ve ne mostrerò alcuni in questa introduzione. Potete trovarne una descrizione completa sul sito Netscape. Penso che la lista dei metodi diventerà abbastanza lunga, ma al momento molte cose possono essere fatte con i metodi disponibili.
(Non penso che il metodo alert sia stato pensato per l'uso che ne abbiamo fatto qui, ma noi stiamo imparando e questo è il modo più semplice per comprendere! Spero mi scuserete ...)

D'ora in poi cominceremo ad andare lontano. Infatti abbiamo a disposizione molte possibilità aggiungendo soltanto qualche funzione ai nostri script. Ora vi mostrerò come poter leggere ciò che un utente ha inserito in una form.

<html>
<head>
<script language="JavaScript">
<!--  nascondiamo lo script ai vecchi browser
  function getname(str)
  {
     alert("Ciao, "+ str+"!");
  }
// fine del commento -->
</script>
</head>
<body>
Inserisci il tuo nome:
<form>
  <input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>

Ora potete provare questo script:

Inserisci il tuo nome:

In questo script abbiamo utilizzato altri nuovi elementi.
Per prima cosa avrete certamente notato lo script all'interno del commento. In questo modo potete nascondere lo script ai vecchi browser che non possono eseguirli. E' necessario seguire l'ordine mostrato! L'inizio del commento deve trovarsi subito dopo il primo tag <script> e il commento deve terminare subito prima del tag </script>.
In questo documento HTML abbiamo una form in cui l'utente può inserire il proprio nome. Il parametro 'onBlur' del tag <input> indica al browser quale funzione invocare quando qualcosa viene immesso nella form. La funzione 'getname(str)' verrà invocata quando questo elemento della form perde il focus o quando viene premuto il tasto 'Invio' dopo aver inserito qualcosa. La funzione acquisisce la stringa che avete immesso tramite il comando 'getname(this.value)'. 'This.value' indica il valore che è stato immesso in questo elemento della form.

Penso che il prossimo esempio sia veramente interessante. Ci accingeremo ad implementare una funzione che gestisce la data di un documento, così che sarà il browser a visualizzare la data di ultima modifica della vostra pagina HTML. Non dovrete più scrivere la data nel documento: basterà inserire un piccolo script e quando farete delle modifiche, la data cambierà automaticamente.

<html>
<body>
Questa e' una semplice pagina HTML.
<br>
Ultima modifica:
  <script language="JavaScript">
  <!--  nasconde lo script ai vecchi browser
      document.write(document.lastModified)
  // fine del commento -->
  </script>
</body>
</html>

Al momento questa proprietà sembra non funzionare su tutte le macchine; alcuni server mostrano soltanto la data 1/1/1970. Dobbiamo attendere il prossimo aggiornamento e sperare che funzioni correttamente su tutte le macchine. Dovete quindi provarla sulla vostra macchina (su alcune sembra che funzioni perfettamente).

Come ho già detto, le cose cambiano molto in fretta oggi, quindi non dovrebbe meravigliare se la prossima settimana ci sarà qualche cambiamento in Javascript! Dovete sempre controllare se sono sopravvenuti cambiamenti, poiché questo linguaggio è molto giovane. Alcune cose dette in questa sede potrebbero cambiare o essere già cambiate, ma penso che i principi fondamentali rimarrano gli stessi.

verifica JS con document.lastModified

Ultima modifica:

La proprietà onMouseOver

Potete vedere la funzione di Javascript di cui ci occuperemo ora muovendo il puntatore del mouse su questo link. Ora osservate la statusbar in fondo alla finestra del browser. E' possibile combinare ciò con altre funzioni Javascript. Se vi posizionate sopra questo link comparirà una finestra. Ora vi mostrerò il sorgente di questi due effetti:

<a href="stupid.htm" onMouseOver="window.status='Questo è uno stupido link ...';return true">

L'unica cosa che dovete fare è aggiungere la proprietà onMouseOver al tag <a>; 'window.status' 
vi permetterà di scrivere sulla statusbar del browser. Come potete vedere dovete 
racchiudere il testo tra singoli apici ('); non potete usare i doppi apici ("), 
altrimenti Javascript non sarà in grado di identificare la stringa che volete 
visualizzare nella statusbar. Dopo la stringa occorrerà scrivere ;return true. 

Il secondo esempio usa Javascript invocando la funzione alert. Ecco il codice:

<html>
<head>
<script language="JavaScript">
<!-- nasconde lo script ai vecchi browser
     function ciao() 
     {
        alert("Ciao!");
     }
// -->
</script>
</head>
<body>
<a href="" onMouseOver="ciao()">link</a>
</body>
</html>

E' molto semplice: viene usata la proprietà onMouseOver e la funzione ciao() viene invocata quando si verifica il relativo evento.

Altre funzioni relative alla data

Voglio mostrarvi ora un altro esempio di uso dei metodi relativi all'ora e alla data. Abbiamo visto come funziona la proprietà lastModified. Ora visualizzeremo l'ora nel nostro documento. Questo metodo utilizza l'ora e la data della vostra macchina, quindi se avete la data della macchina impostata al 17/5/1983 otterrete ovviamente la data sbagliata. Non si tratta quindi di un'ora e una data fornita da Internet (o qualcosa del genere).

Ecco il codice:

<script language="JavaScript">
<!-- 
  oggi = new Date()
  document.write("L'ora attuale è: ",oggi.getHours(),":",oggi.getMinutes())
  document.write("
La data di oggi è: ", oggi.getDate(),"/",oggi.getMonth() + 1,"/",oggi.getYear());
// -->
</script>

Come prima cosa creiamo una variabile contenente la data di oggi. Questo è fatto con oggi=new Date(). Se non specifichiamo una certa ora e una data, il browser utilizza l'ora locale e l'assegna alla variabile oggi. Notate che non occorre dichiarare la variabile oggi. Questa è una differenza nei confronti di Java e della maggior parte degli altri linguaggi di programmazione in cui è necessario specificare il tipo di una variabile prima del suo uso.
Abbiamo quindi creato un oggetto contenente l'ora e la data locali. Ora possiamo scrivere il suo contenuto nel documento. Bisogna scrivere oggi prima di ciascun metodo get, altrimenti il browser non sa a quale oggetto ci si riferisce. Il metodo getMonth() restituisce un numero compreso tra 0 e 11 (0 sta per gennaio e 11 per dicembre), quindi dobbiamo aggiungere 1 al numero restituito per ottenere il mese corretto.
Una cosa interessante a cui si potrebbe pensare è creare una data, per esempio la data di creazione di un documento, a partire dalla quale è possibile calcolare dopo quanti giorni qualcuno legge il vostro documento e , se sono passati più di 10 giorni, si potrebbe dire qualcosa come: Ehi, questo documento è molto vecchio, non leggerlo!
Per fare ciò avrete bisogno della data di oggi, come mostrato nell'esempio precedente, e la data di creazione. E' possibile impostare una data durante la creazione di un oggetto data, come nel seguente esempio: docStarted= new Date(96,0,13)
Bisogna specificare per prima cosa l'anno, poi il mese (ricordatevi di decrementare il mese di uno!) e infine il giorno. E' anche possibile specificare l'ora: docStarted= new Date(96,0,13,10,50,0)
I primi numeri definiscono sempre la data; essi sono seguiti dall'ora, i minuti e i secondi.

E' necessario che sappiate che Javascript non ha un vero e proprio tipo data, ma come vedete può lavorare con le date molto bene. Ciò funziona perché le date vengono rappresentate con il numero di millisecondi trascorsi dalle ore 0:0 del 1/1/1970. Può sembrare un po' complicato, ma è un metodo comune per rappresentare le date sui computer. Ma non preoccupatevi di questo, avrete a che fare soltanto con le relative funzioni e non è per niente difficile. Ho voluto dirlo soltanto per completezza.

Numeri casuali

Un problema comune riguarda l'uso di numeri casuali nei linguaggi di programmazione. Per il momento la funzione di generazione di numeri casuali in Javascript non funziona (credo comunque che verrà presto implementata), quindi dovremo sfruttare qualche trucco. Quella che vedremo è una tecnica che quasi tutti i compilatori che conosco utilizzano per generare numeri casuali. Sì, i numeri casuali vengono calcolati in base all'ora e alla data della tua macchina. Penso che la corrispondente funzione Javascript userà anch'essa questo metodo o qualcosa del genere. Come vi ho già detto prima, l'ora è rappresentata da un numero molto grande; è possibile utilizzare questo numero per fare qualche calcolo. Per esempio, potremmo calcolarne il seno e prendere il suo valore assoluto. Otterremo così un numero compreso tra 0 e 1. Poiché il valore dell'ora cambia ogni millisecondo, non correremo il rischio di ottenere lo stesso numero due volte di seguito. Se però vogliamo calcolare più numeri casuali in una sequenza temporale molto breve, non dobbiamo usare soltanto il seno: otterremmo una serie di numeri che segue la curva del seno! Ciò non è esattamente casuale. Ma se vogliamo calcolare un numero casuale e dopo 20 secondi ne vogliamo calcolare un altro, la funzione che vi ho proposto è certamente adatta.

Questo è un numero casuale: 0.9999928621797327

Ecco il codice di questo esempio:

<html>
<head>
<script language="JavaScript">
function RandomNumber() 
{
  oggi = new Date();
  num= Math.abs(Math.sin(oggi.getTime()));
  return num;  
}
</script>
</head>
<body>
<script language="JavaScript">
<!--
  document.write("Questo è un numero casuale:", RandomNumber());
// -->
</script>
</body>
</html>

Naturalmente la funzione di generazione di numeri casuali appena mostrata non è adatta per tutti gli scopi; serve soltanto a dare un'idea di come può essere realizzata una funzione di questo tipo. Vi presento ora una funzione che ho avuto da Maynard Demmon: dovete semplicemente impostare la variabile limits al valore che desiderate, per esempio 100, e otterrete un 'buon' numero casuale tra 0 e 99. Ecco il codice:

function random()
  {
     today = new Date();
     num = today.getTime();
     num = Math.round(Math.abs(Math.sin (num)*1000000)) % limits;
     return num;
  }

Creazione di finestre

La creazione di finestre è una caratteristica notevole di Javascript. Potete generare nuove finestre, caricare un documento HTML, navigare in Internet, tutto con Javascript. Ora vi mostrerò come è possibile aprire una finestra e scrivere qualcosa al suo interno. Se cliccate su questo pulsante vedrete quello che vado a spiegarvi.

Rompendo con la tradizione non ho scritto Ciao mondo! nella pagina ...
Ecco il sorgente:

<html>
<head>
<script language="JavaScript">
function WinOpen() {
   msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
   msg.document.write("<HEAD><TITLE>Ehi!</TITLE></HEAD>");
   msg.document.write("<CENTER><h1><B>E' veramente fantastico!</B></h1></CENTER>");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Clicca qui" onclick="WinOpen()">
</form>
</body>
</html>

Come al solito, al pulsante è associata una funzione, WinOpen(), che crea una nuova finestra invocando il metodo open.
Il primo argomento contiene l'URL della pagina: qui potete inserire l'indirizzo di un documento HTML che volete caricare. Se lo lasciate vuoto ("") non verrà caricata nessuna pagina e potrete scriverci con Javascript!
L'argomento successivo specifica il nome della finestra: qui potete scrivere quasi tutto, ma non ha nessun effetto nel nostro esempio. Avrete comunque un messaggio d'errore se scrivete Display Window (con uno spazio tra le due parole - Netscape vi darà un'informazione strana, infatti ho impiegato una buona mezz'ora per riuscire a trovare l'errore in base alle sue indicazioni!).
L'ultimo argomento specifica le proprietà della finestra ed è veramente interessante. Potete dire se volete una toolbar, delle scrollbar ... Se scrivete toolbar=yes otterrete una toolbar nella vostra finestra. Nella lista seguente ci sono alcune proprietà che potete modificare nel modo che vi ho appena descritto e senza nessuno spazio tra di loro! Ecco ciò che potete modificare nella vostra pagina:

toolbar
location
directories
status
menubar
scrollbars
resizable
copyhistory
width=pixels
height=pixels

Al posto di pixels dovete scrivere il numero di pixel, così potete specificare al browser quanto deve essere grande la vostra finestra.
Dopo aver aperto la vostra finestra e l'avete associata alla variabile msg, potrete scrivere al suo interno. Potete utilizzare normale codice HTML! Potreste quindi costruire un documento HTML utilizzando l'input immesso da un utente in una form; ad esempio, potreste costruire una pagina con una form in cui l'utente scrive il suo nome e poi creare un nuovo documento HTML contenente il suo nome! Fino ad alcuni mesi fa ciò era possibile soltanto con script CGI!

Nota: Quando scrivete qualcosa all'interno di una finestra, dovete sempre inserire un <br> alla fine del testo, altrimenti potreste non vederne l'ultima riga. Ciò accade perché il browser scrive soltanto linee complete e se non trova la fine di una linea rimane in attesa di altro testo.
Un'altra cosa importante: Se volete inserire un'immagine in una nuova finestra, assicuratevi di impostare le proprietà height e width del tag <img> altrimenti non vedrete alcuna immagine o la visualizzazione della pagina darà qualche errore. Possono accadere infatti problemi molto strani e non vi aspettereste che la vera 'responsabile' è la vostra immagine. Quindi specificate sempre le immagini come nel seguente esempio e non avrete problemi:

Molte persone mi chiedono come utilizzare i frame con Javascript. Per usare i frame con Javascript è necessario avere Netscape Navigator 2.0, per il momento. Ci sono altri browser che attualmente supportano i frame, ma in genere non supportano Javascript. Penso comunque che non ci vorrà molto tempo perché altri browser supportino sia i frame che Javascript.
Per prima cosa voglio dirvi due parole sui frame. Molte documentazioni su HTML non contengono nulla sui frame perché sono elementi abbastanza recenti. L'uso dei frame vi permette di 'dividere' la vostra finestra visualizzando le pagine HTML in più parti. Avete così delle parti indipendenti nella stessa finestra e potete caricare pagine differenti nei vari frame. Una bella idea consiste nel far interagire questi frame, cioè fare in modo che possano scambiarsi informazioni a vicenda. Per esempio potreste creare 2 frame: uno con la vostra normale pagina HTML e l'altro con una toolbar. La toolbar potrebbe contenere i pulsanti per la navigazione tra le vostre normali pagine HTML. La toolbar sarà sempre visibile, anche quando un'altra pagina HTML viene caricata nell'altro frame.
Prima voglio mostrarvi come apparirebbe una tale finestra, quindi cliccate sul pulsante e osservate quanto appare (Se state leggendo questa pagina online, dovete attendere un attimo quando cliccate sui pulsanti in questa parte del tutorial perché gli script vengono caricati dal server).

Ecco il codice HTML per i frame:

<HTML>
<HEAD>
<title>Frame</title>
</HEAD>
    <FRAMESET ROWS="50%,50%"> 
    <FRAME SRC="frtest1.htm" name="fr1"> 
    <FRAME SRC="frtest2.htm" name="fr2"> 
  </FRAMESET> 
</HTML>

Come prima cosa occorre specificare quanti frame volete creare, e potete farlo tramite il tag <frameset...>. Specificando le percentuali di righe il browser dividerà la finestra in aree con il corrispondente numero di righe. E' possibile creare delle colonne usando cols invece di rows. E' anche possibile usare diversi tag <frameset...>. Ecco un esempio fornito da Netscape:

<FRAMESET COLS="50%,50%"> 
  <FRAMESET ROWS="50%,50%"> 
    <FRAME SRC="cell.html"> 
    <FRAME SRC="cell.html"> 
  </FRAMESET> 
  <FRAMESET ROWS="33%,33%,33%"> 
    <FRAME SRC="cell.html"> 
    <FRAME SRC="cell.html"> 
    <FRAME SRC="cell.html"> 
  </FRAMESET> 
</FRAMESET>

Esso creerà due colonne: la prima sarà divisa in due parti uguali mentre la seconda sarà divisa in 3 parti uguali. Le percentuali 50%, 50% nel primo tag <frameset> indica al browser quanto deve essere grande ciascun frame.
Potete dare dei nomi ai vostri frame e questa è una cosa importante per l'uso con Javascript. Nel primo esempio potete vedere come viene associato un nome ad un frame. Usando il tag <frame> potete indicare al browser quale pagina HTML caricare

Penso che le nozioni elementari relative ai frame siano semplici. Ora diamo un'occhiata al nostro prossimo esempio:

Questo pulsante mostra una finestra in cui è possibile cliccare su dei pulsanti per scrivere del testo sull'altro frame.
Ecco il sorgente:

Per creare i frame è necessario (frames.htm):

<HTML>
<HEAD>
<title>Frame</title>
</HEAD>
    <FRAMESET ROWS="50%,50%"> 
    <FRAME SRC="frame1.htm" name="fr1" noresize> 
    <FRAME SRC="frame2.htm" name="fr2"> 
  </FRAMESET> 
</HTML>

Ecco il sorgente di frame1.htm:

<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
     function Ciao()
     {
       document.write("Ciao!<br>");
     }
// -->
</script>
</HEAD>
<BODY>
Questo è il nostro primo frame!
</BODY>
</HTML>

E ora frame2.htm:

<HTML>
<body>
Questo è il nostro secondo frame!
<p>
<FORM NAME="buttonbar">
     <INPUT TYPE="button" VALUE="Ciao" onClick="parent.fr1.Ciao()">
     <INPUT TYPE="button" VALUE="Ehi" onClick="Ehi()">
     <INPUT TYPE="button" VALUE="Bla" onCLick="bla()">
</FORM>
</BODY>
</HTML>
<script language="JavaScript">
<!-- Hiding
     function Ehi() 
     {
        parent.fr1.document.write("Ehi!<br>");
     } 
     function bla() 
     {
        document.write("bla bla bla<br>");
     }
// -->
</script>

Vi ho mostrato un bel po' di script! Cosa fa ciascuno di loro? L'utente carica il primo file (frames.htm). Questo crea i frame e carica il file HTML frame1.htm nel primo frame (chiamato 'fr1') e frame2.htm nel secondo frame (chiamato 'fr2'). Fino a qui abbiamo usato soltanto puro codice HTML. Come potete vedere, il primo file frame1.htm contiene delle funzioni Javascript, ma non sono invocate in quello stesso file. Sono delle funzioni non necessarie? Sono davvero così pigro da non aver cancellato queste inutili funzioni? Contrariamente a quanto si potrebbe pensare, esse non sono del tutto inutili. Sono infatti invocate dal codice contenuto nel secondo file frame2.htm! In questo secondo file abbiamo creato dei pulsanti come abbiamo fatto nella prima parte di questa introduzione. La proprietà onClick è quindi familiare, ma che cosa vuol dire parent.fr1...?

Se avete familiarità con gli oggetti non la considererete una novità. Come abbiamo visto prima, i file frame1.htm e frame2.htm sono invocati dal file frames.htm. Frames.htm viene chiamato il genitore (parent) degli altri due frame. Di conseguenza i due nuovi frame vengono chiamati figli (child) del file frames.htm. Potete vedere che c'è una specie di gerarchia tra i diversi frame. Cercherò di mostrare questa idea con l'aiuto di un piccolo 'grafico' (l'arte ASCII lo descriverebbe molto meglio ...):

              frames.htm                genitore (parent)
               /      \
              /        \
             /          \
  fr1(frame1.htm)     fr2(frame2.htm)   figli (children)

Naturalmente è possibile estendere questo concetto: potete creare dei 'nipoti' (se volete chiamarli così - non è l'espressione ufficiale!). Il 'grafico' sarà il seguente:

              frames.htm                genitore(parent)
               /      \
              /        \
             /          \
  fr1(frame1.htm)     fr2(frame2.htm)   figli(children)
          /  \
         /    \
        /      \
    gchild1  gchild2                    'nipoti'

Se volete indicare un qualsiasi elemento del frame genitore da frame2.htm basta mettere un parent. prima della funzione che volete invocare. Per indicare le funzioni definite in frame1.htm dal frame genitore occorre mettere un fr1. prima dell'invocazione della funzione. Perché fr1.? Nel codice del frame genitore (frames.htm) abbiamo creato frame differenti ed abbiamo dato loro nomi diversi. Ho scelto fr1 per il primo frame. Il passo successivo è semplice. Come bisogna indicare il primo frame dall'interno di frame2.htm (che contiene il secondo frame chiamato fr2)? Come potete vedere dal mio enorme grafico, non c'è nessuna connessione diretta tra frame1.htm e frame2.htm, quindi non è possibile invocare le funzioni definite in frame1.htm direttamente da frame2.htm. Occorre indicarle tramite il frame genitore. Quindi l'indicazione corretta è parent.fr1. Se volete invocare la funzione Ciao() da frame2.htm scrivete semplicemente parent.fr1.Ciao(). Questo è quello che viene fatto nel secondo script in corrispondenza della proprietà onClick.

Se avete creato dei frame e qualcuno seleziona un link, i frame non scompaiono. Questo va bene se l'utente 'si trova' sulla vostra pagina. Potreste creare una menubar che viene mostrata sempre in un solo frame, per esempio. Ma se l'utente 'salta' in un'altra pagina in Internet, la vostra menubar non serve più. Come cancellare un frame una volta creato?

Basta aggiungere TARGET="_top" al tag <a href...>, come nel seguente esempio:

<a href="vaivia.html" TARGET="_top">se non vuoi più stare nella mia pagina</a>

Naturalmente dovete aggiungere TARGET="_top" ad ogni link che porta 'fuori'. Se tutti i link della vostra pagina portano 'fuori', potete anche scrivere <base target="_top"> nell'intestazione della vostra pagina HTML. Ciò vuol dire che ogni link della pagina cancellerà i frame.

Voglio ora mostrarvi come visualizzare del testo nella statusbar (la barra in fondo al vostro browser in cui vengono mostrate le URL) e naturalmente vi spiegherò come funziona uno scroller, nonostante sia già un effetto odiato nell'ambito di Javascript (vi dirò in seguito perché).
Come possiamo indicare la statusbar? Questo script vi fa vedere come scrivere del semplice testo nella statusbar:

Simpatico, no? Ecco lo script:

<html>
<head>
<script language="JavaScript">
<!-- 
function statbar(txt)
{
   window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<INPUT TYPE=TEXT NAME=Testo Value="Scrivi qualcosa" size="20">
<input type="button" name="look" value="Scrivi!" onclick="statbar('Ciao! Questa è la statusbar!' & this.form.Testo.value);">
<input type="button" name="erase" value="Cancella!" onclick="statbar('');">
</form>
</body>
</html>

Abbiamo creato due pulsanti che invocano entrambi la funzione statbar(txt). Il txt tra parentesi indica che la funzione riceve in questa variabile un valore passato dall'invocazione della funzione (l'ho chiamata txt ma avrei potuto chiamarla in qualsiasi altro modo). Se guardate il tag <form> in cui vengono creati i pulsanti potrete vedere che la funzione statbar(txt) viene invocata senza specificare la variabile txt: al suo posto mettiamo il testo che vogliamo visualizzare nella statusbar. Possiamo vedere il tutto in questo modo: quando la funzione viene invocata alla variabile txt è assegnato il valore passato dalla chiamata di funzione. Quindi quando clicchiamo sul pulsante 'Write!' viene invocata la funzione statbar(txt) e alla variabile txt viene asseganta la stringa 'Ciao! Questa è la statusbar'. All'interno della funzione potete usare txt come una normale variabile. Questo metodo di passaggio di parametri alle funzioni le rende molto flessibili.
Osserviamo il secondo pulsante: esso invoca la stessa funzione! Senza il meccanismo del passaggio di parametri avremmo avuto bisogno di 2 diverse funzioni.
Ma cosa fa la funzione statbar(txt)? E' semplice: assegna il contenuto della variabile txt alla variabile window.status (window.status = txt;). Scrivendo una stringa vuota ('') nella statusbar viene cancellato il contenuto precedente. Notate che bisogna usare i singoli apici ' perché i doppi apici " vengono usati per la definizione di onClick. Il browser deve sapere come bilanciare gli apici, quindi dovete alternare apici singoli e doppi. Penso che fin qui dovrebbe essere tutto chiaro.

Conoscete già la proprietà onMouseOver precedentemente illustrato
<a href="stupid.htm" onMouseOver="window.status='Questo è uno stupido link...'; return true">
Non vi da fastido che il testo che appare nella statusbar non venga cancellato se non quando puntate il mouse su un'altro link? Ho una soluzione molto semplice. Scriveremo una piccola funzione che utilizza la stessa tecnica mostrata prima per cancellare il contenuto della statusbar. Ma come può essere invocata la funzione per cancellare? Non abbiamo un metodo o una proprietà da poter utilizzare per stabilire se il puntatore del mouse ha lasciato il link. La soluzione consiste nell'impostare un timer.

Provate il seguente script. Posizionate il puntatore del mouse su questo link senza cliccare (fate attenzione alla barra di stato!)

Date un'occhiata al sorgente e vedrete che è molto più semplice di quanto possa sembrare a prima vista.

<html>
<head>
<script language="JavaScript">
<!-- 
function muovisullink(txt)
{
   window.status = txt;
   setTimeout("cancella()",1000);
}
function cancella() 
{
   window.status="";
}
// -->
</script>
</head>
<body>
<a href="dontclck.htm" onMouseOver="muovisullink('Sto per scomparire!');return true;">link</a>
</body>
</html>

Riconoscerete molte parti dello script. La funzione muovisullink(txt) non è che la funzione statbar(txt) dopo qualche operazione di taglia e incolla! Quasi la stessa cosa vale per la funzione cancella(). Nella pagina HTML abbiamo creato un link con la proprietà onMouseOver; la nostra funzione muovisullink(txt) viene invocata passando la stringa 'Sto per scomparire!' al posto del parametro txt e la stessa stringa viene assegnata a windows.status. Questo è quanto avveniva anche nella funzione statbar(txt). La chiamata di funzione setTimeout(...) è una novità: essa imposta un timeout. La funzione setTimeout(...) definisce un intervallo di tempo dopo il quale accade qualcosa. Nel nostro esempio viene invocata la funzione cancella() dopo 1000 millisecondi (cioè un secondo). E' fantastico! La nostra funzione muovisullink(txt) termina il suo compito dopo aver avviato il timer. Il browser invocherà la funzione cancella() automaticamente dopo 1 secondo (State già pensando ad una pagina che dica all'utente: Se non fai questo il tuo hard disk verrà distrutto tra 10 secondi!???).
Alla scadenza del timeout il timer non ricomincia da capo, ma potreste avviarlo di nuovo nella funzione cancella(). Questo ci porta direttamente alla realizzazione dei famigerati scroller.

Dal momento che già sapete come scrivere nella statusbar e come funziona la funzione setTimeout, vi sarà facile seguire l'implementazione di uno scroller.

Cliccate sul pulsante per vedere il mio scroller. Lo script deve essere caricato dal server quindi abbiate un po' di pazienza se non vedete lo scroller immediatamente.

Guardiamo lo script:

<html>
<head>
<script language="JavaScript">
<!-- 

var scrtxt="Qui metterete il messaggio che i visitatori della vostra pagina guarderanno affascinati per ore ...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;

function scroll() 
{
  pos++;
  var scroller="";
  if (pos==lentxt)
     pos=1-width;
  if (pos<0) 
    {
       for (var i=1; i<=Math.abs(pos); i++)
         scroller=scroller+" ";
       scroller=scroller+scrtxt.substring(0,width-i+1);
    }
  else
     scroller=scroller+scrtxt.substring(pos,width+pos);
  window.status = scroller;
  setTimeout("scroll()",150);
}
//-->
</script>
</head>
<body onLoad="scroll();return true;">
Qui metterete la vostra bella pagina!
</body>
</html>

Questo script usa le stesse funzioni (o loro parti) che abbiamo già usato prima. La funzione setTimeout(...) 'dice' al timer di invocare la funzione scroll() allo scadere del tempo. Lo scroller si muoverà di un passo alla volta. All'inizio ci sono un po' di calcoli, ma non sono veramente importanti per capire come funziona lo script. I calcoli servono per ottenere la posizione a partire da cui deve iniziare lo scorrimento. All'inizio lo script deve aggiungere alcuni spazi per posizionare il testo sulla destra.

Vi ho accennato all'inizio di questa parte della mia introduzione che gli scroller non sono molto popolari o se lo sono non lo saranno per molto. Vi sono alcuni motivi: ve ne elenco alcuni ma ve ne sono certamente molti altri.
Se vedete questo effetto per la prima volta può sembrare molto bello ma dopo averlo visto per la milionesima volta non è più così divertente. Ma questo non è un buon argomento perchè può valere per qualsiasi bel trucchetto usato nelle vostre pagine.
Ci sono problemi più seri. Quello che non mi piace è che lo scroller cambia velocità quando muovete il mouse (diventa più veloce!), almeno questo è quanto accade a me. Questo effetto è più evidente quando si vuole rendere lo scroller un po' più veloce cambiando il valore di timeout. Probabilmente ci sarà un modo per aggirare questo problema. Fate attenzione inoltre a non lasciare eseguire questo script per troppo tempo altrimenti verrà segnalato un Out of memory error.

Ci sono molte altre routine sulla Rete. Ho visto alcuni scroller che scrivono il testo in un frame; programmarne uno non dovrebbe essere molto difficile.

Un'importante tecnica di programmazione è l'uso di array. La maggior parte dei linguaggi di programmazione li supportano in qualche modo. Probabilmente siete già arrivati al punto in cui sentite la necessità di una struttura come gli array, ma se cercate nella documentazione fornita da Netscape vi renderete conto che non si fa cenno agli array. Il problema è che gli array non esistono in Javascript! Vi mostrerò comunque un modo per colmare questa lacuna!
Ma cosa sono gli array? Potremmo dire che gli array sono un insieme di variabili. Facciamo conto di aver bisogno di 10 variabili. Si potrebbe cominciare con le variabili a, b, c, ... Questa è una soluzione poco pratica, specialmente se si vogliono usare 100 o più variabili. Se abbiamo un array, chiamato 'MyArray', con 10 elementi, possiamo indicare i diversi elementi con MyArray[1], MyArray[2], MyArray[3]... (molti linguaggi di programmazione cominciano con 0 come primo elemento, ma preferiamo considerare 1 come primo elemento perché in questo modo li utilizzeremo in Javascript). Quindi se volete memorizzare il numero 17 nel primo elemento dell'array dovete scrivere MyArray[1]=17. Potete quindi lavorare con gli array come con le normali variabili. Ma vi sono alcune caratteristiche particolari. Se volete memorizzare il numero 17 in ogni elemento dell'array potete farlo nel modo seguente:
for (var i=1;i<11;i++)
MyArray[i]=17
Il comando for dice al computer quante volte deve eseguire il comando successivo. Il ciclo del for inizia con i=1 e viene eseguito il comando MyArray[1]= 17; dopo viene incrementata di 1 la variabile i e il comando successivo diventa MyArray[2]= 17 e così via fino a quando la variabile i non ha il valore 10 (l'espressione i<11 nel ciclo del for deve essere vera; quando i ha il valore 11 questa espressione non è più vera).

Ora vi mostrerò una funzione per inizializzare gli array. Su questa funzione si è discusso nella mailing list su Javascript.

function initArray() 
   {
      this.length = initArray.arguments.length
      for (var i = 0; i < this.length; i++)
         this[i+1] = initArray.arguments[i]
   }

Non è necessario comprendere il funzionamento della funzione. Basta sapere come usarla. Se volete creare un array con tre elementi scrivete:

var MyArray= new initArray(17,18,19)

17, 18, 19 vengono assegnati agli elementi 1, 2, 3. Potete anche scrivere delle stringhe nei vostri array. Non ha importanza il tipo degli elementi!

var heyho= new initArray("Una","cosa","fantastica")

E' possibile anche utilizzare elementi di tipo diverso:

var Mixedup= new initArray(17,"Ehi",103).

Con questo script:

<script language="JavaScript">
<!-- 
  var Mixedup= new initArray(17,"Ehi",103);
  document.write("Elemento N. 1: "+Mixedup[1]+"<br>");
  document.write("Elemento N. 2: "+Mixedup[2]+"<br>");
  document.write("Elemento N. 3: "+Mixedup[3]+"<br>");
// -->  
</script>

Produciamo questo output:

L'altro giorno nello scrivere un giochino ho avuto un problema che forse sarà capitato anche a voi. Se volete cancellare il contenuto di una finestra o di un frame fate riferimento alla documentazione di Netscape e vi accorgerete che esiste la funzione Javascript 'document.clear()' ma che non fa il suo dovere! Sembra che la funzione document.clear() non funzioni su tutte le piattaforme. Gordon McComb mi ha fornito il seguente script che ripulisce una finestra.

     document.close();
     document.open();
     document.write("<P>");

Non siete obbligati a scrivere document.write("<P>");, l'importante è che inviate qualcosa alla finestra. Questo script funziona anche con i frame.

Ora daremo un'occhiata ad uno script che permette di navigare tra diversi documenti. Sto parlando delle funzioni back() e forward(). Avere un link che porta indietro nella vostra pagina non è la stessa cosa del pulsante Back di Netscape Navigator. Per esempio, se ad una pagina si può arrivare tramite più pagine, il link indietro a quale pagina deve puntare? Il pulsante Back di Netscape Navigator va indietro di un passo nella storia delle pagine visitate. E' possibile fare ciò anche con Javascript. Clicca su questo link per poter tornare indietro! Lo script che ho usato è il seguente:

<html>
<body>
<FORM NAME="buttonbar">
     <INPUT TYPE="button" VALUE="Indietro" onClick="history.back()">
     <INPUT TYPE="button" VALUE="Originale" onClick="location='script.htm'">
     <INPUT TYPE="button" VALUE="Avanti" onCLick="history.forward()">
</FORM>
</body>
</html>

Potete anche scrivere history.go(-1) e history.go(1).

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.

L'inserimento di dati in una form è molto importante per certe pagine Web. L'input delle form spesso viene inviato al server per le opportune elaborazioni. Javascript consente di controllare l'input delle form prima del loro invio al server. Come prima cosa voglio mostrarvi come è possibile controllare l'input di una form, poi vedremo come è possibile ottenere l'invio di informazioni con Javascript o HTML.

Prima di tutto creeremo una piccola form. La pagina HTML conterrà due caselle di testo. L'utente dovrà scrivere il suo nome nella prima casella e l'indirizzo di e-mail nella seconda. Potete inserire qualsiasi cosa negli elementi della form, poi cliccate sul relativo pulsante. Provate anche a non inserire nulla e cliccate sul pulsante.

Per quanto riguarda la prima casella di testo, vedrete un messaggio di errore quando viene lasciata in bianco, mentre un qualsiasi input viene considerato valido. Naturalmente ciò non previene l'inserimento di un nome sbagliato. Il browser accetta anche numeri, quindi se inserite '17' otterrete un 'Ciao 17!'.
Il controllo della seconda casella è leggermente più sofisticato. Provate ad inserire una semplice stringa, il vostro nome per esempio. Non verrà accettato (a meno che non abbiate un @ nel vostro nome...). Il criterio di accettazione dell'input come un indirizzo di e-mail valido consiste nel verificare la presenza del simbolo @. Viene accettato anche il solo simbolo @, che non è certamente significativo. Per semplicità abbiamo deciso di controllare soltanto la presenza di @, dal momento che ogni indirizzo di e-mail in Internet contiene questo simbolo.

Come è fatto lo script che crea questa form e ne controlla l'input? Eccolo:

<html>
<head>
<script language="JavaScript">
<!--
function test1(form)  
{
  if (form.text1.value == "")
     alert("Inserisci una stringa, per favore!")
  else
     alert("Ciao "+form.text1.value+"! Inserimento dati ok!");
}

function test2(form) 
{
  if (form.text2.value == "" || form.text2.value.indexOf('@', 0) == -1) 
     alert("Indirizzo di e-mail non valido!");
  else
     alert("OK!");
}
// -->
</script>
</head>

<body>
<form name="first">
Inserisci il tuo nome:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Controlla" onClick="test1(this.form)">
<P>
Inserisci il tuo indirizzo di e-mail:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Controlla" onClick="test2(this.form)">
</body>

Diamo prima uno sguardo al codice HTML nel corpo del documento. Abbiamo creato due caselle di testo e due pulsanti. I pulsanti invocano le funzioni test1(...) o test2(...) in base a quale di loro viene selezionato e viene passato come argomento this.form per permetterne l'accesso ai suoi elementi.
La funzione test1(form) controlla se la stringa è vuota; questo è fatto con if (form.text1.value == "").... 'form' è la variabile a cui viene assegnato il valore 'this.form' nella chiamata di funzione. Possiamo ottenere il valore del dato inserito nella casella di testo usando 'value' in combinazione con form.text1. Per controllare se la stringa è vuota la confrontiamo con "". Se la stringa inserita è uguale a "", verrà segnalato all'utente un messaggio di errore, altrimenti verrà segnalato un messaggio di ok.
Notate che se l'utente inserisce solo spazi, verrà considerato come input valido! Potete naturalmente controllare anche questa possibilità ed escluderla. Penso che non dovrebbe essere troppo difficile con le informazioni che avete fin qui acquisito.
Vediamo ora la funzione test2(form). Anche questa funzione controlla che sia stato inserito qualcosa nella relativa casella facendo un confronto con la stringa vuota, ma ho aggiunto qualcosa all'if. Il simbolo || indica l'operatore OR, di cui abbiamo parlato nella parte 6 di questo tutorial.
L'istruzione if controlla se il primo o il secondo confronto sono veri; se almeno uno lo è viene eseguito il comando successivo. Ciò vuol dire che otterrete un messaggio di errore se la vostra stringa è vuota o non contiene un @. La seconda operazione dell'istruzione if controlla se la stringa inserita contiene un @.

Quali diverse possibilità esistono per inviare il contenuto di una form? Il modo più semplice consiste nell'invio tramite e-mail. Questo è il metodo che ci accingiamo ad analizzare. Se volete ottenere un feedback senza e-mail e volete che il server gestisca l'input automaticamente, dovete usare CGI, per il momento. Dovete utilizzare CGI, per esempio, se volete creare un motore di ricerca come Yahoo, in cui l'utente ottiene un risultato velocemente dopo l'inserimento dei dati nella form. L'utente non deve attendere che il gestore del server legga l'input, vada alla ricerca dei dati richiesti e fornisca il relativo output: il tutto viene fatto automaticamente dal server. Javascript non è in grado di fare cose del genere. Anche se volete creare un guestbook (registro dei visitatori), non potete fare in modo con Javascript che il server aggiunga automaticamente informazioni ad una pagina HTML esistente. Soltanto con CGI potete ottenere questo al momento. Potete comunque creare un guestbook utilizzando l'e-mail: dovrete però inserire le informazioni manualmente. Può andar bene se non vi aspettate 1000 mail al giorno!
Il codice che segue è in puro HTML, quindi non abbiamo bisogno di Javascript! Naturalmente se vogliamo controllare l'input prima di inviare la form, dovremo scrivere qualche funzione Javascript. Devo dire che il comando mailto non funziona con tutti i browser, ma i browser più recenti lo supportano.

<FORM METHOD=POST ACTION="mailto:nome@domi.nio">
<H3>Ti piace questa pagina?</H3>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="1">No per niente.<BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>E' una perdita di tempo.<BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="3">E' il peggior sito della Rete.<BR>
  <INPUT NAME="submit" TYPE="SUBMIT" VALUE="Invia">
</FORM>

Con questa form avrete un feedback via e-mail.

L'unico problema è che riceverete una mail che può sembrare incomprensibile a prima vista. Talvolta tutti gli spazi vengono sostituiti con '+' o con '%20'. Le+mail+possono+avere+questo+aspetto. Esistono dei parser sulla Rete che formattano la mail in un aspetto più gradevole.

C'è un'altra cosa che può rendere gli elementi della vostra form un po' più user-friendly. Potete stabilire su quale elemento impostare inizialmente il focus oppure potete indicare al browser di posizionare il focus sulla form in cui l'utente ha inserito dei dati sbagliati. Ciò vuol dire che il browser posizionerà il cursore nell'elemento della form specificato in modo tale che l'utente non deve cliccarvi sopra per inserire i dati. Potete fare ciò con la seguente funzione:

function setfocus() {
        document.first.text1.focus();
        return;
}

Questo script imposta il focus sulla prima casella di testo della form dell'esempio illustrato prima. Occorre specificare il nome dell'intera form, nel nostro esempio first, e il nome del singolo elemento, text1. Se volete impostare il focus su questo elemento quando la pagina viene caricata, dovete aggiungere la proprietà onLoad al tag <body>; per esempio:

<body onLoad="setfocus()">