Applicazioni lato Client

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Applicazioni lato Client"

Transcript

1 Note sulle Applicazioni lato Client Note sulle Applicazioni lato Client... 1 Applicazioni lato Client... 1 da HTML a RIA, attraverso AJAX, per l accessibilità e l usabilità... 2 Form con AJAX... 3 Il documento WEB: HTML e CSS... 4 Fogli di Stile (CSS)... 4 Attributi di stile... 5 Box model e Schemi di posizionamento... 7 Scripting lato Client DOM DOM e HTML Manipolare gli elementi DOM e XML XSL AJAX = XML+JavaScript Librerie Javascript jquery : write less do more Selezione elementi (selector) Eventi - action() Manipolazione HTML e CSS Ajax XML Applicazioni lato Client Le applicazioni web costituiscono sistemi complessi e si basano su una varietà di componenti hardware e software, di protocolli, linguaggi, interfacce e standard. Gli ingredienti base, almeno per cio che riguarda il software, comprendono il protocollo http, per il trasferimento in rete delle risorse, il linguaggio HTML, per la scrittura degli ipertesti, gli scritpt lato Client, per una interattività maggiore della pagina web, i fogli di stile (CSS) usati per dare maggior potere espressivo alle pagine e per separare il contenuto dalla presentazione, il linguaggio XML, per la descrizione strutturata di documenti. La gestione delle pagine dinamiche passa, poi, attraverso una serie di tecnologie di supporto e script lato Server: CGI, servlet Java, ASP, PHP, Java Server Page e infine, attraverso le architetture complesse a tre strati Model View Control (MVC), con Java 2 Entrprise Edition e Microsoft.NET. Inoltre, sempre maggior attenzione, viene data alla possibilità di pubblicazioni di contenuti per dispositivi mobili. In questo capitolo dedicheremo l attenzione alle applicazioni lato Client. paolo macchi - ISIS Facchinetti rel Note sulle Applicazioni lato Client 1

2 da HTML a RIA, attraverso AJAX, per l accessibilità e l usabilità Nel corso degli anni le applicazioni Web si sono evolute. HTML e http, da soli, consentono di sviluppare semplici siti Web ma sono insufficienti per applicazioni piu complesse, dove l interattività dell utente e la possibilità di separare i contenuti dalla presentazione diventano gli assi portanti. CSS e XML, insieme a gli script a lato client, come JavaScript, e alla tecnologia AJAX, muovono proprio in questa direzione. Quello che sta sotto il cofano degli applicativi delle piu grandi aziende non è Flash o Silverlight ma sempre Ajax, il cuore dell Web2.0. La caratteristica che http possiede, cioè quella di essere un protocollo stateless, e l insieme limitato dei comandi per l interfaccia uomo-macchina del linguaggio HTML, hanno portato a una facilità d uso inferiore rispetto alle tradizionali applicazioni desktop. Le nuove applicazioni Rich Internet Application (RIA), insieme all avvento di HTML5, tendono a possedere le caratteristiche e le funzionalità delle tradizionali applicazioni per computer desktop senza però necessitare dell'installazione di applicativi sul disco fisso, ma servendosi solo del browser. Nelle RIA l elaborazione dei dati, soprattutto per ciò che riguarda l interfaccia uomo-macchina, è relizzata lato Client, dal Browser. Ciò fornisce risposte veloci e pronte all utente, alleggerendo il server remoto da tutti quei tipi di elaborazione che possono essere effttuati con successo anche localmente. Più precisamente, il concetto di ricchezza ( Rich ), si svolge su due fronti: il modello dati e l interfaccia utente. Un modello dati piu ricco significa che è possibile maneggiare strutture dati piu complesse a lato client svincolando il server da sovraccarico e permettendo una modalità asincrona dei dati in modo che le risposte del server non sono piu intere pagine ma solo frammenti dinamici di esse. La ricchezza dell interfaccia utente garantisce un avvicinamento sia estetico che funzionale alle applicazioni desktop potendo interagire dinamicamente con le strutture dei dati. L utente finale, in definitiva una persona come noi, si affida molto all impatto visivo e alla semplicità d uso dell applicazione: ecco perché l interfaccia utente riveste un ruolo strategico legato all accessibilità e usabilità delle applicazioni Web. In questo contesto analizzeremo le risorse piu usate in Internet: le pagine HTML, insieme alle applicazioni a lato Client. Accessibilità e Usabilità Per accessibilità si intende la fruibilità di servizi e contenuti di un sito Web da una qualsiasi tipologia d'utente, anche da persone con ridotta o impedita capacità sensoriale e motoria, persone che possono trovare un grande beneficio e supporto nell accesso dei contenuti e nella comunicazione tramite Internet. (http://www.w3c.it/wai/) L usabilità prevede una serie di regole relative alla chiarezza e semplicità per ottemperare alla definizione che ne dà l ISO: l'efficacia, l'efficienza e la soddisfazione con le quali determinati utenti raggiungono determinati obiettivi in determinati contesti. (http://www.w3c.it/wai/wcag10guidelines.html) Un esempio di costruzione di pagina Web potrebbe ricalcare queste regole: paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 2

3 (tratto da AJAX per applicazioni web di Romagnoli, Salerno, Guidi Apogeo editore ) Form con AJAX Capita spesso, in Internet, di inserire dati in un modulo preformattato (form) in cui i dati, normalmente, devono essere convalidati. E possibile che la convalida venga fatta attraverso un programma lato Client, ad esempio, in Java Script tramite il quale si va a verificare se un campo è numerico, oppure se il formato della è conforme. Tutto ciò va molto bene ma non sempre è sufficiente. Pensiamo, ad esempio, al controllo di un nome già registrato, o al codice di una carta di credito o a una qualsiasi informazione che risiede sul database del Server. In questi casi la tradizionale applicazione HTML prevede l invio della pagina al server, che elabora i dati e rinvia al Client una nuova pagina HTML che sostituisce (rinfresca) la pagina precedente con i risultati richiesti. Questa procedura, talvolta, risulta noiosa per l utente, soprattutto quando la pagina contiene qualche parametro errato: i tempi di reintroduzione dei dati e di rielaborazione si allungano di molto. Sarebbe molto comodo poter far convalidare un form al server senza rinfrescare l intera pagina ogni volta. Usando Asynchronous JavaScript and XML (AJAX) i dati possono essere convalidati pressochè in tempo reale, in modo interattivo, quando l utente digita i tasti nei campi presenti nel form della pagina HTML. In questo caso i dati sono processati Asincronamente dal server mentre la pagina HTML locale continua a processare gli eventi. Se l utente commette errori essi vengono istantaneamente segnalati dal server al client senza che l intera pagina HTML venga rinfrescata! Con AJAX può essere, ad esempio, introdotto un controllo sull'evento onchange o su OnKeyUp della casella di testo: cio ci informerà tempestivamente che il nome inserito non è valido, magari evidenziando il testo in rosso (CSS + Javascript) oppure che va tutto bene, con il testo che si colora di verde. La tecnica Ajax, di fatto, non è una nuova tecnologia ma utilizza una combinazione di: HTML (o XHTML) e CSS per il markup e lo stile DOM (Document Object Model) per la manipolazione, attraverso un linguaggio come JavaScript, per mostrare le informazioni ed interagirvi; l'oggetto XMLHttpRequest per l'interscambio asincrono dei dati tra il browser dell'utente e il web server. in genere viene usato XML come formato di scambio dei dati, anche se di fatto qualunque formato può essere utilizzato. Questi file sono solitamente generati dinamicamente da script lato server. Il vantaggio di usare AJAX è, quindi, l interattività con l utente con un unico neo: bisogna fare attenzione alla larghezza di banda della connessione, perché, ancora, non tutti dispongono di una banda adeguata e il vantaggio potrebbe trasformarsi in lentezze talvolta inaccettabili se i dati vengono continuamente inviati a server per il loro controllo! paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 3

4 Il documento WEB: HTML e CSS HTML (.htm,.html) è un linguaggio di markup, cioè fornisce un insieme di regole di formattazione di documenti, con capacità di collegamenti ipertestuali, basate su speciali marcatori, TAG, che definiscono gli elementi. L'HTML fornisce le regole di impaginazione, formattazione e visualizzazione (layout) del contenuto di una pagina web. Tutti i siti web usano il formato HTML, il cui codice, richiesto e ottenuto da un web server, viene interpretato dal browser, che mostra la pagina letta sul computer. Consideriamo la seguente tabella: <table> <thead> <tr> <td>nome</td> </tr> </thead> <tbody> <tr> <td> Pinco</td> <td> Pincone</td> </tr> <tr> <td> Pollo</td> <td> Pollone</td> </tr> </tbody> </table> <td>cognome</td> Ogni TAG ha una serie di proprietà che definiscono lo stile del TAG (colore, larghezza ). Queste proprietà sono gli attributi del TAG, per cui volendo cambiare il colore di sfondo potremo scrivere <td bgcolor=#9acd32>nome</td> <td bgcolor=#9acd32>cognome</td> Un attributo definisce una proprietà dell elemento ed è contenuto all interno del tag iniziale. La forma è: nome_attributo = valore Ogni elemento ha decine di attributi. Ad es TABLE puo avere: align, bgcolor, border,etc. Cosi, con questa sintassi: <table width="75%" border="2" cellpadding="8" cellspacing="0"> si imposta una tabella con bordo di 2 pixel, senza spazio tra le celle e con il contenuto che viene distanziato dai bordi della cella di 8 pixel. Fogli di Stile (CSS) L affollamento di attributi all interno della pagina web può avere effetti nefasti, generando confusione e ridondanze. I fogli di stile (CSS, Cascading Style Sheets) cercano di mitigare questi effetti I fogli di stile sono composti da regole che descrivono come presentare gli elementi di una pagina HTML per strutturarla in modo opportuno nello stesso modo in cui una tovaglia riveste un tavolo per renderlo presentabile! Ogni regola ha due parti fondamentali: il selettore e il blocco della dichiarazione. Il selettore descrive quale è la parte di documento a cui va applicata la regola, il blocco delle dichiarazioni, racchiuso tra paretesi graffe, contiene una o più dichiarazioni, separate da punto e virgola, costituite, a loro volta, da proprietà e, separato con i due punti dal valore. I CSS, si applicano all elemento, alla classe e all identificatore (ID): paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 4

5 Nome elemento p text-align:center; /*questo è un commento*/ color:red; font-family:arial; Nome della Classe, cioè del gruppo di regole <html> <head> <style type="text/css">.centertext-align:center; </style> </head> <body> <h1 class="center">center-aligned heading</h1> <p class="center">center-aligned paragraph.</p> </body> </html> ID dell elemento <html> <head> <style type="text/css"> #pippo text-align:center; color:red; </style> </head> <body> <p id="pippo">hello World!</p> <p>questo paragrafo non è soggetto a variazioni perchè non ha l id pippo.</p> </body> </html> Le regole CSS possono: essere scritte direttamente nel Tag in modalità inline (meglio non usare!): <table style= background-color:#9acd32 > incorporate (internal) nel file html con il TAG <style>: <style type="text/css" media="all"> </style> body font-family: georgia,sans-serif; h1... inserite, in un file esterno (external) che viene, poi, collegato, in html: <link href="stile.css" rel="stylesheet" type="text/css"> La modalità inline ha maggiore priorità, seguita dalla internal e dalla external. I CSS sfruttano l ereditarietà: le proprietà impostate per un elemento sono automaticamente ereditate dai suoi discendenti. (cfr. Attributi di stile Gli attributi di stile si possono riferire a vari elementi, tra cui: Stili di background paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 5

6 body background-color:#b0c4de; div background-color:#b0c4de; body background-image:url('paper.gif'); Stili di testo, font, link, list, table : body color:blue; h1 color:#00ff00; pfont-family:"times New Roman", Times, serif; h1 font-size:2.5em; p font-size:14px; a:link color:#ff0000; ul.a list-style-type: circle; table width:100%; L esempio sottostante mostra il modo di definire i casi visti con il relativo uso all interno della pagina HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" > <head> <title>tabella pulita</title> <!--link href="stile.css" rel="stylesheet" type="text/css"--> <style type="text/css" media="all"> body font-family: georgia,sans-serif; h1 margin-left: 0.5em; font-size: 22px; h2 margin-left: 0.5em; font-size: 16px; p margin-left: 1em; table margin-left: 1.5em; margin-bottom: 1em; border: 1px solid black; border-collapse: collapse; caption-side: top; font-size: 12px; table.wrap-up margin-left: 1.5em; table-layout: fixed; width: 650px; border: 1px solid black; border-collapse: collapse; caption-side: top; font-size: 12px; thead border: 2px solid black; border-style: solid; font-weight: bold; background: #9ACD32; paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 6

7 tfoot text-align: right; td border: inset 1px ; border-style: solid; text-align: center; padding: 0.5em; td.highlight font-weight: bold; border: 2px solid red; background: orange; text-align: right; td.memo text-align: left; td.numero text-align: right; td.label border-left: hidden; border-bottom: hidden; border-top: none; border-right: none; text-align: right; </style> </head> <body> <h1>tabella 1</h1> <h2>prova<i>www.sito.it</i></h2> <table class="wrap-up"> <thead> <tr> <td>nome</td><td>cognome</td> </tr> </thead> <tbody> <tr> <td> Pinco</td> <td> Pincone</td> </tr> <tr> <td> Pollo</td> <td> Pollone</td> </tr> </tbody> </table> </body> </html> Box model e Schemi di posizionamento Box Model Un elemento HTML puo essere considerato un box. Il termine box model viene usato nei CSS per indicare la disposizione (layout) dell elemento. Il box model permette di disporre l elemento con o senza bordi e margini. Un box comprende quattro aree: un area destinata ai contenuti e tre aree opzionali (il padding, il border e il margin). paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 7

8 Nota - Se il padding è impostato a zero, il perimetro del padding è uguale a quello del contenuto; se il border è impostato a zero (o a none) il perimetro del border coincide con quello del pudding. Quasi tutti gli elementi che vengono utilizzati in ambito html (e xhtml) possono essere suddivisi tra elementi block ed elementi inline. Un elemento a livello block presenta alcune caratteristiche: inizia sempre con una nuova riga; l altezza, l interlinea e i margini dell elemento possono essere gestiti; se non viene specificata, la larghezza di default dell elemento è il 100%. Elementi di questo tipo sono: div, p, (form), ul, li, h1, h2, h3 ) Gli elementi inline invece: iniziano sulla stessa riga; l altezza e i margini superiore ed inferiore non possono essere impostati; la larghezza corrisponde a quella del testo o dell immagine contenuta e non può essere manipolata. Elementi di questo tipo sono: span, a, label, input, img, strong ed em Display E possibile anche applicare uno stile a un selettore interno a un altro selettore o nacondere un elemento: p color:blue;.c1 background-color:blue;.c1 p color:white; h1.hidden display:none; Pseudo classi Le pseuo-classi sono usate per fornire particolari effetti ad alcuni selettori: selector:pseudo-class property:value; a:visited color:#0c0f00; /* link visitato*/ selector.class:pseudo-class property:value; a.green:visited color:#00ff00; Cme le pseudo-classi anche i pseuo-elementi sono usati per fornire particolari effetti ad alcuni selettori, ad ex.: selector:pseudo-element property:value; p:first-letter font-size:xx-large; E inoltre possibile agire sulla barra di navigazione (<li>), sulle immagini e sugli attributi: [title=telemacone] border:10px solid red; paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 8

9 Posizionamento Una importante funzione è quella del posizionamento degli elementi all interno della pagina web usando i CSS (virual formattig model) e di decidere quale elemento sia posizionato davanti a un altro. Sebbene il posizionamento possa essere effettuato con tabelle, l uso dei div rende il posizionamento dei box piu accessibile e manipolabile. In particolare vi sono quattro schemi di posizionamento: statico o normale: è la posizione normale che per default la pagina assegna a ogni elemento; i box vengono disposti uno dopo l altro in modo verticale, gli elementi inline sono disposti orizzontalmente uno dopo l altro fisso: l elemento è posizionato in modo fisso rispetto alla pagina del browser e non si muoverà da li anche se la pagina è scrollata! p.posiz_fixed position:fixed; top:20px; right:10px; // bottom, left relativo: specifica un offset rispetto alla posizione normale, con distanze relative rispetto al punto in cui sarebbe collocato l elemento h1.posiz_left position:relative; left:-30px; assoluto: l elemento è posizionato rispetoo all elemento precedente che non ha una posizione statica. Se non ce ne sono è posizionato rispetto al contenotore <html> h1 position:absolute; left:10px; top:20px; Esiste, inoltre, la possibilità di rendere l elemento float. Cio serve a posizionare il box che viene, prima, posizionato secondo la condizione normale e poi shiftato a destra o a sinistra all interno del blocco contenitore. img float:right; //right, none Se, ad esempio l immagine è all interno di u <p>, l immagine si posizionerà a destra del blocco paragrafo. Nota - Ordine di posizionamento: se due o piu elementi sono collocati sullo stesso posto, l elemento citato per primo compare sopra (l attributo z-index, puo modificare l ordine) Un semplice esempio (cfr <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <link rel="stylesheet" type="text/css" href="styler.css" /> <title>telemacone piccolo</title> </head> <body> <!-- testa --> <div id="testa"><h1>il telemacone</h1></div> <!-- /testa --> <hr /> <!-- corpo --> <div id="corpo"> <div id="corpo-colonna1">[il]</div> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 9

10 <div id="corpo-colonna2">[tele]</div> <div id="corpo-colonna3">[macone]</div> </div> <!-- /corpo --> <hr /> <!-- pie' di pagina --> <div id="piedipagina"><p>pié di pagina</p></div> <!-- pie' di pagina --> </body> e il relativo css ("styler.css"): BODY TEXT-ALIGN: center #testa MARGIN: 1em auto; WIDTH: 760px; COLOR: white; BACKGROUND-COLOR: brown; TEXT-ALIGN: left #corpo MARGIN: 1em auto; WIDTH: 760px; BACKGROUND-COLOR: mintcream; TEXT-ALIGN: left #piedipagina MARGIN: 1em auto; WIDTH: 760px; BACKGROUND-COLOR: paleturquoise; TEXT-ALIGN: left #corpo-colonna1, #corpo-colonna3 BACKGROUND-COLOR: yellow; #corpo-colonna2 (Si noti l uso di doctype che consente di usare i posizionamenti nello stesso moso anche per il browser IE.). L output su browser mostra le tre righe nel corpo: Cambiamo Variando solo il css, senza alterare il file html: #corpo-colonna1, #corpo-colonna3 float: left; width: 20%; BACKGROUND-COLOR: yellow; #corpo-colonna2 float: left; width: 60%; paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 10

11 Si passa da tre righe a tre colonne nel corpo (!): si potevano anche usare posizionamenti fissi come in questo esempio: #colonna0-spaziofloat: left; width: 124px; height:100px; margin-top:20px; margin-bottom:40px; background-color:#cccccc; #colonna0-sxfloat: left; width: 196px;border-right:3px solid red;height:100px; margin-top:20px; margin-bottom:40px; background-color:#cccccc; #colonna0-ctfloat: left; width: 200px;border-right:3px solid red;height:100px; margin-top:20px; margin-bottom:40px; background-color:#cccccc; #colonna0-dxfloat: left; width: 159px; height:100px; margin-top:20px; margin-bottom:40px; margin-r Scripting lato Client Il linguaggio HTML, in origine, è nato per scrivere ipertesti. Con lo sviluppo di applicazioni interattive si è reso necessario supportare nuove funzionalità per definire e gestire eventi prodotti dall interazione con l utente eseguendo procedure correlate. Come accennato nei paragrafi iniziali, le pagine HTML possono essere rese più interattive introducendo script a lato client, cioè piccoli programmi eseguiti dal browser al momento del caricamento della pagina o quando l utente genera un certo evento come, ad esempio, premere un tasto o passare sopra un area sensibile. I linguaggi piu noti sono JavaScript di Netscape e VisualBasicScript di Microsoft. In particolare JavaScript, un linguaggio nato alla fine degli anni 90 per la creazione di piccoli effetti nelle pagine web, sta godendo oggi di nuova giovinezza, diventando un asse portante delle attività interattive che si svolgono sul browser. Infatti, come si vedrà meglio nel paragrafo successivo, tramite il DOM la pagina HTML è vista come una serie di oggetti che possono essere manipolati tramite, ad esempio, il linguaggio JavaScript. JavaScript Un esempio per la gestione di un Form locale: <!DOCTYPE html> <html> <body> <script> function validateform() var x=document.forms["myform"]["fname"].value; if (x==null x=="") alert("first name must be filled out"); return false; else alert("nome="+x); alert(document.forms["myform"]["lastname"].value); </script> <form action="bello.html" name="myform" method="get" onsubmit="validateform()"> First name: <input type="text" name="fname" value="mickey"><br> Last name: <input type="text" name="lastname" value="mouse"><br> <input type="submit" value="clicca"> </form> <p>click the "Submit" button and the form-data will be sent to a page on the server called "demo_form.asp".</p> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 11

12 </body> </html> JavaScript offre molti potenti Oggetti per la gestione di date, matematica, navigazione, stringhe. Ad esempio per estrarre le tre lettere del NOME del Codice Fiscale, si puo operare cosi : var str="ncfpuw49l07g200e"; var n=str.substr(3,3); n conterrà: PUW Oppure, tramite l uso delle Regular Expression. var str="mhtpit77a09c500h"; var patt1=/[a-h]/g; restituisce H,A,C,H Molti di questi oggetti dispongono di eventi, cioè di messaggi che il Browser invia a JavaScript a fronte, ad esempio, di un click effettuato col mouse su un elemento. Ad esempio all elemento DIV è collegato l evento onclick e, se ad esso è associata una funzione JavaScript, essa sarà chiamata ed eseguita. Gli script sono inseriti nella pagina usando il tag <SCRIPT> nell intestazione del documento. Anche che altri elementi sono usati per aumentare l inetrattività e le funzionalità del Client: Applet Java, Microsft ActiveX, Macromedia Flash etc. Tali componenti, a lato client, vengono inseriti utilizzando il tag <OBJECT> Ad esempio per istallare una classe Applet Java: <OBJECT classid="clsid:8ad9c e-11d1-b3e f499d93" width="200" height="200"> <PARAM name="code" value="applet1.class"> </OBJECT> Ad esempio per includere un.png: <BODY> <P>Here's a closeup of the Grand Canyon: <OBJECT data="canyon.png" type="image/png"> This is a <EM>closeup</EM> of the Grand Canyon. </OBJECT> </BODY> DOM Il Document Object Model (spesso abbreviato come DOM) letteralmente modello oggetto del documento, è una forma di rappresentazione dei documenti strutturati come modello orientato agli oggetti. In pratica, DOM, considera i vari tag come una gerarchia di oggetti: il DOM è come un albero in cui ogni nodo è un oggetto e i link tra i nodi sono le relazioni padre-figlio tra gli oggetti. In questo modo è possibile navigare il Dom per accedere a ogni nodo. In questo modo è possibile, con un linguaggio simile a JavaScript o VB, manipolare i nodi come se fossero oggetti. paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 12

13 Caratteristiche DOM è stato inizialmente supportato dai browser per modificare gli elementi in un documento HTML. DOM è stato un modo per accedere e aggiornare dinamicamente il contenuto, struttura e stile dei documenti. A causa delle incompatibilità nell'esecuzione di DOM fra i vari browser, il W3C ha fornito delle specifiche standard. In particolare: Tutti gli element sono considerati oggetti Tutti gli attributi degli element sono le proprietà degli oggetti Tutti gli oggetti sono soggetti ad eventi Il nodo rappresenta l entità principale del DOM. Sono nodi: il document gli element (TAG) gli attributi degli element il testo interno agli element Caratteristiche dei nodi: Un nodo possiede un (nodo) figlio e un (nodo) padre. In un albero il nodo top è chiamato root Ciascun nodo, eccetto il root, ha un nodo padre Un nodo puo avere molti nodi figlio Una foglia è un nodo senza figli Siblings sono nodi con lo stesso padre Il DOM possiede vari oggetti: paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 13

14 Ad esempio, l oggetto Window rappresenta la finestra del browser. Ogni Window possiede un Document che rappresenta l HTML del documento corrente. Il Document (l oggetto più importante per noi) avrà una serie di di oggetti Element nidificati che formano l albero completo. Ogni nodo ha le seguenti proprietà: nodename (ad esempio DIV per l elemento, o id per l attributo); nodetype identifica il tipo di nodo: Element type NodeType Element type NodeType Element 1 Comment 8 Attribute 2 Document 9 Text 3 nodevalue (valore del nodo che restituisce il testo nel caso di attributi) childnodes (lista degli elementi e dei nodi di testo contenuti in un nodo) parentnode (nodo di livello superiore) DOM e HTML Il DOM espone a Javascript, sottoforma di oggetti, gli elementi della pagina HTML, compreso attributi e testo. Il codice sottostante mostra un nodo di nome DIV di tipo elemento, un nodo di nome id di tipo attributo, con valore 3, figlio del nodo DIV, e un nodo di testo con valore ciao figlio del nodo DIV e fratello di id. paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 14

15 <DIV id= 3 >ciao</div> Questi elementi possono essere manipolati, cioè creati, modificati o cancellati da programma. Molti oggetti dispongono di eventi a cui il programma puo reagire. Manipolare gli elementi (cfr. ) La manipolazione dei nodi in JavaScript passa attraverso una serie di metodi che vengono applicati per generare contenuti nel Document, reperire e modificarne il contenuto, leggerne e scriverne gli attributi, creare e manipolare i nodi, gestire i CSS e gli eventi. Generare contenuti Il metodo document.write permette di scrivere nel documento un testo, compresi i tag HTML: <html> <body> <script type="text/javascript"> document.write("<h1>hello World!</h1><p>Have a nice day!</p>"); </script> </body> </html> Reperire gli elementi: Tenendo presente che la pagina è rappresentata dall oggetto document, possiamo ottenere i riferimenti agli elementi del DOM, oltre che con nodetype e ChildNodes, tramite alcuni utilissimi metodi: getelementbyid(id) referenzia un elemento dato il suo ID: var x=document.getelementbyid("myheader"); var testo= document.getelementbyid("myheader").innerhtml; getelementsbyname(name) recupera tutti gli elementi (e li mette in un array) con quel nome (si applica solo agli element con nome: form, input, select, text area) : var x=document.getelementsbyname("myinput"); getelementsbytagname(tag) recupera tutti i sottoelementi che posseggono quel TAG, cioè restituisce, sottoforma di lista, i riferimenti a tutti gli elementi presenti sotto l elemento di partenza, indipendentemente dalla loro posizione : var lis_div =document.getelementsbytagname("div"); alert(lis_div.length); Nell esempio che segue, il click sull immagine produce il cambio dell immagine e delle scritte che compaiono in due diversi div, come si vede nelle scheramate sotto. <!DOCTYPE html> <html> <body> <script> function cambia() element=document.getelementbyid('midea') if (element.src.match("ideasi")) element.src="ideano.png"; document.getelementbyid('ide').innerhtml="clicca l'immagine per far venire un'idea!"; else element.src="ideasi.png"; document.getelementbyid('ide').innerhtml="clicca l'immagine per far fuggire un'idea!"; </script> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 15

16 <img id="midea" onclick="cambia()" border="0" src="ideano.png" width="100" height="180"> <div id="ide"> <p>clicca l'immagine per far venire un'idea!</p> </div> </body> </html> Un esempio che mostra l uso di un bottone che mostra data e ora. <!DOCTYPE html> <html> <body> <script> function displaydate() document.getelementbyid("iddata").innerhtml=date(); function vedi(id) var txt=id.innerhtml; alert ("id: "+id); document.write(txt); </script> <button onclick="displaydate()">data/ora</button> <p id="iddata"></p> <h5 onclick="vedi(this)">clicca per vedere questo stesso testo </h5> </body> </html> Creare, aggiungere, rimuovere i nodi E possibile creare e rimuovere nodi in document: createelement(name), removechild(node), appendchild(node), createthead() per manipolare tabelle var mydiv=document.createelement( div ); mydiv.align= right ; Altre proprietà del DOM, utili a determinare il nome o il valore del nodo o dei nodi vicini sono (x è l oggetto-nodoelemento): x.nodename che determina il nome di x x.nodevalue che determina il valore x x.parentnode che determina il nodo padre di x x.childnodes che determina il nodo figlio di x paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 16

17 x.attributes che determina gli attributi del nodo x Modificare il contenuto esistente Per modificare il contenuto di un nodo, occorre prima identificare l elemento (ad esempio tramite tramite id) con getelementbyid e quindi applicare la proprietà innerhtml che consente di inserire codice HTML nell'elemento al quale viene applicato. In questo esempio viene creato un div, in esso viene inserito uno span con id= sp1 e vine posto nel body: var mydiv=document.createelement( div ); mydiv.innerhtml= <span id= sp1 >ciao</span> ; document.body.appendchild(mydiv); L esempio (http://www.w3schools.com/htmldom/dom_methods.asp ) sottostante mostra come reperire il contenuto del nodo intro <html> <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt= document.getelementbyid("intro").innerhtml; document.write("<p>the text from the intro paragraph: " + txt + "</p>"); </script> </body> </html> <html> <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt= document.getelementbyid("intro").childnodes[0].nodevalue; document.write("<p>the text from the intro paragraph: " + txt + "</p>"); </script> </body> </html> Leggere e scrivere attributi Per leggere e scrivere gli attributi si puo usare elementnode.getattribute(name), o, rispettivamente, elementnode.setattribute(name, value): <div id="mydiv" title="attributo_title">-- clicca qui </div> var obdiv = document.getelementbyid("mydiv "); var valoreattuale= obdiv.getattribute( mydiv ); obdiv.setattribute( mydiv, valorepippo ); Per cambiare un attributo: document.getelementbyid(id).attribute=new value L esempio cambia l attributo scr di un tag <img> : l immagine pippo.gif è sostitita dall immagine pluto.jpg: <!DOCTYPE html> <html> <body> <img id="immagine" src="pippo.gif"> <script> document.getelementbyid("immagine").src="pluto.jpg"; </script> </body> </html> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 17

18 Gestione dei CSS Per la gestione degli attributi tramite CSS, si puo usare la proprietà style che, a sua volta, è un oggetto con proprietà simili a quelle dei css: var myelem = document.getelementbyid("myelement "); myelem.style.border= 2px solid green ; myelem.style.width= 110px ; // mostrare e nascondere un elemento usando style myelem.style.display= none ; //mostra myelem.style.display= ; //nasconde e toglie lo spazio occupato myelem.style.visibility= visible ; //mostra myelem.style.visibility= hidden ; //nasconde e lascia lo spazio vuoto Eventi e loro gestione Gli script che utilizzano il DOM sono collegati agli eventi, cioè ad azioni che l utente, o il browser, intraprende. Gli eventi sono, di fatto, dei messaggi che il browser invia a Javascript: ad esempio, se al click del mouse su un elemento DIV, è associata una funzione, essa sarà mandata in esecuzione automaticamente. Gli eventi sono, di norma, espressi come normali attributi dei TAG. Tutti gli oggetti DOM hanno associato una serie di eventi come ad esempio onclick, onkeydown, onkeyup, onkeypress, ondblclick, onmouseout, onmouseover Nell esempio sottostante, la funzione catturavalore è chiamata nel caso in cui l utente clicchi con il mouse, rispettivamente, su un campo dati (nell esempio: h1 con id= pippo1 ) o su un bottone: <h1 id="pippo1" onclick="catturavalore()">clicca qui!</h1> <input type="button" onclick="catturavalore()" value="bottone!"/> Tra i molti eventi disponibili relativi a valori e bottoni, un evento diverso dai precedenti ma particolarmente importante e utile è onload: <body onload="loadxml()"> Si tratta di un evento che si scatena quando il browser ha terminato di leggere tutto il codice HTML della pagina che viene caricata. La lettura del documento avviene in sequenza dall alto al basso. A questo punto tutti gli elementi del DOM sono disponibili. Ciò è fondamentale perché, altrimenti, si potrebbero generare degli errori nel caso venissero chiamate funzioni o frammenti di codice non ancora caricati. ( ) DOM: un esempio completo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" > <head> <title> elementi_ridotto.html </title> <script type="text/javascript"> function catturavalore() var x=document.getelementbyid("myheader"); var av=x.getattribute("title") ; alert("attributo: "+ av +" "+"innerhtml: "+x.innerhtml); function catturaelementi() var x=document.getelementsbyname("myinput"); alert("valore bottone: "+x[0].value); function catturatags() var lista_h2 = document.getelementsbytagname("h2"); for(i=0; i < lista_h2.length; i++) alert("valori h2: "+i + " - " + lista_h2[i].innerhtml) </script> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 18

19 </head> <body> <h1 id="myheader" title="attributo_title" onclick="catturavalore()">--clicca qui per il valore dell' ID MyHeader</h1> <input type="text" name="myinput" value="prova"/> <h2><i>-- clicca il bottone per getelementsbyname --</i></h2> <input type="button" onclick="catturaelementi()" value="bottone!"/> <h2 onclick="catturatags()">-- clicca qui per i valori di h2 --</h2> </body> </html> Ecco gli output che vengono mostrati all esecuzione della pagina: Output associato a ID, getvalue(): Output associato al Name, getelements(): Output associati al TAG, gettags(): html5 (http://www.w3.org/tr/html5/ ) HTML5 è la nuova generazione di HTML. Attualmente (2010) è ancora sotto sviluppo da parte del W3C ma molti browser già ne implementano varie funzioni. Le principali regole si possono così sintetizzare: tutto è basato su HTML, CSS, DOM, e JavaScript non c è più la necessità di ricorrere a plugin nesterni (come Flash) Gestione degli errori Nuovi tag per rimpiazzare gli script Indipendente dalla piattaforma Le prinipali funzionalità si si possono così sintetizzare: Un nuovo elemento canvas per il disegno Elementi audio e video per la riproduzione di brani multimediali Miglior supporto di memorizzazione in locale Nuovi elementi per la gestione dei contenuti: article, footer, header, nav, section Nuovi form di controllo: calendar, date, time, , url, search Il significato di tutto ciò risulta essere abbastanza evidente: la riproduzione di file audio e video diventa più facile e immediata senza la necessità di disporre di un software proprietrio come quello di Adobe, Flash, o dei mille plug-in per la riproduzione multimediale e di giochi su browser. Senza contare che Apple e Google sponsorizzano in pieno Html5! Canvas HTML5 Un esempio di canvas (http://www.w3schools.com/html5/html5_new_elements.asp): paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 19

20 <!DOCTYPE HTML> <html> <body> <canvas id="mycanvas" width="200" height="100" style="border:10px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.moveto(10,14); cxt.lineto(150,20); cxt.lineto(10,50); cxt.stroke(); </script> </body> </html> DOM e XML L'XML, extensible Markup Language, è un metalinguaggio creato e gestito dal W3C, per creare nuovi linguaggi, atti a descrivere documenti strutturati. Secondo Degli Antoni, la possibilità di realizzare atti di comunicazione che siano ad un tempo adatti agli umani ed all automazione, nei gesti di comunicazione, nasce proprio dalla natura autodescrittiva degli elementi di XML. Rispetto all'html, l'xml ha, quindi, uno scopo diverso: Scopo HTML - descrizione e formattazione di pagine web e, più in generale, di ipertesti - è un linguaggio Struttura: - insieme ben definito e ristretto di tag Scopo XML - linguaggio di annotazione (Markup) che permette di creare gruppi di marcatori (tag set) personalizzati (MathML, XHTML, chemicalml, ecc..) - meta linguaggio utilizzato per creare nuovi linguaggi, atti a descrivere documenti strutturati (Non è un linguaggio!). - Formato standard per lo scambio dei dati - Supporto per la costruzione di formati specifici per gli usi più disparati Struttura: - propri tag definiti a seconda delle esigenze. - libero nel contenuto, piu rigido nella sintassi. Vantaggi: - semplice struttura sintattica; -possibilità di visualizzazione della pagina attraverso un browser Vantaggi: - metalinguaggio per la creazione di linguaggi personalizzati che, tramite tag, incorpora oltre alla struttura sintattica anche una struttura semantica degli elementi. - linguaggio, per applicazioni in rete, utilizzabile da qualsiasi sistema - Ogni documento può contenere un'opzionale descrizione della sua grammatica (DTD -Document Type Definition- o XSD -XML Schema Definition- ) Svantaggi: - marcatore di identificazione per il browser ma non significa nulla per l'elemento stesso. In prima battuta, un documento XML è simile ad un documento HTML, con la differenza che in XML i tag li possiamo inventare per le nostre esigenze, a seconda delle informazioni che ci interessa rappresentare. Consideriamo un breve racconto di Leone Tolstoj: Lev Nikolaevic Tolstoj I due cavalli Due cavalli tiravano ognuno il proprio carro. Il primo cavallo non si fermava mai; ma l'altro sostava di continuo. Allora tutto il carico viene messo sul primo carro. Il cavallo che era dietro e che ormai tirava un carro vuoto, disse sentenzioso al compagno: "Vedi? Tu fatichi e sudi! Ma più ti sforzerai, più ti faranno faticare." Quando arrivarono a destinazione, il padrone si disse: "Perché devo mantenere due cavalli! Mentre uno solo basta a trasportare i miei carichi? Meglio sarà nutrir bene l'uno, e ammazzare l'altro; ci guadagnerò almeno la pelle del cavallo ucciso!" e così fece. Spesso, per spiegare meglio il testo, dobbiamo comunicare ad altri le parti che lo compongono. In prima battuta potremmo usare colori e caratteri diversi: paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 20

21 Lev Nikolaevic Tolstoj I due cavalli Due cavalli tiravano ognuno il proprio carro. Il primo cavallo non si fermava mai; ma l'altro sostava di continuo. Allora tutto il carico viene messo sul primo carro. Il cavallo che era dietro e che ormai tirava un carro vuoto, disse sentenzioso al compagno: "Vedi? Tu fatichi e sudi! Ma più ti sforzerai, più ti faranno faticare." Quando arrivarono a destinazione, il padrone si disse: "Perché devo mantenere due cavalli! Mentre uno solo basta a trasportare i miei carichi? Meglio sarà nutrir bene l'uno, e ammazzare l'altro; ci guadagnerò almeno la pelle del cavallo ucciso!" e così fece. Meglio sarebbe caratterizziare il testo con tag specifici: i Tag di XML nel racconto di Tolstoj <racconto> <autore> Lev Nikolaevic Tolstoj </autore> <titolo> I due cavalli </titolo> <intro>due cavalli tiravano ognuno il proprio carro. <chi cavallo= primo > Il primo cavallo non si fermava mai; </chi cavallo= primo > <chi cavallo= secondo > ma l'altro sostava di continuo. </chi cavallo= secondo > </intro> <storia> Allora tutto il carico viene messo sul primo carro. <chi cavallo= secondo > Il cavallo che era dietro e che ormai tirava un carro vuoto, disse sentenzioso al compagno: <dialogo "Vedi? Tu fatichi e sudi! Ma più ti sforzerai, più ti faranno faticare." <dialogo> </chi cavallo= secondo > </storia> <morale> Quando arrivarono a destinazione, <chi persona= padrone > il padrone si disse: "Perché devo mantenere due cavalli! Mentre uno solo basta a trasportare i miei carichi? Meglio sarà nutrir bene l'uno, e ammazzare l'altro; ci guadagnerò almeno la pelle del cavallo ucciso!" </chi persona= padrone > e così fece. </morale> </racconto> In questo modo abbiamo ottenuto un testo piu ricco, che cattura le parti (gli elementi), costituiti da etichetta e testo, formando una struttura ad albero. Inoltre è ora possibile scorrere formalmente Il testo XML, alla ricerca dei suoi contenuti in modo da estrarne parti e sottoparti. Si noti, infine, che per speciificare meglio i tag, sono stati inseriti degli attributi (il cui valore è racchiuso tra apici: cavallo= secondo ) che hanno lo scopo di modificatore o specificatore dell elemento. L esempio che segue mostra, da un punto di vista più tecnico, la formattazione di un messaggio di posta. La prima linea del documento lo identifica come XML. Il primo tag <messaggio> identifica la radice del documento: questo documento è un messaggio. I restanti tag specificano il contenuto del messaggio in termini di oggetto, mittente, destinatario e testo. L ultimo tag conclude la descrizione del messaggio. formattazione di un messaggio di posta: <?xml version="1.0"?> <messaggio> <a>paolo</a> <da>carlo</da> <oggetto>incontro</oggetto> <testo>ci vediamo alle cinque per il the</testo> </messaggio> Analisi di un XML Analizziamo un documento XML dandone una definizione formale partendo dalla struttura di un documento. Un documento è, di norma, costituito da piu elementi e sottoelementi strutturati ad albero con una radice (elemento documento), rami e foglie, padri, figli e fratelli: paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 21

22 XML bookstore (http://www.w3schools.com/dom/dom_nodes.asp) <?xml version="1.0" encoding="iso "?> <bookstore> <book category="cooking"> <title lang="en">everyday Italian</title> <author>giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="children"> <title lang="en">harry Potter</title> <author>j K. Rowling</author> <year>2005</year> <price>29.99</price> </book> </bookstore> Un documento XML è descritto da comandi (tag) che ne rappresentano la struttura logica. L insieme di questi comandi è chiamato Markup: documento XML= Markup + Dati testuali scritti in UNICODE Markup= comandi per la rappresentazione logica del documento I tag, che si distinguono dai dati testuali perché sono racchiusi tra i delimitatori < >, identificano il tipo di elemento: Tag di apertura: <nometag> Tag di chiusura: </nometag> Tag vuoti: <nometag/> L elemento puo avere un identificatore univoco (ID) e gli attributi che lo caratterizzano nelle sue proprietà. <pacco id="l-dvd-5565" note="fragile!" /> Nodo La gestione di un documento XML passa ancora, esattamente come per i documenti HTML, attraverso gli oggetti DOM. Anche qui ritroviamo il concetto di nodo e le relazioni tra i nodi: L oggetto Node costituisce la base di tutti gli altri oggetti derivati. Esso dispone di proprietà e metodi comuni agli oggetti derivati. L oggetto document è derivato da Node e rappresenta il documento XML. l oggetto Element è derivato da Node e rappresenta un elemento XML ( ex <book> ). Se ha del testo, questo viene visto come nodo-figlio di tipo testo L oggetto Attribute è derivato da Node e rappresenta l attributo di un elemento XML ( ex category="cooking"). paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 22

23 L oggetto node ha tre proprietà fondamentali : nodetype, nodevalue, nodename. Accesso al documento XML Per manipolare un documento XML c è bisogno di un parser XML. Il parser carica il documento XML in memoria e, solo allora, si opera sul documento usando il DOM. Ci sono tre modi per accedere a un nodo: getelementbyid() document.getelementbyid("intro"); getelementsbytagname() ad es. document.getelementsbytagname("p"); Navigando nell albero dei Nodi e usandone le relazioni di parentela, ad es. x=document.getelementbyid("introduzione"); document.write(x.firstchild.nodevalue); ---- x=document.getelementsbytagname("p"); for (i=0;i<x.length;i++) document.write(x[i].innerhtml); document.write("<br />"); Il documento XML deve sottostare ad alcune precise regole per essere Ben Formato (Well Formed): Un Prologo, che è la prima istruzione che appare scritta nel documento: <?xml version="1.0" encoding="iso "?> Un unico Elemento radice (ovvero il nodo principale) che contiene tutti gli altri nodi del documento: < biblioteca_mia > Tag finali sono obbligatori <libro> <nome> Paolo </nome> <cognome>rossi NON VALIDO!!! </libro> Gli Attributi racchiusi tra virgolette doppie : <libro autore= Polo > Gli elementi non possono iniziare con numeri o caratteri speciali e non possono contenere spazi; Gli elementi devono essere bilanciati, ovvero non sono consentiti errori di annidamento: <libro> <nome>paolo</nome> <cognome>rossi </libro> </cognome> Gli elementi sono case-sensitive <libro> <nome> Paolo </nome> <cognome>rossi</cognome> NON VALIDO!!! </libro> NON VALIDO!!! E possibile identificare anche un tipo di documento. E abbastanza intuitivo pensare ad esempio a documenti di tipo diverso: racconti, relazioni, elenchi telefonici In XML viene formalizzato questo concetto tramite DTD (Document Type Definition) che dichiara lecite, all interno di un documento XML, quali sono i tipi di elemento, gli attributi, le notazioni lecite. Ad esempio saluti.dtd: <!ELEMENT greeting (tiposaluto, indirizzamento)> <!ELEMENT tiposaluto (#PCDATA)> <!ELEMENT indirizzamento (#PCDATA)> il file xml salutagente.xml, usa il DTD precedente: <?XML version 1.0 > <!DOCTYPE saluti SYSTEM file:// saluti.dtd > <salutagente> <tiposaluto>ciao,</tiposaluto> <indirizzamento>gente!!! </indirizzamento> </salutagente> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 23

24 I documenti XML che usano DTD si dicono documenti di tipo valido. Il caricamento di un documento XML nel browser Ormai quasi tutti i linguaggi di programmazione posseggono parser per la manipolazione degli oggetti DOM. Javascript si appoggia al parser che il Browser mette a disposizione: ciò comporta, purtroppo, una differente gestione in funzione del browser usato: ad esempio Microsoft Internet Explorer (IE) si appoggia a un oggetto ActiveX, mentre Mozilla Firefox possiede metodi integrati. Di questo bisogna tenerne conto come nell esempio sottostante: // code for IE if (window.activexobject) xmldoc=new ActiveXObject("Microsoft.XMLDOM"); xmldoc.async=false;... // code for Mozilla Firefox, Opera, etc. else if (document.implementation && document.implementation.createdocument) xmldoc=document.implementation.createdocument("","",null);... else alert('your browser cannot handle this script'); Nel file libri.xml, visto in precedenza si può notare che: <biblioteca_mia > rappresenta il nodo radice del DOM Il nodo root <biblioteca_mia > possiede due figli-nodo di nome : <libro>. Il primo nodo-figlio <libro> ha, a sua volta, quattro nodi-figli <nome>, <cognome<>, <titolo>, <edizione>, i quali contengono un testo-nodo ciascuno: Paolo, Macchi, Telemacone, ISIS Facchinetti. libri.xml Il programma che segue, controlla i nodi e trova il valore del nome e del cognome in libri.xml <?xml version="1.0" encoding="iso "?> <bibliotecamia> <libro categoria="reti"> <nome>paolo</nome> <cognome>macchi</cognome> <titolo>telemacone</titolo> <edizione>isis Facchinetti</edizione> </libro> <libro categoria="storia"> <nome>marco </nome> <cognome> Polo </cognome> <titolo>milione</titolo> <edizione>repubblica di Venezia</edizione> </libro> </bibliotecamia > e li imposta nella pagina HTML (http://www.w3schools.com/dom/dom_nodes_access.asp ): <html> <head> <title> parser0-librixml.html </title> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 24

25 <script type="text/javascript"> var xmldoc; function loadxml() // code for IE if (window.activexobject) xmldoc=new ActiveXObject("Microsoft.XMLDOM"); xmldoc.async=false; xmldoc.load("libri.xml"); getmessage(); // code for Mozilla, Firefox, Opera, etc. else if (document.implementation && document.implementation.createdocument) //alert('browser Mozilla'); xmldoc=document.implementation.createdocument("","",null); xmldoc.load("libri.xml"); xmldoc.onload=getmessage; else alert('your browser cannot handle this script'); function getmessage() document.getelementbyid("libro1").innerhtml= xmldoc.getelementsbytagname("titolo")[0].childnodes[0].nodevalue; document.getelementbyid("nome1").innerhtml= xmldoc.getelementsbytagname("nome")[0].childnodes[0].nodevalue; document.getelementbyid("cognome1").innerhtml= xmldoc.getelementsbytagname("cognome")[0].childnodes[0].nodevalue; document.getelementbyid("libro2").innerhtml= xmldoc.getelementsbytagname("titolo")[1].childnodes[0].nodevalue; document.getelementbyid("nome2").innerhtml= xmldoc.getelementsbytagname("nome")[1].childnodes[0].nodevalue; document.getelementbyid("cognome2").innerhtml= xmldoc.getelementsbytagname("cognome")[1].childnodes[0].nodevalue; </script> </head><body onload="loadxml()"> <h1>leggi libri.xml</h1> <p><b>libro1:</b> <span id="libro1"></span><br /> <b>nome1:</b> <span id="nome1"></span><br /> <b>cognome1:</b> <span id="cognome1"></span> <p><b>libro2:</b> <span id="libro2"></span><br /> <b>nome2:</b> <span id="nome2"></span><br /> <b>cognome2:</b> <span id="cognome2"></span> </p> </body> </html> output: Leggi libri.xml libro1: Telemacone paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 25

26 nome1: Paolo cognome1: Macchi libro2: Milione nome2: Marco cognome2: Polo Un miglioramento, che prevede la possibilità di creare i nodi inj modo dinamico, in funzione dei nodi presenti nel file XML è il seguente: <html> <head> <title> parser0-librixml.html </title> <script type="text/javascript"> var xmldoc; function loadxml() // code for IE if (window.activexobject) //il DOM di explorer si basa su un oggetto ActiveX xmldoc=new ActiveXObject("Microsoft.XMLDOM"); xmldoc.async=false; xmldoc.load("libri.xml"); getmessage(); // code for Mozilla, Firefox, Opera, etc. else if (document.implementation && document.implementation.createdocument) //i browser di nuova generazione usano "document.implementation" come proprietà del DOM xmldoc=document.implementation.createdocument("","",null); xmldoc.load("libri.xml"); xmldoc.onload=getmessage; else alert('your browser cannot handle this script'); function getmessage() //variabili locali che indicano le varie caratteristiche del libro var titolo,nome,cognome; //array contenenti il contenuto dell'xml per rispettive proprietà var titoli,nomi,cognomi; //inizializzazione degli array titoli= xmldoc.getelementsbytagname("titolo"); nomi= xmldoc.getelementsbytagname("nome"); cognomi= xmldoc.getelementsbytagname("cognome"); //ciclio che scrive le info tante volte quante sono contenute negli array for(i=0;i< titoli.length;i++) //titolo=document.createelement('span'); //titolo.setattribute('id','libro'+(i+1)); //titolo.innerhtml='<b>libro'+(i+1)+':</b>'+'ii'+'<br>'; //document.body.appendchild(titolo); alert("titolo del libro: "+titoli[i].childnodes[0].nodevalue); titolo=document.createelement('span'); titolo.setattribute('id','libro'+(i+1)); titolo.innerhtml='<b>libro'+(i+1)+': </b>'+titoli[i].childnodes[0].nodevalue+'<br>'; document.body.appendchild(titolo); nome=document.createelement('span'); paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 26

27 nome.setattribute('id','nome'+(i+1)); nome.innerhtml='<b>nome'+(i+1)+': </b>'+nomi[i].childnodes[0].nodevalue+'<br>'; document.body.appendchild(nome); cognome=document.createelement('span'); cognome.setattribute('id','cognome'+(i+1)); cognome.innerhtml='<b>cognome'+(i+1)+': </b>'+cognomi[i].childnodes[0].nodevalue+'<br><br>'; document.body.appendchild(cognome); </script> </head><body onload="loadxml()"> <h1>leggi libri.xml</h1> </body> </html> Un esempio per la lettura del file XML contentente la storia di Tolstoj è il seguente: <?xml version="1.0" encoding="iso "?> <raccolta> <racconto> <autore> Lev Nikolaevic Tolstoj </autore> <titolo> I due cavalli </titolo> <intro>due cavalli tiravano ognuno il proprio carro. <chi cavallo="primo"> Il primo cavallo non si fermava mai; </chi> <chi cavallo="secondo"> ma l'altro sostava di continuo. </chi> </intro> <storia> Allora tutto il carico viene messo sul primo carro. <chi cavallo="secondo"> Il cavallo che era dietro e che ormai tirava un carro vuoto, disse sentenzioso al compagno: <dialogo> "Vedi? Tu fatichi e sudi! Ma più ti sforzerai, più ti faranno faticare." </dialogo> </chi> </storia> <morale> Quando arrivarono a destinazione, <chi persona="padrone"> il padrone si disse: "Perché devo mantenere due cavalli! Mentre uno solo basta a trasportare i miei carichi? Meglio sarà nutrir bene l'uno, e ammazzare l'altro; ci guadagnerò almeno la pelle del cavallo ucciso!" </chi> e così fece. </morale> </racconto> <racconto> <titolo> Ciao <chi persona="padrone"> marina </chi> </titolo> <storia> se questa pagina funziona, allora significa che forse <morale> ho imparato a usare xml </morale> </storia> <chi persona="schiavetto"> tanti saluti, <autore> Luca </autore> </chi> </racconto> </raccolta> Con il file html che lo interpreta: paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 27

28 <html> <head> <title> parser0-librixml.html </title> <script type="text/javascript"> var xmldoc; function loadxml() // code for IE if (window.activexobject) //il DOM di explorer si basa su un oggetto ActiveX xmldoc=new ActiveXObject("Microsoft.XMLDOM"); xmldoc.async=false; xmldoc.load("favola.xml"); getmessage(); // code for Mozilla, Firefox, Opera, etc. else if (document.implementation && document.implementation.createdocument) //i browser di nuova generazione usano "document.implementation" come proprietà del DOM xmldoc=document.implementation.createdocument("","",null); xmldoc.load("favola.xml"); xmldoc.onload=getmessage; else alert('your browser cannot handle this script'); function getmessage()//funzione che scorre e stampa a video il contenuto di un XML non omoge //ipotetico procedimento iterativo var strato1;//,strato2,strato2,strato4,strato5,strato6; for(i=0;xmldoc.childnodes[i];i++) strato1=xmldoc.childnodes[i]; printmessage(strato1);//chiama la funzione sul nodo esterno e itera gli altri //alert(strato1.nodevalue); function printmessage(strato)//algoritmo ricorsivo strato.setattribute("visited","true");//altrimenti i nodi vengono visitati più volte if(strato.nodename=="racconto") document.writeln('<br><br>'); var strato2; for(i=0;strato.childnodes[i];i++) strato2=strato.childnodes[i]; if(strato2.nodename=="#text" && strato2.nodevalue!=null)//writeln aggiunge righe senza sovrascrivere le precedenti //effettua il controllo sul nodo in cui il testo è contenuto e stampa di conseguenza if(strato.nodename=="autore") document.writeln('<b>'+strato2.nodevalue+'</b><br>'); if(strato.nodename=="titolo") document.writeln('<font size="6" color="red">'+strato2.nodevalue+'</font><br>'); if(strato.nodename=="morale") document.writeln('<font size="4" color="blue">'+strato2.nodevalue+'</font><br>'); if(strato.nodename=="chi") if(strato.getattribute("persona")=="padrone") document.writeln('<font size="4" color="blue">'+strato2.nodevalue+'</font><br>'); else document.writeln(strato2.nodevalue+'<br>'); if(strato.nodename=="intro" strato.nodename=="storia") document.writeln(strato2.nodevalue); if(strato.nodename=="dialogo") document.writeln('<i>'+strato2.nodevalue+'</i>'); if(strato2.nodename!="#text" && strato2.getattribute("visited")!="true") printmessage(strato2); </script> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 28

29 </head><body onload="loadxml()"> </body> </html> Con document.getelementbyid si individua uno specifico elemento della pagina individuato con il selettore css #. Con getelementsbytagname si individuano tutti i tag del tipo indicato. Si noti anche l uso di getattribute e nodevalue come nell esempio: this.dominio = catelement.getattribute("dominio"); this.valore = catelement.childnodes[0].nodevalue; In questo semplice esempio, se il file XML contiene: <categoria dominio="attributone">valorone123</categoria> this.dominio assume Attributone e this.valore Valorone123 XHTML (raccomandazione del W3C ) L insieme della visione fornita dal DOM, l uso dei CSS e la struttura dell XML ha portato all XHTML (extensible HyperText Markup Language) che associa alcune proprietà dell'xml con le caratteristiche dell'html: un file XHTML è un pagina HTML scritta in conformità con lo standard XML.Il linguaggio prevede un uso più restrittivo dei tag HTML; solo la struttura della pagina è scritta in XHTML, mentre il layout è imposto dai fogli di stile a cascata. Esempio : un albero genealogico Consideriamo l albero genealogico di una famiglia che ha due figli (Paolo e Carlo) che, a loro volta, hanno figli, uno dei quali (Matteo) ha altri due figli. Ecco il file XML: <famiglia> <Paolo> <Maria/> <Stefano/> </Paolo> <Carlo> <Chiara/> <Giulia/> <Matteo> <Eleonora/> <Marco/> </Matteo> </Carlo> </famiglia> Il nodo "famiglia" è il principale, ( root ) ed è unico. Paolo e Carlo saranno elementi di secondo livello, Eleonora e Marco di quarto livello, gli altri di terzo livello. Nello script precedente era presente questa istruzione che assegna all'oggetto root i dati contenuti nel primo livello del nostro documento: root = xmldoc.documentelement paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 29

30 Se volessimo puntare ai nomi dei primi due figli: Paolo= xmldoc.documentelement.childnodes[0] Carlo = xmldoc.documentelement.childnodes[1] Se volessimo puntare invece alle due figlie di Matteo, dovremmo scrivere: figlie= xmldoc.documentelement.childnodes[1].childnodes[2] Il primo childnode ha come valore uno perché punterà al secondo figlio, "Carlo" (la numerazione parte dallo zero). Il secondo ha come valore due perché punterà a "Matteo". Per i nomi dei nipoti: Eleonora=xmlDoc.documentElement.childnodes[1].childnodes[2].childnodes[0].nodename Marco=xmlDoc.documentElement.childnodes[1].childnodes[2].childnodes[1].nodename XML: formule matematiche Un esempio di inserimento in una pagina delle formule matematiche complesse. Basterà dichiarare il namespace relativo al linguaggio MathML e inserire nella pagina i tag specifici di quest'ultimo (il codice è tratto dal sito del W3C). <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>a Math Example</title> </head> <body> <p>the following is MathML markup:</p> <math xmlns="http://www.w3.org/1998/math/mathml"> <apply> <log/> <logbase> <cn> 3 </cn> </logbase> <ci> x </ci> </apply> </math> </body> </html> XML: descrizione dell informazione musicale Presso l Università Statale di Milano è stato standardizzato il metodo per la descrizione dell'informazione musicale in X ML (http://www.mx.dico.unimi.it/) (http://www.lim.dico.unimi.it/membri/ludovico/luca_andrea_ludovico_ita.htm) Ecco uno stralcio della Grande sonate pathétique, Grave, measure 4 di Ludwig Van Beethoven codificato in XML: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE ieee1599 SYSTEM "http://standards.ieee.org/downloads/1599/ /ieee1599.dtd"> <ieee1599 creator="laboratorio di Informatica Musicale" version="1.0"> <general> <description> <main_title>1st movement - Grave</main_title> <author type="composer">ludwig Van Beethoven</author> <number>1</number> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 30

31 <work_title>grande sonate pathétique</work_title> <work_number>opus 13</work_number> <date>1798/99</date> </description> </general> <logic> <spine> <event id="rclef" timing="0" hpos="0" /> <event id="lclef" timing="0" hpos="0" /> <event id="rkeysig" timing="0" hpos="0" /> <event id="lkeysig" timing="0" hpos="0" /> <event id="rh_01" timing="0" hpos="0" /> <event id="lh_01" timing="0" hpos="0" /> <event id="rh_02" timing="144" hpos="144" /> <event id="lh_02" timing="0" hpos="0" /> <event id="rh_03" timing="72" hpos="72" /> <event id="lh_03" timing="0" hpos="0" />... </spine> <los> <staff_list> <brackets marker="start_of_staff_group" shape="brace" group_number="1" /> <staff id="rh_staff" line_number="5"> <clef event_ref="rclef" shape="g" staff_step="2" /> XML: RSS La struttura dell ultima versione di RSS si presenta suddivisa nel seguenta modo: Intestazione XML, identificata dall omonimo tag; Il tag RSS; Il tag Channel che contiene materialmente tutti i dati del file RSS: intestazione del sito che rilascia il feed. gestione del logo del sito che rilascia il feed. tutti gli item del feed, rappresentanti le singole notizie. Altri tag come: title specifica il titolo della notizia, link specifica la URL completa della notizia description specifica i primi N caratteri descrittivi della notizia. RSS 2.0 <rss version="2.0"> <channel> <title>example Channel</title> <link>http://example.com/</link> <description>an example feed</description> <language>en</language> <textinput> <title>search this site:</title> <description>find:</description> <name>q</name> <link>http://example.com/search</link> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 31

32 </textinput> <skiphours> <hour>24</hour> </skiphours> <item> <title>1 < 2</title> <link>http://example.com/1_less_than_2.html</link> <description>1 < 2, 3 < 4. In HTML, <b> starts a bold phrase and you start a link with <a href= </description> </item> </channel> </rss> XSL Abbiamo detto che l'xml ci permette di creare un nostro linguaggio il quale sarà interpretato dal browser secondo le nostre esigenze. Per l'interpretazione abbiamo dovuto appoggiarci a DOM. Possiamo pero interpretare XML con un altro linguaggio chiamato XSL (extensible Stylesheet Language). Il nome XSL deriva dal fatto che esso si basa sul meccanismo dei fogli di stile. Xml riguarda, invece, la trattazione dei dati. XSL ci permette di scandire il documento xml e trasformarlo in un altro documento con diverso formato. L'xsl rispetto al semplice css ci permette di dare una formattazione più flessibile e dinamica all'interpretazione del nostro documento xml. Qui di seguito presentiamo una rappresentazione grafica dell'integrazione tra XML e HTML: La creazione avviene servendosi di XML, il quale viene interpretato come codice html da un particolare interprete chiamato XSL. ecco un esempio in cui si presenta un un file xml che simula l'intestazione di un questionario (prova1.xml), il relativo xls(prova1.xsl) e il css (prova1.css). prova1.xml: <?xml version="1.0" encoding="utf-8"?> <?xml:stylesheet type="text/xsl" href="prova1.xsl"?> <!--PAGINA DI INTERPRETAZIONE(XSL) --> <questionario> <!--INTESTAZIONE VERIFICA--> <intestazione titolo_quest="titolone" materia="materione" tempo="20"> <input tipo="testo" name="cognome"/> <input tipo="testo" name="nome"/> <input tipo="testo" name="data"/> </intestazione> <pagina titolo_pag="sezione 1: Domande a scelta multipla"> <gruppo titolo_gr="argomento: " > </gruppo> </pagina> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 32

33 </questionario> prova1.xsl: <?xml version="1.0"?> <HTML xmlns:xsl="http://www.w3.org/tr/wd-xsl"> <head> <title>prova1</title> </head> <link href="stili/prova1.css" rel="stylesheet"/> <BODY> <center> <br/> <br/><br/><br/><br/> <!--TABELLA--> <table border="0" width="92%" align="center" cellpadding="5" cellspacing="0"> <tr> <td> <font color="red" size="+2"><b>intestazione:</b></font> <xsl:for-each select="questionario/intestazione/input"> <!--NODO INPUT--> <tr> <!--COLORE GRIGINO--> <td> <b> <xsl:value-of <!--STAMPO L'ATTRIBUTO NAME DEL NODO INPUT--> <xsl:if <!--SE TIPO DI INPUT UGUALE A TESTO ALLORA FACCIO UNA INPUT TYPE TEXT.--> </xsl:if></b> </td> </tr> </xsl:for-each> </td> </tr> </table> <br/><br/><br/><br/><br/><br/><br/><br/> <!--TABELLA CON IL TITOLO DELLA PROVA E LA SUA MATERIA--> <xsl:for-each select="questionario/intestazione"> <table border="0" width="92%"> <tr> <td class= "prova11" align="center"> <h1><xsl:value-of </h1> <!--TITOLO DEL QUESTIONARIO--> <p class= "prova1">materia coinvolta: <xsl:value-of <!--MATERIA DEL QUESTIONARIO--> Tempo di svolgimento: <xsl:value-of minuti </td> </tr> </table> </xsl:for-each> </center> </BODY> </HTML> prova1.css: BODY MARGIN-TOP: 3px; SCROLLBAR-FACE-COLOR: #181fb1; MARGIN-BOTTOM: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #436532; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #d1d3ff; paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 33

34 SCROLLBAR-DARKSHADOW-COLOR: # INPUT.login FONT-WEIGHT: lighter; FONT-SIZE: 80%; COLOR: black; FONT-STYLE: italic; FONT-FAMILY: "comic sans ms" H1 FONT-WEIGHT: bold; FONT-SIZE: 135%; COLOR: forestgreen; FONT-FAMILY: "comic Sans MS".prova1 COLOR: dodgerblue; FONT-FAMILY: Bangle.prova11 COLOR: limegreen; FONT-STYLE: oblique; FONT-FAMILY: AucoinLight pagina prodotta chiamando prova1.xml: AJAX = XML+JavaScript Il problema di dover recuperare dati da un Server senza dover necessariamente ricaricare l intera pagina viene risolto tramite l oggetto XMLHttpRequest. Questo oggetto consente di inviare al Server una richiesta (Request) e di ottenere una risposta (Response). L oggetto XMLHttpRequest è il cardine delle applicazioni interattive basate su AJAX. Esso possiede una serie di metodi (open, send..) e proprietà (responsetext, responsexml,..) definiti dal W3C. Il flusso di una richiesta asincrona segue una serie di passi successivi che vanno dalla creazione di una istanza dell oggetto XMLHttpRequest, all assegnazione di una funzione di callback, all invocazione dei metodi open e send infine all attivazione della funzione callback. Più precisamente la procedura AJAX si compone di tre passi definiti: Richiesta da Client a Server con passaggio dei parametri, realizzato, sul browser, tramite XMLHttpRequest. Elaborazione da parte del Server e invio della risposta Rielaborazione, da parte del Client, della pagina web, a fronte della manipolazione della risposta XML pervenuta da Server Un evento, ad esempio un tasto premuto in una text box di un form, fa iniziare la sessione AJAX sul client: - una funzione JavaScript crea e configura un oggetto XMLHttpRequest. Questo oggetto include l URL del server da chiamare su cui risiede l applicazione, il dato da validare che puo essere inviato come parametro nella URL e, infine, una funzione di callback. paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 34

35 - Quando si invia la XMLHttpRequest la pagina HTML continua a processare gli eventi. Il server riceve la richiesta, la processa ed estrae i parametri passati e ritorna un documento XML all oggetto XMLHttpRequest che indica se il dato è valido o meno. - Una volta ricevuta la risposta l oggetto XMLHttpRequest chiama la funzione di Callback preconfigurata. Questa funzione aggiorna la pagina HTML in base al documento XML. Le parti di pagina variate sono immediatamente aggiornate dal browser e l utente vede se il dato del form è stato validato o meno. Validazione con AJAX Nell esempio che segue si mostra l uso dell oggetto XMLHttpRequest per la validazione di un form di dati. Si ottiene una validazione positiva (bordo verde) e negativa (bordo rosso) nel momento stesso dell inserimento dei dati, ottenendo questoi risultato: Ajax: lato client <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 35

36 <style type="text/css">.bp_invalid color:red;.bp_valid color:green;.inp_invalid border-color:red;.inp_valid border-color:green; </style> <script type="text/javascript"> function AJAXInteraction(url, callback) var req = init(); req.onreadystatechange = processrequest; function init() if (window.xmlhttprequest) return new XMLHttpRequest(); else if (window.activexobject) return new ActiveXObject("Microsoft.XMLHTTP"); function processrequest () // readystate of 4 signifies request is complete if (req.readystate == 4) // status of 200 signifies sucessful HTTP call if (req.status == 200) if (callback) callback(req.responsexml); this.doget = function() req.open("get", url, true); req.send(null); function validateuserid() var target = document.getelementbyid("userid"); var url = "validation.php?id=" + encodeuricomponent(target.value); var target = document.getelementbyid("userid"); var ajax = new AJAXInteraction(url, validatecallback); ajax.doget(); function validatecallback(responsexml) var msg = responsexml.getelementsbytagname("valid")[0].firstchild.nodevalue; if (msg == "false") var mdiv = document.getelementbyid("useridmessage"); // set the style on the div to invalid mdiv.classname = "bp_invalid"; mdiv.innerhtml = "Specificare un valore"; mdiv = document.getelementbyid("userid"); mdiv.classname = "inp_invalid"; var submitbtn = document.getelementbyid("submit_btn"); submitbtn.disabled = true; else var mdiv = document.getelementbyid("useridmessage"); // set the style on the div to valid mdiv.classname = "bp_valid"; mdiv.innerhtml = "OK"; mdiv = document.getelementbyid("userid"); mdiv.classname = "inp_valid"; var submitbtn = document.getelementbyid("submit_btn"); paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 36

37 submitbtn.disabled = false; </script> <title>form Data Validation using AJAX</title> </head> <body> <h1>test AJAX</h1> <hr/> <form name="updateaccount" action="validation.php" method="post"> <input type="hidden" name="action" value="create"/> <table border="0" cellpadding="5" cellspacing="0"> <tr> <td><b>campo richiesto (*):</b></td> <td> <input type="text" size="20" id="userid" name="id" autocomplete="off" onkeyup="validateuserid()"> </td> <td> <div id="useridmessage"></div> </td> </tr> <tr> <td align="right" colspan="2"> <input id="submit_btn" type="submit" value="create Account"> </td> <td></td> </tr> </table> </form> </body> </html> Si noti come nella la funzione di Callback si vada a leggere il valore del tag e si opera di conseguenza: function validatecallback(responsexml) var msg = responsexml.getelementsbytagname("valid")[0].firstchild.nodevalue; if (msg == "false")... Ajax: lato server Ecco l esempio (formalmente corretto ma poco significativo nei contenuti) di codice della applicazione, in PHP, server-side. Il server prepara e invia un file xml con il tag <valid> e il suo valore true o false : <?php $q=$_get["id"]; header('content-type: text/xml'); echo '<?xml version="1.0" encoding="iso "?>'; // send XML response echo '<valid>'; if ($q!="") echo 'true'; else echo 'false'; echo '</valid>';?> Nota: per approfondimenti su AJAX: I libri di Io Programmo : Imparare PHP, Programmare con AJAX, Javascript by Example paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 37

38 Librerie Javascript JavaScript permette effettivamente di interagiere con browser e DOM ma la cosa risulta, a volte, lunga e ripetitiva. Il problema di JavaScript è che si tratta di un linguaggio che è cresciuto e si è stratificato nel tempo e non possiede un codice pulito e standardizzato. A volte, poi, browser diversi si comportano in modo diverso a parità di funzioni. Per fortuna esistono alternative e librerie per la gestione lato client come Xpath e Xquery: XPath è usato per navigare tra elementi e attributi di un documento XLM in modo da trovare le informazioni contenute. Xpath è uno standard W3C ed è usato insieme a XSLT. Ad esempio è possibile selezionare il primo nodo-libro sotto l elemento bookstore in questo modo: xml.setproperty("selectionlanguage","xpath"); xml.selectnodes("/bookstore/book[1]/title"); XQuery sta all XML come SQL sta alle tabelle del database, ed è costruito sulla base di Xpath. XQuery è stato progettato per operare query sui dati XML. Ad esempio è possibile fare la seguente interrogazione : "seleziona tutti i libri con un prezzo maggiore di 30euro e ordinali per titolo, prendendoli dalla collezione presente nel documento XML di nome books.xml $x in doc("libri.xml")/bookstore/book where $x/price>30 order by $x/title return $x/title Oltre a queste e altre librerie è possibile anche disporre di framework cioè strutture di supporto su cui un software può essere organizzato e progettato: al programmatore rimane solo da creare il contenuto vero e proprio dell'applicazione perché l intelaiatura viene già fornita! Un framework è di fatto un insieme di classi e metodi preconfezionati e adatti amolte circostanze di progetto. Molti framework opensource permettono la creazione di funzionalità dinamiche nelle pagine Web e mettono a disposizione un ambiente ricco di servizi e funzioni. Ne sono un esempio Dojo (http://www.dojotoolkit.org/) Rico e JQuery. In particolare jquery (http://jquery.com/) è una libreria di funzioni JavaScript il cui scopo è di fornire una serie di funzionalità di più alto livello per la manipolazione di una pagina HTML, lato client. Ideatore del progetto è John Resig e la prima versione risale al jquery contiene numerose funzionalità che si possono cosi sintetizzare: Selezione e manipolazione di elementi HTML Gestione di eventi HTML manipolazione di elementi CSS Animazione ed effetti grafici in JavaScript Gestione e manipolazione degli elenti di HTML DOM AJAX Utilities Manipolazione di XML jquery : write less do more La sintassi di jquery è fatta in modo da poter selezionare (selecting) elementi HTML ed eseguire azioni (action) su di essi: $(selector).action() Il carattere dollaro $ definisce che siamo in presenza di jquery. In realtà $() è solo l alias della funzione jquery() a cui è passato il parametro (selettore). ll (selector) serve a indviduare l elemento HTML ( query ). Nota: Al posto di usare $ si puo usare direttamente la funzione jquery passando il parametro. Ad esempio: jquery( #id_elemento ); al posto di usare $( #id_elemento );. Ad esempio la seguente stringa jquery individua tutti i tag <div> che hanno classe grande, aggiunge a questi stessi <div> la classe rossa e li nasconde (http://www.w3schools.com/jquery/jquery_syntax.asp): $( div.grande ).addclass( rossa ).hide(); Esistono svariati tipi di selettore. I basilari si riferiscono ad un oggetto DOM esistente, come $(document) o $(document.getelementbyid( #id_elemento )); L uso di questi metodi, però, non è consigliato in jquery dove, invece, sono previsti appositi selettori di stringa potenti e semplici, come si vede nell esempio sottostante: - $("p") seleziona tutti gli elementi <p> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 38

39 - $("p.pluto") seleziona tutti gli elementi <p> con class="pluto". - $("p#demo") seleziona il primo <p> con id="demo". <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() $("button").click(function() $(this).hide(); ); ); </script> </head> <body> <button type="button">cliccami!</button> </body> </html> Si noti che tutte le funzioni associate agli eventi sono definite all interno del blocco di gestione degli eventi (ready): $(document).ready(function().. codice.. ) Cio serve a prevenire l esecuzione di funzioni prima che il documento HTML sia caricato completamente e sia pronto (ready). E possibile, in alternativa, posizionare il codice alla fine della pagina HTML. Per includere nel proprio sito la libreria jquery si può far rferimento direttamente a Microsoft o a Google: <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> </head> Selezione elementi (selector) E molto importante capire come JQuery seleziona esattamente gli elementi HTML a cui si vuole applicare un effetto. I selettori di elementi e attributi permettono di selezionare gli elementi HTML (o gruppi di essi) tramite: nome, attributo o contenuti. - $(this).hide() nasconde l elemento corrente - $("div") seleziona tutti gli elementi <div> della pagina corrente (vale per tutti i div HTML) - $("p") seleziona tutti i paragrafi - $("p").hide() nasconde tutti i paragrafi - $("p").css("background-color","yellow"); cambia le proprietà del CSS a TUTTI gli elementi p - $(".classpluto") seleziona tutti gli elementi con class="classpluto" - $("p.classpluto").hide() nasconde tutti I paragrafi con class="classpluto" - $( #id_elemento ); seleziona l elemento con id specificato (ad esempio <div id= id_elemento )> ) - $("#pippo").hide() nasconde l elemento con id="pippo" - $( [align] ); seleziona tutti gli elementi con attributo align - $( [align=left] ); seleziona tutti gli elementi con attributo align left - $( [title*=telemacone] ); seleziona tutti gli elementi con attributo title contnente la sequenza di lettere Telemacone, (ad esempio <div title= Telmacone e suo padre Ulissone )> ) - $( div.classpluto[align=left][title*=telemacone] ); questa istruzione seleziona tutti i div con classe CSS classpluto allineate a sinistra e nel cui titolo è presente Telemacone. (ad esempio <div class= classpluto lign= left title= Telmacone e suo padre Ulissone )>.. </div> ) - $( div.classpluto[align=left]>a[href*=index.htm] ); seleziona i tag a che hanno attributo hrefil cui valore contiene Telemacone ma solamente in un div allineato a sinistra. Tabella elementi (http://www.w3schools.com/jquery/jquery_selectors.asp ) Syntax Description $(this) elemento HTML corrente paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 39

40 $("p") Tutti gli elementi <p> $("p.intro") $(".intro") $("#intro") $("ul li:first") $("[href$='.jpg']") $("div#intro.head") Tutti gli elementi <p> con class="intro" Tutti gli elementi con class="intro" Il primo elemento con id="intro" Il primo elemento <li> di ciascun <ul> Tutti gli elementi con attributo href che finisce con ".jpg" Tutti gli elementi con class="head" all interno di un <div> con id="intro" Eventi - action() Le funzioni associate agli eventi vengono chiamate quando avviene un evento nella pagina HTML. Un click su un bottone (evento) scatena la funzione associata: $("button").click(function()..fai qualcosa... ) Eventi Function $(document).ready(function) Collega una Function a L evento ready di un document: un documento HTML è stato caricato e pronto all uso. $(selector).click(function) L evento click degli elementi selezionati $(selector).dblclick(function) $(selector).focus(function) L evento doppio click degli elementi selezionati L evento focus degli elementi selezionati $(selector).mouseover(function) L evento mouse over degli elementi selezionati (http://www.w3schools.com/jquery/jquery_events.asp ) Un esempio che usa $(selector).hide(speed,callback) <!DOCTYPE html> <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() $("button").click(function() $("p").hide(1000,function() alert("paragrafo nascosto!"); ); ); paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 40

41 ); </script> </head>ì <body> <button type="button">nascondi!</button> <p>un piccolo paragrafo</p> </body> </html> Manipolazione HTML e CSS E possibile intervenire sull HTML inserendo (come con innerhtml), appendendo o cancellando contenuti e valori. La manipolazione di un contenuto avviene con text(), che fornisce il testo contenuto nel div, e html(),fornisce il codice html contenuto nel div. Usati senza argomenti restituiscono rispettivamente il testo e il codice HTML contenuti in un elemento. Ad esempio: Visualizzare il contenuto var=$('div.demo').text(); fornisce il testo contenuto nel div var=$('div.demo').html(); fornisce il codice html contenuto nel div Cambiare il contento: $(selector).html(content) $("p").html("ciao"); sostituisce il contenuto di tutti i paragrafi con il nuovo testo ciao Aggiungere un contenuto $(selector).append(content) $("p").append(" ciao"); inserisce DOPO il testo di tutti i paragrafi, il nuovo testo ciao E possibile manipolare i CSS: $(selector).css(name,value) $(selector).css(properties) $("p").css("background-color":"yellow","font-size":"200%"); $(selector).css(name) E possibile manipolare i nodi del DOM, trovare elementi nel DOM e variarli, come in questo esempio in cui vengono trovati (find) tutti i tag span e i rispettivi contenuti sono marcati in rosso (in questo caso Ciao e Tarzan ): <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <p><span>ciao</span>, chi sei?</p> <p>io sono <span>tarzan</span>.</p> <script> $("p").find("span").css('color','red'); </script> </body> </html> (http://api.jquery.com/find/ ) Oltre alla funzione find, jquery prevede molte altre funzioni per l attraversamento del DOM. Ad esempio è possibile iterare (each) su un oggetto del DOM, associando, ogni volta una funzione diversa. Supponiamo di avere : <ul> <li>paolo</li> <li>carla</li> </ul> Allore è possibile: $('li').each(function(index) alert(index + ': ' + $(this).text()); ); Ottenendo in output: 0: paolo paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 41

42 1: carla Un esempio per la localizzazione dei nodi DOM è quello che segue, in cui vengono localizzati tutti i DIV dopo il primo e viene assegnata una classe: <!DOCTYPE html> <html> <head> <style> div width: 80px; height: 80px; background: #abc; border: 2px solid black; margin: 10px; float: left; div.after border-color: red; </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <div>first</div> <div>sibling<div>child</div></div> <div>sibling</div> <div>sibling</div> <script>$("div:first").nextall().addclass("after");</script> </body> </html> Ajax JQuery fornisce funzioni per la manipolazione di Ajax tra cui, come mostrato nell esempio, il caricamento di un file remoto (test1.txt) <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() $("#aaa").click(function() $('#miodiv').load('test1.txt'); /* htmlobj=$.ajax(url:"test1.txt",async:false); $("#mydiv").html(htmlobj.responsetext); */ ); ); </script> </head> <body> <div id=miodiv"><h2>ajax fa cambiare questo testo con quello nel file di testo caricato da remoto</h2></div> <button id="aaa" type="button">cambia il contenuto del testo!</button> </body> </html> JQuery fornisce una serie di funzioni per la manipolazione di Ajax tra cui: (url) URL (indirizzo) del data da esssere caricato, (callback) funzione che viene eseguita al caricamento, (type) tipo di dati da essere caricato (html,xml,json,jasonp,script,text) Request Descrizione $(selector).load(url,data,callback) Carica i dati remoti nell elemento selezionato $.ajax(options) Carica i dati remoti nell oggetto XMLHttpRequest $.get(url,data,callback,type) Carica i dati remoti usando GET paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 42

43 $.post(url,data,callback,type) $.getjson(url,data,callback) $.getscript(url,callback) Carica i dati remoti usando POST Carica i dati JSON usando GET Carica ed esegue un file JavaScript XML JQuery ha la possibilità di fare il parsing di documenti XML come in questo esempio: <?xml version="1.0" encoding="utf-8"?> <books> <book id="1"> <title>il Telemacone</title> <author>paolo, Macchi</author> </book> <book id="2"> <title>il Milione</title> <author>marco, Polo/author> </book> </books> <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() $('#target').click(function() // alert('click() for parsing XML '); $.ajax( url: "books.xml", datatype: "xml", success: function(data) // Parsing happens here $(data).find("book").each(function() alert($(this).attr("id")+" "+$(this).find("title").text() ); ); ); ); ); </script> <style type="text/css"> a.test font-weight: bold; </style> </head> <body> <div id="target"> Click here parsing XML </div> </body> </html> cfr. e Per una migliore interfaccia utente e servizi RIA : paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 43

44 Firebug: debug di una pagina html Esistono applicazioni fatte apposta per girare su un browser (plugin) che servono a fare il debug di pagine HTML. Il piu famoso, per browser Firefox-Mozilla è Firebug (Per Internet Explorer basta premere F12, oppure usare la versione Lite di Firebug) Con questo plugin è possibile editare, debuggare e controllare il comportamento dei fogli CSS, del codice HTML di JavaScript e delle chiamate AJAX. Inoltre è possibile verificare il tempo di risposta dei singoli oggetti inseriti in una pagina web. La potenza di questo strumento risiede nella possibilità di modificare sia il codice HTML sia gli attributi CSS e vedere applicate direttamente le modifiche alla pagina visualizzata dal browser, senza più necessità di modificare lo script originale e ricaricare la pagina per vedere il risultato delle nuove modifiche. Naturalmente le modifiche NON sono permanenti e riguardano solo la visualizzazione della pagina in corso. Xcode Apple PhoneGap Xcode (http://developer.apple.com/xcode/) è un ambiente di sviluppo integrato sviluppato da Apple per agevolare lo sviluppo di software per Mac e per sviluppare le applicazioni per iphone e ipod touch. Xcode è in grado di compilare codice C, C++, Objective C/C++ e Java su macchine Apple. Una possibilità per costrure applicazioni è quella di integrare Xcode con PhoneGap. PhoneGap è una piattaforma di applicazione HTML5 che permette di creare applicazioni native sfruttando tecnologie web indipendenti, basate su HTML, CSS e JavaScript. In figura è mostrato l ambiente di sviluppo che si serve di PhoneGap per mostrae nel simulatore di ipad la scritta hello world. PhonGap (http://www.phonegap.com/ ) è open source e multipiattaforma: ios, Android, Windows, Symbian, BlackBerry, Applicazioni utente in Facebook paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 44

HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento

HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento HTML Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento Cenni di HTML Hypertext Markup Language Linguaggio con cui sono scritte le pagine web Permette di realizzare

Dettagli

Metodologie Informatiche applicate al Turismo

Metodologie Informatiche applicate al Turismo Metodologie Informatiche applicate al Turismo 11. Realizzare Siti Dinamici e Applicazioni Web Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it

Dettagli

Siti interattivi e dinamici. in poche pagine

Siti interattivi e dinamici. in poche pagine Siti interattivi e dinamici in poche pagine 1 Siti Web interattivi Pagine Web codificate esclusivamente per mezzo dell HTML non permettono alcun tipo di interazione con l utente, se non quella rappresentata

Dettagli

Applicazioni web-based. Progettazione di Sistemi Interattivi. Implementazione di sistemi interattivi web-based (prima parte) Gli Standard Web

Applicazioni web-based. Progettazione di Sistemi Interattivi. Implementazione di sistemi interattivi web-based (prima parte) Gli Standard Web Progettazione di Sistemi Interattivi Implementazione di sistemi interattivi web-based (prima parte) Docente: Daniela Fogli Applicazioni web-based Il World Wide Web (W3C) [www.w3.org]: Fondato da Tim Berners-Lee

Dettagli

GUIDA HTML 4.01 andreavasini@libero.it HTML.IT

GUIDA HTML 4.01 andreavasini@libero.it HTML.IT Tutti i diritti sono riservati. Per pubblicazioni od utilizzo di questo materiale pregasi contattare l autore al seguente indirizzo: andreavasini@libero.it Andrea Vasini HTML.IT HTML.IT - Andrea Vasini

Dettagli

Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:

Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: SIZE= numero per modificare le dimensioni Es:

Dettagli

HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: ...

HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>... HTML HyperText Markup Language Struttura di un documento HTML Gli elementi essenziali di un documento HTML sono i seguenti TAG: ... ... ... Struttura di un documento

Dettagli

Esercitazioni di HTML

Esercitazioni di HTML Esercitazioni di HTML a cura di Maria Finazzi (23 novembre-1 dicembre 2006) e-mail: maria.finazzi@unipv.it pagine web: Dietro una pagina web Alcuni esempi:

Dettagli

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Chi può riuscire a creare pagine HTML? La realizzazione di pagine web non eccessivamente sofisticate è alla portata di tutti, basta

Dettagli

Guida introduttiva al Document Object Model

Guida introduttiva al Document Object Model Guida introduttiva al Document Object Model ( I.D. Falconi ~ 27.02.13) Il DOM (Document Object Model) è un modello che descrive come i diversi oggetti di una pagina web sono collegati tra loro. Tecnicamente

Dettagli

Maria Grazia Ottaviani. informatica, comunicazione e multimedialità

Maria Grazia Ottaviani. informatica, comunicazione e multimedialità Maria Grazia Ottaviani informatica, comunicazione e multimedialità Unità digitale 1 Ambiente HTML Introduzione Oltre ai linguaggi di programmazione esistono anche linguaggi detti markup. Sono linguaggi

Dettagli

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima.

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima. UTILIZZO DEI CSS FOGLI STILE Il CSS consente di associare regole stilistiche agli elementi del codice HTML come o . Queste regole definiscono l aspetto rappresentativo degli elementi HTML a cui

Dettagli

La pagina Web modulo.html utilizza le specifiche di stile descritte nel foglio feedback.css.

La pagina Web modulo.html utilizza le specifiche di stile descritte nel foglio feedback.css. Moduli di feedback Uno degli strumenti per l interattività con gli utenti è la pagina per raccogliere suggerimenti o commenti dai visitatori, formata da moduli sul video da riempire con il nome del mittente,

Dettagli

CSS. Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html. ignorare la definizione degli elementi di stile

CSS. Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html. ignorare la definizione degli elementi di stile CSS Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html CSS: Cascading Style Sheet! Tecnologia W3C per la definizione dello stile di una pagina web! Contenuto e

Dettagli

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini STRUTTURA A DUE COLONNE Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini Un layout a due colonne ha, in genere, la seguente struttura: un'intestazione (TESTATA)

Dettagli

JAVASCRIPT. Tale file è associato alla pagina web mediante il tag