Concetti Fondamentali - Università della Basilicata

26/04/2005
Tecnologie di Sviluppo per il Web
JavaScript
Concetti Fondamentali
versione 2.1
Questo lavoro è concesso in uso secondo i termini di una licenza Creative Commons
(vedi ultima pagina)
G. Mecca – Università della Basilicata – [email protected]
JavaScript >> Sommario
Concetti Fondamentali
m Caratteristiche
del Linguaggio
m Struttura di uno Script
m Convalida dei Dati
G. Mecca - Tecnologie di Sviluppo per il Web
2
1
26/04/2005
JavaScript: Concetti Fondamentali >> Caratteristiche del Linguaggio
Caratteristiche del Linguaggio
m Caratteristiche
fondamentali
ðlinguaggio interpretato
ðlinguaggio debolmente tipato
ðlinguaggio “ibrido”
m Altri
linguaggi con caratteristiche simili
ðVBScript (ASP 3.0)
ðPHP
ðPerl
G. Mecca - Tecnologie di Sviluppo per il Web
3
JavaScript: Concetti Fondamentali >> Caratteristiche del Linguaggio
Caratteristiche del Linguaggio
m Linguaggio
interpretato
ðil codice non viene compilato
ðviene tipicamente immerso nel sorgente di
una pagina HTML
ðed eseguito da un interprete fornito a corredo
del browser sulla macchina client
ðprocesso di sviluppo e test accelerato
G. Mecca - Tecnologie di Sviluppo per il Web
4
2
26/04/2005
JavaScript: Concetti Fondamentali >> Caratteristiche del Linguaggio
Caratteristiche del Linguaggio
m Linguaggio
debolmente tipato
ðle variabili vengono dichiarate senza
specificarne il tipo
ðuna variabile è uno spazio nella memoria che
può contenere valori di qualsiasi tipo
ðil linguaggio effettua conversioni frequenti di
tipo per confrontare i valori nelle espressioni
m Esempio
ðvar x, y; x = 10; y = “10”; // x==y è vero
G. Mecca - Tecnologie di Sviluppo per il Web
5
JavaScript: Concetti Fondamentali >> Caratteristiche del Linguaggio
Caratteristiche del Linguaggio
m Linguaggio
“ibrido”
ðlinguaggio essenzialmente procedurale
ðcodice fatto di funzioni
ðlimitate funzionalità orientate agli oggetti
m Essenzialmente
ðè possibile utilizzare classi predefinite
ðcreare nuovi oggetti di queste classi
ðmanipolare oggetti esistenti chiamandone i
metodi
G. Mecca - Tecnologie di Sviluppo per il Web
6
3
26/04/2005
JavaScript: Concetti Fondamentali >> Caratteristiche del Linguaggio
Modello degli Oggetti sul Client
fonte: Netscape’s JavaScript Guide
G. Mecca - Tecnologie di Sviluppo per il Web
7
JavaScript: Concetti Fondamentali >> Caratteristiche del Linguaggio
Caratteristiche del Linguaggio
m In
generale
ðlinguaggio pensato per lo sviluppo rapido di
applicazioni di piccole dimensioni
m Ma
ðnon è scalabile ad applicazioni di grandi
dimensioni
ðfacile introdurre errori
ðdifficile produrre codice modulare e di qualità
G. Mecca - Tecnologie di Sviluppo per il Web
8
4
26/04/2005
JavaScript: Concetti Fondamentali >> Struttura di uno Script
Struttura di uno Script
m Contenuto
di uno script JavaScript
ðsequenza di istruzioni
ðdue diverse categorie di istruzioni
m Funzioni
ðsottoprogrammi ordinari
m Istruzioni
a livello globale
ðriportate al di fuori di qualsiasi funzione
9
G. Mecca - Tecnologie di Sviluppo per il Web
JavaScript: Concetti Fondamentali >> Struttura di uno Script
Struttura di uno Script
m Semantica
dell’elemento script
ðil browser scarica l’eventuale codice
sorgente se questo è esterno
ðil codice a livello “globale” viene eseguito
appena viene incontrato dal browser
ðle funzioni devono essere richiamate
esplicitamente (tipicamente da “gestori di
eventi”)
>> immagini.html
G. Mecca - Tecnologie di Sviluppo per il Web
10
5
26/04/2005
JavaScript: Concetti Fondamentali >> Struttura di uno Script
Struttura di uno Script
m Un
esempio: Indovina il numero
ðun’applicazione JavaScript per giocare a
indovina il numero
m Molte
delle caratteristiche tipiche
ðvarie form nella pagina, che vengono
utilizzate anche per i messaggi
ðalcune variabili globali
ðvarie funzioni scatenate da eventi >> indovina.html
>> indovina.js
G. Mecca - Tecnologie di Sviluppo per il Web
11
JavaScript: Concetti Fondamentali >> Convalida dei Dati
Convalida dei Dati
m Un’applicazione
tipica di JavaScript
ðverifica dei dati forniti dall’utente ad
un’applicazione Web
m Esempio:
pagamento del bollo in linea
ðcodice fiscale
ðtarga
ðcilindrata
ðadesione a termini contrattuali
G. Mecca - Tecnologie di Sviluppo per il Web
12
6
26/04/2005
JavaScript: Concetti Fondamentali >> Convalida dei Dati
Convalida dei Dati
m La
situazione tipica
ðc’è un’applicazione (codice sul server)
ðall’utente viene inviata una form da riempire
attraverso il browser
ðviene fornito codice JavaScript per la
convalida (codice sul client)
ðil codice JavaScript verifica la correttezza dei
dati forniti prima che i dati vengano sottoposti
all’applicazione Web sul server
13
G. Mecca - Tecnologie di Sviluppo per il Web
JavaScript: Concetti Fondamentali >> Convalida dei Dati
Convalida dei Dati
submit
submit
richiesta +
parametri
browser
Server
Rete
HTTP
errori
risposta
codice
JavaScript
<html>
<form>
</form>
</html>
pagina HTML con form
+ JavaScript
(codice sul client)
G. Mecca - Tecnologie di Sviluppo per il Web
applicazione Web
(codice sul server)
>> esempioConvalida.html
>> IIS http://localhost/sviluppoWeb
14
7
26/04/2005
JavaScript: Concetti Fondamentali >> Convalida dei Dati
Convalida dei Dati
m Semantica
dei gestori di eventi
ðvengono eseguiti in corrispondenza di azioni
opportune che scatenano l’evento
es: click su un’ancora
ðpossono restituire al browser un valore
booleano
ðse il valore è true, l’azione viene gestita
normalmente; es: richiesta di URI
ðse il valore è false, l’azione viene ignorata
G. Mecca - Tecnologie di Sviluppo per il Web
15
JavaScript: Concetti Fondamentali >> Convalida dei Dati
Convalida dei Dati
m Nel
caso delle form
ðil gestore di eventi onSubmit esegue il codice
JavaScript di convalida dei dati
ðse non ci sono errori, restituisce true ed il
contenuto della form viene regolarmente
sottomesso all’applicazione Web
ðse ci sono errori, restituisce false e la form
non viene sottomessa
G. Mecca - Tecnologie di Sviluppo per il Web
16
8
26/04/2005
JavaScript: Concetti Fondamentali >> Convalida dei Dati
Convalida dei Dati
m Esempio
ðusiamo una funzione JavaScript “verifica”
che controlla se i dati della form sono corretti
<h2>Esempio di Convalida con JavaScript</h2>
<form
method="post"
action="provaPost.asp"
onsubmit="return verifica()">
...
</form>
>> esempioConvalida.html
G. Mecca - Tecnologie di Sviluppo per il Web
17
JavaScript: Concetti Fondamentali >> Convalida dei Dati
Convalida dei Dati
m La
tecnica standard
ðsi utilizza una variabile globale “errori”
ðla funzione verifica chiama ulteriori funzioni,
ciascuna delle quali controlla un possibile
errore
ðse c’è un errore, ritorna false ed aggiunge un
messaggio alla variabile “errori”
G. Mecca - Tecnologie di Sviluppo per il Web
18
9
26/04/2005
JavaScript: Concetti Fondamentali >> Convalida dei Dati
Convalida dei Dati
>> esempioConvalida.html
>> Lynx http://localhost/corsi
m Attenzione
ðil meccanismo non è per niente affidabile
ðse il browser non supporta JavaScript, la
convalida non viene effettuata
ðal server arrivano dati scorretti
m Di
conseguenza
ðla convalida con JavaScript deve essere
vista come una funzionalità aggiuntiva,
utilizzabile solo da alcuni utenti
G. Mecca - Tecnologie di Sviluppo per il Web
19
JavaScript: Concetti Fondamentali >> Convalida dei Dati
Convalida dei Dati
m La
corretta metodologia di convalida
ðè sempre indispensabile convalidare i dati
dell’utente nell’applicazione Web sul server
ðin alcuni casi può essere utile effettuare la
convalida ANCHE sul client con JavaScript
m Vantaggi
ðl’interazione con l’utente è più immediata
ðsi riduce il numero di richieste errate al
server (riduzione dell’occupazione di banda)
G. Mecca - Tecnologie di Sviluppo per il Web
20
10
26/04/2005
JavaScript: Concetti Fondamentali >> Sommario
Riassumendo
m Caratteristiche
del Linguaggio
m Struttura di uno Script
m Convalida dei Dati
G. Mecca - Tecnologie di Sviluppo per il Web
21
Termini della Licenza
Termini della Licenza
m
This work is licensed under the Creative Commons AttributionShareAlike License. To view a copy of this license, visit
http://creativecommons.org/licenses/by-sa/1.0/ or send a letter to
Creative Commons, 559 Nathan Abbott Way, Stanford, California
94305, USA.
m
Questo lavoro viene concesso in uso secondo i termini della
licenza “Attribution-ShareAlike” di Creative Commons. Per ottenere
una copia della licenza, è possibile visitare
http://creativecommons.org/licenses/by-sa/1.0/ oppure inviare una
lettera all’indirizzo Creative Commons, 559 Nathan Abbott Way,
Stanford, California 94305, USA.
G. Mecca - Tecnologie di Sviluppo per il Web
22
11