G. Mecca – Università della Basilicata – Tecnologie di Sviluppo per il Web JavaScript Concetti Fondamentali versione 2.0 Questo lavoro.

Presentazione sul tema: "G. Mecca – Università della Basilicata – Tecnologie di Sviluppo per il Web JavaScript Concetti Fondamentali versione 2.0 Questo lavoro."— Transcript della presentazione:

1 G. Mecca – Università della Basilicata – mecca@unibas.it Tecnologie di Sviluppo per il Web JavaScript Concetti Fondamentali versione 2.0 Questo lavoro è concesso in uso secondo i termini di una licenza Creative Commons (vedi ultima pagina)

2 2 G. Mecca - Tecnologie di Sviluppo per il Web Concetti Fondamentali m Introduzione m Storia di JavaScript m I Problemi di JavaScript m Il Modulo Form di XHTML m Il Modulo Script di XHTML 1.0 Strict m Il Modulo degli Eventi di XHTML m Caratteristiche del Linguaggio m Convalida dei Dati JavaScript >> Sommario

3 3 G. Mecca - Tecnologie di Sviluppo per il Web Introduzione m Che cosè JavaScript un linguaggio di programmazione pensato lo sviluppo di applicazioni Web m Come viene utilizzato normalmente codice utilizzato per rendere dinamiche le pagine HTML può essere utilizzato per offrire servizi interattivi attraverso pagine Web JavaScript >> Concetti Fondamentali >> Introduzione

4 4 G. Mecca - Tecnologie di Sviluppo per il Web Introduzione m Leggende metropolitane su JavaScript m JavaScript non è Java inizialmente: LiveScript operazione di marketing della Netscape m JavaScript non è semplice è un linguaggio di programmazione completo si tratta di una tecnologia complessa JavaScript >> Concetti Fondamentali >> Introduzione

5 5 G. Mecca - Tecnologie di Sviluppo per il Web Introduzione m Esecuzione di JavaScript sul client il codice è immerso nelle pagine HTML viene eseguito a seguito di eventi scatenati dallutente (es: click del mouse) il codice viene eseguito dal browser il codice accede ad oggetti predefiniti che rappresentano il contenuto della pagina (DOM), modificandone dinamicamente le proprietà ed il comportamento JavaScript >> Concetti Fondamentali >> Introduzione

6 6 G. Mecca - Tecnologie di Sviluppo per il Web Introduzione JavaScript >> Concetti Fondamentali >> Introduzione >> immagini.html >> indovina.html Server HTTP richiesta (URI) Rete risposta (pagina)... codice JavaScript browser

7 7 G. Mecca - Tecnologie di Sviluppo per il Web Storia di JavaScript m In realtà per capirlo è necessario vederne la storia m La storia di JavaScript introdotto dalla Netscape Netscape Navigator 2.0 (Client-Side JavaScript 1.0) successivamente 1.1, 1.2, 1.3 (Navigator 4.06) la Netscape lo vede come tecnologia strategica e introduce Server Side JavaScript la versione lato server non avrà molto successo JavaScript >> Concetti Fondamentali >> Storia di JavaScript

8 8 G. Mecca - Tecnologie di Sviluppo per il Web Storia di JavaScript m La Microsoft durante la guerra dei browser introduce la sua versione, incompatibile con JavaScript JScript 1.0 in Internet Explorer 3.0 successivamente JScript 1.1 anche la Microsoft ne introduce una versione sul lato del server con ASP, in alternativa a VBScript anche in questo caso con poco successo JavaScript >> Concetti Fondamentali >> Storia di JavaScript

9 9 G. Mecca - Tecnologie di Sviluppo per il Web Storia di JavaScript m La standardizzazione nel tentativo di standardizzare il linguaggio, è stato definito un nucleo comune sottoposto allECMA standardizzato nel 2000 m ECMA JavaScript linguaggio di programmazione neutro prevede pochi oggetti predefiniti (Array, Date, Math) JavaScript >> Concetti Fondamentali >> Storia di JavaScript

10 10 G. Mecca - Tecnologie di Sviluppo per il Web Storia di JavaScript m Estensioni dello standard Client Side JavaScript Server Side JavaScript entrambe includono ECMA JavaScript m Client Side JavaScript aggiunge oggetti rilevanti per il browser (DOM della pagina, finestra, menu, ecc.) m Server Side JavaScript aggiunge oggetti rilevanti per il server (database, sessioni ecc.) JavaScript >> Concetti Fondamentali >> Storia di JavaScript

11 11 G. Mecca - Tecnologie di Sviluppo per il Web Storia di JavaScript m DHTML combinazione di CSS, JavaScript e dellimplem. del DOM fornita dal browser animazione degli elementi della pagina analogo: GUI dei linguaggi di programmaz. m Implementazione del DOM insieme di oggetti InfoSet altri oggetti del browser (finestra, preferiti …) JavaScript >> Concetti Fondamentali >> Storia di JavaScript

12 12 G. Mecca - Tecnologie di Sviluppo per il Web I Problemi di JavaScript m Primo problema incompatibilità delle versioni m Cause di incompatibilità diverse versioni del linguaggio sviluppate da Netscape e Microsoft diverse versioni dei browser alcuni browser (es: Lynx) non supportano JavaScript per nulla m In generale non è possibile prevedere che tipo di supporto un generico browser offre per JavaScript JavaScript >> Concetti Fondamentali >> I Problemi di JavaScript

13 13 G. Mecca - Tecnologie di Sviluppo per il Web Dynamic HTML (DHTML) CSS >> Dettagli e Approfondimenti >> I Problemi di JavaScript

14 14 G. Mecca - Tecnologie di Sviluppo per il Web I Problemi di JavaScript m Secondo problema insicurezza m Cause di insicurezza linguaggio sul lato del client codice eseguito sulla macchina dellutente causa della diffusione di codice malevolo (virus) m In molti casi viene disabilitato dallutente o seriamente limitato nelle funzionalità JavaScript >> Concetti Fondamentali >> I Problemi di JavaScript

15 15 G. Mecca - Tecnologie di Sviluppo per il Web I Problemi di JavaScript m Di conseguenza seri problemi di accessibilità (>>) m In questo corso JavaScript non viene considerata una tecnologia fondamentale per lo sviluppo Web ne diamo una rapida panoramica ci concentriamo solo sulla versione lato client ci concentriamo su un utilizzo in particolare: la convalida dei dati dellutente JavaScript >> Concetti Fondamentali >> I Problemi di JavaScript

16 16 G. Mecca - Tecnologie di Sviluppo per il Web Caratteristiche del Linguaggio m Prima di entrare nel merito del linguaggio ci servono alcuni elementi mancanti m In particolare ci serve un modo per rendere interattive le pagine HTML e raccogliere dati da elaborare ci serve un modo per immergere il codice JavaScript nel codice XHTML ci serve un modo per intercettare gli eventi scatenati dallutente sullinterfaccia JavaScript >> Concetti Fondamentali >> Caratteristiche del Linguaggio

17 17 G. Mecca - Tecnologie di Sviluppo per il Web Caratteristiche del Linguaggio m Nuovi moduli di XHMTL il modulo form (XHTML Basic): consente di rendere interattive le pagine XHTML il modulo script (XHTML 1.0 Strict): consente di immergere codice eseguibile nellXHTML il modulo degli eventi (XHTML 1.0 Strict): consente di intercettare eventi scatenati dallutente m Nota gli script e gli eventi non fanno parte di XHTML Basic, che non prevede lutilizzo di script sul client JavaScript >> Concetti Fondamentali >> Caratteristiche del Linguaggio

18 18 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Basic Forms di XHTML JavaScript >> Concetti Fondamentali >> Il Modulo Form m Maschera (Form) modulo per la raccolta di dati forniti dallutente (es: nome, cognome, targa) m Utilizzo serve nelle applicazioni interattive lutente riempie la maschera sottomette la maschera unapplicazione analizza i dati forniti dallutente, li elabora e fornisce la risposta

19 19 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Basic Forms di XHTML JavaScript >> Concetti Fondamentali >> Il Modulo Form m Spazi per limmissione dei dati controlli della form m Esistono controlli di vario tipo immissione del testo immissione di password scelte da elenchi bottoni... >> form.html

20 20 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Basic Forms di XHTML JavaScript >> Concetti Fondamentali >> Il Modulo Form m Elemento principale della maschera elemento form – contiene i vari controlli elemento a livello di blocco attributo action (riferimento a URI); required attributo method (post o get); se manca è get m Esempio:...

21 21 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Basic Forms di XHTML JavaScript >> Concetti Fondamentali >> Il Modulo Form m Controlli elementi in linea input, select (option), textarea attributo name (nome del controllo) m Valore del controllo in alcuni casi specificabile dallutente in altri casi prefissato e selezionabile dallutente

22 22 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Basic Forms di XHTML JavaScript >> Concetti Fondamentali >> Il Modulo Form elementoattributomodello di contenuto formaction (URI), method (get | post) … (heading | block | list)* - ma non altre form inputname, size (Number), type ("text"* | "password" | "checkbox" | "radio" | "submit" | "reset" | "hidden" ), value … EMPTY selectname, size (Number), multiple (multiple)… option+ optionselected (selected), value …#PCDATA textareaname, cols (Number), rows (Number) … #PCDATA labelfor(#PCDATA | inline)

23 23 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Basic Forms di XHTML JavaScript >> Concetti Fondamentali >> Il Modulo Form m Attenzione esistono due diversi moduli per le form m Modulo Basic Forms di XHTML Basic è sufficiente per la maggior parte delle applicazioni m Modulo Forms di XHTML 1.0 Strict prevede altri controlli es: controllo di tipo file; serve per inviare file al server

24 24 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Basic Forms di XHTML JavaScript >> Concetti Fondamentali >> Il Modulo Form m Invio della form i valori specificati dallutente sono inviati allURI (applicazione) corrispondente allattributo action insieme di coppie = separate da & e codificati (URI encoding) m Esempio: targa=AB123DE&utente=Mario%20Rossi

25 25 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Basic Forms di XHTML JavaScript >> Concetti Fondamentali >> Il Modulo Form m Metodo di Invio metodo get: valori nella query string dellURI metodo post: valori nel corpo della richiesta HTTP m In generale per problemi di sicurezza (gli URI sono visibili) e di efficienza (gli URI non devono essere molto lunghi) è preferibile post

26 26 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Basic Forms di XHTML JavaScript >> Concetti Fondamentali >> Il Modulo Form m Attenzione le maschere sono uno strumento fondamentale per le applicazioni Web sia applicazioni sul lato client (JavaScript) sia sul lato server m Nel seguito della lezione studieremo il loro utilizzo con JavaScript m Successivamente: lato server

27 27 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Script di XHTML 1.0 Strict m Immergere script in una pagina XHTML il modulo di scripting di XHTML 1.0 Strict m Due elementi script: consente di specificare codice è un elemento in linea che può comparire nel corpo oppure nella testa (head) noscript: consente di specificare contenuto HTML per i browser che non sono in grado di eseguire il codice (compare nel corpo) JavaScript >> Concetti Fondamentali >> Il Modulo Script di XHTML

28 28 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Script di XHTML 1.0 Strict m Attributi dellelemento script type: per specificare il Content-Type es: text/javascript in precedenza: language (deprecato) src: il codice JavaScript può essere immerso allinterno dellelemento script oppure in un documento esterno di cui viene specificato lURI JavaScript >> Concetti Fondamentali >> Il Modulo Script di XHTML elementoattributomodello di contenuto scripttype, src (URI), … #PCDATA noscript...(heading | block | list )+

29 29 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Script di XHTML 1.0 Strict m Contenuto dellelemento script istruzioni a livello globale dichiarazioni di funzioni m Semantica dellelemento script il codice a livello globale viene eseguito appena viene incontrato dal browser le funzioni devono essere richiamate esplicitamente (tipicamente da gestori di eventi >>) JavaScript >> Concetti Fondamentali >> Il Modulo Script di XHTML

30 30 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Script di XHTML 1.0 Strict m Nota molto spesso il codice JavaScript è immerso in commenti HTML m Scopo nascondere il codice ai browser che non supportano JavaScript e che lo visualizzerebbero nella pagina JavaScript >> Concetti Fondamentali >> Il Modulo Script di XHTML >> immagini.html >> indovina.html

31 31 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Eventi di XHTML 1.0 Strict m Eventi azioni dellutente sullinterfaccia m Esempi eventi principali: selezione di un collegamento, selezione di un bottone altri eventi: modifica di un controllo in una form, sorvolo del mouse, messa a fuoco da parte del mouse, perdita della messa a fuoco JavaScript >> Concetti Fondamentali >> Il Modulo degli Eventi

32 32 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Eventi di XHTML 1.0 Strict m Programmazione basata su eventi gli eventi possono avvenire in qualsiasi istante, sulla base delle azioni dellutente il sistema (browser) è in grado di intercettarli quando avvengono il programmatore specifica gestori di eventi il sistema esegue il gestore di evento opportuno m Gestore di evento (event handler) blocco di codice da eseguire per gestire un certo evento JavaScript >> Concetti Fondamentali >> Il Modulo degli Eventi

33 33 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Eventi di XHTML 1.0 Strict m Nelle pagine Web gli eventi possono essere gestiti dal client oppure dal server m In questa lezione gestione da parte del client i gestori di eventi sono scritti in JavaScript vengono associati agli eventi attraverso opportuni attributi JavaScript >> Concetti Fondamentali >> Il Modulo degli Eventi

34 34 G. Mecca - Tecnologie di Sviluppo per il Web Eventi JavaScript >> Concetti Fondamentali >> Il Modulo degli Eventi >> immagini.html >> indovina.html... codice JavaScript browser click del mouse su unancora evento click sottomissione formevento submit gestore specificato utilizzando lattributo onsubmit per la form gestore specificato utilizzando lattributo onclick per lancora cambiamento nella visualizzazione...

35 35 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Eventi di XHTML 1.0 Strict m Principali attributi del modulo eventi onclick onsubmit m Altri attributi onchange onmouseover onfocus, onblur... JavaScript >> Concetti Fondamentali >> Il Modulo degli Eventi

36 36 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Eventi di XHTML 1.0 Strict m onclick attributo applicabile agli elementi a e agli input di tipo submit o reset (bottoni) specifica il codice JavaScript da eseguire se il collegamento o il bottone viene schiacciato m onsubmit attributo applicabile allelemento form specifica il codice JavaScript da eseguire se la maschera viene sottomessa JavaScript >> Concetti Fondamentali >> Il Modulo degli Eventi

37 37 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo Eventi di XHTML 1.0 Strict m Esempi Visualizza Immagine XHTML Visualizza Immagine XHTML Visualizza Immagine CSS Visualizza Immagine CSS m Esempi Inserisci il tuo nome: Inserisci il tuo nome: <div> </div></form> JavaScript >> Concetti Fondamentali >> Il Modulo degli Eventi

38 38 G. Mecca - Tecnologie di Sviluppo per il Web 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 JavaScript >> Concetti Fondamentali >> Caratteristiche del Linguaggio

39 39 G. Mecca - Tecnologie di Sviluppo per il Web 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 JavaScript >> Concetti Fondamentali >> Caratteristiche del Linguaggio

40 40 G. Mecca - Tecnologie di Sviluppo per il Web 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; var x, y; x = 10; y = 10; // x==y è vero JavaScript >> Concetti Fondamentali >> Caratteristiche del Linguaggio

41 41 G. Mecca - Tecnologie di Sviluppo per il Web 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 JavaScript >> Concetti Fondamentali >> Caratteristiche del Linguaggio

42 42 G. Mecca - Tecnologie di Sviluppo per il Web JavaScript >> Concetti Fondamentali >> Caratteristiche del Linguaggio Modello degli Oggetti sul Client fonte: Netscapes JavaScript Guide

43 43 G. Mecca - Tecnologie di Sviluppo per il Web 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à JavaScript >> Concetti Fondamentali >> Caratteristiche del Linguaggio

44 44 G. Mecca - Tecnologie di Sviluppo per il Web Caratteristiche del Linguaggio m Un esempio: Indovina il numero unapplicazione 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 JavaScript >> Concetti Fondamentali >> Caratteristiche del Linguaggio >> indovina.html >> indovina.js

45 45 G. Mecca - Tecnologie di Sviluppo per il Web Convalida dei Dati m Unapplicazione tipica di JavaScript verifica dei dati forniti dallutente ad unapplicazione Web m Esempio: pagamento del bollo in linea codice fiscale targa cilindrata adesione a termini contrattuali JavaScript >> Concetti Fondamentali >> Convalida dei Dati

46 46 G. Mecca - Tecnologie di Sviluppo per il Web Convalida dei Dati m La situazione tipica cè unapplicazione (codice sul server) allutente 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 allapplicazione Web sul server JavaScript >> Concetti Fondamentali >> Convalida dei Dati

47 47 G. Mecca - Tecnologie di Sviluppo per il Web Convalida dei Dati JavaScript >> Concetti Fondamentali >> Convalida dei Dati Server HTTP richiesta + parametri Rete risposta codice JavaScript browser applicazione Web (codice sul server) pagina HTML con form + JavaScript (codice sul client) submit errori >> esempioConvalida.html >> IIS http://localhost/corsi

48 48 G. Mecca - Tecnologie di Sviluppo per il Web Convalida dei Dati m Semantica dei gestori di eventi vengono eseguiti in corrispondenza di azioni opportune che scatenano levento es: click su unancora possono restituire al browser un valore booleano se il valore è true, lazione viene gestita normalmente; es: richiesta di URI se il valore è false, lazione viene ignorata JavaScript >> Concetti Fondamentali >> Convalida dei Dati

49 49 G. Mecca - Tecnologie di Sviluppo per il Web 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 allapplicazione Web se ci sono errori, restituisce false e la form non viene sottomessa JavaScript >> Concetti Fondamentali >> Convalida dei Dati

50 50 G. Mecca - Tecnologie di Sviluppo per il Web Convalida dei Dati m Esempio usiamo una funzione JavaScript verifica che controlla se i dati della form sono corretti Esempio di Convalida con JavaScript Esempio di Convalida con JavaScript <form method="post" action="provaPost.asp" onsubmit="return verifica()">...</form> JavaScript >> Concetti Fondamentali >> Convalida dei Dati >> esempioConvalida.html

51 51 G. Mecca - Tecnologie di Sviluppo per il Web 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 JavaScript >> Concetti Fondamentali >> Convalida dei Dati

52 52 G. Mecca - Tecnologie di Sviluppo per il Web Convalida dei Dati 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 JavaScript >> Concetti Fondamentali >> Convalida dei Dati >> esempioConvalida.html >> Lynx http://localhost/corsi

53 53 G. Mecca - Tecnologie di Sviluppo per il Web Convalida dei Dati m La corretta metodologia di convalida è sempre indispensabile convalidare i dati dellutente nellapplicazione Web sul server in alcuni casi può essere utile effettuare la convalida ANCHE sul client con JavaScript m Vantaggi linterazione con lutente è più immediata si riduce il numero di richieste errate al server (riduzione delloccupazione di banda) JavaScript >> Concetti Fondamentali >> Convalida dei Dati

54 54 G. Mecca - Tecnologie di Sviluppo per il Web Riassumendo m Introduzione m Storia di JavaScript m I Problemi di JavaScript m Il Modulo Script di XHTML 1.0 Strict m Il Modulo Form di XHTML m Caratteristiche del Linguaggio m Convalida dei Dati JavaScript >> Concetti Fondamentali >> Sommario

55 55 G. Mecca - Tecnologie di Sviluppo per il Web Termini della Licenza m This work is licensed under the Creative Commons Attribution- ShareAlike 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. http://creativecommons.org/licenses/by-sa/1.0/ 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 allindirizzo Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA. http://creativecommons.org/licenses/by-sa/1.0/