testo - labinf - Politecnico di Torino

Programmazione in ambienti distribuiti
(01FQTCX, 02HDFCX, 01FELCX)
AA 2007-2008, Esercitazione di laboratorio n. 4
Introduzione
Per scrivere file HTML occorre usare un normale editor di testo (es. Notepad, Blocco appunti,
GVIM). Il file può avere indifferentemente estensione .HTM o .HTML.
Se le pagine sono di tipo statico e sono scritte correttamente con link relativi, allora è possibile
posizionarle in una qualunque cartella del filesystem e navigare direttamente aprendole con un
qualunque browser oppure installarle su un server web vero (vedere istruzioni sulle slide PADlab).
Se le pagine sono di tipo dinamico (server-side) allora è possibile visualizzarle solo se installate su
un server web vero e proprio.
Per tutti gli esercizi proposti, visualizzare sempre le pagine con almeno due browser diversi (es. IE
e Firefox/Mozilla) e cambiando la risoluzione dello schermo (es. 800x600, 1280x1024) al fine di
verificare la qualità grafica della soluzione realizzata.
Per scrivere file javascript occorre usare un normale editor di testo (es. Notepad, Blocco appunti).
Per codice javascript interno alle pagine html valgono le normali regole per l’estensione
(indifferentemente ".htm" o ".html") mentre per codice javascript esterno l'estensione tipica del file
in cui memorizzarlo è ".js".
Per effettuare il debugging negli esercizi proposti, usare gli strumenti di Firefox (alcuni standard,
alcuni aggiuntivi, installati come estensioni). Esempi:
•
per i form: tasto dx del mouse > View-Page Info > Forms e Web developer toolbar (da menù o
tasto dx del mouse) > Forms > View forms information
•
Web developer toolbar > CSS > Edit CSS (per verificare al volo le modifiche sui fogli CSS
•
Web developer toolbar > Miscellaneous > Edit HTML (per verificare al volo le modifiche su
HTML
•
DOM inspector (per verificare gli oggetti DOM ed i loro valori) e Javascript Debugger o
Firebug se installati; in alternative usare Javascript console
Esercizio 4.1
Sviluppare un insieme di pagine web personali, tra loro collegate mediante link:
•
una home page dello studente, coi suoi dati sintetici (nome, cognome, luogo e data di
nascita)
•
una pagina che contenga un sintetico CV
•
una pagina che contiene nomi e voti degli esami superati
Tutte le pagine devono contenere nella stessa posizione:
•
un menù che permetta di andare ad una qualunque delle tre (home, CV, voti)
•
un footer che identifichi l’autore e ne fornisca l’indirizzo mail
Si faccia attenzione ad usare quanto più possibile una formattazione logica ed indipendente dalle
dimensioni dello schermo su cui le pagine vengono visualizzate.
Si consiglia di creare prima le singole pagine e verificarne la funzionalità di base; solo
successivamente modificarle aggiungendo il menù comune.
Si usino sempre (quando possibile) link relativi e si inserisca anche qualche link a pagine esterne
pertinenti (es. al Politecnico di Torino, alla propria città di nascita).
Esercizio 4.2
Si implementi almeno una delle pagine dell’esercizio precedente tramite un sistema di
composizione di pagine HTML (ad esempio, Mozilla Composer oppure MS-Word salvando il
risultato in HTML).
Si confronti il codice HTML come quantità e qualità con quello generato a mano nell’esercizio 4.1.
Esercizio 4.3
Si controlli la correttezza di tutte le pagine generate negli esercizi precedenti sfruttando il servizio
di validazione del W3C
http://validator.w3.org
Si correggano eventuali errori e quando le pagine sono corrette si inserisca il logo di “HTML
valido” seguendo le istruzioni della pagina citata.
Esercizio 4.4
Modificare le pagine HTML sviluppate nell’esercizio 4.1 avendo cura di separare nettamente la
suddivisione logica del documento dalle direttive di visualizzazione, in particolare usando un foglio
di stile ed il pattern introdotto a lezione.
Ridefinire colori e caratteri del testo visualizzato per i diversi elementi della pagina (link,
intestazioni, testo di un paragrafo). Sottolineare opportunamente le diverse informazioni logiche
presenti nella pagina html (es. differenti colori e/o caratteri per testo normale o testo associato ad un
link, differenti colori e/o caratteri per un link visitato o un link non visitato).
Applicare in sequenza tre fogli di stile CSS diversi, ciascuno memorizzato in un proprio file
esterno. I CSS devono specificare almeno:
•
lo stile dei titoli (H1...H6) (si definisca un colore diverso per tutti i titoli e per H1 ridefinire
la dimensione del font: 20% in più del normale)
•
lo stile del body (font, il colore dei font e la loro grandezza; usare font senza grazia, per le
intestazioni delle tabelle usare lo stile italico)
•
specificare tre classi per il paragrafo (P), left, center e right per posizionare rispettivamente
il testo a sinistra, al centro o a destra
Nella pagina HTML si definiscano inoltre degli stili in modo che il colore dello sfondo e del testo di
tutti i link reagiscano in modo dinamico al passaggio del mouse.
Si controlli anche la correttezza della pagina HTML come indicato nell’esercizio 4.3 ed anche la
correttezza dei fogli di stile CSS mediante il seguente servizio di validazione:
http://jigsaw.w3.org/css-validator/
Si correggano eventuali errori e quando le pagine sono corrette si inseriscano i loghi di “HTML
valido” e “CSS valido” seguendo le istruzioni della pagina citata.
Esercizio 4.5
Creare una pagina web in grado di permettere l'inserimento di una stringa da parte dell’utente e
quindi – quando viene premuto un apposito pulsante – visualizzare la stringa in una finestra di popup con tutti i caratteri minuscoli.
Esercizio 4.6
Realizzare una pagina web con un menù a scelta multipla mutuamente esclusiva, in cui a ciascuna
scelta sia associato un colore (rosso, verde, giallo, bianco, nero). Effettuando una delle scelte
disponibili, il colore di sfondo della pagina deve immediatamente cambiare di conseguenza (es.
diventare rosso).
Esercizio 4.7
Creare una pagina web in grado di visualizzare la serie completa delle tabelline da uno a dieci,
visualizzandone opportunamente il risultato in una tabella.
Esercizio 4.8
Modificare l'esercizio precedente in modo da visualizzare la tabella pitagorica N x N, dove N è un
numero introdotto dall’utente tramite una finestra di prompt (window.prompt( )) che appare al
caricamento della pagina.
Esercizio 4.9
Creare un form in grado di accettare due numeri naturali come input e visualizzare tramite una
finestra di alert quale di questi valori sia il maggiore. Effettuare un appropriato controllo per
verificare che i dati inseriti appartengano all’insieme dei numeri naturali.
Esercizio 4.10
Creare un form in grado di accettare dieci numeri naturali come input e visualizzare tramite una
finestra di alert quale di questi valori sia il maggiore. Effettuare un appropriato controllo per
verificare che i dati inseriti appartengano alla categoria dei numeri naturali.
Esercizio 4.11
Scrivere una pagina HTML che contenga un form con i campi della figura 4.1 alla quale siano
applicati gli stili implementati nell’esercizio 4.4 con l’aggiunta di stili “inline” che definiscano:
•
colore dello sfondo del tasto submit
•
colore dello sfondo del menù a tendina
•
colore dello sfondo dei textfield
(Figura 4.1)
Si controlli la correttezza di tutte le pagine generate negli esercizi precedenti sfruttando i servizi di
validazione del W3C come indicato precedentemente.
Esercizio 4.12
Scrivere delle funzioni JavaScript che siano eseguite alla pressione del pulsante “Submit” del form
dell’esercizio 4.5 per controllare che:
•
il campo Nome non sia vuoto e sia lungo almeno 3 caratteri ed al massimo 30
•
il campo Cognome non sia vuoto e sia lungo almeno 3 caratteri ed al massimo 30
•
se inserito nel campo l’anno di nascita sia compreso tra il 1900 e il 2003
•
il mese di nascita sia compreso tra 1 e 12
•
nel campo e-mail (se contiene dati) sia presente il carattere @ non come primo carattere ed
almeno un . dopo di esso
•
se tra i radio button “Titolo di studio” è stato selezionato “Altro” allora il campo “Se altro,
specificare” non sia vuoto
Quando l’utente preme il apposito pulsante Submit, le informazioni introdotte devono essere
visualizzate in una finestra di pop-up nel formato:
•
NOME:<nome introdotto>
•
COGNOME:<cognome introdotto>
•
DATA DI NASCITA:<data di nascita introdotta>
•
E-MAIL:<e-mail introdotta>
•
COLORE PREFERITO:<colore preferito introdotto>
•
TITOLO DI STUDIO:<titolo di studio introdotto>
In caso di inserimento non conforme, deve comparire una finestra che segnali chiaramente l’errore
occorso e le informazioni non devono essere visualizzate nella pagina di pop-up.
Esercizio 4.13
Realizzare un form per l’inserimento delle quantità di tre diversi beni acquistabili: floppy-disk, CDR, DVD-R.
Quando l’utente preme un apposito pulsante la pagina deve calcolare il costo totale dei beni. Il
prezzo unitario relativo ai tre beni è rispettivamente: 0.5, 1.0 e 2.0 Euro.
Il risultato deve essere visualizzato in una casella apposita (chiamata "totale") presente nel form
medesimo. Prima del calcolo del totale è necessario verificare che i tre valori inseriti siano tutti
numerici ed in caso contrario segnalare l'errore con un’opportuna finestra di pop-up.
La pagina deve anche contenere un pulsante che permetta di cancellare in un colpo solo tutti i valori
introdotti.
Esercizio 4.14
Realizzare una pagina web simile a quella dell’esercizio 4.13 ma in cui il totale sia inizializzato a
zero e quindi aggiornato automaticamente ogni volta che viene introdotta una quantità corretta.