g. mecca – università della basilicata – [email protected] tecnologie di sviluppo per il web...

G. Mecca – Università della Basilicata – [email protected] G. Mecca – Università della Basilicata – [email protected]

Tecnologie di Sviluppo per il Web

JavaScript

Concetti Fondamentali

versione 2.0Questo lavoro è concesso in uso secondo i termini di una licenza Creative Commons

(vedi ultima pagina)

2G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Concetti Fondamentali

Introduzione Storia di JavaScript I Problemi di JavaScript Il Modulo Form di XHTML Il Modulo Script di XHTML 1.0 Strict Il Modulo degli Eventi di XHTML Caratteristiche del Linguaggio Convalida dei Dati

JavaScript >> Sommario


Introduzione

Che cos’è JavaScript un linguaggio di programmazionepensato lo sviluppo di applicazioni Web

Come viene utilizzato normalmentecodice utilizzato per rendere dinamiche le

pagine HTMLpuò essere utilizzato per offrire servizi

interattivi attraverso pagine Web

JavaScript >> Concetti Fondamentali >> Introduzione


Introduzione

Leggende metropolitane su JavaScript JavaScript non è Java

inizialmente: LiveScriptoperazione di marketing della Netscape

JavaScript non è sempliceè un linguaggio di programmazione completosi tratta di una tecnologia complessa



Introduzione

Esecuzione di JavaScript sul clientil codice è immerso nelle pagine HTMLviene eseguito a seguito di “eventi” scatenati

dall’utente (es: click del mouse)il codice viene eseguito dal browseril codice accede ad oggetti predefiniti che

rappresentano il contenuto della pagina (DOM), modificandone dinamicamente le proprietà ed il comportamento



Introduzione


>> immagini.html>> indovina.html

ServerHTTP

richiesta (URI)

Rete

risposta(pagina)

<html>...

</html>

codiceJavaScript

browser


Storia di JavaScript

In realtàper capirlo è necessario vederne la storia

La storia di JavaScriptintrodotto 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 JavaScriptla versione lato server non avrà molto successo

JavaScript >> Concetti Fondamentali >> Storia di JavaScript



La Microsoftdurante la guerra dei browser introduce la

sua versione, incompatibile con JavaScriptJScript 1.0 in Internet Explorer 3.0successivamente JScript 1.1anche la Microsoft ne introduce una versione

sul lato del server con ASP, in alternativa a VBScript

anche in questo caso con poco successo




La standardizzazionenel tentativo di standardizzare il linguaggio, è

stato definito un nucleo comunesottoposto all’ECMAstandardizzato nel 2000

ECMA JavaScriptlinguaggio di programmazione neutroprevede pochi oggetti predefiniti (Array,

Date, Math)




Estensioni dello standardClient Side JavaScriptServer Side JavaScriptentrambe includono ECMA JavaScript

Client Side JavaScriptaggiunge oggetti rilevanti per il browser (DOM della

pagina, finestra, menu, ecc.) Server Side JavaScript

aggiunge oggetti rilevanti per il server (database, sessioni ecc.)




DHTMLcombinazione di CSS, JavaScript e

dell’implem. del DOM fornita dal browseranimazione degli elementi della paginaanalogo: GUI dei linguaggi di programmaz.

Implementazione del DOMinsieme di oggettiInfoSetaltri oggetti del browser (finestra, preferiti …)



I Problemi di JavaScript

Primo problemaincompatibilità delle versioni

Cause di incompatibilitàdiverse versioni del linguaggio sviluppate da

Netscape e Microsoftdiverse versioni dei browseralcuni browser (es: Lynx) non supportano JavaScript

per nulla In generale

non è possibile prevedere che tipo di supporto un generico browser offre per JavaScript

JavaScript >> Concetti Fondamentali >> I Problemi di JavaScript


Dynamic HTML (DHTML)CSS >> Dettagli e Approfondimenti >> I Problemi di JavaScript



Secondo problemainsicurezza

Cause di insicurezzalinguaggio sul lato del clientcodice eseguito sulla macchina dell’utentecausa della diffusione di codice malevolo (virus)

In molti casiviene disabilitato dall’utente o seriamente limitato

nelle funzionalità




Di conseguenzaseri problemi di “accessibilità” (>>)

In questo corsoJavaScript non viene considerata una

tecnologia fondamentale per lo sviluppo Webne diamo una rapida panoramicaci concentriamo solo sulla versione lato clientci concentriamo su un utilizzo in particolare: la

convalida dei dati dell’utente



Caratteristiche del Linguaggio

Prima di entrare nel merito del linguaggioci servono alcuni elementi mancanti

In particolareci serve un modo per rendere interattive le

pagine HTML e raccogliere dati da elaborareci serve un modo per immergere il codice

JavaScript nel codice XHTMLci serve un modo per intercettare gli eventi

scatenati dall’utente sull’interfaccia

JavaScript >> Concetti Fondamentali >> Caratteristiche del Linguaggio



Nuovi moduli di XHMTLil modulo form (XHTML Basic): consente di rendere

interattive le pagine XHTMLil modulo script (XHTML 1.0 Strict): consente di

immergere codice eseguibile nell’XHTMLil modulo degli eventi (XHTML 1.0 Strict): consente

di intercettare eventi scatenati dall’utente Nota

gli script e gli eventi non fanno parte di XHTML Basic, che non prevede l’utilizzo di script sul client



Il Modulo Basic Forms di XHTML

JavaScript >> Concetti Fondamentali >> Il Modulo Form

Maschera (“Form”)modulo per la raccolta di dati forniti

dall’utente (es: nome, cognome, targa) Utilizzo

serve nelle applicazioni interattivel’utente riempie la maschera“sottomette” la mascheraun’applicazione analizza i dati forniti

dall’utente, li elabora e fornisce la risposta




Spazi per l’immissione dei dati“controlli” della form

Esistono controlli di vario tipoimmissione del testoimmissione di passwordscelte da elenchibottoni... >> form.html




Elemento principale della mascheraelemento “form” – contiene i vari controllielemento a livello di bloccoattributo action (riferimento a URI); requiredattributo method (post o get); se manca è get

Esempio:<form action=“form.asp” method=“post”>

...

</form>




Controllielementi in lineainput, select (option), textareaattributo name (nome del controllo)

Valore del controlloin alcuni casi specificabile dall’utentein altri casi prefissato e selezionabile

dall’utente




Attenzioneesistono due diversi moduli per le form

Modulo Basic Formsdi XHTML Basicè sufficiente per la maggior parte delle applicazioni

Modulo Formsdi XHTML 1.0 Strictprevede altri controllies: controllo di tipo “file”; serve per inviare file al

server




Invio della formi valori specificati dall’utente sono inviati

all’URI (applicazione) corrispondente all’attributo “action”

insieme di coppie <nome>=<valore> separate da & e codificati (URI encoding)

Esempio: targa=AB123DE&utente=Mario%20Rossi




Metodo di Inviometodo get: valori nella query string dell’URImetodo post: valori nel corpo della richiesta

HTTP In generale

per problemi di sicurezza (gli URI sono visibili) e di efficienza (gli URI non devono essere molto lunghi) è preferibile post




Attenzionele maschere sono uno strumento

fondamentale per le applicazioni Websia applicazioni sul lato client (JavaScript)sia sul lato server

Nel seguito della lezionestudieremo il loro utilizzo con JavaScript

Successivamente: lato server


Il Modulo Script di XHTML 1.0 Strict Immergere script in una pagina XHTML

il modulo di scripting di XHTML 1.0 Strict 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


Il Modulo Script di XHTML 1.0 Strict Attributi dell’elemento script

type: per specificare il Content-Typees: text/javascript

in precedenza: language (deprecato)src: il codice JavaScript può essere immerso

all’interno dell’elemento script oppure in un documento esterno di cui viene specificato l’URI


elemento attributo modello di contenuto

script type, src (URI), …

#PCDATA

noscript ... (heading | block | list )+


Il Modulo Script di XHTML 1.0 Strict Contenuto dell’elemento script

istruzioni a livello “globale”dichiarazioni di funzioni

Semantica dell’elemento scriptil codice a livello “globale” viene eseguito

appena viene incontrato dal browserle funzioni devono essere richiamate

esplicitamente (tipicamente da “gestori di eventi” >>)



Il Modulo Script di XHTML 1.0 Strict Nota

molto spesso il codice JavaScript è immerso in commenti HTML

Scoponascondere il codice ai browser che non

supportano JavaScripte che lo visualizzerebbero nella pagina




Il Modulo Eventi di XHTML 1.0 Strict Eventi

azioni dell’utente sull’interfaccia 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


Il Modulo Eventi di XHTML 1.0 Strict Programmazione basata su eventi

gli eventi possono avvenire in qualsiasi istante, sulla base delle azioni dell’utente

il sistema (browser) è in grado di intercettarli quando avvengono

il programmatore specifica “gestori di eventi”il sistema esegue il gestore di evento opportuno

Gestore di evento (“event handler”)blocco di codice da eseguire per gestire un certo

evento



Il Modulo Eventi di XHTML 1.0 Strict Nelle pagine Web

gli eventi possono essere gestiti dal clientoppure dal server

In questa lezionegestione da parte del clienti gestori di eventi sono scritti in JavaScriptvengono associati agli eventi attraverso

opportuni attributi



Eventi



<html>...

</html>

codiceJavaScript

browser

click del mouse su un’ancora evento click

sottomissione form evento submit

gestore specificatoutilizzando l’attributoonsubmit per la formgestore specificatoutilizzando l’attributoonclick per l’ancora

cambiamentonella visualizzazione

...


Il Modulo Eventi di XHTML 1.0 Strict Principali attributi del modulo eventi

onclickonsubmit

Altri attributionchangeonmouseoveronfocus, onblur...



Il Modulo Eventi di XHTML 1.0 Strict 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

onsubmitattributo applicabile all’elemento formspecifica il codice JavaScript da eseguire se

la maschera viene sottomessa



Il Modulo Eventi di XHTML 1.0 Strict Esempi<a href="javascript:void(0)“ <a href="javascript:void(0)“ onclick="selezionaXHTML()"onclick="selezionaXHTML()">>

Visualizza Immagine XHTML</a> Visualizza Immagine XHTML</a><a href="javascript:void(0)“ <a href="javascript:void(0)“ onclick="selezionaCSS()"onclick="selezionaCSS()">>

Visualizza Immagine CSS</a> Visualizza Immagine CSS</a> Esempi<form id="inizio" action="javascript:void(0)“ <form id="inizio" action="javascript:void(0)“

onsubmit="iniziaGioco()“ onsubmit="iniziaGioco()“ >><p>Inserisci il tuo nome: </p><p>Inserisci il tuo nome: </p><div><div> <input type="text" name="nome" /><input type="text" name="nome" /> <input type="submit" value="Inizia“ /><input type="submit" value="Inizia“ /></div></div></form></form>




Caratteristiche fondamentalilinguaggio interpretatolinguaggio debolmente tipatolinguaggio “ibrido”

Altri linguaggi con caratteristiche similiVBScript (ASP 3.0)PHP Perl




Linguaggio interpretatoil codice non viene compilatoviene tipicamente immerso nel sorgente di

una pagina HTMLed eseguito da un interprete fornito a

corredo del browser sulla macchina clientprocesso di sviluppo e test accelerato




Linguaggio debolmente tipatole variabili vengono dichiarate senza

specificarne il tipouna variabile è uno spazio nella memoria

che può contenere valori di qualsiasi tipoil linguaggio effettua conversioni frequenti di

tipo per confrontare i valori nelle espressioni Esempio

var x, y; x = 10; y = “10”;var x, y; x = 10; y = “10”; // x==y è vero




Linguaggio “ibrido”linguaggio essenzialmente proceduralecodice fatto di funzionilimitate funzionalità orientate agli oggetti

Essenzialmenteè possibile utilizzare classi predefinitecreare nuovi oggetti di queste classimanipolare oggetti esistenti chiamandone i

metodi




Modello degli Oggetti sul Client

fonte: Netscape’s JavaScript Guide



In generalelinguaggio pensato per lo sviluppo rapido di

applicazioni di piccole dimensioni Ma

non è scalabile ad applicazioni di grandi dimensioni

facile introdurre erroridifficile produrre codice modulare e di qualità




Un esempio: Indovina il numeroun’applicazione JavaScript per giocare a

indovina il numero Molte delle caratteristiche tipiche

varie form nella pagina, che vengono utilizzate anche per i messaggi

alcune variabili globalivarie funzioni scatenate da eventi


>> indovina.html>> indovina.js


Convalida dei Dati

Un’applicazione tipica di JavaScriptverifica dei dati forniti dall’utente ad

un’applicazione Web Esempio: pagamento del bollo in linea

codice fiscaletargacilindrataadesione a termini contrattuali

JavaScript >> Concetti Fondamentali >> Convalida dei Dati


Convalida dei Dati

La situazione tipicac’è 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



Convalida dei Dati


ServerHTTP

richiesta + parametri

Rete

risposta

<html> <form>

</form></html>

codiceJavaScript

browser

applicazione Web(codice sul server)

pagina HTML con form+ JavaScript

(codice sul client)

submitsubmit

errori

>> esempioConvalida.html>> IIS http://localhost/corsi


Convalida dei Dati

Semantica dei gestori di eventivengono eseguiti in corrispondenza di azioni

opportune che scatenano l’eventoes: 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



Convalida dei Dati

Nel caso delle formil gestore di eventi onSubmit esegue il

codice JavaScript di convalida dei datise 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



Convalida dei Dati

Esempiousiamo una funzione JavaScript “verifica”

che controlla se i dati della form sono corretti

<h2>Esempio di Convalida con JavaScript</h2><h2>Esempio di Convalida con JavaScript</h2>

<form <form method="post" method="post"

action="provaPost.asp" action="provaPost.asp"

onsubmit="onsubmit="return verifica()return verifica()">">

......

</form></form>


>> esempioConvalida.html


Convalida dei Dati

La tecnica standardsi 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”



Convalida dei Dati

Attenzioneil meccanismo non è per niente affidabilese il browser non supporta JavaScript, la

convalida non viene effettuataal server arrivano dati scorretti

Di conseguenzala convalida con JavaScript deve essere

vista come una funzionalità aggiuntiva, utilizzabile solo da alcuni utenti


>> esempioConvalida.html>> Lynx http://localhost/corsi


Convalida dei Dati

La corretta metodologia di convalidaè sempre indispensabile convalidare i dati

dell’utente nell’applicazione Web sul serverin alcuni casi può essere utile effettuare la

convalida ANCHE sul client con JavaScript Vantaggi

l’interazione con l’utente è più immediatasi riduce il numero di richieste errate al

server (riduzione dell’occupazione di banda)



Riassumendo

Introduzione Storia di JavaScript I Problemi di JavaScript Il Modulo Script di XHTML 1.0 Strict Il Modulo Form di XHTML Caratteristiche del Linguaggio Convalida dei Dati

JavaScript >> Concetti Fondamentali >> Sommario


Termini della Licenza

Termini della Licenza

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.

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 – università della basilicata – [email protected] tecnologie di sviluppo per il web...

Documents