SCRIPT FOR by C1Ghnl

VIEWS: 80 PAGES: 25

									Introduzione a javascript ed esempi
In questa piccola dispensina ci sono veloci e facili lezioni sul javascript
ma soprattutto tanti esempi usati anche molto spesso che possono
esemplificare il lavoro. Ci sono in tutto 10 lezioni ognuna con vari pezzi
di codice di esempio per esercitarsi o produrre finezze che non si possono
fare in pl/sql. Buon lavoro a tutti!!!


Lezione 1 – Compilazione Dei Form
Per evitare certi inconvenienti è possibile un controllo in tempo reale sulla completa
compilazione del form da parte del visitatore. In altre parole, se l'utente non compila tutti i
campi, o solo alcuni, otterrà un messaggio di avviso che indica l'errore o la dimenticanza.

Si consideri il caso pratico di un modulo informativo composto da tre campi: nome e
cognome, e-mail e telefono. Di questi dati soltanto il numero di telefono è facoltativo, mentre
gli altri sono considerati obbligatori.

Il codice HTML che crea il form è il seguente (l’aterisco indica i campi obbligatori):
<FORM>
Nome e cognome *<BR>
<input type=text name="nome" size=40><BR><BR>
E-mail *<BR>
<input type=text name="mail" size=30><BR><BR>
Telefono<BR>
<input type=text name="telefono" size=20><BR><BR>
<INPUT TYPE="SUBMIT" VALUE="Spedisci"></INPUT>
</FORM>
Impostato in questo modo il form è certamente operativo ma se spedito senza un campo
obbligatorio compilato non dà alcun messaggio di avviso col rischio, già indicato in
precedenza, di ricevere informazioni parziali o peggio inservibili.
Javascript interviene in aiuto con una sintassi semplice e facilmente configurabile. Il codice va
inserito in due fasi successive.

Innanzitutto va impostato il codice all’interno dei tag <HEAD> del documento:
<script>
function checkrequired(which){
var pass=true
if (document.images){
for (i=0;i<which.length;i++){
var tempobj=which.elements[i]
if (tempobj.name.substring(0,8)=="required"){
if
(((tempobj.type=="text"||tempobj.type=="textarea")&&tempobj.value=='')||(tempobj.t
ype.toString().charAt(0)=="s"&&tempobj.selectedIndex==-1)){
pass=false
break
}
}
}
}
if (!pass){
alert("Non hai compilato correttamente il form. Alcune informazioni non sono state
inserite. Clicca su OK e verifica l'errore")
return false
}
else
return true
}
</script>

La riga di codice:

alert("Non hai compilato correttamente il form. Alcune informazioni non sono state inserite.
Clicca su OK e verifica l'errore")

imposta il messaggio che il browser dà in risposta quando verifica l'assenza di alcuni campi
obbligatori. Ovviamente il messaggio può essere modificato secondo le proprie esigenze.

Il resto del codice esaminato non va oltremodo modificato.

La funzione checkrequired è quella che regge l’interno struttura dello script e stabilisce che i
campi controllabili siano text, textarea e select.

Conclusa l’impostazione del codice Javascript è necessario apportare alcune modifiche ai
singoli campi del form visto in precedenza.

Per prima cosa va inserito il riferimento alla funzione checkrequired nell’apertura del form:

<FORM onSubmit="return checkrequired(this)">

Successivamente è necessario anteporre ai nomi dei diversi campi che si vogliono obbligatori
il termine "required". Per esempio il nome del primo campo è "nome", e per essere impostato
come obbligatorio deve trasformarsi in "requirednome". Così per il campo "mail" che diventa
"requiredemail".

L’unico campo non modifato è "telefono", che come scritto in precedenza è facoltativo.

Apportate le dovute modifiche, il form visto in precedenza assume la seguente struttura
(fermo restando il codice inserito tra i tag <HEAD>):
<FORM onSubmit="return checkrequired(this)">
Nome e cognome *<BR>
<input type=text name="requirednome" size=40><BR><BR>
E-mail *<BR>
<input type=text name="requiredmail" size=30><BR><BR>
Telefono<BR>
<input type=text name="telefono" size=20><BR><BR>
<INPUT TYPE="SUBMIT" VALUE="Spedisci"></input>
</FORM>
Compilato il form e premuto il tasto li tasto "spedisci" non rimane altro che verificare gli effetti
dello script.
LEZIONE 2 - Gli Eventi
Oltre essere organizzato a oggetti e metodi, JavaScript sfrutta moltissimo la presenza degli
eventi.

Un evento è – molto semplicemente – qualcosa che accade nel documento.

Anche nella vita quotidiana un evento è qualcosa che accade: ad esempio una tazzina di
caffè che cade e si rompe. Il documento dunque è l'ambiente entro cui vengono realizzate
delle "azioni", in parte dovute alla volontà dell'utente (passaggio del mouse su un link, click su
qualcosa...), altre volte dovute alla situazione contingente (la pagina è stata caricata).

Grazie agli eventi possiamo "impacchettare" il codice scritto attraverso JavaScript e farlo
eseguire non appena l'utente esegue una data azione: quando clicca su un bottone di un
form possiamo controllare che i dati siano nel formato giusto; quando passa su un
determinato link possiamo scambiare due immagini, eccetera.

Gli eventi (le possibili cose che possono capitare all'interno della pagina) sono davvero tanti e
ogni nuova versione del browser si arricchisce di nuove possibilità messe a disposizione degli
sviluppatori.Vediamo quali sono quegli eventi che vi capiterà più spesso di incontrare.

Come si può vedere dagli esempi il modo corretto per sfruttare gli eventi è quello di inserire
l'evento all'interno della sintassi dell'elemento HTML e racchiudere il codice JavaScript tra
virgolette. Secondo questo modello:

<ELEMENTO nomeEvento="codice JavaScript">



Abbiamo già incontrato in precedenza l' "alert" è una finestra di dialogo che avverte di
qualcosa.

Negli esempi qui sotto, quando viene eseguita una determinata azione, viene mostrato un
alert con scritto "ciao".



                         Si applica a

           Evento        (elementi         Descrizione                esempio
                        maggiormenti
                           usati)

       onLoad           BODY              "al             <BODY
                                          caricamento..." onLoad="alert('ciao');">
                        IMAGE
                                          L'evento scatta <IMG
                                          quanto          SRC="miaImmagine.jpg"
                                          l'oggetto       onLoad="alert('ciao');">
                                          risulta
                                          completamente
                                          caricato.
onUnLoad     BODY             Applicato al    <BODY
                              BODY si         onUnLoad="alert('ciao');">
                              verifica quando
                              il browser
                              "scarica" il
                              documento.
                              Cioè alla
                              chiusura del
                              documento.

onMouseOver A                 "al passaggio     <A
                              del mouse".       onMouseOver="alert('ciao');"
             AREA                               HREF="pagina.html">
                              Si verifica
             INPUT (submit,   quando
             reset,button,    l'utente passa
             checkbox,        il mouse su
             radio,option)    un'area
                              sensibile (link
                              o mappa).

                              Con IE 5+
                              questo evento
                              può essere
                              associato
                              anche a TD,
                              TR, eccetera

onMouseOut   A                "quando il        <A
                              mouse esce".      onMouseOut="alert('ciao');"
             AREA                               HREF="pagina.html">
                              Si verifica
             INPUT (vedi      quando
             sopra)           l'utente con il
                              mouse esce al
                              di fuori
                              dell'area
                              sensibile (link
                              o mappa).

                              Con IE 5+
                              questo evento
                              può essere
                              associato
                              anche a TD,
                              TR, eccetera

onClick      A                "al click del     <A onClick="alert('ciao');"
                              mouse..."         HREF="pagina.html">
             AREA
                              Avviene
             INPUT            quando
                              l'utente clicca
                              sull'elemento



onKeyPress   A                Si verifica     <TEXTAREA
                              quando si è     onKeyPress="alert('ciao');">
             AREA             all'interno     </TEXTAREA>
                              dell'elemento e
             INPUT            viene premuto
                                          un tasto della
                        DIV               tastiera.

       onChange         INPUT         Si verifica   <SELECT
                        TYPE="SELECT" quando        onChange="alert('ciao');">
                                      l'elemento    <OPTION>uno
                                      subisce un    <OPTION>due
                                      cambiamento a <OPTION>tre
                                      seguito       </SELECT>
                                      dell'azione
                                      dell'utente.

       OnSubmit         FORM              Quando viene <FORM NAME="mioForm"
                                          eseguita l'invio ACTION="http://...."
                                          del form         onSubmit="alert('ciao');">
                                          (tramite
                                          bottone o
                                          tramite invio
                                          da tastiera).

       onFocus          A                 "quando          <BODY
                                          l'elemento ha il onFocus="alert('ciao');">
                        INPUT             focus..."
                                                           (Provate la sintassi di questo
                        BODY              Entra in azione esempio con altre finestre
                                          non appena       del browser aperte, e
                                          l'elemento è     provate a passare dalla
                                          attivo.          vostra pagina alle altre
                                                           finestre e viceversa)

       onBlur           A                 "quando          <BODY
                                          l'elemento non onBlur="alert('ciao');">
                        INPUT             è più attivo..."

                        BODY              Viene
                                          richiamato
                                          quando
                                          l'elemnto
                                          smette di
                                          essere attivo.




Un discorso a parte merita l'evento onFocus, che spesso suscita dell perplessità.

"onFocus" significa "quando l'elemento è focalizzato": significa che in quel momento è attivo
quel determinato elemento della pagina HTML.

Nel caso dei link e delle mappe vi potete accorgere bene di quando l'elemento ha il focus: il
link o la mappa ha infatti una piccola linea tratteggiata che lo circonda (nel caso del link, se
l'elemento è focalizzato, si trova nello stato "ACTIVE").

Anche nel caso delle finestre del browser è facile accorgersi di quando un elemento ha il
focus: con Windows se la finestra ha il focus (basta che si trovi in primo piano) la barra in alto
è azzurra (o del colore definito dall'utente), in caso contrario è grigia.

onBlur semplicemente è il contrario di onFocus: quando l'elemento che aveva il focus lo
perde (perché l'attenzione dell'utente si è concentrata su altro) viene azionato l'evento
onBlur.
È da notare che a uno stesso elemento possono essere attribuiti più eventi Ad esempio:

<A onMouseOver="alert('passaggio sul link');" onMouseOut="alert('uscita dal link');"
onClick="alert('click sul link');" HREF=”pagina.html”>testo del link </A>




(Certo l'alert non è l'ideale per far interagire i tre eventi fra loro, ma l'importante è aver
compreso il concetto che allo stesso elemento possono essere collegati eventi diversi,
ciascuno con il proprio codice da eseguire).

Gli eventi non si esauriscono nella tabella che abbiamo appena visto. Ma quelli visti sono gli
eventi più noti e più usati.

Ogni elemento dell'HTML ha a disposizione determinati eventi e non altri. Per esempio, un
livello in Internet Explorer 6 è dotato di tutti i seguenti eventi (come si può vedere non c'è
l'evento onLoad, né onSubmit, perché riferiti a un livello non avrebbero alcun senso):

onmouseup, oncontextmenu, onrowexit, onbeforepaste, onactivate, onmousemove, onmove,
onselectstart, oncontrolselect, onkeypress, oncut, onrowenter, onmousedown, onpaste,
onreadystatechange, onbeforedeactivate, onkeydown, onlosecapture, ondrag, ondragstart,
oncellchange, onfilterchange, onrowsinserted, ondatasetcomplete, onmousewheel,
ondragenter, onblur, onresizeend, onerrorupdate, onbeforecopy, ondblclick, onkeyup,
onresizestart, onmouseover, onmouseleave, onmoveend, onresize, ondrop, onpage,
onrowsdelete, onfocusout, ondatasetchanged, ondeactivate, onpropertychange, ondragover,
onhelp, ondragend, onbeforeeditfocus, onfocus, onscroll, onbeforeactivate, onbeforecut,
onclick, oncopy, onfocusin, onbeforeupdate, ondataavailable, onmovestart, onmouseout,
onmouseenter, onlayoutcomplete, onafterupdate, ondragleave

Chi fosse interessato a una classificazione più esauriente degli eventi può consultare il Corso
JavaScript
LEZIONE 3 - Ancora Eventi…
Gli eventi sono utilizzati per richiamare delle istruzioni. Infatti lo script va eseguito in maniera
sequenziale, ma per fare in modo da inserire la dinamicità e l'interattività occorre che questo
resti caricato in memoria e venga attivato o richiamato solo quando si verificano particolari
situazioni come il passaggio del mouse, il caricamento di un documento, ecc. Il problema
della conciliazione con le funzioni sta nel fatto che ad un evento può essere associata una
sola istruzione, ma il più delle volte l'associazione è fatta con un blocco di istruzioni e, quindi,
con le funzioni che prendono il nome di handler o gestori di eventi.

Gli eventi, per poter interfacciare HTML con Javascript, non vengono definiti nel tag
<SCRIPT> (tranne che in qualche caso), ma sono inseriti all'interno dei tag HTML: il browser
compatibile con Javascript incontrando un evento lo interpreta e lo attiva.

Ecco un esempio:

<A HREF="pagina.html" onclick="alert('ciao')">Link</A>

notiamo come l'evento onClick sia inserito nel Tag come se fosse uno specificatore dello
stesso.

Attivare gli eventi all'interno degli script

Gli eventi, tuttavia, si possono anche attivare direttamente all'interno degli Script, richiamabili
come se fossero una proprietà dell'oggetto. La sintassi è:

                                    Oggetto.evento=handler;

Per chiarire questo concetto che è utilissimo, ma raramente vedo applicato, posso raccontare
un aneddoto: agli inizi del mio uso con Javascript cercavo uno script che mi consentisse di
simulare lo streaming, cioè di caricare dalla rete un'immagine di una sequenza solo quando
ero sicuro che quella precedente era già stata caricata e quindi visualizzata. Usare un
temporizzatore era impossibile perché l'effetto variava secondo la velocità di connessione. Da
un ottimo testo di Javascript, trovai un trafiletto che mi offrì lo spunto. In tal modo creai un
array di immagini e operavo con il comando:

                           document.images[num].onload=carica();

dove la funzione carica() serviva a caricare l'immagine successiva. Tutto funzionava alla
perfezione, anche se con qualche piccola variazione secondo i browser.

Con Explorer, invece, si può utilizzare uno Script apposito per un oggetto e per un evento
tramite la sintassi:

                    <SCRIPT FOR=Object EVENT=evento>....</SCRIPT>




Raggruppare gli eventi
Negli ultimi tempi gli eventi si sono moltiplicati e difficile è tenerne traccia, quindi, per facilità
cerchiamo di raggrupparli in sezioni omogenee:

    1. Eventi attivabili dai tasti del mouse
    2. Eventi attivabili dai movimenti del mouse
    3. Eventi attivabili dal trascinamento del mouse (drag and drop)
    4. Eventi attivabili dall'utente con la tastiera
    5. Eventi attivabili dalle modifiche dell'utente
    6. Eventi legati al "fuoco"
    7. Eventi attivabili dal caricamento degli oggetti
    8. Eventi attivabili dai movimenti delle finestre
    9. Eventi legati a particolari bottoni
    10. Altri e nuovi tipi di eventi

Nei primi due gruppi sono inseriti quegli eventi tipici del mouse o della tastiera, come il
movimento o la pressione, negli altri sono inseriti gli eventi strettamente correlati agli oggetti.
Il raggruppamento si richiede perché in tante trattazioni gli eventi sono descritti singolarmente
è cio, anche se avvantaggia l'analisi, sgretola la sintesi: che invece è utilissima nelle
situazioni più intricate.

Prima della descrizione anticipiamo che tutti gli eventi hanno la propria sintassi composta
sintatticamente dal loro nome col prefisso on, ad esempio l'evento click è richiamato con
l'handler onclick. Io darò una sintassi fatta di maiuscole e minuscole per evidenziare bene
l'evento, ma occorre tener presente che in Netscape 3.0 l'evento è parte di javascript per cui
deve essere scritto tutto in minuscolo.

A questo gruppo si possono ricondurre i seguenti eventi:

    1. onClick: attivato quando si clicca su un oggetto;
    2. onDblClick: attivato con un doppio click;
    3. onMouseDown: attivato quando si schiaccia il tasto sinistro del mouse;
    4. onMouseUp: attivato quando si alza il tasto sinistro del mouse precedentemente
       schiacciato;
    5. onContextMenu: attivato quando si clicca il tasto destro del mouse aprendo il
       ContextMenu.

Gli eventi onMouseDown e onMouseUp sono attivati dai due movimenti del tasto sinistro del
mouse, il primo quando si preme giù il tasto e il secondo quando si solleva dopo il click.

Il doppio click è un evento che ingloba gli altri e, per la precisione, attiva in successione
onmousedown, onmouseup, onclick.

Valore true e false

L'evento onClick con JavaScript 1.1 ha aggiunto la possibilità di ricevere un valore true e
false tramite il quale può essere attivato o meno. Tale possibilità è valida anche per gli eventi
onMouseDown e onMouseUp e per onContextMenu.

Esempio: cliccate qui, se rispondete OK il link si attiva se rispondete Annulla il link non si
attiva... ecco il codice:
<A HREF="link.htm" onclick="return(confirm('Sei sicuro'))">

Il vantaggio è che l'evento onClick si attiva prima del tag associato per cui se è un link, questo
è caricato dopo il completamento dell'istruzione associata. In tal modo questa caratteristica si
può applicare per i radio o i checkbox per non selezionarli, e per i buttoni, compresi quelli
Submit e Reset, per considerarli non premuti, tranne che per un piccolo bug che rende non
funionzbile l'opzione per il Reset su alcune piattaforme.

Interessante l'evento onContextMenu, anche perché spesso si chiede di disabilitare il tasto
destro del mouse, ma funziona solo con Internet Explorer 5.0.

A questo gruppo si possono ricondurre i seguenti eventi:

    1. onMouseOver: attivato quando il mouse si muove su un oggetto;
    2. onMouseOut: attivato quando il mouse si sposta da un oggetto;
    3. onMouseMove: si muove il puntatore del mouse, ma poiché questo evento ricorre
       spesso (l'utilizzo del mouse è frequente), non è disponibile per default, ma solo
       abbinato con la cattura degli eventi, che si spiegherà in seguito.

Gli eventi onMouseOver e onMouseOut sono complenmentari in quanto il primo è attivato nel
momento in cui il puntatore è posto nell'area dell'oggetto il cui tag contiene l'evento e il
secondo quando ne esce.

A questo gruppo si possono ricondurre i seguenti eventi:

    1. onDragDrop: evento attivato quando un utente trascina un oggetto sulla finestra del
       browser o quando rilascia un file sulla stessa;
    2. onMove: attivato quando un oggetto muove una finestra o un frame;
    3. onDragStart: evento attivato appena l'utente inizia a trascinare un oggetto;
    4. onDrag: attivato quando il mouse trascina un oggetto o una selezione di testo nella
       finestra dello stesso browser o anche di un altro o anche sul Desktop;
    5. onDragEnter: attivato appena l'utente trascina un oggetto su un obiettivo valido dello
       stesso o di un altro browser;
    6. onDragOver: attivato quando l'utente l'utente trascina un oggetto su un obiettivo
       valido ad ospitarlo, ed è simile all'evento precedente, ma viene attivato dopo quello;
    7. onDragLeave: attivato quando l'utente trascina un oggetto su un obiettivo adatto per
       ospitarlo, ma non vi viene rilasciato;
    8. onDragEnd: attivato quando l'utente rilascia l'oggetto al termine del trascinamento.
    9. onDrop: attivato quando il mouse si alza il tasto del mouse in seguito ad
       un'operazione di trascinamento;

A questo gruppo si possono ricondurre i seguenti eventi:

    1. onKeyPress: evento attivato quando un utente preme e rilascia un tasto o anche
       quando lo tiene premuto;
    2. onKeyDown: attivato quando viene premuto il tasto;
    3. onKeyUp: evento attivato quando un tasto, che era stato premuto, viene rilasciato;
    4. onHelp: attivato quando il mouse schiacchia il tasto F1;

L'ultimo evento è stato naturalmente inserito in questo settore, anche se

A questo gruppo si possono ricondurre i seguenti eventi:

    1. onChange: attivato quando il contenuto di un campo di un form o modulo è
       modificato o non è più selezionato;
    2. onCellChange: attivato quando si modifica un elemento in un Database, per questa
       sua caratteristica ha un uso non propriamente legato a Javascript;
    3. onPropertyChange: evento attivato quando cambia la proprietà di un elemento;
    4. onReadyStateChange: evento attivato quando lo stato del caricamento di un
       elemento cambia, l'evento è utile, ad esempio, per verificare che un elemento sia
       stato caricato.

Importante è dire qualcosa in più su onChange: l'evento assomiglia molto ad onBlur, ma
verifica anche che l'elemento che lo richiama sia stato modificato. Questo evento, infatti, è
attivato quando viene selezionato un altro elemento da una lista o quando si modifica un
campo di testo, per cui oltre all'attivazione, occorre anche operare un'azione.

A questo gruppo si possono ricondurre i seguenti eventi:

    1. onFocus: Questo handler è l'opposto di onBlur per cui si attiva quando l'utente entra
       in un campo;
    2. onBlur: attivato quando il puntatore del mouse o il cursore esce dalla finestra
       corrente utilizzando il mouse o il carattere TAB. Applicato ai moduli, invece, tale
       handler si avvia se si esce dal campo il cui tag contiene il controllo;
    3. onSelect: attivabile quando si seleziona del testo all'interno di una casella di testo sia
       col mouse sia tenendo premuto SHIFT e selezionando con i tasti Freccia;
    4. onSelectStart: si attiva quando si inizia a selezionare un evento;
    5. onbeforeEditFocus: si attiva con un doppio click o con un clicK su un oggetto che
       ha già la selezione, quando questo è in DesignMode;
    6. onLoseCapture: si attiva quando un oggetto perde la cattura del mouse.

Gli ultimi tre eventi sono particolarità di Internet Explorer 5.0 e richiedono ulteriori conoscenze
per poter essere adoperati.

A questo gruppo si possono ricondurre i seguenti eventi:

    1. onLoad: Questo handler funziona nel caricamento di oggetti, per lo più finestre e
       immagini;
    2. onUnload: è l'opposto del precedente e funziona quando si lascia una finestra per
       caricarne un'altra o anche per ricaricare la stessa (col tasto refresh);
    3. onAbort: funziona quando l'utente ferma il caricamento di un oggetto cliccando su un
       altro link o premendo il tasto stop del browser;
    4. onError: si attiva quando il caricamento di un oggetto causa un errore, ma solo se
       questo è dovuto ad un errore di sintassi del codice e non del browser così funziona
       su un link errato di un'immagine della pagina, ma non su un link errato di caricamento
       di una pagina intera;
    5. onBeforeUnload: questo handler funziona allo stesso modo di onUnload ma si
       carica in un momento prima;
    6. onStop: questo handler funziona quando si ferma il caricamento della pagina con il
       tasto stop del browser e dovrebbe funzionare anche allo stesso modo di onUnload
       caricandosi prima di questo ma dopo onBeforeUnload.

Gli ultimi due eventi sono particolarità di Internet Explorer 5.0 e richiedono ulteriori
conoscenze per poter essere adoperati.

onLoad

Questo evento se ben utilizzato potrebbe simulare un effetto streaming mediante caricamento
di gif o jpeg. Immaginiamo di avere a disposizione una serie di jpeg da animare. Con questo
evento possiamo sincronizzare la visualizzazione delle varie figure alla fine del caricamento
della precedente mediante uno script del genere:
<script>
var whichImage=0
var maxImages=5
function changeAnimation(theImage) {
++whichImage
if (whichImage <= maxImages) {
var imageName="!anim" + whichImage + ".gif"
theImage.src=imageName
}
else {
whichImage=-1 return
}
}
</script>
<img name="changingAnimation" src="!anim0.gif" border=0 align="top"
onLoad="changeAnimation(this)">

onError

Una particolare menzione merita l'evento onError per la sua grande utilità ma per lo scarso
utilizzo che se ne fa. Questo evento può:

    1. sopprimere i messaggi di errori che il debugger mostrerebbe (messaggi discreti in
       Netscape, ma antiestetici in Explorer) il tutto mediante il codice di esempio
       <img src="corrupt.gif" onError="null">
    2. se il codice è espresso nella sezione HEAD diventa attivo per tutta la finestra e per
       tutti gli eventi di errore attivati dagli oggetti ivi contenuti
       <script>window.onerror=null</script>
       tuttavia un evento onError associato alla singola immagine o oggetto cattura l'evento
       per questa immagine o oggetto a discapito di quello generale
    3. l'evento può fare di più: può indicare il tipo di errore, la riga e l'URL che lo hanno
       causato e indicarlo in una finestra o memorizzarlo in un array. Di seguito indico
       l'istruttivo esempio mostrato sul Reference di Netscape che serve a costruire un
       debugger personalizzato. Nello script ci sono degli errori e cliccando sul primo
       bottone e poi sul secondo si possono individuare:




<script>
window.onerror = myOnError
msgArray = new Array()
urlArray = new Array()
lnoArray = new Array()
function myOnError(msg, url, lno) {
msgArray[msgArray.length] = msg
urlArray[urlArray.length] = url
lnoArray[lnoArray.length] = lno
return true
}
function displayErrors() {
win2=window.open('','window2','scrollbars=yes')
win2.document.writeln('<B>Error Report</B> <P>')
for (var i=0; i < msgArray.length; i++) {
win2.document.writeln('<B>Error in file:</B> ' + urlArray[i] + '<BR> ')
win2.document.writeln('<B>Line number:</B> ' + lnoArray[i] + '<BR>')
win2.document.writeln('<B>Message:</B> ' + msgArray[i] + '<P>')
}
win2.document.close()
}
</script> </p>
<form>
<input type="button" value="Questo bottone ha un errore di sintassi"
onClick="alert('unterminated string)" name="button">
<p> <input type="button" value="Visualizza l'errore" onClick="displayErrors()"
name="button2">
</form>

    1. onResize: Questo handler si attiva quando l'utente rimpicciolisce o ingrandisce una
       finestra o un frame o, in caso particolare per Explorer, un oggetto a cui siano stati
       fissati l'altezza e la larghezza o anche la posizione, come ad esempio un layer;
    2. onScroll: attivato quando si effettua lo scrolling della pagina sia col mouse con i tasti
       PGUP e PGDOWN o anche con il metodo doScroll

A questo gruppo si possono ricondurre i seguenti eventi:

    1. onSubmit: Questo handler è attivato dal click su tasto di Invio di un form;
    2. onReset: questo handler è attivato dal click su tasto di Annulla di un form.
LEZIONE 4 – Metodi & Dom
Un altro concetto importante è che ognuno degli oggetti del browser ha i propri metodi.
Questo equivale a dire che ognuno degli oggetti del browser ha a disposizione determinate
azioni e non altre.

Facciamo subito un altro esempio, per rendere più chiaro il concetto. Esiste l'oggetto history
che contiene la storia della navigazione dell'utente per quel che riguarda una finestra.

Tramite il metodo back() dell'oggetto history è possibile mandare indietro l'utente alla pagina
da cui è arrivato (ovviamente l'utente deve essere arrivato qui a partire da un'altra pagina,
altrimenti - se la richiesta è diretta - non c'è pagina verso cui tornare indietro):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
 <title>Esempio</title>
</head>

<body>
 <A HREF="#" onClick="history.back()">torna indietro</A>
</body>
</html>



È evidente che il metodo back() è proprio dell'oggetto history, e non (per esempio) del
campo del form che abbiamo visto prima.

Infatti se adattate l'esempio relativo al campo del form e scrivete:

onLoad="document.mioForm.testoProva.back()"



non potrete che ottenere un errore.

E inoltre anche se scrivete:

<A HREF="#" onClick="alert(history.value)">torna indietro</A>



otterrete un valore indefinito perché non state interrogando correttamente l'elemento history,
che è un array.

Ma anche se lo interrogaste nella maniera giusta, cioè così (esamineremo in seguito questo
tipo di sintassi):

 <SCRIPT TYPE="text/javascript">
 for (n=0;n<history.lenght;n++) {
 document.writeln(history[n].value);
 }
 </SCRIPT>
non otterreste comunque alcun valore, perché - per motivi di sicurezza - non è possibile
leggere il valore della history di un documento (è possibile con Netscape 4, ma solo con
determinati privilegi).

Ogni oggetto ha dunque i propri, personalissimi metodi e va interrogato nella giusta maniera.

Per ora non analizzeremo tutti i vari elementi che compongono il browser, i loro metodi, e le
loro reciproche relazioni, anche perché - come vedremo nella prossima lezione - differenti
browser (Netscape e Internet Explorer) e differenti versioni dello stesso browser (Netscape 4
e Netscape 6) hanno sviluppato modelli diversi per concepire le relazioni reciproche di questi
oggetti e metodi.
LEZIONE 5 – Commenti
Commenti


I commenti sono parti del programma che non vengono lette dall'interprete e che, quindi,
servono a spiegare e a chiarire. Questi sono racchiusi tra barre e asterischi come
nell'esempio sotto riportato:

                                             /*commento*/

Il commento può essere posto su più righe o su una riga singola, mentre non è accettato
dall'interprete il commento annidato.

Un altro tipo di commento è la doppia barra, presa a prestito dal linguaggio C, ma è valida
solo per commenti posti su una singola riga, anche se non la occupano per intero:

                                           int x: //commento

I commenti Javascript non possono essere inseriti al di fuori dei tag che individuano lo script,
altrimenti HTML li considererà come parte del testo, e viceversa non si possono utilizzare i
tag di commenti HTML all'interno dello script. L'unico commento ammissibile è quello che
consente di racchiudere tutti gli script nei tag di commento di HTML, facendoli aprire dopo il tag
di script e chiudere prima della chiusura del tag:

<script language="JavaScript">
<!--
    alert("Welcome!");
//-->
</script>

in tal modo si maschera il codice javascript ai vecchi browser che non lo leggono e si evita che
l'HTML lo possa considerare come testo e, quindi, visualizzare. Tuttavia occorre tenere
presente due accortezze:

        alcuni browser non riconoscono il commento e visualizzano lo script;
        alcuni browser, soprattutto Netscape nelle versioni più vecchie, hanno difficoltà a
         gestire il segno > di fine commento, per cui conviene posizionare anche un
         commento Javascript (//) alla sequenza -->.

Spazi bianchi


Javascript non bada agli spazi bianchi, tranne che per quelli che si trovano nelle stringhe, per
cui si possono omettere o anche aumentare. Il loro uso, tuttavia, con l' identazione aumenta la
leggibilità del programma per cui sono vivamente consigliati.

Apici


Importanti sono gli apici, sia singoli (' ') che doppi (" ").

I doppi apici si adoperano per racchiudere parti di codice Javascript, e, insieme a quelli singoli,
a racchiudere anche le stringhe (sequenze di caratteri), per cui occorre fare attenzione ad
annidare due stringhe racchiuse da apici simili, come ad utilizzare i doppi apici per le stringhe
se questi già servono a racchiudere codice Javascript.

Se si desidera che in una stringa appaiano apici doppi o singoli come parte integrante della
stringa stessa, si fanno precedere da una barra rovesciata (\).

Uno degli errori che si commette di frequente, è proprio quello di non utilizzare correttamente
gli apici. Ad esempio il comando:

                              alert('Questo sito e' in costruzione')

sembra essere scritto correttamente, ma se eseguito, il browser ne bloccherà l'esecuzione.
Netscape mostrerà questo errore:

                                  missing ) after argument list.
                              alert('Questo sito e' in costruzione')

più laconico Explorer, che indica solo: Previsto')'. Si proseguirà oltre, ma l'errore non sarà
corretto finché non si scriverà

                              alert('Questo sito e\' in costruzione')

fdsgfdsgvfdgbfds

I nomi dei dati sono chiamati identificatori e devono sottostare ad alcune regole:

    1. possono contenere solo lettere, numeri e trattino di sottolineatura, per cui sono
       esclusi gli spazi bianchi;
    2. il primo carattere deve essere sempre una lettera. E' utilizzabile come primo carattere
       anche il trattino di sottolineatura, ma il compilatore tratta quel nome in modo
       particolare per cui se ne sconsiglia l'uso;
    3. Javascript è case sensitive per cui tratta diversamente le lettere in maiuscolo e in
       minuscolo, per tale motivo è convenzione utilizzare l'iniziale maiuscola per i nomi di
       costanti e quella minuscola per le variabili;
    4. non si possono utilizzare i nomi che rientrano nelle parole chiave.

L'uso diffuso è di utilizzare nomi lunghi per identificare meglio il dato, adoperando queste
convenzioni:

    1. adoperare il trattino di sottolineatura per definire meglio il dato, così il nome
       tasso_interesse identifica più di quanto possa fare il semplice nome x;
    2. accanto all'utilizzo del trattino di sottolineatura, si usa anche la notazione a cammello
       per cui si rende maiuscola una lettera all'interno del nome di una variabile, proprio
       per identificarla meglio (ad esempio TassoInteresse).
LEZIONE 6 – Parole Riservate
In Javascript ci sono delle parole chiave che non si possono utilizzare come identificatori di
dati, eccone l'elenco:

               abstract          do         if     package      throw
               boolean        double implements private        throws
                 break          else    import     protected  transient
                  byte       extends        in      public       true
                  case         false  instanceof     return       try
                 catch         final       int        short      var*
                  char        finally  interface     static      void
                 class         float      long       super      while
                const*          for      native     switch       with
               continue      function     new    synchronized
                default        goto       null         this

Le parole chieve riservate, ma correntemente non utilizzate da Javascript sono precedute dal
carattere *.
LEZIONE 7 – Gli Oggetti
Quando programmate con JavaScript dovete immaginare che la pagina HTML sia formata da
vari elementi in varia relazione fra loro. Il browser infatti (con all'interno il documento HTML)
può essere infatti "sezionato" in vari elementi:

       prima di tutto c'è il browser stesso (l'oggetto navigator)
       poi la finestra che contiene tutto quanto (l'oggetto window)
       eventuali frames (l'oggetto window.frames)
       il documento HTML vero e proprio (document)
       i moduli per raccogliere l'input dell'utente (document.forms["nomeForm"])
       le immagini (document.images["nomeImmagine"])
       i cookie (document.cookie["nomeCookie"])
       i livelli
       le applet (document.applets["nomeApplet"])
       la barra degli indirizzi (location)
       la barra di stato, nella parte bassa del browser (status)
e via di seguito.

Tutti gli oggetti che vediamo nel browser sono in relazione gerarchica fra di loro (ci sono
elementi-padre ed elementi-figli) e tramite JavaScript - utilizzando la corretta sintassi - è
possibile interrogare questi elementi, leggerne le proprietà e in taluni casi anche cambiare il
valore di queste proprietà.

Facciamo un esempio. Prendiamo il seguente codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
 <title>Esempio</title>
</head>

<body>
 <FORM NAME="mioForm">
  <input type="text" name="testoProva" value="paradiclorobenzoro">
 </FORM>
</body>
</html>



La pagina contiene un campo di input text (che in genere serve all'utente per scrivere dei
dati). Se volessi conoscere la lunghezza del testo contenuto nel modulo, utilizzando il modello
a oggetti e le proprietà utilizzate da JavaScript, non avrei che da scrivere:

document.mioForm.testoProva.value.length



che è un modo sintetico di scrivere:

window.document.forms['mioForm'].testoProva.value.length
La riga che abbiamo scritto precedentemente significa:

"prendiamo la finestra del browser, consideriamo il documento attuale, consideriamo i form
presenti nel documento e facciamo riferimento a quello che si chiama 'mioForm',
consideriamo poi il campo chiamato 'testoProva'. Bene. Una volta individuato 'testoProva',
prendiamo il valore di questo campo e infine ricaviamo la lunghezza del valore di questo
campo"

Infatti se scriviamo un codice come questo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
 <title>Esempio</title>
</head>

<body onLoad="alert(document.mioForm.testoProva.value.length)">
 <FORM NAME="mioForm">
  <input type="text" name="testoProva" value="paradiclorobenzoro">
 </FORM>
</body>
</html>



al caricamento della pagina vedremo un messaggio che indica la lunghezza di
"paradiclorobenzoro".

Non vi preoccupate se l'esempio adesso non vi è del tutto chiaro: esamineremo subito nelle
prossime pagine la sintassi introdotta nelle righe di codice scritte poc'anzi (vedremo subito
cosa vuol dire "onLoad" e cosa vuol dire "alert").

L'importante è comprendere il concetto, che cioè una pagina web viene scomposta da
JavaScript in un modello ad oggetti (ognuno con le sue proprietà) in relazione reciproca.

Ovviamente la sintassi per richiamare gli oggetti non è dovuta al nostro estro, ma - visto che
JavaScript ha la struttura di un linguaggio di programmazione - deve essere espressa in
maniera rigorosa, secondo la struttura del linguaggio (non potremmo scrivere, ad esempio,
document.testoProva.length.mioForm.value senza incorrere in errori).
LEZIONE 8 – Le Finestre Di Dialogo
JavaScript è in grado di generare tre differenti tiplogie di "finestre implicite" (dette anche
"finestre incorporate", "finestre modali", o "finestre di dialogo"), che avremo modo di utilizzare
più volte nei nostri script (soprattutto l'alert).

Alert
Abbiamo già incontrato l'alert diverse volte nel corso delle nostre lezioni e si tratta senz'altro
della finestra che vi capiterà di utilizzare più spesso: l'alert visualizza un avvertimento, un
messaggio di errore che blocca qualsiasi azione dell'utente finché egli non dà il suo
benestare cliccando sul bottone.

La sintassi è:

alert("messaggio");

Il contenuto dell'alert deve essere sempre una stringa (cioè una sequenza di caratteri), il che
vuol dire che deve essere racchiuso tra virgolette oppure che deve essere un valore che
JavaScript sia in grado di convertire in automatico in un valore letterale (come nel caso dei
numeri).

Come per il document.write(), se dovete usare delle virgolette all'interno del messaggio è
bene che usiate i caratteri di escape (cioè il back-slash), onde evitare gli errori. Ad esempio:

alert("Marco disse \"Ciao Mondo!\"");

Ecco un esempio di alert:

<A HREF="http://www.html.it" onClick="alert('Stai per uscire');" TARGET="_blank">testo
link</a>

                                              testo link


Come si può vedere, finché l'utente non clicca su "ok", la pagina non va verso il link indicato.

Da notare le virgolette ad apice semplice dentro le virgolette ad apice doppio, per evitare di
"chiudere prematuramente" il contenuto dell'evento onClick.

Confirm
È una finestra che pone una domanda e chiede conferma dando la possibilità di scegliere tra
due opzioni ("ok" e "annulla"). La sintassi è:

confirm("messaggio");

Mentre l'alert concede una sola possibilità di scelta ("ok"), il confirm dà la possibilità di
scegliere tra due opzioni:
<A HREF="http://www.html.it" onClick="confirm('Sei sicuro di voler uscire dalla
pagina?');" TARGET="_blank">testo link</a>

                                              testo link
Prompt
È una finestra che pone una domanda e consente all'utente di dare la risposta che vuole. Può
avere anche un valore di risposta predefinito. La sintassi è:

prompt("domanda","risposta predefinita");

la risposta predefinita è facoltativa.

Ad esempio:

<body onLoad="prompt('Come ti chiami?');">

o anche:

<body onLoad="prompt('Come ti chiami?','inserisci qui il tuo nome');">

Per visualizzare il nome dell'utente nella pagina dovremo poi "catturarlo" in qualche modo.
Vedremo più avanti come fare. Nota a margine Nell'ottica in cui abbiamo affrontato il corso
finora è bene specificare che in realtà le finestre modali sono metodi dell'oggetto "window".
Quindi la sintassi estesa per visualizzare le finestre modali dovrebbe essere:

window.alert("messaggio");
window.confirm("messaggio");
window.prompt("domanda","risposta predefinita");
LEZIONE 9 – Le Finestre Personalizzabili
Le finestre che abbiamo visto nella lezione precedente sono finestre di sistema. Hanno una
grafica minimale e pre-impostata, che di solito va scarsamente d'accordo con un sito dalla
grafica accattivante in cui viene studiato ogni minimo particolare. Con JavaScript possiamo
creare delle finestre personalizzate che si adattino alle nostre esigenze.

La sintassi è questa:

window.open('percorso','nome finestra','caratteristiche separate da virgola');



                                         Indica un percorso (relativo o assoluto) di
         Percorso                        un file html da inserire all'interno della
                                         finestra
                                         Indica il nome della finestra che abbiamo
         Nome finestra
                                         creato (opzionale)
                                         Specifica la forma, la dimensione e la
                                         posizione della finestra, possiamo anche
         Caratteristiche separate
                                         far sì che la finestra non sia
         da virgola
                                         ridimensionale, o che non ci siano le barre
                                         degli strumenti e le barre di scorrimento.

Abbiamo quindi la possibilità di specificare tre diversi parametri che ci permettono di creare
una finestra che si adatti alle nostre esigenze. Il fatto che ciascun parametro sia indicato tra
virgolette (semplici o doppie, non importa) ci dice inoltre che ci troviamo di fronte a delle
stringhe (sequenze di caratteri). Ognuno di questi parametri può essere lasciato vuoto, ma la
sua presenza va comunque indicata. Così:

window.open('','','');

La sintassi qui sopra apre una finestra vuota.

Vediamo un esempio concreto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
 <title>esempio</title>
</head>

<body bgcolor="#FFFFFF" text="#000000" >
<SCRIPT TYPE="text/javascript">
window.open('http://www.html.it','miaFinestra','');
</SCRIPT>
</body>
</html>

Come abbiamo visto nel corso delle lezioni precedenti possiamo applicare anche la sintassi
JavaScript agli eventi. Ad esempio questa sintassi apre un'ulteriore finestra secondaria al
click del mouse. Abbiamo dunque realizzato la possibilità di cambiare due link con un solo
click:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 <title>esempio</title>
</head>

<body bgcolor="#FFFFFF" text="#000000" >

<A HREF="http://pro.html.it"
onClick="window.open('http://www.html.it','miaFinestra','');">due link on un solo
click</A>

</body>
</html>

Ovviamente è possibile associare la capacità di aprire finestre secondarie anche ad altri
eventi. Ad esempio con:

<BODY onLoad="window.open('http://www.html.it','miaFinestra','');">

la finestra secondaria si apre all'apertura della pagina.

E con:

<BODY onUnLoad="window.open('http://www.html.it','miaFinestra','');">

la finestra si apre invece alla chiusura della pagina.

È bene però non esagerare con l'apertura selvaggia di finestre secondarie (le cosiddette
"pop-up"), perché gli utenti di solito non le amano molto e le chiudono appena possibile.
Inoltre esistono alcuni software che consentono all'utente di impedire che i siti web aprano
delle finestre secondarie nelle pagine in cui essi stanno navigando.

Per quel che riguarda il secondo parametro (il nome della finestra) è da dire che, se il metodo
window.open viene richiamato due volte all'interno della stessa pagina ed esiste già una
finestra con lo stesso nome, non vengono create due differenti finestre, ma viene ricaricato il
contenuto della finestra già esistente (e se la seconda finestra ha caratteristiche diverse dalla
prima, le nuove caratteristiche vengono ignorate, in quanto la finestra è già stata "formata").

Inoltre se la finestra ha un nome, questo nome può essere usato come valore dell'attributo
"target" nei tag "A" e "FORM". È quindi possibile ricaricare il contenuto di una finestra
secondaria, semplicemente specificando il "target" del link nella finestra principale. Un
esempio chiarirà tutto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
 <title>esempio</title>
</head>

<body bgcolor="#FFFFFF" text="#000000" >

<A HREF="#" onClick="window.open('http://www.html.it','finestra','');">prima
finestra</A><BR>
<A HREF="#" onClick="window.open('http://pro.html.it','finestra','');">seconda
finestra</A><BR>
<A HREF="http://freephp.html.it" target="finestra">ricarica il contenuto</A><BR>

</body>
</html>
LEZIONE 10 – Le Finestre
Personalizzabili…Caratteristiche
Finora abbiamo esaminato la seguente sintassi:

window.open('percorso','nome finestra','valori separati da virgola');

in cui i primi due parametri ci permettono di specificare il percorso del file html e il nome della
finestra.

Abbiamo detto che il terzo parametro (l'ultimo della lista) ci permette di creare una finestra
"come vogliamo noi". Per farlo è sufficiente impostare una serie di caratteristiche separate
dalla virgola (ognuna di queste variabili si può inserire oppure omettere e non comparirà). Ad
esempio:

La sintassi è questa:

window.open('http://www.html.it','miaFinestra','width=300,height=300 ,toolbar=yes,
location=no,status=yes,menubar=yes,scrollbars=no,resizable=no');

NB la riga precedente non va a capo

L'esempio crea una finestra di 300 x 300 con la barra degli strumenti, la barra del menu, la
barra di stato (quella in basso), ma senza la barra degli indirizzi; la finestra non può essere
inoltre ridimensionata.

Vediamo nel dettaglio quali sono le principali caratteristiche che possono essere attribuite alla
finestra:

         Caratteristica Valore                Spiegazione                   Esempio
                                     La larghezza della finestra in
         width            numerico                                      width=400
                                     pixel
         height           numerico L'altezza della finestra in pixel height=200
                                     La distanza dalla sinistra del
         left             numerico                                      left=300
                                     monitor
                                     La distanza dal lato superiore
         top              numerico                                      top=350
                                     del monitor
                                     Indica se la finestra può
         resizable        yes / no                                      resizable=no
                                     essere ridimensionata o no
                                     Indica se la finestra va aperta
         fullscreen       yes / no                                   fullscreen=no
                                     a tutto schermo
                                   Indica se la finestra deve
         channelmode      yes / no essere aperta "in modalità           channelmode=no
                                   canale" (solo per IE)
                                     La barra del menu (quella con
         menubar          yes / no                                     menubar=no
                                     scritto "File", "Modifica", ecc.)
                                   La barra degli strumenti del
         toolbar          yes / no browser (con i pulsanti              toolbar=no
                                   "indietro", "avanti")
                                     La barra degli indirizzi del
         location         yes / no                                      location=no
                                     browser
                                     Le barre di scorrimento
         scrollbars       yes / no                                      scrollbars=no
                                     laterali
         status           yes / no La barra di stato (quella in         status=no
                                      basso)

Come si può intuire dagli esempi, la sintassi deve avere la forma:

caratteristica=[valore]

inoltre, come detto più volte, le varie caratteristiche devono essere separate dalla virgola. Ad
esempio con:

<A HREF="javascript:window.open('http://www.html.it','','fullscreen=yes');">apri a tutto
schermo</A>

Si apre una finestra a schermo intero (che può essere chiusa dall'utente solo utilizzando la
combinazione di tasti Ctrl + W o ALT + F4).

Invece con:

window.open('sponsor.htm', '', 'width=220,height=220,scrollbars=no');

si apre una finestra analoga alla "finestra dello sponsor di HTML.it".

Per evitare ogni volta di ripetere tutte quante le caratteristiche delle finestre possiamo inoltre
tener presente due scorciatoie.

    1. Quando una caratteristica viene omessa il suo valore:
              o   viene impostato a "0" nel caso di left e top
              o   viene impostato sull'intera grandezza dello schermo nel caso di width e left
              o   viene automaticamrnte impostato su "no" in tutti gli altri casi
    2. Quando una caratteristica viene impostata su "yes"
              o   la forma "caratteristica=yes" può anche essere scritta semplicemente con
                  "caratteristica". Ad esempio:

                  window.open('http://www.html.it','','fullscreen');"
Quindi al posto di:

window.open('sponsor.htm', '',
'width=220,height=220,left=0,top=0,resizable=no,menubar=yes,toolbar=yes,
scrollbars=no,locations=no,status=no');

NB La riga precedente non va a capo.

basterà scrivere:

window.open('sponsor.htm', '', 'width=300,height=300,menubar,toolbar');




GRUPPO SUPPORTO
Basi Di Dati Laboratorio
Anno 2004/2005
Prof G. Ghelli

								
To top