Sommario

Contenuti del libro
Parte I
JavaCosa? Dove, come e perché di JavaScript
JavaScript è più di ciò che pensate . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Sviluppare in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Sintassi e istruzioni JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Lavorare con le variabili e i tipi di dati . . . . . . . . . . . . . . . . . . . . . . 61
Utilizzare operatori ed espressioni . . . . . . . . . . . . . . . . . . . . . . . . . 99
1
2
3
4
5
Parte II
Applicare JavaScript
Controllare il flusso con strutture condizionali e loop . . . . . . . .
Lavorare con le funzioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Gli oggetti di JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Il Browser Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6
7
8
9
Parte III Integrare
10
11
12
13
14
15
16
17
18
19
20
JavaScript nella progettazione
Il Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Gli eventi di JavaScript e il browser . . . . . . . . . . . . . . . . . . . . . . .
Utilizzare i cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Lavorare con le immagini in JavaScript . . . . . . . . . . . . . . . . . . . .
Utilizzare JavaScript con i web form . . . . . . . . . . . . . . . . . . . . . . .
JavaScript e CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Gestione degli errori in JavaScript . . . . . . . . . . . . . . . . . . . . . . . .
Parte IV AJAX
119
147
163
181
e l’integrazione lato-server
203
223
239
253
275
297
313
329
JavaScript e XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Applicazioni JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Un tocco di AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Qualche approfondimento su AJAX . . . . . . . . . . . . . . . . . . . . . . .
331
341
345
367
VII
VIII
Contenuti del libro
Parte V
jQuery
21
22
23
Introduzione alle librerie e ai framework JavaScript . . . . . . . . . 383
Introduzione a jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Effetti e plug-in di jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
Sommario
Ringraziamenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XVII
Introduzione a JavaScript Passo per Passo,
Seconda Edizione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XIX
A chi è rivolto il libro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XX
Convenzioni e caratteristiche del libro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XX
Contenuto di supporto al libro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XXI
Scaricare il contenuto di supporto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XXI
Requisiti di sistema minimi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XXII
Parte I JavaCosa? Dove, come e perché di JavaScript
1
JavaScript è più di ciò che pensate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Breve storia di JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
L’arrivo di Internet Explorer 3.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
E poi venne ECMAScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Molti standard... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Il DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Cosa contiene un programma JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Posizione di JavaScript nella pagina web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Cosa JavaScript può fare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Cosa JavaScript non può fare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
JavaScript non può essere forzato su un client . . . . . . . . . . . . . . . . . . . . . . . 10
JavaScript non può garantire la sicurezza dei dati . . . . . . . . . . . . . . . . . . . . 11
JavaScript non può attraversare i domini . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
JavaScript non interagisce con il server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Suggerimenti per l’utilizzo di JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Dove mettere JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Quali browser dovrebbe supportare il sito . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Novità di ECMAScript versione 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Nuovi metodi per gli array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Nuovi controlli sulle proprietà degli oggetti . . . . . . . . . . . . . . . . . . . . . . . . . 16
Nuovo oggetto JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Modifiche all’oggetto Date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Una nuova modalità strict . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Supporto dei browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2
Sviluppare in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Opzioni di sviluppo per JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Configurare l’ambiente di lavoro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Scrivere JavaScript con Visual Studio 2010 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Il vostro primo progetto web (e JavaScript) con
Visual Studio 2010 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Utilizzare file JavaScript esterni con Visual Studio 2010 . . . . . . . . . . . . . . . 28
IX
X
Sommario
Scrivere JavaScript con Eclipse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Il vostro primo progetto web (e JavaScript) con Eclipse . . . . . . . . . . . . . . . 33
Utilizzare file JavaScript esterni con Eclipse . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Scrivere JavaScript senza un IDE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Il vostro primo progetto web (e JavaScript) con Blocco note . . . . . . . . . . . 41
Utilizzare file JavaScript esterni senza un IDE . . . . . . . . . . . . . . . . . . . . . . . . 44
Eseguire il debug di JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
3
Sintassi e istruzioni JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Un po’ d’ordine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Sensibilità alle maiuscole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Spazio bianco . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Commenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Punto e virgola . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Interruzioni di riga . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Posizionare il codice JavaScript correttamente . . . . . . . . . . . . . . . . . . . . . . . 53
Istruzioni JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Cos’è un’istruzione? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
I due tipi di istruzioni JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Parole riservate in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Un rapido sguardo alle funzioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
La nuova modalità strict di JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
4
Lavorare con le variabili
e i tipi di dati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Tipi di dati in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Lavorare con i numeri . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Lavorare con le stringhe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Boolean . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Null . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Undefined . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Oggetti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Definire e utilizzare le variabili . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Dichiarare variabili . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Tipi di variabile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Area di validità delle variabili . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
L’oggetto Date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Utilizzare l’oggetto RegExp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
La sintassi delle espressioni regolari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Riferimenti e garbage collection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Comprendere le conversioni di tipo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Conversioni di numeri . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Conversioni di stringhe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Conversioni di boolean . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Sommario
5
Utilizzare operatori ed espressioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Conoscere gli operatori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Operatori additivi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Operatori di moltiplicazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Operatori bitwise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Operatori di uguaglianza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Operatori relazionali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
L’operatore in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
L’operatore instanceof . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Operatori unari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Incrementare e decrementare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Convertire in un numero con il segno più . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Creare un numero negativo con il segno meno . . . . . . . . . . . . . . . . . . . . . 107
Negare con not bitwise e not logico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Utilizzare l’operatore delete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Restituire tipi di variabili con l’operatore typeof . . . . . . . . . . . . . . . . . . . . . 111
L’operatore void . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Operatori di assegnazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
L’operatore virgola . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Parte II Applicare JavaScript
6
Controllare il flusso con strutture condizionali e loop . . . . . . . . . . . . . . . . 119
If (se e come) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Sintassi delle istruzioni if . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
La funzione prompt() in Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Condizioni composte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Utilizzare le istruzioni else if e else . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Lavorare con i condizionali ternari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Eseguire test con switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Eseguire loop con while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
L’istruzione while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
L’istruzione do...while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Utilizzare i loop for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Il loop for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Il loop for...in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Il loop for each...in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Convalidare i form tramite condizionali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
7
Lavorare con le funzioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Cos’è una funzione? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Argomenti delle funzioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Validità delle variabili rivisitata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Valori return . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Ulteriori informazioni sulla chiamata di funzioni . . . . . . . . . . . . . . . . . . . . 152
XI
XII
Sommario
Funzioni anonime o senza nome (letterali funzione) . . . . . . . . . . . . . . . . . 154
Closure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Metodi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Uno sguardo alle funzioni di dialogo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
8
Gli oggetti di JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Sviluppo a oggetti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Oggetti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Proprietà . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Metodi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Classi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Creare oggetti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Aggiungere proprietà agli oggetti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Aggiungere metodi agli oggetti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Ulteriori informazioni sugli array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
La proprietà length . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Metodi di array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Sfruttare gli oggetti predefiniti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
L’oggetto Global . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
9
Il Browser Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Introduzione al browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
La gerarchia del browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Eventi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Il senso di self . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Ottenere informazioni sullo schermo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Utilizzare l’oggetto navigator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
L’oggetto location . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
L’oggetto history . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Parte III Integrare JavaScript nella progettazione
10
Il Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Definizione del Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
DOM Level 0: il DOM legacy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
DOM Level 1 e DOM Level 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Il DOM come struttura ad albero . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Lavorare con i nodi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Recuperare elementi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Recuperare elementi tramite l’ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Recuperare elementi tramite il nome del tag . . . . . . . . . . . . . . . . . . . . . . . 210
Collection in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Lavorare con i pari livello . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Sommario
Lavorare con gli attributi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Visualizzare gli attributi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Impostare gli attributi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Creare elementi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Aggiungere testo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Aggiungere un elemento e impostare un ID . . . . . . . . . . . . . . . . . . . . . . . . 219
Eliminare elementi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
11
Gli eventi di JavaScript e il browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Comprendere gli eventi della finestra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
I modelli di eventi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Un gestore di evento generico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Rilevare informazioni sul visitatore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Un breve sguardo alla proprietà userAgent . . . . . . . . . . . . . . . . . . . . . . . . 229
Test delle funzionalità . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Mantenere il JavaScript lontano dai vecchi browser . . . . . . . . . . . . . . . . . 231
Altre proprietà e metodi di navigator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Aprire, chiudere e ridimensionare le finestre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Best practice per l’apertura delle finestre . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Aprire nuove schede: non serve JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . 235
Ridimensionare e spostare le finestre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Timer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
12
Utilizzare i cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Comprendere i cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Creare cookie con JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Esaminare un semplice cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Impostare la data di scadenza del cookie . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Impostare il percorso del cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Impostare il dominio del cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Lavorare con cookie sicuri . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Leggere i cookie con JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Rimuovere i cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
13
Lavorare con le immagini
in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Utilizzare i rollover immagine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Un rollover semplice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Rollover moderni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Precaricare le immagini . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Creare presentazioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Creare una presentazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Spostarsi all’indietro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Utilizzare le mappe immagine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
XIII
XIV
Sommario
14
Utilizzare JavaScript con i web form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
JavaScript e i web form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Ottenere i dati dei form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Lavorare con le informazioni dei form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Lavorare con le caselle di selezione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Lavorare con le caselle di controllo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Lavorare con i pulsanti di opzione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Preconvalidare i dati dei form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Hacking della convalida JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Convalidare un campo di testo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
15
JavaScript e CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Cos’è CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Utilizzare proprietà e selettori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
Applicare CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
La relazione fra JavaScript e CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
Impostare gli stili degli elementi tramite l’ID . . . . . . . . . . . . . . . . . . . . . . . 300
Impostare gli stili degli elementi tramite il tipo . . . . . . . . . . . . . . . . . . . . . 304
Impostare le classi CSS con JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
Recuperare gli stili degli elementi con JavaScript . . . . . . . . . . . . . . . . . . . . 307
Modificare i fogli di stile con JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
16
Gestione degli errori in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Due modi per gestire gli errori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Utilizzare try/catch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
E finally... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
Utilizzare l’evento onerror . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Associare onerror all’oggetto window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Ignorare gli errori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
Associare onerror all’oggetto image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
Parte IV AJAX e l’integrazione lato-server
17
JavaScript e XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Utilizzare XML con JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Un esempio di documento XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Caricare un documento XML con JavaScript . . . . . . . . . . . . . . . . . . . . . . . . 332
Lavorare con dati XML da Excel 2007 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
Un’anteprima del futuro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
18
Applicazioni JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Componenti delle applicazioni JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
I magnifici tre: visualizzazione, comportamento e dati . . . . . . . . . . . . . . . 341
JavaScript e le interfacce web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Sommario
19
Un tocco di AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Introduzione ad AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
L’oggetto XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Istanziare l’oggetto XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Inviare una richiesta AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Elaborare una risposta AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Elaborare risposte XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354
Lavorare con JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Elaborare le intestazioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Utilizzare il metodo POST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Caso di studio: ricerca e aggiornamento live . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
20
Qualche approfondimento su AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
Creare una tabella HTML con XML e CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
Stilizzare la tabella con CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
Cambiare gli attributi di stile con JavaScript . . . . . . . . . . . . . . . . . . . . . . . . 371
Creare una casella a discesa dinamica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
Accettare input dall’utente e AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Parte V jQuery
21
Introduzione alle librerie e ai framework JavaScript . . . . . . . . . . . . . . . . . 383
Comprendere le librerie di programmazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383
Definire una propria libreria JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383
Librerie e framework JavaScript diffusi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385
jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385
Yahoo! User Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385
MooTools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
Altre librerie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
22
Introduzione a jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Presentazione di jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Utilizzare jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
I due download di jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Includere jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Sintassi jQuery di base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Collegare jQuery all’evento load . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
Utilizzare i selettori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
Selezionare elementi tramite l’ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
Selezionare elementi tramite la classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
Selezionare elementi tramite il tipo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
Selezionare elementi tramite la gerarchia . . . . . . . . . . . . . . . . . . . . . . . . . . 392
Selezionare elementi tramite la posizione . . . . . . . . . . . . . . . . . . . . . . . . . . 393
Selezionare elementi tramite un attributo . . . . . . . . . . . . . . . . . . . . . . . . . . 396
XV
XVI
Sommario
Selezionare elementi dei form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
Altri selettori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
Funzioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
Attraversare il DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398
Lavorare con gli attributi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
Modificare il testo e l’HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
Inserire elementi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404
Funzioni callback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404
Eventi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405
Associare e disassociare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405
Eventi del mouse e hover . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
Altri gestori di evento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
AJAX e jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
Errori e timeout AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
Inviare dati al server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
Altre opzioni importanti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
Altro codice jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
23
Effetti e plug-in di jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
Funzionalità centrali per migliorare l’usabilità . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
Effetti nativi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
Utilizzare jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
Drag-and-drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421
Accordion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
Ulteriori informazioni su jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427
Esercizi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428
Appendice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429
Indice analitico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459
L’autore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474