Programmazione client side con JavaScript

Laboratorio 5
– Programmazione client side con JavaScript –
Laboratorio di Tecnologie Web
Laurea in Informatica
Università degli Studi di Padova
12 marzo 2013
1
Esercizio
Partendo dal form preparato per l’esercitazione precedente, utilizzare JavaScript
per migliorare l’inserimento dei dati richiesti.
L’intera esercitazione si può suddividere in tre sezioni: 1. suggerimenti sul
testo da inserire nei campi; 2. validazione del testo inserito; 3. creazione wizard. Si
assume che l’HTML generi il seguente form:
1
1.1
Suggerimenti nei form
Per ciascun campo, si richiede di inserire un testo di “suggerimento”. Si richiede,
inoltre, che tale suggerimento appaia chiaramente come tale (per non confondere
l’utente). Ad esempio:
Dopo la valorizzazione dei due campi con il titolo in italiano ed in inglese, il form
apparirà come:
1.2
Validazione testo inserito
Effettuare gli opportuni controlli per la validazione del testo inserito nei vari campi
del form. In caso di mancata validazione, segnalare adeguatamente il problema
all’utente. Ad esempio, se viene inserito un valore non numerico al posto del
numero della stagione, e se viene inserito un testo vuoto per uno dei titoli, ci si
aspetta un risultato simile a:
1.3
Creazione wizard
Come notato nella prima immagine, i vari campi richiesti sono partizionati in
tre fieldset. Scopo dell’ultima parte dell’esercitazione è costruire un wizard
formato da tre “pagine”, una per ciascun fieldset.
La prima pagina conterrà:
2
La seconda pagina conterrà:
La terza ed ultima pagina conterrà:
Attenzione
1. l’HTML può essere manipolato solamente tramite JavaScript (se JavaScript
è disabilitato, l’HTML è esattamente lo stesso che genera il form senza
wizard);
2. è possibile navigare fra le pagine, anche “tornando indietro” (ove possibile);
3. è possibile passare alla pagina successiva solamente dopo aver verificato la
corretta valorizzazione dei vari campi (invece, si può tornare indietro in ogni
caso);
4. si consiglia la manipolazione del DOM tramite direttive JavaScript (si sconsiglia l’uso di innerHTML, in favore di document.createElement,
appendChild, . . . ).
3