Benvenuto nel wikibook:

JavaScript
Autore: Ramac
Versione attuale del libro >>
Copyright 2007, utenti di Wikibooks !uesto libro " stato pubblicato dagli utenti di Wikibooks
GFDL 2007
E' permesso copiare, distribuire e/o modificare questo documento secondo i termini della
G! Free Documentation License, "ersione #$2 o qualsiasi %ersione successi%a pubblicata
dalla Free &oft'are Foundation(, sen)a le &e)ioni *n%arianti costituite dalla prima di
copertina e dal para+rafo ,Licen)a,$ !na copia della licen)a - contenuta nella se)ione
intitolata ,Licen)a,$
#utori$ Ramac, Diablo, .imbot, /im0b$
Copertina$ %n listato Javascript di ese&pio, ed " rilasciata nel pubblico do&inio
Indice generale
1remessa$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2
Finalit3$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2
Libri correlati$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2
4ltri pro+etti$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$5
.iblio+rafia$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$5
6olle+amenti esterni$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$5
*ntrodu)ione$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$5
.re%e storia di 7a%a&cript$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$5
&trumenti necessari$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$5
Limita)ione nell'uso di 7a%a&cript$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$8
6ompatibilit3 tra bro'ser$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$8
l nostro primo pro+ramma$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$8
*nserire un 7a%a&cript in una pa+ina 9:;L$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$8
9ello, 'orld<$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$7
*nserire dei commenti$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$=
:ipi di dati e %ariabili$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$=
:ipi di dati$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$=
umeri$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$=
ot a umber$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$>
&trin+?e$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$>
Dati booleani$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$>
"ariabili$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$>
@peratori e castin+$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#0
@peratori matematici$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#0
@peratori strin+a$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#2
@peratori booleani$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#2
6omporre le espressioni$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#A
Le strutture di controllo$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#A
&ele)ione$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#A
&ele)ione semplice$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#A
.locc?i if annidati e condi)ioni multiple$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#2
else if$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#2
s'itc?$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#5
@peratore ternario$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#7
*tera)ione$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#7
6icli con condi)ione$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#7
6icli con contatore$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#=
*terare su+li elementi di un arraB$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#>
Fun)ioni definite dall'utente$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#>
6reare le proprie fun)ioni: una panoramica$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#>
!sare i parametri$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$20
*mpostare un %alore di ritorno$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$20
@++etti$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$20
6osa sono +li o++etti$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2#
Gli o++etti in 7a%a&cript$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2#
1ropriet3$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2#
;etodi$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$22
La struttura 'it?$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$22
@++etto &trin+$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$22
6ostruttore$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$22
1ropriet3$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2A
;etodi$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2A
toLo'er6aseCD e to!pper6aseCD$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2A
c?ar4tCD e c?ar6ode4tCD$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$22
from6?ar6odeCD$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$22
indeE@fCD e last*ndeE@fCD$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$22
substrCD$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$25
replaceCD$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$25
splitCD$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$25
@++etto ;at?$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$28
1ropriet3$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$28
;etodi$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$28
4rrotondare i numeri$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$28
Generare numeri casuali$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$27
!n esempio pratico$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$27
@++etto Date$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2=
6ostruttore$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2=
;etodi$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2>
Recuperare i %alori della data$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2>
*mpostare i %alori della data$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A#
La%orare con l'ora$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A#
Gestire i fusi orari$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A#
@++etto 4rraB$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A2
6os'- un arraB$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A2
Gli arraB in 7a%a&cript$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A2
1ropriet3$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$AA
;etodi$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$AA
concatCD$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$AA
sortCD$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$AA
re%erseCD$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$AA
sliceCD$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A2
*terare su+li elementi di un arraB$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A2
6ooFie$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A2
*mpostare i cooFie$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A5
@ttenere i cooFie$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A5
"erificare se i cooFie sono atti%i$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A8
:imer$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A7
@neGs?ot timer$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A7
*mpostare inter%alli re+olari$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A7
.@;$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A=
L'o++etto 'indo'$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A=
1ropriet3$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A=
default&tatus e status$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A=
frames, len+t? e parent$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A=
opener$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A>
@++etti come propriet3$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A>
;etodi$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A>
alertCD, confirmCD e promptCD$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A>
blurCD e focusCD$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A>
openCD$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$A>
closeCD$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$20
Gli e%enti nel .@;$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$20
Gli e%enti in 7a%a&cript$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2#
E%enti del mouse$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2#
E%enti della tastiera$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2#
E%enti de+li elementi 9:;L$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2#
E%enti della finestra$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2#
E%enti come attributi 9:;L$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2#
E%enti come propriet3$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$22
Restituire dei %alori$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$22
@++etto document$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2A
;etodi$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2A
1ropriet3$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$22
4ccedere ai linF nella pa+ina$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$22
L'arraB ima+es$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$22
4ccedere ai moduli$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$25
* campi dei moduli$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$25
6aselle di testo$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$28
4ree di testo$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$28
1ulsanti$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$28
1ulsanti di op)ione$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$27
Liste$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$27
*nserire e a++iun+ere elementi$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2=
4ltri o++etti del .@;$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2=
location$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2=
?istorB$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2=
na%i+ator$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2>
screen$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$2>
D@;$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$50
.@; %s D@;$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$50
La struttura +erarc?ica di un documento$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$50
"ari tipi di nodo$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$5#
1ropriet3 e metodi del D@;$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$5#
@ttenere un elemento$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$5#
La%orare su un elemento$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$52
&postarsi nella struttura ad albero$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$52
6reare nuo%i elementi$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$5A
Gli e%enti nel D@;$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$5A
4nalo+ie con quanto +i3 %isto$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$52
L'o++etto e%ent$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$52
1ropriet3$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$52
4ppendice$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$55
1arole riser%ate$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$55
Debu++in+$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$55
6ome e%itare alcuni errori comuni$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$55
&emplice debu++in+$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$55
Licen)a$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$58
're&essa
*l 7a%a&cript - un lin+ua++io di scriptin+ orientato a+li o++etti dalla sintassi molto simile ai
lin+ua++i 6 e 7a%a usato pre%alentemente per il /eb$
(inalit)
*l libro si propone di portare il lettore da un li%ello )ero ad una buona conoscen)a del lin+ua++io
7a%a&cript, inse+nando a creare applica)ioni 'eb e pa+ine dinamic?e$
La lettura del libro non ric?iede alcun prerequisito in campo di pro+ramma)ione$ H tutta%ia
necessario a%ere una conoscen)a almeno di base dei lin+ua++i per il 'eb 9:;L e 6&&, in quanto il
libro affronter3 pre%alentemente l'uso di 7a%a&cript nel campo della pro+ramma)ione 'eb$
*ibri correlati
9:;L
6&&
#ltri progetti
Wikipedia contiene una %oce ri+uardante JavaScript
+ibliogra,ia
1aul /ilton$ JavaScript. Guida per lo sviluppatore$ ;ilano, 9oepli Editore, 200#$ *&.
==20A2>202
Collega&enti esterni
?ttp://Ia%ascript$?tml$it Ctutorial, +uide, script +i3 pronti e molto altroD
C-.D E6;4 282 E6;4&cript Lan+ua+e &pecification Cspecific?e per E6;4&criptD
C-.D Reference for 7a%a&cript #$5 Cspecific?e per 7a%a&cript #$5D
C-.D *nno%ators of t?e et: .rendan Eic? and 7a%a&cript C;arc 4ndreesen, etscape
:ec?"ision, 22 7un #>>=D Cstoria del 7a%a&criptD
Introduzione
JavaScript - un lin+ua++io di scriptin+: nel suo utili))o piJ frequente, quello della
pro+ramma)ione per il 'eb, consiste in un lin+ua++io formale c?e fornisce al bro'ser determinate
istru)ioni da compiere$ !na pa+ina creata in 9:;L - infatti statica, in quanto una %olta c?e la
pa+ina - stata interpretata dal bro'ser la disposi)ione de+li elementi rimane immutata, cosK come il
loro contenuto$
:ramite il 7a%a&cript, in%ece, - possibile conferire dinamicit3 alle pa+ine 'eb permettendo, ad
esempio, di creare rollo%er sulle imma+ini, modificare i contenuti in base a input dell'utente o creare
semplici applica)ioni per il /eb$
+reve storia di JavaScript
*l lin+ua++io 7a%a&cript fu s%iluppato ini)ialmente nel #>>5 dalla etscape 6ommunications con il
nome di *iveScript e incluso nel bro'ser etscape a%i+ator( il nome fu poi cambiato in
7a%a&cript anc?e per l'assonan)a con il lin+ua++io 7a%a, c?e rappresenta%a una delle tecnolo+ie piJ
a%an)ate per l'epoca, con cui 7a%a&cript non ?a niente in comune, se non la sintassi simile$
Dopo il suo decollo e dato il successo di 7a%a&cript, ;icrosoft decise di a++iun+ere al proprio
bro'ser *nternet EEplorer un proprio lin+ua++io di scriptn+, JScript, c?e a%e%a perL note%oli
differen)e con la %ersione s%iluppata dalla etscape$ acque cosK la necessit3 di standardi))are il
7a%a&cript e %enne s%iluppato lo standard -C/#Script$
Stru&enti necessari
Gli unici strumenti necessari per la pro+ramma)ione 7a%a&cript per il /eb sono un semplice editor
di testi e un bro'ser per %edere il proprio la%oro in a)ione$
Esistono comunque pro+rammi c?e aiutano lo s%iluppatore 7a%a&cript fornendo un'e%iden)ia)ione
della sintassi 7a%a&cript o finestre di dialo+o per %eloci))are il la%oro$
*i&ita0ione nell1uso di JavaScript
!na delle principali limita)ioni di 7a%a&cript - la possibilit3 c?e essi %en+ano facilmente disabilitati
dall'utente tramite le imposta)ioni del bro'ser$ Muesto - possibile poic?N il 7a%a&cript - un
lin+ua++io lato client, la%ora cio- sul computer dell'utente, c?e ?a quindi tutto il diritto di
disabilitare alcune fun)ionalit3$
1er questo - me+lio non demandare fun)ioni importanti come la +estione di dati sensibili a
7a%a&cript bensK a lin+ua++i lato ser%er come 191 o 1erl$
Compatibilit tra browser
!n'altra +rande limita)ione all'uso dei 7a%a&cript - la co&patibilit): piJ c?e per la pro+ramma)ione
9:;L o 6&&, un pro+rammatore 7a%a&cript de%e essere molto attento c?e il suo lavoro sia
co&patibile con di,,erenti bro2ser e versioni pi3 o &eno recenti$
4d esempio, le due %ersioni parallele di 7a%a&cript s%iluppate dalla ;icrosoft per *nternet EEplorer
e dalla etscape Cora ereditata dalla ;o)illaD ?anno ancora o++i molte differen)e: nonostante la
sintassi fondamentale non cambi, molte fun)ionalit3 non sono disponibili o sono differenti a
seconda del bro'ser in uso$ *n questo 'iFibooF si cerc?er3 il piJ possibile di implementare
solu)ioni compatibili con ;o)illa FirefoE e /indo's *nternet EEplorer( nei casi in cui ciL non sar3
possibile, %erranno presi e%entuali accor+imenti, se+nalando comunque le differen)e$
l nostro primo programma
4nserire un JavaScript in una pagina 56/*
1er inserire un codice 7a%a&cript in una pa+ina 9:;L, - necessario semplicemente usare l'etic?etta
<script>$
L'attributo piJ importante di questo ta+ - type, c?e specifica il tipo di script usato: nel nostro caso il
%alore da inserire - application/x-javascript ma - anc?e usato, nonostante non sia
standard, text/javascript( per la ma++ior parte del bro'ser - tutta%ia possibile omettere
l'attributo type in quanto 7a%a&cript - il lin+ua++io di scriptin+ 'eb predefinito$
Esiste anc?e, ma - sconsi+liato rispetto all'uso di type, un attributo language per specificare
sempre il lin+ua++io usato Ces language="JavaScript"D$
4ll'interno del ta+ script una %olta, per problemi di compatibilit3 con i bro'ser c?e non
supporta%ano i 7a%a&cript, il testo %eni%a delimitato da i delimitatori di commento$ 4d esempio:
<script>
<!--
...codice...
-->
</script>
Muesto accor+imento - tutta%ia o++i sconsi+liato, oltre ad essere praticamente superfluo in quanto la
ma++ior parte dell'uten)a utili))a bro'ser 7a%a&criptGcompatibili$
H possibile inoltre usare l'attributo src per inserire un codice 7a%a&cript esterno Csolitamente un
file con estensione $IsD$ *n questo caso si lascia %uoto lo spa)io all'interno del ta+$ 4d esempio:
<script src="script.js"></script>
*l codice 7a%a&cript puL essere inserito sia nella se)ione head c?e nella se)ione body della pa+ina
9:;L, ma le istru)ioni %en+ono comunque ese+uite in ordine Ca parte nei casi di fun)ioni c?e perL
%edremo piJ a%anti nel corso del libroD$
5ello, 2orld7
Eccoci finalmente al nostro primo pro+ramma 7a%a&cript: queste poc?e ri+?e di codice identificano
una pa+ina 9:;L su cui %iene stampato Hello, world!$ 6reate il se+uente file e apritelo con il
%ostro bro'ser:
<htl>
<head>
<title>!a ia pria applica"ione JavaScript</title>
</head>
<body>
<script>
docuent.#rite$"%ello& #orld!"'(
</script>
</body>
</htl>
4nali))iamo l'unica ri+a di codice 7a%a&cript presente nella pa+ina:
docuent.#rite$"%ello& #orld!"'(
Muando il bro'ser anali))a la pa+ina, nel momento in cui incontra le istru)ioni, se non indicato
di%ersamente Ccome %edremo piJ a%antiD, le ese+ue secondo l'ordine nel quale sono indicate, o%%ero
in se8uen0a Cquesta opera)ione - c?iamata parsingD$
Le istru)ioni sono sempre separate da un punto e %ir+ola C(D, e a 7a%a&cript non interessano quindi i
ritorni a capo$
*n particolare, la ri+a di codice anali))ata stampa sul documento il testo Hello, world tramite
l'istru)ione il metodo #rite dell'o++etto docuent$ 1er ora ci basti sapere c?e un metodo - un
sottopro+ramma associato esclusi%amente ad un o++etto, c?e puL ric?iedere uno o piJ parametri per
fun)ionare al me+lio$ *l metodo #rite dell'o++etto docuent stampa nella pa+ina il testo
indicato tra %ir+olette all'interno delle parentesi$
6erc?iamo di capire me+lio come a%%iene il parsing di uno script 7a%a&cript$ Essendo infatti il
bro'ser piuttosto %eloce a interpretare il codice, non - possibile ai nostri occ?i notare l'esecu)ione
dello script, e sulla pa+ina compare subito il testo Hello, world!$ ;odific?iamo quindi il nostro
codice come se+ue:
...
<script>
alert$")uesto * un essaggio"'(
docuent.#rite$"%ello& #orld!"'(
alert$")uesto * un altro essaggio"'(
</script>
...
!n alertboE in tedesco %isuali))ata dal bro'ser Oonqueror
*l metodo alert mostra una finestrella contenente il testo indicato tra parentesi e un pulsante
,@O,$ Muando %iene ese+uito, il parsing della pa+ina si ferma fino a quando l'utente non clicca sul
bottone @O( possiamo quindi %edere capire me+lio come la%ora il bro'ser: l'esecu)ione dello script
si fermer3 infatti due %olte in corrisponden)a delle due istru)ioni alert$ Muando %iene mostrato il
primo messa++io la pa+ina in secondo piano apparir3 %uota, perc?N non %i - ancora stato impostato
il contenuto( quando %iene mostrato il secondo messa++io comparir3 anc?e il testo Hello, world! in
quanto sar3 stata +i3 ese+uita il metodo #rite$
4nserire dei co&&enti
*n 7a%a&cript - possibile inserire dei commenti, o%%ero por)ioni di testo c?e %erranno i+norate dal
parser, di una o piJ ri+?e delimitandoli da /+ e +/$ H possibile inoltre pre%edere commenti di una
sola ri+a utili))ando //$ 4d esempio:
,uesto codice verr- interpretato
/+ ,uesto verr- ignorato+/
,uesto codice verr- interpretato
/+
,uesto verr- ignorato
anche ,uesto
+/
,uesto verr- interpretato //e invece ,uesto no
//e ,uesto neppure!
Tipi di dati e variabili
!n elemento necessario per la pro+ramma)ione - la possibilit3 di sal%are delle informa)ioni
introdotte dall'utente o elaborate a partire da altre dal pro+ramma$ *n informatica, queste %en+ono
c?iamate dati i quali possono essere sal%ati in celle di memoria identificate da una variabile$
6ipi di dati
* dati in 7a%a&cript possono essere di %arie tipolo+ie e a seconda della tipolo+ia si potr3 la%orare in
modo di%erso con essi$ *l 7a%a&cript - un lin+ua++io c?iamato a tipi00a0ione debole, in quanto o+ni
%olta c?e si fa riferimento ad un dato non - necessario specifiare il tipo, c?e %iene attribuito
automaticamente dal parser in base al contesto$
Numeri
* dati nu&erici possono essere positi%i e ne+ati%i e si distin+uono in integer Cnumeri interiD e ,loat
Cnumeri a %ir+ola mobileD$
1er con%ertire un %alore qualsiasi in un %alore numerico, 7a%a&cript mette a disposi)ione due
fun)ioni: parse.nt e parse/loat$ 1er ora ci basti sapere c?e una un!ione - un
sottopro+ramma Ccome un metodoD c?e non - associato ad alcun o++etto ma restituisce comunque
un %alore in base ad e%entuali parametri accettati in in+resso$ 1er con%ertire i dati, ad esempio una
strin+a, queste fun)ioni anali))ano carattere per carattere la strin+a fornita come input prendendo in
considera)ione solo i numeri e, nel caso di parseFloat, anc?e il separatore decimale .$ 4d esempio:
parse/loat$"01acb"' //restituisce 01.
parse.nt$"0eac01"' //restituisce 0
.ot a .u&ber
1uL tutta%ia succedere c?e il %alore passato alle fun)ioni di parsin+ dei numeri non possa essere
elaborato come numero$ *n questo caso la fun)ione restituisce un %alore particolare, .a., c?e -
l'acronimo per .ot a .umber, non un numero$ H possibile testare se un %alore - a usando la
fun)ione is2a2
Stringhe
*n informatica una stringa - una sequen)a di uno o piJ caratteri alfanumerici$ *n 7a%a&cript le
strin+?e si indicano inserendole all'interno di %ir+olette doppie C,D o apici C'D .iso+na perL fare
atten)ione a c?iudere una strin+a con lo stesso apice con la quale - stata aperta( sono ad esempio
strin+?e %alide:
"%ello& #orld ! 3401"
"5eter 678oole"
ma non lo - ad esempio
75eter 678oole7
in quanto il parser anali))erebbe la strin+a e, arri%ato a 67 penserebbe c?e la strin+a si c?iuda,
sen)a sapere cosa sia 8oole7$
H possibile anc?e indicare c?e caratteri come , e ' non indicano la fine del testo ma un carattere
qualsiasi facendole precedere dal carattere di co&&uta0ione 9$ 4d esempio sono strin+?e %alide:
75eter 6978oole7
")uesto libro * depositato su 9"it.#i:iboo:s9""
*n realt3 o+ni carattere - commutabile in una sequen)a esadecimale usando la nota)ione 9x22 do%e
- un numero esadecimale c?e identifica un carattere nel set LatinG#$
Dati booleani
*l tipo di dato booleano puL assumere i soli %alori true C%eroD e ;alse CfalsoD$ *l tipo di dato
booleano - fondamentale per la sele)ione binaria e per il decision"making$
Muando - atteso un tipo di dato booleano il parser si comporta in maniere differenti:
se %iene fornito un numero, questo %iene con%eritito in ;alse se - 0, in true se - #
se %iene fornito una strin+a, questa %iene con%eritito in ;alse se - %uota C,,D, in true
ne+li altri casi
Variabili
!na variabile in 7a%a&cript identifica una cella di memoria nella quale %en+ono sal%ati durante
l'esecu)ione dello script i dati$
Muando si la%ora con le %ariabili, - necessario per prima cosa indicare al parser il suo nome
utili))ando l'istru)ione var:
var noe<variabile(
dichiara una %ariabile noe<variabile$ Essendo 7a%a&cript un lin+ua++io a tipi))a)ione
debole, non - necessario indicare il tipo di dato della %ariabile, a meno c?e non si stia la%orando con
o++etti Csi %edr3 piJ a%antiD$ *n questo caso la %ariabile appena dic?iarata non a%r3 %alore, non -
stata cio- ancora ini0iali00ata( - possibile perL ini)iali))are la %ariabile direttamente insieme alla
dic?iara)ione:
var noe<variabile = espressione(
dic?iara una %ariabile con il %alore di espressione$ 1er espressione si intende una sequen)a di
di operatori, %ariabili e/o dati c?e restituisca a sua %olta una %alore$
Muando si scel+ono dei nomi per le %ariabili, si faccia atten)ione ad alcune re+ole:
7a%a&cript - caseGsensiti%e Csensibile alle maiuscoleD: var3 e =ar3 sono due %ariabili
differenti
in 7a%a&cript esistono, come in o+ni lin+ua++io formale, delle parole riser%ate, c?e
identificano cio- particolari comandi per il parser$ on biso+na quindi usare parole riser%ate
come nomi di %ariabili$ 1er l'elenco delle parole riser%ate in 7a%a&cript, si %eda l'appendice$
una %ariabile non puL contenere caratteri particolari CP : ( , $ ecc$$$D, tranne l'underscore, e
non puL ini)iare con un numero
L'opera)ione fondamentale da usare con le %ariabili - l'assegna0ione, c?e consiste nell'asse+nare,
nell'attribuire ad una %ariabile un %alore$ La sintassi - intuiti%a e semplice:
noe<variabile = valore(
do%e valore - un'espressione$ 4d esempio:
var3 = "ciao!"(
var4 = 0(
var0 = ;alse(
var1 = var0( //attribuisce a var1 una copia del valore di var0
Operatori e casting
*n questo modulo affronteremo l'uso de+li operatori e della conversione CcastingD per la%orare con
i dati in 7a%a&cript$ Di o+ni operatore %err3 indicato i tipi di dati con i quali la%ora e il tipo di dato
restituito$
9peratori &ate&atici
Muesti operatori la%orano con %alori interi o float e restituiscono sempre un %alore numerico( sono
piuttosto intuiti%i in quanto corrispondono ai normali operatori al+ebrici$ &ono:
Q e G Caddi)ione e sottra)ione al+ebricaD
R e / Cmoltiplica)ione e di%isione al+ebricaD
Muando si la%ora con +li operatori numerici - bene fare atten)ione alla preceden)a al+ebrica delle
opera)ioni$ "en+ono infatti %alutate prima moltiplica)ioni e di%isioni e poi addi)ioni e sottra)ioni$
H tutta%ia possibile ,sfu++ire, a questo %incolo tramite l'uso delle parentesi$ *n 7a%a&cript non
esistono distin)ioni tra parentesi tonde, quadre o +raffe, in quanto si usano solo quelle tonde$
"ediamo, ad esempio, come con%ertire un %alore di temperatura espresso in +radi Fa?ren?eit al suo
corrispondente in +radi 6elsius$ *nseriamo nella pa+ina 9:;L questo codice:
<script>
var gradi/ = propt$".ntrodurre la teperatura in gradi /ahrenheit"&3>>'(
var gradi? = @/A + $gradi/ - 04'(
alert$gradi?'(
</script>
4nali))iamo ri+a per ri+a il listato 7a%a&cript:
la prima ri+a dic?iara la %ariabile gradi/ e le asse+na il %alore restituito dalla fun)ione
propt$
!n esempio di finestra prompt
*l metodo propt %isuali))a una finestra di input c?e mostra il testo indicato come primo
ar+omento e un %alore di default indicato come secondo ar+omento Cseparato tramite la
%ir+olaD$ el nostro caso, la fun)ione mostrer3 una finestra c?iedendo di introdurre il %alore
della temperatura in +radi Fa?ren?eit proponendo come %alore #00$ L'utente - libero di
modificare o meno questo %alore e di premere uno dei due pulsanti @O o 4nnulla$ 1remendo
@O, la fun)ione restituisce il %alore immesso dall'utente, altrimenti restituisce 0$
la seconda ri+a calcola il %alore della temperatura in +radi 6elsius usando l'equa)ione
apposita
la ter)a ri+a mostra una finestra alert C+i3 %ista nei precedenti moduliD contenente il %alore
della temperatura in +radi 6elsius$
&i noti c?e il metodo propt restituisce sempre un %alore strin+a ma, nel momento in cui la
%ariabile strin+a gradi/ %iene usata insieme ad operatori numerici, il suo %alore %iene
automaticamente con%ertito in un %alore numerico$
1ossiamo %edere inoltre c?e, poic?N il metodo alert ric?iede un %alore strin+a mentre noi
abbiamo passato un %alore numerico, 7a%a&cript con%erte automaticamente il numero in una strin+a
contente esattamente il %alore ric?iesto$
el comporre le espressioni - necessario tenere conto della preceden)a delle opera)ioni Cprima
%en+ono %alutate moltiplica)ioni e di%isioni, poi addi)ioni e sottra)ioniD$ el comporre le
espressioni possono risultare utili le parentesi( in questo caso - possibile usare solo parentesi tonde
C7a%a&cript non supporta l'uso di parentesi quadre e +raffe nelle espressioniD$ 4d esempio:
0 B 1 / 4 //restituisce @
$0 B 1' / 4 //restituisce 0.@
$0 B $4 B C' + 4' /4 //restituisce A.@
Esistono poi due operatori c?iamati unari in quanto la%orano su un solo dato numerico$ &ono:
QQ incrementa di uno il %alore della %ariabile
GG decrementa di uno il %alore della %ariabile
Muesto operatore puL essere usato da solo oppure all'interno di un'espressione:
var3BB //corrisponde a var3 = var3 B 3
var3-- //corrisponde a var3 = var3 - 3
var4 = var3BB - 3@ // corrisponde a var4 = var3 -3@( var3 = var3 B3
H possibile inoltre nel caso di istru)ioni come
var3 = var3 B n(
var4 = var4 / n
!sare la nota)ione:
var3 B= n(
var4 /= n(
9peratori stringa
L'opera)ione piJ utili))ata quando si la%ora con le strin+?e - la concatena0ione, c?e consiste
nell'unire due strin+?e accostandole una di se+uito all'altra$ L'operatore di concatena)ioni in
7a%a&cript - Q$ "ediamo alcuni esempi:
alert$".o sono " B "un utente di #i:iboo:s!"'(
var noe = "!uigi"(
alert$".o i chiao " B noe'(
L'output di questo bre%e listato sono due finestre alert contenti il testo #o sono un utente di
wikibooks! e #o mi c$iamo %uigi$ &i noti lo spa)io prima delle %ir+olette$ 1ossiamo quindi ampliare
l'esempio precedente modificando l'ultima ri+a con:
alert$gradi/ B " gradi /arhenheit corrispondono a " B gradi? B " gradi
?elsisus"'(
*n questo caso la %ariabile gradi? %iene con%ertita automaticamente in una strin+a$
9peratori booleani
&ono c?iamati operatori booleani o di con,ronto quelli c?e restituiscono un %alore booleano e
confrontano due %alori dello stesso tipo di dato$ &ono:
S CminoreD
ST Cminore o u+ualeD
TT Cu+ualeD
UT Cma++iore o u+ualeD
U Cma++ioreD
*l loro uso - strettamente le+ato ai dati numerici ed - intuiti%o$ 4d esempio:
0 > 1 //restituisce true
1 == @ //restituisce ;alse
H possibile inoltre comparare le strin+?e$ 4d esempio:
"#i:iboo:s" == "#i:iboo:s" //true
"#i:iboo:s" == "it.#i:iboo:s" //;alse
"#i:iboo:s" == "Di:iboo:s" //;alse $distingue aiuscole e inuscole'
H possibile inoltre comporre le espressioni booleane usando +li operatori della lo+ica, c?e la%orano
con %alori boolean e restituiscono a loro %olta un %alore boolean$ &ono:
VV Ccorrisponde alla con+iun)ione lo+ica, etD
WW Ccorrisponde alla dis+iun)ione lo+ica, velD
< Ccorrisponde alla ne+a)ione lo+ica, nonD
4nc?e in questo caso - possibile comporre le espressioni con le parentesi
$a > >' EE $a < 3>>'
%aluta se a - compreso tra 0 e #00 esclusi$
&e 7a%a&cript si aspetta un dato booleano e rice%e un altro tipo di dato, con%erte in ;alse le
strin+?e %uote e il numero 0, in true il resto$
Co&porre le espressioni
Dopo a%er anali))ato +li operatori, - possibile comporre le espressioni$ !n'istru)ione - un insieme
di uno o piJ %alori le+ati da operatori c?e restituisce un %alore( per comporre un'espressione
possiamo usare quindi qualsiasi istru)ioni restituisca un %alore, ad esempio:
alert$"?iao& " B propt$"?oe ti chiaiF"''(
- una espressione %alida, in quanto la fun)ione propt restituisce un %alore( il risultato - una
casella di prompt se+uita da un alertboE c?e d3 il ben%enuto all'utente$
Le strutture di controllo
Sele0ione
La sele0ione -, insieme alla sequen)a C+i3 %ista nei moduli precedentiD e al ciclo Cc?e %edremo nel
prossimoD, una delle tre strutture fondamentali della pro+ramma)ione e al suo li%ello piJ semplice
consiste in una scelta tra due blocc?i di istru)ioni da se+uire in base ad una condi)ione %alutata
ini)ialmente, c?e puL essere %era o falsa$
Selezione semplice
H la forma piJ semplice di sele)ione$ "ediamo la sua sintassi:
i; $condi"ione' G
istru"ioni3
H else G
istru"ioni4
H
Muando il parser ra++iun+e questo listato, %aluta il %alore dell'espressione booleana condi"ione$
el caso condi"ione restituisca true %erranno ese+uite le istru)ione comprese tra la prima
coppia di parentesi +raffe Cnell'esempio istru"ioni3D altrimenti %en+ono ese+uite le istru)ioni
comprese tra la seconda coppia di parentesi Cistru"ioni4D$ "ediamo un esempio:
var a = propt$".n che anno ?risto;oro ?olobo scoprI le JericheF"&4>>>'(
i; $a == 31A4' G
alert$"Kisposta esatta!"'(
H else G
alert$"%ai sbagliato claorosaente...!"'(
H
*l metodo +i3 %isto propt c?iede all'utente di inserire la data della scoperta delle 4meric?e$
ella ri+a successi%a compare la nostra sele)ione: se a Cossia il %alore inserito dall'utenteD - u+uale
a #2>2 allora %iene mostrato un messa++io di complimenti( in caso contrario, %iene mostrato un
altro messa++io c?e informa l'utente dell'errore commesso$ &i noti l'uso dell'operatore booleano ==
Cu+ualeD c?e puL restituire true o ;alse$
H possibile, nel caso non sia necessario, omettere il blocco else( se inoltre il primo blocco di
istru)ioni - costituito da una sola ri+a e non c'- il blocco else, - possibile tralasciare le parentesi
+raffe$
Blocchi i annidati e condizioni multiple
4ll'interno di un blocco i; - o%%iamente possibile inserire a loro %olta altri blocc?i di sele)ione,
c?e sono c?iamati annidati Cuno dentro l'altroD$ &i faccia perL atten)ione al se+uente esempio:
i; $cond3' G
i; $cond4' G
istru"ioni
H
H
Muesto codice - inutilmente lun+o, in quanto - possibile riassumerlo con un unico blocco usando +li
operatori lo+ici +i3 %isti in preceden)a:
i; $cond3 EE cond4' G
istru"ioni
H
else i
Esiste una forma particolare di else c?e permette di ese+uire all'interno del suo blocco un'altra
sele)ione$ "ediamo questo codice:
i; $cond3' G
istru"ioni(
H else G
i; $cond4' G
istru"ioni
H else G
istru"ioni(
H
H
&e all'interno del blocco else c'- una sola sele)ione - possibile usare questa sintassi piJ abbre%iata
i; $cond3' G
istru"ioni(
H else i; $cond4' G
istru"ioni
H else G
istru"ioni(
H
switch
L'istru)ione s#itch - un tipo particolare di sele)ione c?e permette di %erificare i possibili %alori
dell'espressione presa in considera)ione$ La sintassi -:
s#itch $espressione' G
case val3L
istru"ioni3(
case val4L
istru"ioni4(
...
case val<nL
istru"ioni<n(
de;aultL
istru"ioni
H
Muando il bro'ser incontra questa istru)ione, scorre tutti i %alori val3, val4, $$$val<n fino a c?e
non incontra un %alore u+uale all'espressione indicata tra parentesi oppure un blocco de;ault$ *n
questo caso ini)ia ad ese+uire il codice c?e se+ue i due punti$ &e non c'- alcun blocco de;ault e
non ci sono %alori c?e soddisfino l'u+ua+lian)a, il parser prose+ue ese+uendo le istru)ioni dopo la
c?iusura delle parentesi +raffe$
&i faccia perL atten)ione a questo spe))one:
var a = 3(
s#itch $a B 3' G
case 3L
alert$"a = "ero"'(
case 4L
alert$"a = uno"'(
case 0L
alert$"a = due"'(
case 1L
alert$"a = tre"'(
de;aultL
alert$"a aggiore di 0"'(
H
&i potrebbe supporre c?e l'output di questo codice sia solo una alertboE contenente il messa++io a
= 3 in quanto il blocco 2 soddisfa l'u+ua+lian)a Ca B 3 = 4D$ on - tutta%ia cosK: il parser dopo
essersi fermato al blocco 2 prose+uir3 le++endo anc?e i blocc?i successi%i e il blocco default$ 1er
e%itare ciL dobbiamo inserire un'istru)ione brea:$ L'istru)ione brea: indica al parser di
interrompere la lettura della struttura s#itch e di prose+uire oltre le parentesi +raffe$ L'esempio
corretto -:
s#itch $a B 3' G
case 3L
alert$"a = "ero"'(
brea:(
case 4L
alert$"a = uno"'(
brea:(
case 0L
alert$"a = due"'(
brea:(
case 1L
alert$"a = tre"'(
brea:(
de;aultL
alert$"a aggiore di 0"'(
H
@%%iamente il brea: non - necessario per l'ultimo blocco$
"ediamo poi un altro listato:
s#itch $a B 3' G
de;aultL
alert$"a aggiore di 0"'(
brea:(
case 3L
alert$"a = "ero"'(
brea:(
case 4L
alert$"a = uno"'(
brea:(
case 0L
alert$"a = due"'(
brea:(
case 1L
alert$"a = tre"'(
H
.iso+na fare atten)ione a non porre il blocco de;ault in cima, in quanto il parser si fermerebbe
subito lK e, incontrata l'istru)ione brea:, salterebbe alla fine del blocco s#itch sen)a %alutare le
altre espressioni$
"ediamo un altro esempio di un semplice pro+ramma c?e con%erta un %oto numerico in un
+iudi)io:
var voto = propt$".ntroduci il voto dell7alunno"&C'(
var sg(
s#itch $voto' G
case ">"L
sg=".l copito non * stato consegnato $non classi;icabile'"(
brea:(
case "3"L
case "4"L
sg=".nsu;;icien"a grave"(
brea:(
case "0"L
case "1"L
sg=".nsu;;icien"a"(
brea:(
case "@"L
sg="Su;;icien"a scarsa"(
brea:(
case "C"L
sg="Su;;icien"a"(
brea:(
case "M"L
sg="Su;;icien"a piena"(
brea:(
case "N"L
sg="Ouono"(
brea:(
case "A"L
sg="Piscreto"(
brea:(
case "3>"L
sg="6ttio con lode"(
brea:(
de;aultL
sg="Pati non validi"(
H
alert$sg'(
4nali))ando il codice, possiamo %edere c?e nei casi voto sia u+uale ad esempio a # e 2 o a A e 2
%iene ese+uita la stessa opera)ione in quanto non c'- un brea: per o+ni blocco case$ &e nessuno
dei %alori soddisfa l'u+ua+lian)a con a %iene restituito un messa++io di errore
Operatore ternario
Esiste oltre a+li operatori +i3 men)ionati nel capitolo precedente anc?e un cosiddetto operatore
ternario, c?e la%ora con tre %alori$ La sua sintassi -:
condi"ione F esp3 L esp4
Muando il parser incontra questa nota)ione, %aluta il %alore booleano di condi"ione$ &e - %ero,
restituisce il %alore di esp3 altrimenti quello di esp4$ Muesto permette di creare semplici
sele)ioni( ad esempio:
var anni = propt$7)uanti anni haiF7& 4>'(
var sg = "?iao& vedo che sei " B $anni >= 3N F "aggiorenne" L "inorenne"' B
"!"(
alert$sg'(
*n questo caso l'operatore ternario restituisce "aggiorenne" se anni - ma++iore o u+uale a
#=, altrimenti restituisce "inorenne"$
4tera0ione
L'itera0ione - una struttura di controllo Ccome la sele)ioneD c?e permette l'esecu)ione di una
sequen)a di una o piJ istru)ioni fino al %erificarsi di una data condi)ione$
Cicli con condizione
La forma piJ semplice di ciclo - composta da una condi)ione %alutata ini)ialmente e ad un blocco
di istru)ioni ese+uito sino a quando la condi)ione ini)iale non risulti false$ *n 7a%a&cript usiamo in
questo caso un ciclo #hile la cui sintassi -:
#hile $condi"ione'
G
istru"ioni(
H
Muando 7a%a&cript incontra questa struttura:
#$ %aluta il %alore booleano di condi"ione$ 1ossiamo a%ere quindi due casi:
#$ se - %ero, ese+ue il blocco di istru)ioni delimitato dalle parentesi +raffe e quindi
ricomincia dal punto #
2$ se - falso, salta al punto 2
2$ prose+ue la lettura delle istru)ioni successi%e
&i noti c?e:
- possibile c?e il blocco di istru)ioni non %en+a mai ese+uito$ Muesto - possibile se il %alore
della condi)ione ini)iale - falso +i3 dalla sua prima %aluta)ione
se il blocco di istru)ioni non modifica in qualc?e modo le %ariabili c?e inter%en+ono nella
condi)ione ini)iale, puL accadere c?e questo %en+a ripetuto all'infinito
Esiste poi la possibilit3 di porre la condi)ione alla fine del blocco di istru)ioni( in questo caso si -
sicuri c?e questo %err3 ese+uito almeno una %olta$ La sintassi -:
do
G
istru"ioni(
H #hile $condi"ione'
"ediamo alcuni esempi( mi+lioramo ad esempio il piccolo pro+ramma c?e %aluta%a se l'utente era
ma++iorenne o minorenne:
var anni(
do
G
anni = propt$")uanti anni haiF"&4>'(
H #hile $is2a2$anni''
var sg = "?iao& vedo che sei " B $anni >= 3N F "aggiorenne" L "inorenne"' B
"!"(
alert$sg'(
*n questo modo abbiamo inserito un controllo per %erificare c?e il %alore immesso dall'utente sia un
numero: la ric?iesta dell'et3 %iene infatti ripetuta se il %alore introdotto non " un numero$
Cicli con contatore
7a%a&cript, come molti altri lin+ua++i pro+ramma)ione, offre la fun)ionalit3 di cicli con un
contatore c?e %iene incrementato o decrementato ad o+ni ripeti)ione$ La sintassi -:
;or $condi"ione<ini"iale( condi"ione<;inale( increento<contatore' G
istru"ioni(
H
4d esempio:
;or $var i = 3( i <= 3>( iBB' G
alert$"i = " B i'(
H
Ese+uendo il codice appena %isto otterremo come output dieci messa++i c?e indicano il %alore di i
ad o+ni itera)ione$
H possibile inoltre fare in modo c?e il contatore %en+a incrementato di piJ di un'unit3 al secondo:
;or $var i = 3( i <= 4>( iB=4' G
alert$"i = " B i'(
H
Muesto codice mostra sempre i primi #0 numeri pari$
&e l'opera)ione da ese+uire - molto semplice, come nel primo esempio c?e abbiamo %isto, -
possibile anc?e usare una sintassi abbre%iata:
;or $var i = 3( i<= 3>( alert$"i = " B iBB''(
L'istru)ione di alert contiene infatti un operatore unario ,QQ, applicato alla %ariabile contatore i( ad
o+ni ripeti)ione del ciclo, 7a%a&cript mostra prima il messa++io di alert e poi incrementa la
%ariabile$
Iterare sugli elementi di un arra!
1er iterare in modo automatico +li elementi di un arraB Cfun)ionalit3 trattata piJ a%anti nel corso di
questo libroD, esiste un ciclo particolare, la cui sintassi -:
;or $indice in noeJrray' G
//...
H
L'arraB asse+na man mano ad indice i %alori dell'arraB indicato$
"unzioni deinite dall#utente
6ome molti lin+ua++io di pro+ramma)ione, anc?e 7a%a&cript da la possibilit3 di creare le proprie
fun)ioni personali))ate$
6ome - stato +i3 accenato in preceden)a, una fun)ione - un sottopro+ramma identificato da una
sequen)a di caratteri c?e puL accettare o meno nessuno o piJ parametri e puL restituire un %alore$
Creare le proprie ,un0ioni$ una panora&ica
La sintassi per la crea)ione di una nuo%a fun)ione - la se+uente:
;unction noe<;un"ione $arg3& arg4& arg2...' G
77codice77
H
4d esempio:
;unction benvenuto $noe' G
alert$"Oenvenuto& " B noe'(
H
&e %o+liamo ese+uire il codice contenuto nella fun)ione dobbiamo richia&arla Co invocarlaD$ 4d
esempio:
var n = propt$"?oe ti chiaiF"'(
i; $n != ""'
benvenuto $n'(
6on questo bre%e spe))one c?iediamo all'utente di inserire il nome e, se non risponde con una
strin+a %uota e non ?a premuto 4nnulla, +li por+e il ben%enuto Csi noti c?e il metodo propt
restituisce una strin+a %uota se l'utente fa clic su ,4nnulla,D$
%sare i para&etri
6ome abbiamo %isto, - possibile pre%edere c?e l'utente possa passare alcuni parametri alla fun)ione$
Dando una s+uardo alla fun)ione di ben%enuto creata precedentemente, %ediamo c?e il parametro
noe della fun)ione di%enta poi automaticamente una %ariabile( se quando %iene c?iamata la
fun)ione %iene omesso, il parametro assumer3 un %alore nullo Cc?e di%enta 0 per i numeri, una
strin+a %uota per i %alori alfanumerici, falso per i %alori booleaniD$
4&postare un valore di ritorno
*mpostare un %alore di ritorno di una fun)ione - molto semplice, basta se+uire la sintassi:
return valore(
Muando incontra l'istru)ione return, 7a%a&cript interrompe l'esecu)ione della fun)ione e
restituisce il %alore indicato$ 4d esempio:
;unction soa $a& b'
G //una seplice ;un"ione
return aBb(
H

var c = soa$0&@'( //c assuer- il valore N
soa$1&34'( //in ,uesto caso non succede nulla
&i noti c?e una fun)ione puL essere ric?iamata solamente dopo c?e - +i3 stata inserita nel
pro+ramma$ !n codice come questo +enererebbe errore:
var c = soa$0&@'( //la ;un"ione soa non esiste ancora!

;unction soa $a& b'
G //una seplice ;un"ione
return aBb(
H
Oggetti
*l concetto di oggetto - molto importante nella pro+ramma)ione in 7a%a&cript$ *n questo modulo
%erranno spie+ate le caratteristic?e comuni de+li o++etti( nei moduli se+uenti %erranno in%ece
trattati nel detta+lio +li o++etti intrinsec?i di 7a%a&cript$
L'uso de+li o++etti e delle loro fun)ionalit3 entra a far parte del paradi+ma della progra&&a0ione
orientata agli oggetti Cabbre%iata 00', 9bIect 9riented 'ro+rammin+D
Cosa sono gli oggetti
1er a%%icinarci al concetto di o++etto in informatica, possiamo pensare al concetto di o++etto nel
mondo reale$
1er creare un nuo%o o++etto - necessario partire da un modello Cin informatica una classeD c?e
indic?i come creare o+ni o++etto di quella tipolo+ia Co+ni o++etto - un'istan0a della suddetta
classeD$
1er fare un esempio concreto, ciascun o++etto macc?ina %iene costruita in base a dei pro+etti c?e ne
definiscono la struttura$
Gli o++etti possono inoltre possedere delle caratteristic?e Cpropriet)D: nel caso della nostra
macc?ina, saranno la cilindrata, le dimensioni, il costo, ecc$$$D$
6iascuna istan)a espone inoltre la possibilit3 di effettuare delle opera)ione su di essi C&etodiD: per
la nostra macc?ina, metterla in moto o +uidare$ Mueste opera)ioni modific?eranno delle
caratteristic?e come il li%ello del suo carburante o la %elocit3$
!na %olta introdotto il concetto di o++etto, dobbiamo a%ere perL la capacit3 di astrarre: +li o++etti
dell'informatica non corrispondono a quelli della realt3( ?anno perL numerosi %anta++i, tra i quali la
possibilit3 di trattare dati piJ complessi di numeri e strin+?e$
:li oggetti in JavaScript
7a%a&cript permette di creare le proprie classi personali))ate( tutta%ia noi la%oreremo solo su quelle
predefinite$
1er creare un nuo%o o++etto - necessario associarlo ad una %ariabile usando la sintassi:
var noe<oggetto = ne# noe<classe $'(
*n questo modo la %ariabile noe<oggetto sar3 l'unico modo per fare riferimento all'istan)a di
noe<classe appena creata$
Le classi possono per la crea)ione dell'o++etto pre%edere anc?e l'uso facoltati%o di un costruttore,
cio- un metodo c?e imposta automaticamente alcune propriet3 dell'o++etto$ La sintassi in questo
caso -:
var noe<oggetto = ne# noe<classe $paraetri<del<costrutture'(
1er fare un esempio con la nostra macc?ina:
var la<ia<acchina = ne# acchina $"Qtilitaria"& "Kosso"'(
@%%iamente la classe macc?ina conterr3 un costruttore c?e pre%ede come parametri il tipo e il
colore della macc?ina$
$ropriet
1ossiamo pensare ad una propriet3 come ad una %ariabile associata al sin+olo o++etto( il suo %alore
%iene attribuito ini)ialmente dal costruttore Cse %iene usatoD e successi%amente %iene modificato
a+endo sull'o++etto Coperando sui metodi, ecc$$$D$ 1er fare riferimento alla propriet3 Cper il recupero
o per l'asse+na)ioneD si usa la sintassi:
noe<oggetto.noe<propriet-
4lcune propriet3 possono essere di sola lettura, cio- il loro %alore puL essere letto ma non
modificato$
6on la nostra macc?ina:
alert$7!a ia acchina * lunga 7 B la<ia<acchina.lunghe""a B 7 !7'(
6ome si potr3 pensare, la propriet3 lunghe""a - di sola lettura$
%etodi
!n metodo - una fun)ione associata al sin+olo o++etto e definita nella sua classe( se nella classe di
un o++etto - pre%ista una fun)ione etodo<esepio sar3 possibile ese+uire la fun)ione tramite
la sintassi:
noe<oggetto.etodo<esepio $' //ricordarsi le parentesi anche se non passiao
paraetri!
Dal momento c?e le fun)ioni possono pre%edere un %alore di ritorno, sar3 possibile inserire la
nota)ione %ista precedentemente all'intero di un'espressione$
4d esempio, con la nostra macc?ina:
la<ia<acchina.ri;ornisci $4>' //4> euro di ben"ina
*a struttura 2ith
Muando si la%ora con +li o++etti, puL risultare comodo il costrutto #ith, c?e permette di accedere
piJ %olte ad un o++etto sen)a do%er o+ni %olta specificare il suo nome$ 4d esempio:
#ith $la<ia<acchina' G
.ri;ornisci $4>' //4> euro di ben"ina
alert$.lunghe""a'( //ricordarsi l7uso del punto!
altra<acchina.ri;ornisci$@>'( //per ri;eriri ad altri oggetti devo indicare
il loro noe
H //,ui si conclude il blocco #ith
9ggetto String
L'o++etto String permette di effettuare numerose opera)ioni sulle strin+?e quali ricerca, isolamento
di un carattere e altro ancora$
Costruttore
1er creare un nuo%o o++etto della classe &trin+ usiamo la sintassi:
var noe<variabile = ne# String$stringa'(
*l costruttore prende come parametro la strin+a c?e sar3 manipolata nel corso dello script$
L'o++etto &trin+ - un po' particolare, in quanto, come %i sarete +i3 accorti, corrisponde ad un
,doppione, del tipo di dato primiti%o strin+a, anali))ato precedentemente nel corso del libro$
Dal momento c?e 7a%a&cript effettua automaticamente la con%ersioni dei dati quando necessario, la
differen)a - dal punto di %ista pratico, in quanto:
se creiamo una strin+a con la normale sintassi
var variabile = "testo"(
e successi%amente %olessimo trattarla come un o++etto &trin+ usando metodi o propriet3 della
classe &trin+, 7a%a&cript con%erte automaticamente la strin+a in un o++etto &trin+
se abbiamo un o++etto &trin+ e %olessimo recuperare la sua strin+a, 7a%a&cript con%erte
automaticamente l'o++etto &trin+ in una strin+a contente la strin+a indicata nel costruttore$
$ropriet
L'o++etto &trin+ dispone di una propriet3 rile%ante, la propriet3 length c?e restituisce il numero
di caratteri contenuti in una strin+a:
var esepio = "Sono una stringa priitiva"
alert $esepio.length'( //restituisce 4C
ell'esempio appena %isto, nella seconda ri+a la %ariabile esepio %iene con%ertita in un o++etto
&trin+ per accedere alla propriet3 length$
&empre per quanto appena detto, potremmo semplicemente scri%ere:
alert $"Sono una stringa priitiva".length'( //restituisce 4C
%etodi
* metodi della classe &trin+ permettono di ese+uire molteplici opera)ioni sulle strin+?e( si noti c?e
questi metodi la%orano sulla strin+a contenuta nell'o++etto ma restituiscono il %alore desiderato
sen)a modificare il %alore dell'o++etto strin+a$
to*o2erCase;< e to%pperCase;<
Muesti due metodi restituiscono la strin+a for)ando la capitali))a)ione o tutta minuscola o tutta
minuscola$ 4tten)ione:
var t3 = ne# String $"8eSt6"'(
var t4 = t3.to!o#er?ase$' //restituisce "testo"
var t0 = t3.toQpper?ase$' //Kestituisce "8RS86"
// atten"ioneL alla ;ine di ,uesto codice la variabile t3 contiene ancora
"8eSt6"!
char#t;< e charCode#t;<
*l metodo charJt$' restituisce il carattere della strin+a c?e si tro%a alla posi)ione specificata( il
primo carattere - identificato dalla posi)ione 0$ 4d esempio:
var testo = propt$".nserisci un testo"& "%ello& #orld!"'(
var ultio?arattere = testo.charJt$testo.length - 3'(
alert $ultio?arattere'(
Muesto semplice codice estrapola dalla strin+a fornita in input dall'utente l'ultimo carattere$ 1er fare
ciL recupera il carattere alla posi)ione testo.length - 3: infatti, dal momento c?e il
conte++io dei caratteri parte da 0, nel caso di ,9ello, 'orld<, a%remo queste posi)ioni:
0 # 2 A 2 5 8 7 = > #0 ##
9 e l l o , ' o r l d <
Muindi, nonostante la strin+a sia composta da #2 caratteri, l'ultimo si tro%a alla posi)ione ##, o%%ero
#2 G #$
*l metodo char?odeJt$' fun)iona come charJt$' ma in%ece del carattere restituisce il suo
codice 4scii$
,ro&CharCode;<
*l metodo ;ro?har?ode$' - l'opposto di char?odeJt$': infatti prende come ar+omento un
numero qualsiasi di numeri c?e %en+ono interpretati come codici 4scii e trasformati in una strin+a$
Muesto metodo - perL un po' particolare, in quanto non necessita di la%orare su un o++etto &trin+(
per questo %iene detto statico$ 1er utili))are il metodo sar3 sufficiente usare la sintassi:
String.;ro?har?ode$paraetri'(
facendo cio- riferimento alla classe &trin+$
"ediamo un esempio:
var stringa(
;or $codice = ">".char?odeJt$>'( codice <= "A".char?odeJt$>'( codice BB ' G
stringa = stringa B String.;ro?har?ode$codice'(
H
Muesto semplice snippet scorre dal codice del carattere ,0, a quello del carattere ,>, creando cosK la
strin+a:
>3401@CMNA
inde=9,;< e last4nde=9,;<
!no dei metodi dell'o++etto &trin+ c?e useremo piJ di frequente sar3 index6;$' la cui sintassi -:
oggetto<string.index6;$search& start'(
*n pratica, il metodo cerca nella strin+a la prima occorren)a della sottostrin+a search e ne
restituisce la posi)ione Ca partire da 0D( se la strin+a non %iene tro%ata, restituisce G#$ *l parametro
op)ionale start specifica la posi)ione dalla quale ini)iare la ricerca Cdi default - 0D$ 4d esempio(
var stringa = "Sa la volpe col suo bal"o ha raggiunto il ,uieto ;ido"
//ricordiaoci che JS converte autoaticaente le stringhe
var posi" = stringa.index6;$"v"'( //contiene il valore C'
var posi"4 = stringa.index6;$":"'( // restituisce -3
*l metodo last.ndex6;$' fun)iona analo+amente ad index6;$' ma ini)ia la ricerca dalla
fine della strin+a e non dall'ini)io
substr;<
*l metodo substr$' presenta la sintassi:
noe<oggetto<string.substr$start& length'
*l metodo estrae dalla strin+a indicata una sottostrin+a a partire dalla posi)ione indicata dal
parametro start un numero length di caratteri$ &e quest'ultimo parametro non - specificato, il
metodo include anc?e tutti i caratteri a partire da quello ini)iale fino alla fine della strin+a$ 4d
esempio:
var stringa = ")uesto * un esepio"(
var str4 = stringa.substr$>& C'( //restituisce ")uesto"
var str0 = stringa.substr$M'( //restituisce "* un esepio"
replace;<
*l metodo replace$' restituisce la strin+a ini)iale sostituendo a tutte le occorren)e della strin+a
indicata come primo parametro quella fornita come secondo$ 4d esempio:
var s = "!7utente 5inco ha odi;icato ,uesta pagina"
var s4 = s.replace$"5inco"& "5allino"'(
//s4 ora contiene "!7utente 5allino ha odi;icato ,uesta pagina"
//s3 contiene ancora "!7utente 5inco ha odi;icato ,uesta pagina"
6on questo metodo - possibile contare il numero di occorren)e di una sottostrin+a in una strin+a$
Ecco una fun)ione:
;unction substr?ount $string& subString' G
return $string.length - $string.replace$subString& ""''.length' /
subString.length
H
La fun)ione elimina tutte le occorren)e della sottostrin+a nella strin+a tramite il metodo
replace$'( poi sottrae la lun+?e))a della strin+a principale a quella della strin+a appena
ottenuta( in questo modo si ottiene il numero di caratteri occupati dalla sottostrin+a c?e, di%isi per la
sua lun+?e))a, ne danno il numero di occorren)e$
split;<
*l metodo split$' %iene presentato ora in quanto fa parte della classe &trin+, ma il suo uso
ric?iede la conoscen)a de+li arraB, c?e %erranno esaminati piJ a%anti nel corso del libro$
La sintassi -:
stringa.split$separatore'(
*l metodo restituisce un arraB contenente le di%erse sottostrin+?e in cui la strin+a - di%isa dal
separatore$ 4d esempio:
"a&e&i&o&u".split$"&"'( //restituisce "a"& "e"& "i"& "o"& "u"
"a&e&i&o&u&".split$"&"'( //atten"ioneL restituisce "a"& "e"& "i"& "o"& "u"& ""
9ggetto /ath
L'o++etto /ath mette a disposi)ione dello s%iluppatore 7a%a&cript numerose fun)ioni e costanti
matematic?e( - un o++etto particolare, in quanto non ric?iede di la%orare su istan)e di o++etti ma
permette di accedere ai suoi metodi usando la nota)ione:
Sath.noe<etodo$'(
Sath.noe<propriet-
$ropriet
Le propriet3 dell'o++etto ;at? consistono in di%erse costanti matematic?e:
5.: restituisce il %alore approssimato di 1i +reco
R: restituisce il %alore della costante matematica E
!24 e !23>: il %alore del lo+aritmo naturale di 2 e di #0
@%%iamente sono tutte propriet3 di sola lettura
%etodi
Ecco una lista dei metodi corrispondenti alle principali fun)ioni matematic?e e tri+onometric?e:
abs$': restituisce il %alore assoluto Co moduloD del numero fornito come ar+omento
in$' e ax$': restituiscono il minimo e il massimo tra i due numeri passati come
parametri
s,rt$' e po#$b& n': restituiscono la radice quadrata del numero passato o l'ennesima
poten)a del numero b
sin$', cos$' e tan$': restituiscono il seno, il coseno e la tan+ente tri+onometrica
dell'an+olo passato in radianti
log$': restituisce il lo+aritmo naturale in base del numero passato come
parametro
#rrotondare i nu&eri
1er l'arrotondamento l'o++etto ;at? mette a disposi)ione tre metodi:
ceil$': arrotonda il numero al numero intero ma++iore piJ %icino Cper eccessoD$ 4d
esempio:
Sath.ceil$3>.>3' //restituisce 33
Sath.ceil$-C.0' //restituisce -C
;loor$': arrotonda l'o++etto al numero intero minore piJ %icino Cper difettoD$ 4d esempio:
Sath.;loor$3>.>3' //restituisce 3>
Sath.;loor$-C.0' //restituisce -M
round$': arrotonda l'o++etto per eccesso se la parte decimale - ma++iore o u+uale a 5,
altrimenti arrotonda per difetto:
Sath.round$3>.>3' //restituisce 3>
Sath.round$-C.0' //restituisce -C
Sath.round$4.@' //restituisce 0
:utte queste tre fun)ioni differiscono da parse.nt$' c?e non arrotonda i numeri, bensK li tronca$
4d esempio:
Sath.parse.nt$3>.>3' //restituisce 3>
Sath.parse.nt$-C.0' //restituisce -C
Sath.parse.nt$4.@' //restituisce 4
:enerare nu&eri casuali
L'uso di ;at? permette anc?e di +enerare numeri CpseudoD casuali tramite il metodo:
Sath.rando$'
c?e restituisce un numero casuale decimale compreso tra 0 CinclusoD e # CesclusoD$ ella pratica non
- molto utile se non %iene trasformato in un numero intero$ 4d esempio questo codice simula il
lancio di un dado:
var nu!anci = propt $")uanti lanci vuoi e;;ettuareF"& 3>'(
var i( var lancio(
;or $i = >( i < nu!anci( iBB' G
lancio = Sath.;loor$Sath.rando$' + C B 3'(
alert$"!ancio " B $i B 3' B "L " B lancio'(
H
La ri+a c?e ci interessa - quella dell'asse+na)ione della %ariabile lancio$ 1er capire l'al+oritmo
usato, ra+ioniamo sul risultato c?e %o+liamo ottenere$
*l numero c?e %o+liamo ottenere Cc?e c?iameremo dD de%e essere un numero intero compreso tra # e
8 inclusi$ Dal momento c?e il +eneratore restituisce numeri tra 0 incluso e # escluso, do%remo:
moltiplicare per sei il numero casuale ottenuto Cc?e c?iameremo nD: in questo modo
possiamo ottenere un numero c?e %a da 0 Cse n T 0, allora d T 0D fino a sei escluso$ *nfatti d
potrebbe essere u+uale a 8 solo se n potesse essere u+uale a #, cosa c?e non - possibile
sommare uno al %alore ottenuto: in questo modo d sar3 compreso tra # CinclusoD e 7
CesclusoD
arrotondare il %alore per difetto: in questo modo d sar3 un numero intero compreso tra # e 8(
infatti, dato c?e il 7 - escluso, arrotondando per difetto potremo ottenere al massimo 8$
&n esempio pratico
Di se+uito %iene mostrata un'applica)ione pratica dei metodi dell'o++etto ;at? per la crea)ione di
una fun)ione c?e arrotondi le cifre alla nesima cifra decimale indicata$
;unction arrotonda $nu& dec& od' G
var div = Sath.po#$3>& dec'(
s#itch $od' G
case 7e7L
case 7R7L //eccesso
return Sath.ceil$nu + div' / div(
brea:(
case 7d7L
case 7P7L //di;etto
return Sath.;loor$nu + div' / div(
brea:(
case 7t7L
case 787L //troncaento
return parse.nt$nu + div' / div(
brea:(
case 7a7L
case 7J7L
de;aultL //arrotonda
return Sath.round$nu + div' / div(
H
H
//per testarla usiao ,ueste righe di codice...
alert$arrotonda$0.10& 3& 7t7''(
alert$arrotonda$0.14& 3& 7e7''(
alert$arrotonda$0.1CA& 4& 7d7''(
alert$arrotonda$0.14M& 4& 7e7''(
alert$arrotonda$0.@@& 3& 7a7''(
alert$arrotonda$0.1C& 3& 7t7''(
La fun)ione appena mostrata arrotonda il numero fornito come primo parametro alla cifra decimale
fornita come secondo parametro usando di%ersi metodi di arrotondamento$ *l tutto sta nel fatto c?e
le fun)ioni di ;at? a+iscono solo sui numeri interi e non su quelli decimali$
1er effettuare +li arrotondamenti, quindi, spostiamo la %ir+ola di n posi)ioni decimali fornite come
parametro ed ese+uiamo l'arrotondamento desiderato( successi%amente, spostiamo di nuo%o la
%ir+ola all'indietro$ 1er spostare la %ir+ola - sufficiente moltiplicare e di%idere per una poten)a di
dieci: per fare ciL ci ser%iamo del metodo Sath.po#$'
9ggetto >ate
L'o++etto >ate permette di +estire in modo semplice e %eloce le date( nella pratica, un istan)a della
classe Date identifica una data e le fun)ionalit3 della classe permettono di a++iun+ere o sottrarre
anni, mesi o +iorni o recuperarne il %alore$
Costruttore
*l metodo piJ semplice per creare una data -:
var data = ne# Pate$'
el caso non si passino %alori al costruttore, %err3 creata un o++etto Date contente la data e l'ora
corrente$
4ltrimenti possiamo creare date precise con altri metodi:
fornendo il numero di millisecondi passati dalla me))anotte del primo +ennaio #>70 Cquesto
metodo - macc?inoso ma - quello c?e piJ si a%%icina al metodo con cui il computer ra+iona
con le dateD
fornendo una strin+a c?e indic?i la data, ad esempio:
var data = ne# Pate$"3> July 4>>M"'(
var data4 = ne# Pate$"3>-M-4>>M"'(
!sando il metodo descritto nel secondo esempio, biso+na fare atten)ione in quando, essendo
7a%a&cript ese+uito con le imposta)ioni del client, per un utente !&4 in%ece c?e il #0 lu+lio
2007 la data sar3 7 ottobre 2007
l'ultimo metodo - il mi+liore in quanto affidabilit3 e praticit3 messe assieme$ La sintassi -:
var data = ne# Pate$anno& ese& giorno& ora& inuti& secondi& illisecondi'
6rea un o++etto data in base ai parametri passati( normalmente - possibile omettere l'ultimo
parametro$ 4tten)ione, +ennaio - il mese 0 e non # e di conse+uen)a anc?e +li altri cambiano$
%etodi
?ecuperare i valori della data
getPay$': restituisce un numero da 0 a 8 corrispondente al +iorno della settimana della
data CDomenica - 0, LunedK #, $$$ "enerdK 8D
getPate$': restituisce il +iorno del mese
getSont$': restituisce il numero del mese CGennaio - 0, Dicembre - ##D
get/ullTear$': restituisce il numero dell'anno con quattro cifre$
"isti questi metodi, possiamo +i3 creare una fun)ione c?e restituisca una strin+a contente la data
formattata$ La fun)ione prende come parametro un o++etto Date e formatta la data in esso
contenuta:
;unction ;orattaPata$data' G
var giornoS = data.getPay$'(
var giornoS = data.getPate$'(
var ese = data.getSonth$'(
var anno = data.get/ullTear$'(

s#itch $giornoS' G //converte il nuero in noe del giorno
case >L //doenica
giornoS = "doenica"(
brea:(
case 3L
giornoS = "lunedI"(
brea:(
case 4L
giornoS = "artedI"(
brea:(
case 0L
giornoS = "ercoledI"(
brea:(
case 1L
giornoS = "giovedI"(
brea:(
case @L
giornoS = "venerdI"(
brea:(
case CL //sabato
giornoS = "sabato"(
brea:(
H

s#itch $ese' G //converte in nuero in noe del ese
case >L
ese = "gennaio"(
brea:(
case 3L
ese = ";ebbraio"(
brea:(
case 4L
ese = "ar"o"(
brea:(
case 0L
ese = "aprile"(
brea:(
case 1L
ese = "aggio"(
brea:(
case @L
ese = "giugno"(
brea:(
case CL
ese = "luglio"(
brea:(
case ML
ese = "agosto"(
brea:(
case NL
ese = "settebre"(
brea:(
case AL
ese = "ottobre"(
brea:(
case 3>L
ese = "gennaio"(
brea:(
case 33L
ese = "novebre"(
brea:(
H
//es. artedI A luglio 4>>M
return giornoS B " " B giornoS B " " B ese B " " B anno(
H
1ossiamo usare la fun)ione in questi modi:
var d3 = ne# Pate $' //oggi
var d4 = ne# Pate $4>>M& C& 3>'(
docuent.#rite$;orattaPata$d3''(
docuent.#rite$;orattaPata$d4''(
La fun)ione potrebbe sembrare inutile data l'esisten)a del metodo dell'o++etto Date
to!ocaleString$' c?e restituisce una strin+a contenente la data formattata secondo le
imposta)ioni locali dell'utente( tutta%ia, per questo moti%o, ad esempio, un utente in+lese in%ece c?e
artedI A luglio 4>>M otterrebbe 8uesday& Jule A& 4>>M$
4&postare i valori della data
L'o++etto Date permette inoltre di modificare la data memori))ata nell'o++etto Date tramite i metodi
setPate$', setSonth e set/ullTear$ Muesti metodi sono molto utili, perc?N ?anno la
caratteristica di ra+ionare come - +iusto fare per le date$ 4d esempio:
var d = ne# Pate$4>>M& 0& 1'( //1 aprile 4>>M
d.setPate$03'(
*n questo esempio impostiamo come +iorno del mese di aprile il %alore di A#, nonostante aprile
conti solo A0 +iorni$ 7a%a&cript lo sa e per questo porta la data al # di ma++io$ Muesta fun)ionalit3 -
spesso usata insieme ai metodi per ottenere le date:
d.setSonth$d.getSonth$' - C'( //sei esi pria
*avorare con l1ora
L'o++etto Date mette a disposi)ione fun)ioni analo+?e anc?e per +estire le ore:
get%ours$', getSinutes$', getSeconds$' e getSilliseconds restituiscono
rispetti%amente l'ora, i minuti, i secondi e i millisecondi dell'o++etto Date$ 4d esempio:
var d = ne# Pate$4>>M& 0& 1& 40& 1@& C& 34'( //1 aprile 4>>M& ore 40L1@LC $33
p'
d.getSeconds$'( //restituisce C
*l metodo getSilliseconds permette anc?e di cronometrare l'esecu)ione di una por)ione di
codice o il caricamento della pa+ina 9:;L$ *nseriamo in testa alle istru)ioni da cronometrare il
codice:
var data5ria = ne# Pate$'( //adesso
//eori""a secondi e illisecondi
var s5ria = data5ria.getSeconds$'(
var s5ria = data5ria.getSilliseconds$'(
*n questo modo sal%iamo i secondi e i millisecondi del momento in cui ini)ia il caricamento( poi
inseriamo in fondo alla pa+ina:
var dataPopo = ne# Pate$'( //adesso
//eori""a secondi e illisecondi
var sPopo = dataPopo.getSeconds$'(
var sPopo = dataPopo.getSilliseconds$'(

docuent.#rite$75agina caricata in 7 B $sPopo - s5ria' B 7 secondi e 7 B
Sath.abs$sPopo - s5ria' B 7 illisecondi7'(
:estire i ,usi orari
:utte le fun)ioni c?e abbiamo %isto la%orano sull'ora dell'utente o su quella impostata dalla pa+ina
'eb$ on abbiamo perL considerato c?e *nternet - una rete c?e coin%ol+e centinaia di paesi e quasi
tutti i fusi orari del nostro pianeta( per questo moti%o 7a%a&cript mette a disposi)ione delle fun)ioni
basate sull'%6C C%niversal 6i&e CoordinationD, una con%en)ione precentemente nota come
:/6 C:reen2ich /ean 6i&eD c?e rappresenta la data basandosi su quella del meridiano 0,
passante per la famosa localit3 di Green'ic?$ @%%iamente anc?e queste fun)ioni sono basate su una
corretta confi+ura)ione del computer del client$
* metodi !:6 ricalcano i metodi per il locale( per impostare l'ora !:6 - necessario ad esempio
usare il metodo setUTC%our( esiste inoltre un metodo toQ8?String c?e restituisce l'ora
formattata secondo le con%en)ioni !:6 e un metodo get8ieUone6;;set c?e restituisce in
minuti la differen)a di ora tra il fuso di Green'ic? e quello dell'utente CpuL essere anc?e ne+ati%oD$
9ggetto #rray
%ast but not t$e least esaminiamo +li arraB, una fun)ionalit3 presente nella ma++ior parte dei
lin+ua++i di alto li%ello, c?e in 7a%a&cript - disponibile tramite l'uso della classe 4rraB$
Cos#' un arra!
*n informatica, un arraB Co %ettoreD - un tipo di dato strutturato Cnon semplice, c?e dispone quindi di
altri parametriD c?e permette di or+ani))are i dati secondo un indice( in pratica, lo stesso o++etto
contiene a sua %olta numerosi %alori, ciascuno dei quali contrasse+nato da una c?ia%e numerica$
Muesto concetto puL essere rappresentato da un tabella a sin+ola entrata:
0 @ 2 A
%alore00 %alore0# %alore02 %alore0A $$$
(li arra! in )avaScript
6ome - stato +i3 detto, per creare un %ettore in 7a%a&cript facciamo riferimento alla classe 4rraB:
var vettore = ne# Jrray $'( //crea un array vuoto
*l costruttore della classe puL essere tutta%ia usato in maniere differenti:
var vettore = ne# Jrray $@'( //crea un array contenente @ eleenti
var vocali = ne# Jrray $"J"& "R"& "."& "6"& "Q"'( //crea un array contente le
vocali
var lettere<straniere = V"J"& "W"& "D"& "X"& "T"Y( //etodo breve
1er accedere ad un elemento dell'arraB, per le++erlo o modificarlo, usiamo la nota)ione:
vettoreVindiceY
4d esempio, facendo riferimento alla %ariabile vocali, a%remo questa tabella:
4ndici 0 @ 2 A B
Valori 4 E * @ !
e potremo la%orare in questo modo:
alert$vocaliV>Y'( //ostra "J"
vocaliV3Y = "ciao"
alert$vocaliV3Y'( //ostra "ciao"
Da notare c?e la c?ia%e dell'arraB - numerica e parte da 0 e c?e il %alore di ciascun elemento puL
essere di qualsiasi tipo di dato, ciascuno di%erso dall'altro$
4d esempio, potremmo stabilire un metodo per memori))are le informa)ioni su dei prodotti
decidendo c?e all'elemento 0 corrisponde il nome, all'elemento # il modello, ecc$$$ creando di%ersi
arraB:
var desc?api = ne# Jrray $".P"& "Sodello"& "5re""o"
var prod3 = ne# Jrray $3& "0>>> plus"& 0@'(
var prod4 = ne# Jrray $@& "1>>> inus& 34'(
$ropriet
L'o++etto 4rraB dispone di una sola propriet3 interessante, length, c?e restituisce il numero di
elementi in esso contenuti Ccontando anc?e quelli %uotiD( da notare c?e, poic?N +li indici partono da
0, un arraB di 5 elementi a%r3 +li elementi con le c?ia%i 0, #, 2, A e 2$
%etodi
L'uso dell'o++etto 4rraB di%enta utile in rela)ione all'uso dei metodi$
concat;<
*l metodo concat$' restituisce un altro arraB contente tutti +li elementi dell'arraB a cui - applicato
se+uiti da tutti +li elementi dell'arraB passato come parametro$ 4d esempio:
var a = ne# Jrray $3& 4& 0'(
var b = ne# Jrray $1& @& C'(
var c = a.concat$b'( //3& 4& 0& 1& @& C
Da notare c?e a contiene ancora solo +li elementi #, 2 e A$
sort;<
*l metodo sort$' ordina l'arraB secondo l'ordine alfabetico:
var a = ne# Jrray $"e"& "a"& "u"& "i"& "o"'(
a.sort$' /ora le vocali sono ordinate nell7array a
//atten"ioneL lavora direttaente sull7array!
4tten)ione: in 7a%a&cript le minuscole se+uono alle maiuscole, quindi ad esempio
var a = ne# Jrray $"R"& "a"& "Q"& "i"& "o"'(
a.sort$' /ora le vocali sono ordinate in ,uesto odoL
//R Q a i o!
1er o%%iare a questo problema possiamo la%orare su strin+?e solo minuscole, usando il metodo
to!o#er?ase in questo modo:
var a = ne# Jrray $"R"& "a"& "Q"& "i"& "o"'( //il nostro array
;or $var i = >( i < a.length& iBB' G //itera sui singoli eleenti
aViY = aViY.to!o#er?ase$'( //si rende inuscoli
H
reverse;<
Muesto metodo a+isce sull'arraB in%ertendo l'ordine de+li elementi in esso contenuti$ 4d esempio:
var vettore = ne# Jrray $@'( //crea un array contenente @ eleenti
var vocali = ne# Jrray $"J"& "R"& "."& "6"& "Q"'(
vocali.reverse$'( //ora contiene Q 6 . R J
slice;<
*l metodo slice$', infine, ser%e per copiare por)ioni di arraB$ La sua sintassi -:
arr.slice$a& b'
*l metodo restituisce un arraB contente +li elementi di arr compresi tra a CinclusoD e b CesclusoD$
&e b non - indicato, %en+ono copiati tutti +li elementi a partire da a fino alla fine$ 4d esempio:
var vettore = ne# Jrray $@'( //crea un array contenente @ eleenti
var a = ne# Jrray $"J"& "R"& "."& "6"& "Q"'(
var b = a.slice$3&1'( //b contiene gli eleenti R . 6
Iterare sugli elementi di un arra!
6ome abbiamo %isto precedentemente, - possibile iterare su tutti +li elementi di un arraB con un
ciclo particolare( ad esempio, %olendo a))erare il %alore di tutti +li elementi di un arraB, possiamo
usare il codice:
var a = ne# Jrray $"J"& "R"& "."& "6"& "Q"'(
;or $indice in a' G
aVindiceY = ""( //annulla il valore
H
//ora l7array contiene @ eleenti tutti vuoti
Coo*ie
!na fun)ionalit3 molto interessante messa a disposi)ione da 7a%a&cript - la possibilit3 di gestire i
cookie$
*n informatica, i cooFie sono piccoli file di testo memori))ati sul computer dell'utente c?e
conten+ono informa)ioni sal%ate dai siti 'eb$ La comodit3 dei cooFie sta quindi nella possibilit3 di
memori))are in modo per&anente delle informa)ioni uni%oc?e rispetto ad un utente( ?anno
tutta%ia lo s%anta++io di poter essere eliminati e disabilitati dall'utente$
6iascun cooFie - composto da alcuni parametri, tra i quali:
no&e: un nome identificati%o per il cooFie
valore: il %alore da memori))are
scaden0a Ce&piration dateD: - op)ionale, stabilisce la data di scaden)a del cooFie, cio- la
data dopo la quale questi %en+ono eliminati dal disco ri+ido dell'utente$
4&postare i cookie
la fun)ione .posta?oo:ie %isuali))ata dall'editor .luefis?
*n 7a%a&cript per impostare i cooFie usiamo la propriet3 coo:ie dell'o++etto docuent
passandole come %alore una strin+a contenente i %ari parametri separati da punto e %ir+ola$ Ecco ad
esempio una semplice strin+a di cooFie:
2oeQtente=Kaac(expires=8ue& 4N Jugust 4>>M >>L>>L>>
Muesta strin+a imposta un cooFie ome!tente al %alore Ramac con scanden)a 2= 4+osto 2007$
1otremo sal%are questo cooFie con l'istru)ione
docuent.coo:ie="2oeQtente=Kaac(expires=8ue& 4N Jugust 4>>M >>L>>L>>"
La sintassi - quindi:
2oe?oo:ie==alore(paraetri
el caso si %olesse inserire nella strin+a del %alore un punto e %ir+ola, - necessario usare la
fun)ione escape$' c?e con%erte tutti i caratteri particolari nel corrispondente esadecimale nel set
di caratteri LatinG#$ Muesto %ale anc?e per +li spa)i, +li apostrofi, le %ir+ole, ecc$$$$
1er comodit3, - possibile creare una fun)ione c?e crei i cooFie partendo da tre parametri:
;unction iposta?oo:ie $noe& valore& scaden"a' G

i; $scaden"a == ""' G
var oggi = ne# Pate$'(
oggi.setSonth$oggi.getSonth$' B 0'(
//restituisce la data nel ;orato necessario
scaden"a = oggi.toZS8String$'(
H
valore = escape$valore'(
docuent.coo:ie=noe B "=" B valore B "(expires=" B scaden"a(
H
9ttenere i cookie
1er ottenere i %alori dei cooFie relati%i al proprio documento - necessario accedere alla propriet3
docuent.coo:ie c?e restituisce una strin+a contenente coppie di nomeG%alore di ciascun dato
separate da un punto e %ir+ola e uno spa)io$ 4d esempio:
2oeQtente=Kaac( Qltia=isita=8hu& 0> Jugust 4>>M 30L01L34
1ossiamo notare due punti importanti:
mentre - possibile impostare %alori come la data di scaden)a del cooFie, non - possibile
ottenerli una %olta modificati
i dati per una comoda lettura necessitano di una manipola)ione strin+a
1er la lettura dei cooFie, puL risultare utile questa fun)ione c?e resituisce il %alore di un cooFie a
partire dal suo nome:
;unction valore?oo:ie $noe' G
var valore=docuent.coo:ie( //ottiene la stringa di coo:ie
var ini"io?oo:ie=valore.index6;$" " B noe B "="'( //trova il coo:ie
desiderato

i; $ini"io?oo:ie == -3' G //se non esiste& agari * all7ini"io della stringa
ini"io?oo:ie = valore.index6;$noe B "="'(
H

i; $ini"io?oo:ie == -3' G //il coo:ie non esiste proprio
valore = null(
H

i; $ini"io?oo:ie >= >' //il coo:ie esiste
ini"io?oo:ie = valore.index6;$"="& ini"io?oo:ie' B 3( //,ui ini"ia la
stringa del valore
var ;ine?oo:ie = valore.index6;$"("& ini"io?oo:ie'( //,ui ;inisce
i; $;ine?oo:ie == -3' //se non viene trovato& allora * l7ultio coo:ie
;ine?oo:ie = valore.length(
valore = unescape$valore.substring$ini"io?oo:ie& ;ine?oo:ie''( //eliina i
caratteri coutati
H

return valore(
H
Veri,icare se i cookie sono attivi
6ome - +i3 stato accennato in preceden)a, uno de+li s%anta++i dei cooFie risiede nel fatto c?e
possono essere ,acil&ente disabilitati dall'utente( - pertanto necessario s%iluppare solu)ioni
alternati%e ai cooFie, soprattutto se sono parte essen)iale della propria applica)ione 'eb$
*l modo piJ semplice per %erificare se i cooFie sono atti%ati - quello di crearne uno fitti)io e
%erificare se - possibile ottenerne il %alore$ La se+uente - una fun)ione c?e restituisce true se i
cooFie sono abilitati:
;unction coo:ieJttivi $' G
ris = ;alse( //iposta il risultato a ;also
iposta?oo:ie$"test?oo:ie"& "test"'( //crea il coo:ie ;itti"io
i; $valore?oo:ie$"test?oo:ie"' == "test"' G //se esiste
ris = true( //allora i coo:ie sono abilitati
H
return ris(
H
Timer
!n'interessante fun)ionalit3 offerta da 7a%a&cript nonc?N indispensabile per rendere una pa+ina
dinamica in molte occasioni, - quella dei cosidetti timer$
Gra)ie ad essi possiamo far effettuare un'istru)ione ad inter%alli re+olari o dopo un numero
prestabilito di secondi$
9neCshot ti&er
1er oneCshot ti&er, o ti&eout, si intendono quei timer c?e permettono di ese+uire un'istru)ione
dopo un determinato numero di millisecondi$ *l metodo set8ieout dell'o++etto #indo#
prende come parametri una strin+a contente l'istru)ione da ese+uire e il numero di secondo dopo i
quali de%e essere ese+uita$ 4d esempio:
var ti = set8ieout$7alert$"ciao!"'7& 0>>>'( //l7oggetto #indo# pu[ essere
sottointeso
*nserendo questa istru)ione al caricamento della pa+ina, dopo A secondi CA000 millisecondiD %err3
%isuali))ato un messa++io di alert$
4tten)ione: i timeout non interro&pono il normale flusso de+li script$ 4d esempio:
var ti = set8ieout$7alert$"ciao!"'7& 0>>>'(
alert$"secondo alert"'(
*n questo caso %err3 mostrato prima il secondo alert in quanto l'esecu)ione del primo - ritardata di
tre secondi$
ella strin+a - possibile anc?e inserire una fun)ione, o%%iamente$
*l metodo set:imeout restituisce un *D numerico c?e identifica uni%ocamente ciascun timer
impostato( questo - utile in rela)ione al metodo clear8ieout$' c?e elimina il timeout
impostato con il metodo %isto precedentemente$ Muesto puL ser%ire per permettere all'utente di
fermare un timer +i3 ini)iato$ 4d esempio:
var ti = set8ieout$7alert$"la boba * esplosa"'7& 0>>>'( //la boba esploder-
tra 0 secondi
var p#d = propt$"se inserisci la pass#ord corretta potrai disinnescare la boba
pria che esploda...."'(
i; $p#d == "disattiva"' G
clear8ieout$ti'( //disinnesca il tier $la "boba"'
H
4&postare intervalli regolari
Di%ersi dai timeout sono quei timer c?e impostano a)ioni da ese+uire ad inter%alli re+olari$ 4d
esempio:
var ti = set.nterval $"aggiorna5agina$'"& 3>>>'(
6on questa istru)ione facciamo sK c?e la fun)ione aggiorna5agina %en+a ese+uita o+ni
secondo$ 6ome per i timeout, possiamo eliminare i timer ricorrendo ad un'apposita fun)ione:
clear.nterval$ti'(
c?e interrompe l'esecu)ione del timer precedentemente a%%iato$
BO%
4rri%iamo finalmente a scoprire le fun)ionalit3 di 7a%a&cript c?e lo rendono il lin+ua++io di
scriptin+ per le pa+ine 'eb tra i piJ diffusi: la possibilit3 di intera+ire con il bro'ser e la pa+ina
9:;L$
:utto questo - possibile +ra)ie all'oggetto window e, piJ +eneralmente, a quello c?e - il BOM
CBrowser Object ModelD, il modello oggetto del browser: per esso si intendono l'o++etto #indo#
tutti +li o++etti c?e da essi dipendono$
*1oggetto 2indo2
L'o++etto #indo# rappresenta la finestra del bro'ser c?e contiene la pa+ina stessa( nella pratica,
questo %uol dire a%ere accesso, per esempio, alle dimensioni della finestra del bro'ser, al testo della
sua barra di stato, e molto altro$
L'o++etto #indo# - un oggetto globale, il c?e si+nifica c?e non - necessario specificarlo per
utili))are i suoi metodi: ne - un esempio l'uso c?e abbiamo sempre fatto del metodo
#indo#.alert$', c?e abbiamo sempre ric?iamato sen)a specificare l'o++etto al quale
appartene%a$
$ropriet
de,aultStatus e status
Muesta propriet3 permette di ottenere o di impostare il testo predefinito della barra di stato del
bro'ser$ 1er esempio, sulla ma++ior parte dei bro'ser, mostra la scritta ,6ompletato, dopo
l'a%%enuto caricamento di una pa+ina$
1er usarla %i accediamo semplicemente:
#indo#.de;aultStatus = "8esto personali""ato"(
//oppure anche
de;aultStatus = "8esto personali""ato"(
La seconda propriet3, status, indica in%ece il testo corrente nella barra di stato, ad esempio
l'hre; di un linF ipertestuale se %i sta passando sopra il mouse$ 4nc?e qui la sintassi - semplice:J
#indo#.status = "8esto personali""ato"(
,ra&es, length e parent
Mueste tre propriet3 sono le+ate all'uso di rame nelle pa+ine 'eb$
Essendo l'uso dei frame una tecnica piuttosto obsoleta, sorpassata oramai da tecnolo+ie lato ser%er e
deprecata dal /A6, il loro uso non sar3 approfondito nel corso di questo libro$
opener
Muesta propriet3 restituisce un riferimento all'o++etto #indo# c?e ?a aperto la finestra corrente Csi
%eda piJ a%anti il metodo openCDD$
9ggetti co&e propriet)
La ma++ior parte delle propriet3 dell'o++etto #indo# sono a loro %olta altri o++etti$ * piJ
importanti e utili))ati saranno trattati nel detta+lio piJ a%anti in questo modulo e nei prossimi
capitoli$
%etodi
alert;<, con,ir&;< e pro&pt;<
!na finestra di confirm, questa %olta in francese
Due di questi metodi, alert$' e propt$', sono +i3 stati trattati in preceden)a( - simile in%ece
l'uso del metodo con;ir$', in quanto anc?'esso mostra una finestra di dialo+o$ La sua sintassi -:
#indo#.con;ir$"testo"'(
*l metodo mostra una finestra di dialo+o c?e mostra il testo indicato come parametro e due pulsanti,
'( e Annulla C)ancel in in+leseD, e restituisce true se l'utente clicca su @O, ;alse ne+li altri
casi$
Muesto metodo ser%e per c?iedere conferme all'utente prima di effettuare opera)ioni lun+?e o
importanti$
blur;< e ,ocus;<
Muesti due metodi rispetti%amente tol+ono il focus dalla finestra del bro'ser e spostano il focus sul
bro'ser$ Muesto ser%e quando ad esempio sono aperte piJ finestre contemporaneamente$
open;<
Muesto metodo apre una nuo%a istan)a del bro'ser, apre cio- una nuo%a finestra del bro'ser in uso$
La sua sintassi -:
#indo#.open$"url"& "titolo"& "paraetri"'
* primi due parametri sono, come si puL capire, indicano rispetti%amente l'indiri))o in cui si aprir3
la nuo%a finestra e il titolo c?e questa a%r3$ H possibile inoltre aprire una finestra %uota passando
come !RL una strin+a %uota C,,D$
*l ter)o parametro - in%ece una strin+a di parametri costruita con la sintassi:
noe5araetro=valore(noe5araetro4=valore4(
* principali parametri sono Cnon sono tutti compatibili con entrambi i bro'serD:
.o&e para&etro
'ossibili
valori
>escri0ione
copy%istory yes& no
6opia o meno la cronolo+ia della finestra padre nella
finestra fi+lia
#idth, height, top,
le;t
numero
intero
*ndicano rispetti%amente le dimensioni e la posi)ione
sullo sc?ermo della finestra
location yes& no
*ndica se mostrare la barra dell'indiri))o
enubar yes& no
*ndica se mostrare la barra dei menu
resi"able yes& no
4bilita il ridimensionamento della finestra
scrollbars yes& no
;ostra/nasconde le barre di scorrimento laterali
status yes& no
;ostra la barra di stato
toolbar yes& no
;ostra la barra de+li strumenti
La fun)ione restituisce un riferimento all'o++etto 'indo' appena aperto$ 4d esempio:
;inestra = #indo#.open$"pagina.htl"& "2uova ;inestra"&
"toolbar=no(location=yes"'(
;inestra.de;aultStatus = "Oenvenuti nella nuova ;inestra!"(
1ossiamo anc?e creare una +enerica fun)ione, per poi creare nuo%e finestre partendo dai linF:
;unction apri/inestra$url& titolo& #idth& height' G
var paras = "#idthL" B #idth B "(height=" B height(
#indo#.open$url& titolo& paras'(
H
e poi per usarla la inseriamo per esempio in un linF:
<a hre;="javascriptLapri/inestra$7pagina.htl7& 72uova ;inestra7&
4>>&4>>'">Jpri</a>
*n questo modo, +ra)ie alla parola ,Ia%ascript:,, cliccando sul linF %err3 ese+uita la fun)ione appena
creata$
6ome - stato spie+ato prima, dal codice della finestra aperta si potr3 ottenere un riferimento alla
finestra c?e la ?a aperta tramite la propriet3 #indo#.opener$
close;<
6?iude una finestra del bro'ser$
:li eventi nel +9/
1rima di completare la descri)ione de+li o++etti del .@;, ci occuperemo finalmente di un modo
per rendere la nostra pa+ina 9:;L %eramente dinamica: l'utili))o de+li eventi$
!n e%ento in 7a%a&cript permette di ese+uire determinate por)ioni di codice a seconda delle a0ioni
dell1utente o a stati della pagina: - possibile ad esempio colle+are del codice al click di un o++etto
oppure al ridimensionamento della pa+ina$
(li eventi in )avaScript
Di se+uito - elencata una lista dei possibili e%enti %erificabili in 7a%a&cript( da notare c?e +li e%enti
si riferiscono sempre ad un o++etto specifico Csuccessi%amente sar3 spie+ato comeD$
-venti del &ouse
onclick e ondblclick si %erificano quando l'utente fa clicF o doppio clicF sull'elemento in
questione
on&ousdo2n e on&ouseup si %erificano quando l'utente sc?iaccia il pulsante del mouse e
quando lo rilascia
on&ouseover e on&ouseout si %erificano quando l'utente sposta il mouse dentro l'o++etto
in questione e quando lo sposta fuori
on&ouse&ove si %erifica quando l'utente muo%e il cursore dentro l'o++etto
-venti della tastiera
onkeypress si %erifica quando l'utente preme un tasto sulla tastiera quando il ocus -
sull'o++etto specificato
onkeydo2n e onkeyup si %erificano quando l'utente sc?iaccia un tasto e lo rilascia
-venti degli ele&enti 56/*
on,ocus e onblur si %erificano quando l'utente sposta il focus sull'o++etto in questione e
quando to+lie il focus dall'o++etto
onchange si %erifica quando l'utente modifica il contenuto dell'o++etto C- applicabile solo ai
campi di moduloD
onsub&it e onreset si possono applicare solo a moduli 9:;L e si %erificano quando
l'utente in%ia il form Cpulsante di submitD o quando lo resetta Cpulsante resetD
onselect si %erifica quando l'utente sele)ione del testo
-venti della ,inestra
onload e onunload si %erificano quando la pa+ina %iene caricata o quando %iene c?iusa
onresi0e si %erifica quando l'utente ridimensiona la finestra del browser
alcuni bro'ser supportano anc?e l'e%ento onscroll c?e si %erifica allo scrollin+ della pa+ina
+venti come attributi ,T%L
*l modo piJ semplice di definire un e%ento - quello di inserirlo come attributo agli ele&enti
56/* della pa+ina stessa$ 4d esempio:
<ig src="logo.png" #idth="3>>px" onclic:="alert$7hai ;atto clic:
sull97iagine!7'" alt="?licca per saluti" />
ell'esempio associamo il codice 7a%a&cript c?e mostra l'alert al clicF dell'utente sull'imma+ine
9:;L$
@%%iamente possiamo anc?e fare riferimento a fun)ioni o %ariabili dic?iarate precedentemente nel
corso della pa+ina 9:;L:
<ig src="logo.png" #idth="3>>px" onclic:="salutaQtente$'" alt="?licca per
saluti" />
:ramite questo sistema possiamo usufruire dell'o++etto this per riferirci all'elemento 9:;L a cui
- stato applicato$ 4d esempio:
<ig src="logo.png" #idth="3>>px" onouseover="this.src=7logo4.png7"
onouseout="this.scr=7logo.png7" alt="rollover" />
6on questa ri+a di 9:;L e qualc?e istru)ione 7a%a&cript creiamo quello c?e si c?iama un rollover,
cio- l'effetto di cambiamento dell'imma+ine quando il mouse passa sopra di essa$
*er approondire, vedi la pagina JavaScript/Oggetto document.
+venti come propriet
Gli e%enti possono essere anc?e impostati tra&ite il +9/, cio- tramite 7a%a&cript$ 4d esempio:
#indo#.onload = "alert$7pagina in caricaento...7'("(
Muesto puL risultare comodo per a++iun+ere e%enti quando non si possono modificare direttamente
+li o++etto 9:;L, ad esempio nel caso di script esterni creati per essere utili))ati piJ %olte$
4tten)ione a non incappare in questo tipo di errori:
;unction saluta $' G
alert$"pagina in caricaento"'(
H(
#indo#.onload = saluta$'( //non ;un"iona
*n questo codice l'inten)ione - quella di mostrare un a%%iso al caricamento della pa+ina( scri%endo
saluta$', perL, il bro'ser lo %aluta come fun)ione( nel nostro caso, poic?N tale fun)ione non
restituisce alcun %alore, ad caricamento della pa+ina non succeder3 nulla$ 1er ottenere il risultato
desiderato - necessario utili))are la sintassi:
#indo#.onload = saluta( //ore ;un"iona
*n questo modo facciamo riferimento non al risultato della fun)ione bensK al suo codice %ero e
proprio$
!n altro metodo consiste nell'asse+nare alla fun)ione un oggetto function creato sul momento:
#indo#.onload = ;unction $' G
alert$"pagina in caricaento"'(
H(
-estituire dei valori
Muando si colle+a del codice ad un e%ento, - possibile impostare un valore di ritorno: se questo -
;alse, %err3 annullata l'a0ione prede,inita:
<a hre;="pagina.ht" onclic:="return con;ir$7vuoi veraente seguire il
lin:F7'(">cliccai!</a>
6liccando sul linF %err3 mostrato un messa++io di conferma( se si clicca il pulsante annulla la
fun)ione restituir3 false e di conse+uen)a restituir3 false il codice colle+ato all'e%ento( in questo
modo si elimina l'a)ione predefinita per l'e%ento clicF su un linF, cio- non %err3 caricata la pa+ina$
Muesta fun)ionalit3 ser%e soprattutto per la convalida dei ,or&: si colle+a all'e%ento onsubit
del form una fun)ione c?e restiutisce ;alse nel caso di errori nella compila)ione dei campi$
@%%iamente non si puL fare completo affidamento su questa fun)ionalit3, in quanto i 7a%a&cript
possono essere facilmente disabilitati dall'utente$
9ggetto docu&ent
@ltre alle propriet3 elencate nel modulo precedente, l'o++etto +lobale #indo# espone altre
importanti propriet3, tra le quali l1oggetto window.document$
Muesto o++etto permette di ottenere un riferimento al documento 9:;L e a+li elementi in essa
contenuti$
%etodi
L'o++etto espone solo poc?i metodi:
open;< e close;< rispetti%amente aprono e c?iudono un flusso di informa)ioni per l'uso dei
metodi elencati sotto
2rite;< e 2riteln;< scri%ono nella pa+ina la strin+a Cformattata in 9:;LD passata come
parametro:
se la pa+ina - +i3 stata caricata:
se - stato aperto il flusso di informa)ioni, il testo %err3 inserito alla fine della
pa+ina
se il flusso non - stato aperto, il testo sostituir3 il testo della pa+ina
se la pa+ina non - ancora stata caricata, se si usando blocc?i SscriptU all'interno del
SbodBU, le informa)ioni si inseriscono nel punto in cui - presente lo script
4d esempio:
<body>
<p>8esto<br />
<script type="application/x-javascript">
docuent.#rite$7<a hre;="pagina.htl">lin:</a>7'(
</script>
8esto</p>
</body>
+enerer3 il codice:
<body>
<p>8esto<br /><a hre;="pagina.htl">lin:</a>
8esto</p>
</body>
$ropriet
Le propriet3 dell'o++etto document possono essere relati%e:
a+li attributi dell'elemento <body> della pa+ina
al contenuto %ero e proprio del corpo del documento
altre propriet3 del documento 9:;L
el primo +ruppo, tro%iamo propriet3 come:
;g?olor e bg?olor: indicano rispetti%amente il colore di primo piano e di sfondo della
pa+ina$ 6orrispondono a+li attributi text e bac:ground$
lin:?olor, alin:?olor, valin:?olor: il colore rispetti%amente dei linF allo stato
normale, dei colle+amenti atti%i e dei colle+amenti %isitati$ 6orrisponde a+li attributi 9:;L
lin:, alin: e vlin:$
:ra le propriet3 del documento 9:;L la piJ rile%ante - docuent.title, c?e permette di
accedere al titolo del documento Cetic?etta <titleEt($
.ccedere ai lin* nella pagina
*l primo attributo c?e ci permette realmente di accedere a+li elementi della pa+ina - l'arraB lin:s
c?e restituisce un riferimento a+li o++etti SaU presenti nel documento:
var l = docuent.lin:sV>Y( //restituisce un ri;eriento al prio lin: nella
pagina
alert$72ella pagina ci sono 7 B docuent.lin:s.length B 7 lin:7'( //ricordiaoci
che * un array
6iascun o++etto linF presenta le se+uenti propriet3:
hre;: restituisce o imposta il %alore dell'attributo hre; del linF$ 4 partire da esso deri%ano
alcuni attributi relati%i all'!RL a cui punta il linF:
hostnae: indica il nome dell'?ost dell'!RL
pathnae: indica il percorso o++etto indicato dell'!RL
port: indica la porta dell'!RL
protocol: indica il protocollo della risorsa a cui punta l'!RL Cper esempio F:1 o
9::1D
search: restituisce l'e%entuale +uerystring Cad esempio pagina.htF
name=Mario&cognome=RossiD
target: il %alore dell'attributo target del linF
4d esempio possiamo decidere di impostare il tar+et di tutti i linF nella pa+ina a <blan::
;or $i in docuent.lin:s' G
docuent.lin:sViY.target = "<blan:"( //iposta l7attributo target
H
L#arra! images
4nalo+amente all'arraB lin:s, esiste anc?e un arraB iages c?e permette di accedere a tutte le
imma+ini presenti nella pa+ina$
Rispetto a lin:s, questo arraB presenta una differen)a: - possibile accedere a+li elementi della
pa+ina anc?e attra%erso il loro attributo nae$ 4d esempio:
<ig nae="logo" src="logo.png" #idth="30>px" height="30>px" />
1ossiamo accedere a quell'imma+ine tramite l'indice numerico oppure tramite il nome, in questo
modo:
docuent.iagesV"logo"Y
L'o++etto iage espone come propriet3 +li attributi di qualsiasi imma+ine 9:;L, come src,
border, ecc$$$ 1resenta inoltre un'interessate propriet3 coplete c?e restituisce true se
l'imma+ine - +i3 stata caricata dal bro'ser$
.ccedere ai moduli
*er approondire, vedi la pagina HTML/Moduli.
1er ultimo trattiamo, in quanto introduce un ar+omento piuttosto %asto, l'arraB
docuent.;orsVY c?e, come si potr3 facilmente intuire, permette di accedere a tutti +li
elementi SformU nella pa+ina Cmoduli 9:;LD$
1er accedere a ciascun form nella pa+ina possiamo utili))are tre metodi:
docuent.;orsV>Y //accede al prio ;or nella pagina
docuent.;orsV"dati"Y //accede al ;or con nae="dati"
docuent.dati //;ora abbreviata
*l metodo presenta due interessanti metodi:
reset;< c?e resetta i %alori dei campi nei moduli Ccome cliccare sul pulsante ,reset, del formD
sub&it;< in%ece in%ia il form Ccome cliccare sul pulsante ,submit, o ,in%ia, del moduloD
Muesto da la possibilit3 di in%iare il modulo per esempio al semplice clicF di un colle+amento
oppure di aniticipare il normale in%io dei dati:
<;or nae="op"">
<select nae="op"ione" onchange="docuent.op".subit$'">
<option value="odi;ica">odi;ica</option>
<option value="eliina">eliina</option>
<option value="...">...</option>
</select>
</;or>
*n questo modo il form si in%ia automaticamente quando l'utente sce+lie un'op)ione dal menu a
discesa, sen)a l'utili))a del pulsante di in%io$
L'o++etto presenta anc?e alcune propriet3 corrispondenti a+li attributi dell'o++etto 9:;L SformU,
quali action, encoding, &ethod, na&e e target$
4 ca&pi dei &oduli
4nali))iamo infine, tra le propriet3 dell'o++etto form, l'utile arraB eleentsVY c?e permette di
accedere a tutti i campi contenuti form:
docuent.dati.eleentsV>Y //accede al prio eleento del ;or
docuent.dati.eleentsV"op"ione"Y //accede al capo con nae="op"ione"
docuent.dati.op"ione //;ora abbreviata
L'o++etto restituito da questo arraB dipende dal tipo di o++etto a cui accede: potr3 essere un campo
di testo, un pulsante oppure una te&tarea$ :utta%ia tutti i campi condi%idono:
una propriet3 ,or& c?e restituisce un rimando al form +enitore(
una propriet3 value c?e permette di ottenere o impostare al %alore del campo, in modo
di%erso a secondo dei sin+oli tipi di campo(
la propriet3 type c?e ne specifica il tipo(
la propreit3 na&e c?e ne restituisce il nome Cattributo 9:;L nae(
due metodi ,ocus;< e blur;< c?e rispetti%amente attribuiscono e tol+ono il ocus
dall'elemento
Caselle di testo
Muesti elementi sono creati utili))ando il ta+ 9:;L <input> impostando l'attributo type ai
%alori te&t, password o $idden: la differen)a - c?e il secondo mostra de+li asterisc?i al posto dei
caratteri reali e il ter)o - in%isibile, ma noi li tratteremo insieme in quanto condi%idono propriet3 e
metodi$
Muesti tre tipi di moduli restituiscono come attributo type il %alore rispetti%amente te&t, password e
$idden$ 9anno poi due propriet3, si0e e &a=length, c?e corrispondono ai rispetti%i attributi 9:;L$
1er quanto ri+uarda i metodi, in%ece, presentano select;<, c?e sele)iona l'intero testo contenuto nel
campo Co%%iamente non ser%e per i campi di testo nascostiD$
L'e%ento associato normalmente a questi campi - onchange, c?e %iene c?iamato dopo la modifica
del %alore nel campo$
#ree di testo
Le aree di testo sono create tramite l'utili))o del ta+ 9:;L <textarea> e sono rappresentante
dall'omonimo o++etto te&tareain 7a%a&cript$
Muesti o++etti presentano propriet3 analo+?e ai campi di testo: value imposta o restituisce il %alore
della casella di testo, ro2s e cols corrispondono ai rispetti%i attributi 9:;L$
L'o++etto te&tarea permette di inserire anc?e de+li accapo nel testo, ma in questo caso biso+na stare
attenti, in quanto il carattere di accapo - espresso di%ersamente a seconda del sistema operati%o in
uso: su /indo's - 9n9r, su LinuE - 9n mentre su ;ac - 9r C9 - il carattere di commuta)ione
%isto in preceden)a per +li apici sin+oli e doppiD$
'ulsanti
1er quanto ri+uarda i pulsanti dei moduli, questi possono essere di tre tipi: submit, reset e button(
tutta%ia espon+ono lo stesso modello o++etto, c?e in realt3 - molto semplice, in quanto non presenta
propriet3 o metodi particolari oltre a quelli condi%isi da tutti i campi di modulo$
L'utili))o di 7a%a&cript con questi pulsanti - piJ c?e altro le+ato a+li e%enti del mouse Canali))ati
nel modulo precedenteD$
'ulsanti di op0ione
*ni)iamo ad anali))are ora alcuni elementi piJ complicati: i c$eckbo& e i pulsanti radio
Ccorrispondono rispetti%amente ad <input type="chec:box" /> e <input
type="radio" />D$
el primo la propriet3 piJ utile non - value come ne+li altri casi, bensK checked c?e indica se la
casella - stata marcata o meno$
1er quanto ri+uarda i radio, il discorso - simile, ma biso+na anc?e considerare c?e di%ersi elementi
di op)ione normalmente condi%idono lo stesso attributo nae( per accedere quindi ai sin+oli
elementi - necessario quindi appo++iarsi ad un arraB:
// supponiao di avere @ op"ioni con nae="et-"
docuent.dati.et-V3Y.chec:ed=true( //sele"iona la seconda op"ione
alert$docuent.dati.et-.value'( //restituir- il valore del capo
// cio* il valore della casella sele"ionata
alert$docuent.dati.et-V0Y.value'( //restituisce il valore del ,uarto eleento
*iste
4nali))iamo per ultimo +li elementi <select>, c?e ser%ono per creare liste e menu a tendina$
1rendiamo il se+uente spe))one di codice 9:;L in un ipotetico form c?iamato ,dati,:
<select nae=citt- si"e=@>
<option value=i>Silano</option>
<option value=to>8orino</option>
<option value=pe>5escara</option>
<option value=pa>5alero</option>
</select>
Muesto codice crea un o++etto select accessibile come sempra con la sintassi
docuent.dati.citt-$ Muesto espone alcune propriet3 interessanti:
value - il %alore del campo del modulo Cnel nostro caso potr3 essere mi, to, ecc$$$D
option - un'arraB contenente un riferimento a ciascun o++etto option appartenente all'elenco
selected4nde= restituisce l'indice dell'elemento al momento sele)ionato dall'utente C;ilano
sar3 0, :orino #, ecc$$$D
@+ni o++etto option espone le se+uenti propriet3:
value indica il suo %alore
te=t indica il testo c?e mostrer3 all'utente
inde= restituisce la sua posi)ione nell'arraB$
4d esempio, associamo all'e%ento onc$ange del campo ,citt3, alla se+uente fun)ione:
;unction ostra?itt-$' G
var testo = docuent.dati.citt-.optionVdocuent.dati.citt-.selected.ndexY.text(
H
6liccando su ciascuna op)ione otterremo cosK un'alertboE contenente la citt3 sele)ionata$
4nserire e aggiungere ele&enti
1er inserire o a++iun+ere nuo%i elementi - sufficiente creare un nuo%o o++etto option e asse+narlo
ad una posi)ione dell'arraB:
var nuova6p"ione = ne# 6ption$"Oologna"& "bo"'(
docuent.dati.citt-.optionsV>Y = nuova6p"ione(
L'esempio appena %isto a++iun+e la citt3 ,.olo+na, come primo elemento della lista$ *l bro'ser si
occuper3 poi di far scalare le posi)ioni de+li altri elementi dell'arraB$ 1er eliminare un'op)ione -
sufficiente assen+are all'elemento dell'arraB il %alore null:
docuent.dati.citt-.optionsV4Y = null(
La se+uente fun)ione a++iun+e una citt3 come ultimo elemento nella lista:
;unction aggiungi?itt- $' G
var testo = propt$"?he citt- vuoi aggiungereF"'(
var sigla = propt$".nserisci la sigla della citt-"'(

var nuova?itt- = ne# 6ption$testo& sigla'(
docuent.dati.citt-.optionsVdocuent.dati.citt-.options.lengthY = nuova?itt-
H
#ltri oggetti del +9/
@ltre all'o++etto document, l'o++etto 'indo' espone altre propriet3 c?e restituiscono o++etti
particolarmente utili$
location
Muesto o++etto restituisce informa)ioni relati%e all'indiri))o della pa+ina caricata$
Le sue propriet3 sono le stesse c?e per l'o++etto lin: trattato nel modulo precedente
Espone inoltre di due interessanti metodi:
reload;<: ricarica la pa+ina
replace;<: carica l'!RL indicata come parametro sostituendola in cronolo+ia alla %oce
corrente$ !sando in%ece location.hre; = url %en+ono sal%ate entrambe le pa+ine in
cronolo+ia$
histor!
Muesto o++etto permette di accedere alla cronolo+ia delle pa+ine %isitate dall'utente$ Espone di una
sola propriet3 length c?e restituisce il numero di pa+ine nella cronolo+ia$ Espone poi i metodi:
go;<: carica la pa+ina nella posi)ione indicata rispetto alla pa+ina corrente( ad esempio:
history.go$-4'( //carica la seconda pagina caricata pria di ,uella corrente
history.go$0'( //coe preere 0 volte il pulsante "avanti" del bro#ser
back;< e ,or2ard;<: caricano la pa+ina precedente e successi%a Ccorrispondono a
history.go$-3' e history.go$3'D
&pesso l'o++etto ?istorB - usato in associa)ione a+li e%enti della pa+ina per creare bottoni
,indietro,:
<a hre;="\" onclic:="history.bac:$'( return ;alse(">Elt(Elt( .ndietro</a>
navigator
Muesto o++etto consente di ottenere informa)ioni ri+uardo al bro'ser in uso dall'utente e al suo
sistema operati%o$ Espone interessanti propriet3:
app.a&e - una strin+a c?e restituisce il nome del bro'ser C@pera, etscape G %alore
restituito anc?e da FirefoE G, ;icrosoft *nternet EEplorer$$$D$
appVersion contiene dati sul bro'ser, quali la %ersione della release e il sistema operati%o
sul quale sta +irando$
plugins restituisce un arraB del plugin installati$
:ramite la prima propriet3, possiamo %erificare il bro'ser in uso per a+ire in modo di%erso ed
eliminare cosK alcuni problemi di compatibilit3:
var ns = $ navigator.app2ae.index6;$"2etscape"' > -3 ' //se l7utente naviga con
/ire;ox/2etscape& contiene true
var ie = $ navigator.app2ae.index6;$"Sicroso;t"' > -3 ' //icroso;t internet
explorer
var #ie = $ navigator.app2ae.index6;$"Dindo#s"' > -3 ' //#indo#s internet
explorer
var opera = $ navigator.app2ae.index6;$"6pera"' > -3 '
//etc...

i; $ns' G
//codice per netscape/;ire;ox
H
else i; $ie ]] #ie' G
//codice per ie
H else i; $opera' G
//codice per opera
H else G
//codice per altri bro#ser
H
ormalmente - possibile omettere i controlli per bro'ser quali @pera, c?e normalmente
manten+ono una +rande compatibilit3 con FirefoE, in quanto entrambi se+uono le stesse
con%en)ioni del /A6( spesso il problema - tro%are una solu)ione compatibile anc?e con *E$
screen
Muesto o++etto permette di ottenere informa)ioni sullo sc?ermo dell'utente e sulla sua
confi+ura)ione$ :ra le sue propriet3 ricordiamo:
height e 2idth c?e indicano la risolu)ione %erticale e ori))ontale dello sc?ermo in piEel
color>epth Cprofondit3 del coloreD indica il numero di bit utili))ati per i colori Cad esempio,
2 indica c?e l'utente sta na%i+ando con uno sc?ermo in bianco e nero G fatto altamente
improbabile, perc?N ormai la ma++ior parte dei monitor supportano la confi+ura)ione #8 o
A2 bitD$
DO%
*l >9/ - una tecnonolo+ia standard del /A6 per muo%ersi nella struttura di documenti X;L$
*n rela)ione a 7a%a&cript questo - molto interessante, in quanto un documento 9;:L ben formato -
in realt3 un documento X;L, e tramite il D@; di 7a%a&cript - possibile accedere a +ualsiasi
elemento nella pa+ina per modificarne le propriet3 o per atti%arne i metodi$ *l D@; definisce anc?e
un modello o++etto piJ e%oluto c?e il .@; c?e tratteremo quindi in modo piJ approfondito$
*er approondire vai su ,ikipedia, vedi la voce Document Object Model.
+9/ vs >9/
6i si potrebbe a questo punto c?iedere do%e si so%rappon+ano il D@; c?e andremo ad anali))are e
.@; c?e abbiamo appena %isto e, soprattutto, perc?N abbiamo esaminato anc?e il .@;,
nonostante sia meno e%oluto$
*l problema sor+e in realt3 dall'e%olu)ione dei bro'ser, c?e ?anno creato dei propri standard prima
della defini)ione del /A6$ *n realt3 il D@; non - altro c?e un'e%olu)ione del .@; s%iluppato
ini)ialmente da bro'ser come etscape o *nternet EEplorer con l'a%%ento di 7a%a&cript$
&olo successi%amente il D@; - stato standardi))ato, ma si continua ancora o++i ad usare il .@;,
per problemi di compatibilit3 Canc?e se ormai questi sono praticamente minimiD o anc?e perc?N
quest'ultimo - piJ ,intuiti%o, e non ric?iede di capire la +erarc?ia X;L della pa+ina$
*a struttura gerarchica di un docu&ento
1er poter la%orare con il D@; - perL necessario capire la struttura ad albero di un documento,
perc?N - su questa c?e si muo%e$ Muesta struttura - astratta e parte dalla +erarc?ia de+li elementi in
una pa+ina$
1rendiamo ad esempio questa pa+ina 9:;L:
<htl>
<head></head>
<body>
<h3>8his is an header</h3>
<p>8his is soe text</p>
</body>>
</htl>
H un semplice documento 9:;L contenente un'intesta)ione e un para+rafo$ La sua struttura ad
albero sar3 la se+uente:
@+ni elemento, di qualsiasi tipo esso sia, occupa una posi)ione ben definita$ @+ni elemento nella
struttura ad albero %iene c?iamato ,nodo,, e rappresenta nel modo piJ astratto ciascun elemento
della pa+ina$
4d o+ni nodo si puL associare un nodo genitore, tranne c?e per il nodo radice del documento, nel
nostro caso <htl>$ @+ni nodo puL a%ere dei nodi igli Cad esempio l'intesta)ione e il para+rafo
sono fi+li dell'elemento <body> e dei nodi fratelli Cad esempio <p> - fratello di <h3>D$
Muesta - un'altra differen)a dal .@;: non esiste piJ un o++etto per o+ni elemento nella pa+ina, ma
esiste un o++etto astratto c?e li rappresenta tutti$ on sar3 piJ quindi necessario studiare
singolarmente o+ni sin+olo elemento della pa+ina, ma solo i tipi di nodi piJ importanti$
/ari tipi di nodo
L'o++etto -ode - quindi, come abbiamo detto, il modo piJ astratto per indicare un elemento della
pa+ina( per i di%ersi tipi di elemento esistono poi o++etti piJ specifici, c?e sono delle estensioni
dell'o++etto -ode( tra i piJ importanti tro%iamo:
.ocument - un o++etto radice del documento$ L'o++etto window.document - un'istan)a di
questo o++etto$
/lement - un nodo c?e rappresenta un elemento 9:;L Ccome <p>D
0e&t - un nodo di testo, c?e costituisce l'ultimo nodo fi+lio di un elemento Cad esempio 0$is
is some te&t - un nodo di testoD
'ropriet) e &etodi del >9/
Dopo l'introdu)ione +enerale al D@; e alla sua struttura, passiamo ora ad anali))are i suoi o++etti
per applicare quanto %isto$
Ottenere un elemento
"ediamo ora il primo passo da compiere quando si la%ora con il D@;: ottenere il riferimento ad un
elemento 9:;L e memori))arlo in una %ariabile$
1er fare questo, nella maniera piJ semplice, il D@; utili))a l'attributo id c?e - possibile asse+nare
ad o+ni elemento:
var par = docuent.getRleentOy.d$"p3"'( //ottiene il paragra;o con id="p3"
1er ottenere in%ece l'elemento root del file 9:;L, si usa la propriet3
docuent.docuentRleent$
Lavorare su un elemento
!na %olta ottenuto l'elemento Cquesto - il modo piJ semplice, ma ne esistono anc?e altriD, -
possibile modificarne +li attributi o modificare +li stili:
la propriet3 tag.a&e restituisce il nome del ta+ Cper esempio a o imgD
la propriet3 style permette di impostarne lo stile in modo %eloce Cquesta caratteristica non -
in realt3 uno standard D@;, ma fun)iona bene su tutti i bro'serD tramite il nome della
propriet3 6&&, ad esempio p3.style.color = "\;>>"( imposta a rosso il colore del
para+rafo ottenuto prima
esistono poi tre metodi per impostare o eliminare +li attributi:
set#ttribute imposta un attributo tramite il nome e il %alore
Cp3.setJttribute$"align"& "center"'(D(
get#ttribute restituisce il %alore un attributo tramite il suo nome
Cp3.getJttribute$"align"'(D(
re&ove#ttribute rimuo%e un attributo Ctornando cosK al %alore di defaultD tramite il
suo nome Cp3.reoveJttribute$"align"'(D$
Spostarsi nella struttura ad albero
4rri%a ora il momento di sfruttare la struttura ad albero c?e abbiamo %isto ora$ L'node espone infatti
delle propriet3 e dei metodi c?e permettono di spostarsi nella struttura ad albero, per ottenere nodi
fratelli, +enitori o fi+li:
,irstChild e lastChild restituiscono il primo e l'ultimo nodo fi+lio di un elemento Cse - uno
solo, restituiscono lo stesso elementoD$ &e per esempio abbiamo un para+rafo c?e contiene
previousSibling e ne=tSibling restituiscono il precedente e il successi%o nodo ,fratello, del
nodo
parent.ode restituisce il nodo +enitore
o2ner>ocu&ent restituisce l'elemento del documento c?e contiene il nodo Cad esempio
<body>
get-le&ents+y.a&e;< - un metodo c?e restituisce un elenco di tutti +li elementi 9:;L
con uno stesso nome Cper esempio ,img,D( per accedere ad un elemento si usa il metodo
ite$' oppure tramite la nota)ione de+li arraB$
!na %olta ottenuto un nodo, - possibile usare la propriet3 nodeValue c?e ne restituisce il %alore e la
propriet3 node6ype c?e ne restituisce il tipo come numero$
4nali))iamo ad esempio questo spe))one di 9:;L:
<h3>8his is an header</h3>
<p id="p3">8his is soe text& <b>a bold eleent</b> and another text</p>
Muesta - la sua rappresenta)ione del D@;:
"ediamo ora come a+ire$ La cosa piJ semplice - partire dall'elemento con un *D uni%oco:
var p3 = docuent.getRleentOy.d$"p"'(
var h3 = docuent.previousSibling( //ottiene l7eleento %3

alert$p3.node=alue'( //restituisce "null" $un eleento %8S! non ha un valore'

var testo3 = p3.;irst?hild(
alert$testo3.node=alue'( //restituisce il noe dell7oggetto& ovvero "8his is
soe text"
alert$testo3.nextSibling'( //restituisce "6bject ORleent"
// in ,uanto il ;ratello del prio nodo di testo * l7eleento <b>
alert$testo3.nextSibling.;irst?hild'( //restituisce il testo
Creare nuovi elementi
La possibilit3 di +estire qualsiasi elemento della pa+ina come o++etto da anc?e la possibilit3 di
creare nuo%i elementi, semplicemente creando nuo%i o++etti di nodo e poi inserendoli nella struttura
ad albero$ 1er fare ciL esistono alcuni particolari metodi, prima di tutto dell'o++etto docuent:
create-le&ent: crea un nodo di elemento con il nome specificato come parametro
create6e=t.ode: crea un nodo di testo con il testo specificato
!na %olta creato un nodo, sia esso di elemento o di testo, %a a++iunto ai nodi +i3 esistenti:
appendChild a++iun+e al nodo il nodo fi+lio passato come parametro, in ultima posi)ione
insert.ode inserire il nodo specificato prima del nodo specificato come secondo ar+omento
re&oveChild elimina il nodo fi+lio indicato come parametro
replaceChild sostituisce il nodo fi+li indicato nel primo parametro con il secondo
hasChild.odes restituisce true se il nodo ?a nodi fi+li$
"ediamo un esempio:
var body = docuent(
var lin: = docuent.createRleent$"a"'(
var testo = docuent.create8ext2ode$"Segui ,uesto lin:"'(

lin:.setJttribute$"hre;"& "pagina.htl"'(

lin:.append?hild$testo'(
body.append?hild$lin:'(
:li eventi nel >9/
*l &odello evento del >9/ in realt3 non offre +randi fun)ionalit3 in piJ rispetto a quello del .@;
di cui abbiamo %isto una parte in preceden)a( tutta%ia il modello e%ento del D@; ?a un mi+liori
supporto e compatibilit3 tra i bro'ser e, essendo il D@; l'ultima tecnolo+ia s%iluppata in questo
campo, l'e%olu)ione del 7a%a&cript non si baser3 sul .@; bensK sul D@;$
.nalogie con 0uanto gi visto
*er approondire, vedi la pagina JavaScript/Gli eventi nel BOM.
*n realt3 molte di ciL c?e - stato %isto per il .@; - riutili))abile anc?e con il D@;: sono u+uali i
nomi de+li e%enti, il fun)ionamento del colle+amento tra o++etti ed e%enti, l'uso dell'o++etto t$is
L#oggetto event
La fun)ionalit3 interessante c?e tratteremo ora - l'oggetto event, c?e permette di ottenere
informa)ioni sull'e%ento appena scaturito, come l'elemento c?e lo ?a +enerato, o la posi)ione del
mouse$
1ossiamo utili))arlo dentro alla dic?iara)ione dell'e%ento, ad esempio:
<a
hre;="pagina.htl"
onouseover="alert$7.l ouse * alla posi"ione 7 B event.screenX B 7& 7 B
event.screenT B 7dello schero7'("
>
lin:
</a>
*n questo esempio utili))iamo le due propriet3 screen1 e screen2 dell'o++etto e%ent, c?e
restituiscono la posi)ione del cursore del mouse rispetto allo sc?ermo$
Rispetto all'utili))o di questo o++etto, biso+na fare atten)ione quando si ric?iama da delle fun)ioni
$andler: l'o++etto e%ent infatti ?a una %isibilit3 pri%ata, non puL quindi essere ric?iamato
esternamente alla dic?iara)ione dell'e%ento Cnell'attributo ,onclicF, per esempioD$ 1er o%%iare a
questo problema - sufficiente passare l'o++etto e%ent come ar+omento$ 4d esempio, si crea la
fun)ione:
;unction posi"ione $e' G
alert$7.l ouse * alla posi"ione 7 B e.screenX B 7& 7 B e.screenT B 7dello
schero7'(
H
ell'9:;L si inserir3: Sa ?refT,pa+ina$?tml, onmouseo%erT,posi)ioneCe%entD(,UlinFS/aU
S/sourceU
'ropriet)
ti&esta&p Cfun)iona solo su FFD restituisce la data e l'ora in cui si - %erificato l'e%ento(
target e related6arget Csrc-le&ent e to-le&ent su *nternet EEplorerD restituiscono
rispetti%amente il nodo c?e ?a +enerato l'e%ento e il nodo su cui probabilmente sar3 il mouse
dopo c?e l'e%ento si sar3 concluso Cad esempio - utile per +li e%enti mouse'utD$ Muando si
usano queste propriet3 biso+na prima controllare il bro'ser in uso dall'utente C%edi questa
pa+inaD(
altDey, ctrlDey e shi,tDey indicano rispetti%amente se - premuto il tasto alt, ctrl o s$it
mentre a%%iene e%ento(
button indica quale pulsante del mouse - stato premuto C0 il tasto sinistro, # quello destroD(
clientE e clientF indicano le posi)ioni del cursore rispetto alla finestra del bro'ser Ca
partire dall'an+olo in altro a destraD(
screenE e screenF indicano le posi)ioni del cursore rispetto allo sc?ermo dell'utente Ca
partire dall'an+olo in altro a destraD$
.ppendice
'arole riservate
brea: case catch continue de;ault delete
else ;alse ;inally ;or ;unction i; in
instanceo; ne# null return s#itch this
thro# true try typeo; var void #hile #ith
>ebugging
*l termine in+lese debugging si+nifica ,to+liere +li scarafa++i,, do%e +li scarafa++i sono i bug, +li
errori nel codice$
* tipi di errore possono essere di%ersi: dai semplici errori di sintassi Cpossono essere para+onati ad
una frase +rammaticalmente scorretta in italianoD come la mancata c?iusura di una parentesi, fino
a+li errori logici Ccome una frase c?e non ?a alcun senso, nonostante sia +rammaticalmente
correttaD( ad esempio, puL essere un errore lo+ico dimenticarsi di incrementare una %ariabile quando
ser%e, oppure utili))are un al+oritmo sba+liato$
Come evitare alcuni errori comuni
Le++i attentamente il tuo codice per e%entuali errori di battitura
4ssicurati c?e tutte le parentesi siano c?iuse CpuL aiutare in questo un buon editorD
Ricorda c?e 7a%a&cript - case"sensitive: 2ae e nae sono due %ariabili differenti
on usare parole riser%ate come nomi di %ariabili o di fun)ioni
Ricordati di effettuare l'escape de+li apici sin+oli/doppi:
Muando con%erti i numeri usando la fun)ione parse.nt ricorda c?e ,0=, o ,0>, sono
%alutati come numeri in base otto, a causa dello )ero$
Ricorda c?e 7a%a&cript - indipendente dalla piattaforma, ma lo - dal bro'ser<
Semplice debugging
@ltre a %erificare la lista de+li errori comuni, uno dei modi piJ semplici di effettuare il debu++in+
del proprio codice consiste nell'utili))are le istru)ioni alert mostrando il contenuto di una
%ariabile, oppure semplicemente come ,se+naposto, per sapere a c?e punto si - del codice$
&upponiamo ad esempio c?e lo script non faccia quanto desiderato, ma+ari fermandosi a met3:
come si puL indi%iduare il punto esatto in cui lo script si fermaP *l modo piJ semplice - inserire
prima e/o dopo blocc?i di istru)ioni c?e consideriamo ,sensibili, o di cui non siamo certi della
corrette))a con istru)ioni del tipo:
//...
alert $"ini"io blocco"'(
//...
alert $";ine blocco"'(
//...
1er esempio, se %err3 mostrato il primo messa++io, si+nifica c?e fino a quel punto - tutto corretto
ma se, ad esempio, nono %iene mostrato il secondo, si+nifica c?e in me))o ai due alert c'-
l'istru)ione ,bu++ata,$
Muesto sistema - utile ad esempio nei cicli: per controllare ad o+ni passa++io l'andamento del
pro+ramma puL essere comodo inserire nel ciclo un alert c?e mostri il %alore del contatore e il
%alore delle altre %ariabili c?e inter%en+ono nel pro+ramma, cosK da capire passo per passo cosa
a%%iene effetti%amente$
Licenza
G! Free Documentation License
"ersion #$2, o%ember 2002
6opBri+?t C6D 2000,200#,2002 Free &oft'are Foundation, *nc$
5# FranFlin &t, Fift? Floor, .oston, ;4 02##0G#A0# !&4
E%erBone is permitted to copB and distribute %erbatim copies
of t?is license document, but c?an+in+ it is not allo'ed$
0 '?-#/+*-
:?e purpose of t?is License is to maFe a manual, teEtbooF, or ot?er functional and useful document ,free, in t?e sense
of freedom: to assure e%erBone t?e effecti%e freedom to copB and redistribute it, 'it? or 'it?out modifBin+ it, eit?er
commerciallB or noncommerciallB$ &econdarilB, t?is License preser%es for t?e aut?or and publis?er a 'aB to +et credit
for t?eir 'orF, '?ile not bein+ considered responsible for modifications made bB ot?ers$
:?is License is a Find of ,copBleft,, '?ic? means t?at deri%ati%e 'orFs of t?e document must t?emsel%es be free in t?e
same sense$ *t complements t?e G! General 1ublic License, '?ic? is a copBleft license desi+ned for free soft'are$
/e ?a%e desi+ned t?is License in order to use it for manuals for free soft'are, because free soft'are needs free
documentation: a free pro+ram s?ould come 'it? manuals pro%idin+ t?e same freedoms t?at t?e soft'are does$ .ut t?is
License is not limited to soft'are manuals( it can be used for anB teEtual 'orF, re+ardless of subIect matter or '?et?er
it is publis?ed as a printed booF$ /e recommend t?is License principallB for 'orFs '?ose purpose is instruction or
reference$
@ #''*4C#+4*46F #.> >-(4.4649.S
:?is License applies to anB manual or ot?er 'orF, in anB medium, t?at contains a notice placed bB t?e copBri+?t ?older
saBin+ it can be distributed under t?e terms of t?is License$ &uc? a notice +rants a 'orldG'ide, roBaltBGfree license,
unlimited in duration, to use t?at 'orF under t?e conditions stated ?erein$ :?e ,Document,, belo', refers to anB suc?
manual or 'orF$ 4nB member of t?e public is a licensee, and is addressed as ,Bou,$ You accept t?e license if Bou copB,
modifB or distribute t?e 'orF in a 'aB requirin+ permission under copBri+?t la'$
4 ,;odified "ersion, of t?e Document means anB 'orF containin+ t?e Document or a portion of it, eit?er copied
%erbatim, or 'it? modifications and/or translated into anot?er lan+ua+e$
4 ,&econdarB &ection, is a named appendiE or a frontGmatter section of t?e Document t?at deals eEclusi%elB 'it? t?e
relations?ip of t?e publis?ers or aut?ors of t?e Document to t?e Document's o%erall subIect Cor to related mattersD and
contains not?in+ t?at could fall directlB 'it?in t?at o%erall subIect$ C:?us, if t?e Document is in part a teEtbooF of
mat?ematics, a &econdarB &ection maB not eEplain anB mat?ematics$D :?e relations?ip could be a matter of ?istorical
connection 'it? t?e subIect or 'it? related matters, or of le+al, commercial, p?ilosop?ical, et?ical or political position
re+ardin+ t?em$
:?e ,*n%ariant &ections, are certain &econdarB &ections '?ose titles are desi+nated, as bein+ t?ose of *n%ariant
&ections, in t?e notice t?at saBs t?at t?e Document is released under t?is License$ *f a section does not fit t?e abo%e
definition of &econdarB t?en it is not allo'ed to be desi+nated as *n%ariant$ :?e Document maB contain )ero *n%ariant
&ections$ *f t?e Document does not identifB anB *n%ariant &ections t?en t?ere are none$
:?e ,6o%er :eEts, are certain s?ort passa+es of teEt t?at are listed, as FrontG6o%er :eEts or .acFG6o%er :eEts, in t?e
notice t?at saBs t?at t?e Document is released under t?is License$ 4 FrontG6o%er :eEt maB be at most 5 'ords, and a
.acFG6o%er :eEt maB be at most 25 'ords$
4 ,:ransparent, copB of t?e Document means a mac?ineGreadable copB, represented in a format '?ose specification is
a%ailable to t?e +eneral public, t?at is suitable for re%isin+ t?e document strai+?tfor'ardlB 'it? +eneric teEt editors or
Cfor ima+es composed of piEelsD +eneric paint pro+rams or Cfor dra'in+sD some 'idelB a%ailable dra'in+ editor, and
t?at is suitable for input to teEt formatters or for automatic translation to a %arietB of formats suitable for input to teEt
formatters$ 4 copB made in an ot?er'ise :ransparent file format '?ose marFup, or absence of marFup, ?as been
arran+ed to t?'art or discoura+e subsequent modification bB readers is not :ransparent$ 4n ima+e format is not
:ransparent if used for anB substantial amount of teEt$ 4 copB t?at is not ,:ransparent, is called ,@paque,$
EEamples of suitable formats for :ransparent copies include plain 4&6** 'it?out marFup, :eEinfo input format, La:eX
input format, &G;L or X;L usin+ a publiclB a%ailable D:D, and standardGconformin+ simple 9:;L, 1ost&cript or
1DF desi+ned for ?uman modification$ EEamples of transparent ima+e formats include 1G, X6F and 71G$ @paque
formats include proprietarB formats t?at can be read and edited onlB bB proprietarB 'ord processors, &G;L or X;L
for '?ic? t?e D:D and/or processin+ tools are not +enerallB a%ailable, and t?e mac?ineG+enerated 9:;L, 1ost&cript or
1DF produced bB some 'ord processors for output purposes onlB$
:?e ,:itle 1a+e, means, for a printed booF, t?e title pa+e itself, plus suc? follo'in+ pa+es as are needed to ?old,
le+iblB, t?e material t?is License requires to appear in t?e title pa+e$ For 'orFs in formats '?ic? do not ?a%e anB title
pa+e as suc?, ,:itle 1a+e, means t?e teEt near t?e most prominent appearance of t?e 'orF's title, precedin+ t?e
be+innin+ of t?e bodB of t?e teEt$
4 section ,Entitled XYZ, means a named subunit of t?e Document '?ose title eit?er is preciselB XYZ or contains XYZ
in parent?eses follo'in+ teEt t?at translates XYZ in anot?er lan+ua+e$ C9ere XYZ stands for a specific section name
mentioned belo', suc? as ,4cFno'led+ements,, ,Dedications,, ,Endorsements,, or ,9istorB,$D :o ,1reser%e t?e :itle,
of suc? a section '?en Bou modifB t?e Document means t?at it remains a section ,Entitled XYZ, accordin+ to t?is
definition$
:?e Document maB include /arrantB Disclaimers neEt to t?e notice '?ic? states t?at t?is License applies to t?e
Document$ :?ese /arrantB Disclaimers are considered to be included bB reference in t?is License, but onlB as re+ards
disclaimin+ 'arranties: anB ot?er implication t?at t?ese /arrantB Disclaimers maB ?a%e is %oid and ?as no effect on t?e
meanin+ of t?is License$
2 V-?+#64/ C9'F4.:
You maB copB and distribute t?e Document in anB medium, eit?er commerciallB or noncommerciallB, pro%ided t?at t?is
License, t?e copBri+?t notices, and t?e license notice saBin+ t?is License applies to t?e Document are reproduced in all
copies, and t?at Bou add no ot?er conditions '?atsoe%er to t?ose of t?is License$ You maB not use tec?nical measures to
obstruct or control t?e readin+ or furt?er copBin+ of t?e copies Bou maFe or distribute$ 9o'e%er, Bou maB accept
compensation in eEc?an+e for copies$ *f Bou distribute a lar+e enou+? number of copies Bou must also follo' t?e
conditions in section A$
You maB also lend copies, under t?e same conditions stated abo%e, and Bou maB publiclB displaB copies$
A C9'F4.: 4. !%#.646F
*f Bou publis? printed copies Cor copies in media t?at commonlB ?a%e printed co%ersD of t?e Document, numberin+
more t?an #00, and t?e Document's license notice requires 6o%er :eEts, Bou must enclose t?e copies in co%ers t?at
carrB, clearlB and le+iblB, all t?ese 6o%er :eEts: FrontG6o%er :eEts on t?e front co%er, and .acFG6o%er :eEts on t?e
bacF co%er$ .ot? co%ers must also clearlB and le+iblB identifB Bou as t?e publis?er of t?ese copies$ :?e front co%er must
present t?e full title 'it? all 'ords of t?e title equallB prominent and %isible$ You maB add ot?er material on t?e co%ers
in addition$ 6opBin+ 'it? c?an+es limited to t?e co%ers, as lon+ as t?eB preser%e t?e title of t?e Document and satisfB
t?ese conditions, can be treated as %erbatim copBin+ in ot?er respects$
*f t?e required teEts for eit?er co%er are too %oluminous to fit le+iblB, Bou s?ould put t?e first ones listed Cas manB as fit
reasonablBD on t?e actual co%er, and continue t?e rest onto adIacent pa+es$
*f Bou publis? or distribute @paque copies of t?e Document numberin+ more t?an #00, Bou must eit?er include a
mac?ineGreadable :ransparent copB alon+ 'it? eac? @paque copB, or state in or 'it? eac? @paque copB a computerG
net'orF location from '?ic? t?e +eneral net'orFGusin+ public ?as access to do'nload usin+ publicGstandard net'orF
protocols a complete :ransparent copB of t?e Document, free of added material$ *f Bou use t?e latter option, Bou must
taFe reasonablB prudent steps, '?en Bou be+in distribution of @paque copies in quantitB, to ensure t?at t?is :ransparent
copB 'ill remain t?us accessible at t?e stated location until at least one Bear after t?e last time Bou distribute an @paque
copB CdirectlB or t?rou+? Bour a+ents or retailersD of t?at edition to t?e public$
*t is requested, but not required, t?at Bou contact t?e aut?ors of t?e Document 'ell before redistributin+ anB lar+e
number of copies, to +i%e t?em a c?ance to pro%ide Bou 'it? an updated %ersion of t?e Document$
B /9>4(4C#649.S
You maB copB and distribute a ;odified "ersion of t?e Document under t?e conditions of sections 2 and A abo%e,
pro%ided t?at Bou release t?e ;odified "ersion under preciselB t?is License, 'it? t?e ;odified "ersion fillin+ t?e role
of t?e Document, t?us licensin+ distribution and modification of t?e ;odified "ersion to '?oe%er possesses a copB of
it$ *n addition, Bou must do t?ese t?in+s in t?e ;odified "ersion:
# !se in t?e :itle 1a+e Cand on t?e co%ers, if anBD a title distinct from t?at of t?e Document, and from t?ose of
pre%ious %ersions C'?ic? s?ould, if t?ere 'ere anB, be listed in t?e 9istorB section of t?e DocumentD$ You maB
use t?e same title as a pre%ious %ersion if t?e ori+inal publis?er of t?at %ersion +i%es permission$
+ List on t?e :itle 1a+e, as aut?ors, one or more persons or entities responsible for aut?ors?ip of t?e
modifications in t?e ;odified "ersion, to+et?er 'it? at least fi%e of t?e principal aut?ors of t?e Document Call
of its principal aut?ors, if it ?as fe'er t?an fi%eD, unless t?eB release Bou from t?is requirement$
C &tate on t?e :itle pa+e t?e name of t?e publis?er of t?e ;odified "ersion, as t?e publis?er$
> 1reser%e all t?e copBri+?t notices of t?e Document$
- 4dd an appropriate copBri+?t notice for Bour modifications adIacent to t?e ot?er copBri+?t notices$
( *nclude, immediatelB after t?e copBri+?t notices, a license notice +i%in+ t?e public permission to use t?e
;odified "ersion under t?e terms of t?is License, in t?e form s?o'n in t?e 4ddendum belo'$
: 1reser%e in t?at license notice t?e full lists of *n%ariant &ections and required 6o%er :eEts +i%en in t?e
Document's license notice$
5 *nclude an unaltered copB of t?is License$
4 1reser%e t?e section Entitled ,9istorB,, 1reser%e its :itle, and add to it an item statin+ at least t?e title, Bear,
ne' aut?ors, and publis?er of t?e ;odified "ersion as +i%en on t?e :itle 1a+e$ *f t?ere is no section Entitled
,9istorB, in t?e Document, create one statin+ t?e title, Bear, aut?ors, and publis?er of t?e Document as +i%en
on its :itle 1a+e, t?en add an item describin+ t?e ;odified "ersion as stated in t?e pre%ious sentence$
J 1reser%e t?e net'orF location, if anB, +i%en in t?e Document for public access to a :ransparent copB of t?e
Document, and liFe'ise t?e net'orF locations +i%en in t?e Document for pre%ious %ersions it 'as based on$
:?ese maB be placed in t?e ,9istorB, section$ You maB omit a net'orF location for a 'orF t?at 'as publis?ed
at least four Bears before t?e Document itself, or if t?e ori+inal publis?er of t?e %ersion it refers to +i%es
permission$
D For anB section Entitled ,4cFno'led+ements, or ,Dedications,, 1reser%e t?e :itle of t?e section, and
preser%e in t?e section all t?e substance and tone of eac? of t?e contributor acFno'led+ements and/or
dedications +i%en t?erein$
* 1reser%e all t?e *n%ariant &ections of t?e Document, unaltered in t?eir teEt and in t?eir titles$ &ection
numbers or t?e equi%alent are not considered part of t?e section titles$
/ Delete anB section Entitled ,Endorsements,$ &uc? a section maB not be included in t?e ;odified "ersion$
. Do not retitle anB eEistin+ section to be Entitled ,Endorsements, or to conflict in title 'it? anB *n%ariant
&ection$
9 1reser%e anB /arrantB Disclaimers$
*f t?e ;odified "ersion includes ne' frontGmatter sections or appendices t?at qualifB as &econdarB &ections and
contain no material copied from t?e Document, Bou maB at Bour option desi+nate some or all of t?ese sections as
in%ariant$ :o do t?is, add t?eir titles to t?e list of *n%ariant &ections in t?e ;odified "ersion's license notice$ :?ese titles
must be distinct from anB ot?er section titles$
You maB add a section Entitled ,Endorsements,, pro%ided it contains not?in+ but endorsements of Bour ;odified
"ersion bB %arious partiesGGfor eEample, statements of peer re%ie' or t?at t?e teEt ?as been appro%ed bB an or+ani)ation
as t?e aut?oritati%e definition of a standard$
You maB add a passa+e of up to fi%e 'ords as a FrontG6o%er :eEt, and a passa+e of up to 25 'ords as a .acFG6o%er
:eEt, to t?e end of t?e list of 6o%er :eEts in t?e ;odified "ersion$ @nlB one passa+e of FrontG6o%er :eEt and one of
.acFG6o%er :eEt maB be added bB Cor t?rou+? arran+ements made bBD anB one entitB$ *f t?e Document alreadB includes
a co%er teEt for t?e same co%er, pre%iouslB added bB Bou or bB arran+ement made bB t?e same entitB Bou are actin+ on
be?alf of, Bou maB not add anot?er( but Bou maB replace t?e old one, on eEplicit permission from t?e pre%ious publis?er
t?at added t?e old one$
:?e aut?orCsD and publis?erCsD of t?e Document do not bB t?is License +i%e permission to use t?eir names for publicitB
for or to assert or implB endorsement of anB ;odified "ersion$
G C9/+4.4.: >9C%/-.6S
You maB combine t?e Document 'it? ot?er documents released under t?is License, under t?e terms defined in section 2
abo%e for modified %ersions, pro%ided t?at Bou include in t?e combination all of t?e *n%ariant &ections of all of t?e
ori+inal documents, unmodified, and list t?em all as *n%ariant &ections of Bour combined 'orF in its license notice, and
t?at Bou preser%e all t?eir /arrantB Disclaimers$
:?e combined 'orF need onlB contain one copB of t?is License, and multiple identical *n%ariant &ections maB be
replaced 'it? a sin+le copB$ *f t?ere are multiple *n%ariant &ections 'it? t?e same name but different contents, maFe t?e
title of eac? suc? section unique bB addin+ at t?e end of it, in parent?eses, t?e name of t?e ori+inal aut?or or publis?er
of t?at section if Fno'n, or else a unique number$ ;aFe t?e same adIustment to t?e section titles in t?e list of *n%ariant
&ections in t?e license notice of t?e combined 'orF$
*n t?e combination, Bou must combine anB sections Entitled ,9istorB, in t?e %arious ori+inal documents, formin+ one
section Entitled ,9istorB,( liFe'ise combine anB sections Entitled ,4cFno'led+ements,, and anB sections Entitled
,Dedications,$ You must delete all sections Entitled ,Endorsements$,
H C9**-C649.S 9( >9C%/-.6S
You maB maFe a collection consistin+ of t?e Document and ot?er documents released under t?is License, and replace
t?e indi%idual copies of t?is License in t?e %arious documents 'it? a sin+le copB t?at is included in t?e collection,
pro%ided t?at Bou follo' t?e rules of t?is License for %erbatim copBin+ of eac? of t?e documents in all ot?er respects$
You maB eEtract a sin+le document from suc? a collection, and distribute it indi%iduallB under t?is License, pro%ided
Bou insert a copB of t?is License into t?e eEtracted document, and follo' t?is License in all ot?er respects re+ardin+
%erbatim copBin+ of t?at document$
7 #::?-:#649. W465 4.>-'-.>-.6 W9?DS
4 compilation of t?e Document or its deri%ati%es 'it? ot?er separate and independent documents or 'orFs, in or on a
%olume of a stora+e or distribution medium, is called an ,a++re+ate, if t?e copBri+?t resultin+ from t?e compilation is
not used to limit t?e le+al ri+?ts of t?e compilation's users beBond '?at t?e indi%idual 'orFs permit$ /?en t?e
Document is included in an a++re+ate, t?is License does not applB to t?e ot?er 'orFs in t?e a++re+ate '?ic? are not
t?emsel%es deri%ati%e 'orFs of t?e Document$
*f t?e 6o%er :eEt requirement of section A is applicable to t?ese copies of t?e Document, t?en if t?e Document is less
t?an one ?alf of t?e entire a++re+ate, t?e Document's 6o%er :eEts maB be placed on co%ers t?at bracFet t?e Document
'it?in t?e a++re+ate, or t?e electronic equi%alent of co%ers if t?e Document is in electronic form$ @t?er'ise t?eB must
appear on printed co%ers t?at bracFet t?e '?ole a++re+ate$
I 6?#.S*#649.
:ranslation is considered a Find of modification, so Bou maB distribute translations of t?e Document under t?e terms of
section 2$ Replacin+ *n%ariant &ections 'it? translations requires special permission from t?eir copBri+?t ?olders, but
Bou maB include translations of some or all *n%ariant &ections in addition to t?e ori+inal %ersions of t?ese *n%ariant
&ections$ You maB include a translation of t?is License, and all t?e license notices in t?e Document, and anB /arrantB
Disclaimers, pro%ided t?at Bou also include t?e ori+inal En+lis? %ersion of t?is License and t?e ori+inal %ersions of
t?ose notices and disclaimers$ *n case of a disa+reement bet'een t?e translation and t?e ori+inal %ersion of t?is License
or a notice or disclaimer, t?e ori+inal %ersion 'ill pre%ail$
*f a section in t?e Document is Entitled ,4cFno'led+ements,, ,Dedications,, or ,9istorB,, t?e requirement Csection 2D
to 1reser%e its :itle Csection #D 'ill tBpicallB require c?an+in+ t?e actual title$
J 6-?/4.#649.
You maB not copB, modifB, sublicense, or distribute t?e Document eEcept as eEpresslB pro%ided for under t?is License$
4nB ot?er attempt to copB, modifB, sublicense or distribute t?e Document is %oid, and 'ill automaticallB terminate Bour
ri+?ts under t?is License$ 9o'e%er, parties '?o ?a%e recei%ed copies, or ri+?ts, from Bou under t?is License 'ill not
?a%e t?eir licenses terminated so lon+ as suc? parties remain in full compliance$
@0 (%6%?- ?-V4S49.S 9( 654S *4C-.S-
:?e Free &oft'are Foundation maB publis? ne', re%ised %ersions of t?e G! Free Documentation License from time
to time$ &uc? ne' %ersions 'ill be similar in spirit to t?e present %ersion, but maB differ in detail to address ne'
problems or concerns$ &ee ?ttp://'''$+nu$or+/copBleft/$
Eac? %ersion of t?e License is +i%en a distin+uis?in+ %ersion number$ *f t?e Document specifies t?at a particular
numbered %ersion of t?is License ,or anB later %ersion, applies to it, Bou ?a%e t?e option of follo'in+ t?e terms and
conditions eit?er of t?at specified %ersion or of anB later %ersion t?at ?as been publis?ed Cnot as a draftD bB t?e Free
&oft'are Foundation$ *f t?e Document does not specifB a %ersion number of t?is License, Bou maB c?oose anB %ersion
e%er publis?ed Cnot as a draftD bB t?e Free &oft'are Foundation$
9o' to use t?is License for Bour documents
:o use t?is License in a document Bou ?a%e 'ritten, include a copB of t?e License in t?e document and put t?e
follo'in+ copBri+?t and license notices Iust after t?e title pa+e:
6opBri+?t CcD YE4R Y@!R 4;E$
1ermission is +ranted to copB, distribute and/or modifB t?is document
under t?e terms of t?e G! Free Documentation License, "ersion #$2
or anB later %ersion publis?ed bB t?e Free &oft'are Foundation(
'it? no *n%ariant &ections, no FrontG6o%er :eEts, and no .acFG6o%er
:eEts$ 4 copB of t?e license is included in t?e section entitled ,G!
Free Documentation License,$
*f Bou ?a%e *n%ariant &ections, FrontG6o%er :eEts and .acFG6o%er :eEts, replace t?e ,'it?$$$:eEts$, line 'it? t?is:
'it? t?e *n%ariant &ections bein+ L*&: :9E*R :*:LE&, 'it? t?e
FrontG6o%er :eEts bein+ L*&:, and 'it? t?e .acFG6o%er :eEts bein+ L*&:$
*f Bou ?a%e *n%ariant &ections 'it?out 6o%er :eEts, or some ot?er combination of t?e t?ree, mer+e t?ose t'o
alternati%es to suit t?e situation$
*f Bour document contains nontri%ial eEamples of pro+ram code, 'e recommend releasin+ t?ese eEamples in parallel
under Bour c?oice of free soft'are license, suc? as t?e G! General 1ublic License, to permit t?eir use in free
soft'are$