![C ODICE JS <DOCTYPE油html油PUBLIC油"-//W3C//DTD油XHTML油1.0油Strict//EN"油"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">油油 <html油xmlns="http://www.w3.org/1999/xhtml"油lang="en">油油 油油油油 <head>油 油油油油油油油油油油油油 <meta油http-equiv="Content-Type"油content="text/html;油charset=UTF-8"油/>油油 油油油油油油油油油油油油 <title>JavaScript!</title>油油 油油 油油油 油油油 油 <script type="text/javascript" src=/slideshow/rich-ajax-web-interfaces-in-jquery/7298073/"my-script.js"></script> 油油油油 </head>油油 油油油油 <body>油油 油油 <!-- cdata per evitare problemi di validazione xhtml e commentati per impedire di non interpretare il codice javascript nei vecchi browser che non comprendono il tag cdata --> 油油油油油油油油 <script油type="text/javascript">油油 油油油油油油油油 //油<![CDATA[油油 油油 油油油油油油油油 //油]]>油油 油油油油油油油油 </script>油油 油油 油油油油 </body>油油 </html> 油](https://image.slidesharecdn.com/slidejavascriptjquery-110317134140-phpapp01/85/Rich-Ajax-Web-Interfaces-in-Jquery-13-320.jpg)
![Funzioni Le funzioni sono istanze del tipo base Function; Non necessario scrivere tutti i parametri (arguments[i]) function name(argumentlist) block;](https://image.slidesharecdn.com/slidejavascriptjquery-110317134140-phpapp01/85/Rich-Ajax-Web-Interfaces-in-Jquery-41-320.jpg)
![Sintassi Javascript e Java a confronto JavaScript function Impiegato () { this.nome = ""; this.dipartimento = "generale"; } Java public class Impiegato { public String nome; public String dipartimento; public Impiegato () { this.nome = ""; this.dipartimento = "generale"; } } function Manager () { this.reports = []; } Manager.prototype = new Impiegato; function Progettista () { this.progetti = []; } Progettista.prototype = new Impiegato; public class Manager extends Impiegato { public String[] reports; public Manager () { this.reports = new String[0]; } } public class Progettista extends Impiegato { public String[] progetti; public Progettista () { this.progettista = new String[0]; } }](https://image.slidesharecdn.com/slidejavascriptjquery-110317134140-phpapp01/85/Rich-Ajax-Web-Interfaces-in-Jquery-46-320.jpg)
More Related Content
What's hot (10)
Similar to Rich Ajax Web Interfaces in Jquery (20)
Rich Ajax Web Interfaces in Jquery
- 1. Rich Ajax Web Interfaces A LBERTO B USCHETTU
- 2. S UMMARY Javascript: breve introduzione;
- 3. Ajax: la svolta del web 2.0;
- 5. Jquery: operazioni pi湛 comuni e utili;
- 6. UI Jquery;
- 7. Casi d'uso e dettagli;
- 9. Guide, books e link utili.
- 10. J AVASCRIPT : BREVE INTRODUZIONE 油 Basato sullo standard ECMAScript ( ECMA-262 ) ed 竪 stato creato da Brendan Eich of Netscape;
- 11. Loosely typed, prototype based ed油 interpretato dal browser;
- 12. E' un linguaggio funzionale: tratta le funzioni come oggetti;
- 13. C ODICE JS <DOCTYPE油html油PUBLIC油"-//W3C//DTD油XHTML油1.0油Strict//EN"油"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">油油 <html油xmlns="http://www.w3.org/1999/xhtml"油lang="en">油油 油油油油 <head>油 油油油油油油油油油油油油 <meta油http-equiv="Content-Type"油content="text/html;油charset=UTF-8"油/>油油 油油油油油油油油油油油油 <title>JavaScript!</title>油油 油油 油油油 油油油 油 <script type="text/javascript" src=/slideshow/rich-ajax-web-interfaces-in-jquery/7298073/"my-script.js"></script> 油油油油 </head>油油 油油油油 <body>油油 油油 <!-- cdata per evitare problemi di validazione xhtml e commentati per impedire di non interpretare il codice javascript nei vecchi browser che non comprendono il tag cdata --> 油油油油油油油油 <script油type="text/javascript">油油 油油油油油油油油 //油<![CDATA[油油 油油 油油油油油油油油 //油]]>油油 油油油油油油油油 </script>油油 油油 油油油油 </body>油油 </html> 油
- 14. DOM (1) Utilizza il DOM (Document Object Model): rappresentazione dei documenti strutturati come modello orientato ad oggetti ;
- 15. DOM (2) Costituito da nodi. I tipi di nodi pi湛 interessanti: Element : elemento dentro una pagina (contiene altri nodi);
- 16. Text : il testo dentro un element;
- 17. Document : la root della gerarchia DOM (es.: tag html); Attualmente si usa il livello 2 del DOM;
- 18. Il DOM cambia a seconda del layout-engine usato dal browser: Firefox,Camino, Flock, SeaMonkey,.., usano Gecko ;
- 19. IE usa Trident ;
- 20. 油 Safari, Chrome, Konqueror usano WebKit ;
- 21. http://it.wikipedia.org/wiki/Document_Object_Model Anche i blank sono dei nodi del DOM (B rowser OM); <html>
- 22. <head>
- 24. </head>
- 25. <body>
- 26. <h1>Header</h1>
- 27. <p>
- 28. Paragraph
- 29. </p>
- 30. </body>
- 31. </html> DOM in Html
- 32. O GGETTI DI JS Hanno propriet , eseguono metodi e reagiscono ad eventi ; Window: la finestra del browser, oggetto di default di JS; Document: oggetto document; Location: url della pagina corrente; Navigator: info sul browser; History: oggetto della cronologia; Forms, Ancors, Links: oggetti html del documento; Array: var myArray = new Array(4);
- 33. String: var myString = "mio nome";
- 34. Date: var Data = new Date();
- 36. Object, Function, Boolean, RegExp.
- 37. ps. Undefined, Null, Boolean, Number, and String sono primitive Quelli definiti dall'utente
- 38. O GGETTI definiti dall'utente: Creazione 油 Notazione compatta
- 39. // Literal (curly braces): var Fish = { name: "",
- 40. description :"", showDescription: function(){油alert (this.name.toUpperCase() + " is a tropical fish!");} } var MyFish = Object.create(Fish); MyFish.name="guppy"; MyFish.descrizione="Pesce tropicale ....." Uso del costruttore Object (utile se necessita una sola istanza) // Using the Object constructor: var profile = new Object(); profile.name = 'Bob'; profile.age = 99; profile.job = 'Freelance Hitman Con definizione del costruttore // costruttore, senza dichiarare un return in modo da restituire l'oggetto appena creato. function MyObject(parameter1, parameter2) { this.property1 = parameter1 this.property2 = parameter2 } // creazione di un oggetto var myobj = new MyObject('franco', 77)
- 41. Funzioni Le funzioni sono istanze del tipo base Function; Non necessario scrivere tutti i parametri (arguments[i]) function name(argumentlist) block;
- 42. Function statement : var name= function name(argumentlist) block
- 43. Function operator : function name(argumentlist) block -->crea un oggetto di tipo Function. Senza nome crea funzione anonima
- 44. Function constructor : new Function(strings...) --> corpo della funzione come stringa come parametro (deprecata)
- 45. Estendere un oggetto var Fish = function (name, description) { this.name=name; this.description=description; var peso=0; //propriet privata! }; Fish.prototype.showDescription = function(){ $('div.descr').append("<p>Nome:<p/><p>" +this.name + "</p> " + <p>Descrizione:</p><p>" +this.description+"</p>);油 } Il prototype 竪 una base reference dell'oggetto che serve per tutte le copie figlie dell'oggetto parent; Creo delle propriet pubbliche. In sostanza f l'ereditariet estendendo l'oggetto base;
- 46. Sintassi Javascript e Java a confronto JavaScript function Impiegato () { this.nome = ""; this.dipartimento = "generale"; } Java public class Impiegato { public String nome; public String dipartimento; public Impiegato () { this.nome = ""; this.dipartimento = "generale"; } } function Manager () { this.reports = []; } Manager.prototype = new Impiegato; function Progettista () { this.progetti = []; } Progettista.prototype = new Impiegato; public class Manager extends Impiegato { public String[] reports; public Manager () { this.reports = new String[0]; } } public class Progettista extends Impiegato { public String[] progetti; public Progettista () { this.progettista = new String[0]; } }
- 47. DOM TRAVERSING Traversing DOM: getter //referenziare un elemento DOM
- 48. var myParagraph = document.getElementById('myid');
- 49. var content = myParagraph.firstChild.data;
- 50. Traversing DOM: setter var newEl = document.createElement(tagname); // tagname: a for <a href="...></a>
- 51. var newTxt= document.createTextNode(text); //text='blabla';
- 52. newEl.setAttribute(name, value); // es.: newEl.setAttribute ('href',' http://www ...');
- 54. //adding to the DOM
- 55. var element = document.getElementById("para1");
- 57. element.insertBefore(existingNode, newEl); 油 油 <html> <head></head> <body> .... <p油id="myid">My油first油paragraph...</p> .... </body> </html>
- 58. E VENTI Possono essere metodi degli oggetti DOM;
- 59. Eventi del mouse: onClick, onDblClick, onMouseOver, onDragDrop...
- 60. Eventi da tastiera: onKeyPress (preme e rilascia) , onKeyDown;
- 61. Eventi da modifica: onChange;
- 62. Eventi di "fuoco": onFocus(evidenziato), onBlur (de-evidenziato), onSelect (se si seleziona);
- 63. Eventi da caricamento: onLoad, onUnload (chiuso docum );
- 64. Oggetto event (propriet target, screenX, etc.).
- 65. <a href="go.html" onmouseover="myposition(event);">clicca</a> function myposition (e) { alert('il mouse si trova nella posizione ' + e.screenX + ' - ' + e.screenY +'dello schermo'); }
- 66. Ajax AJAX (Asincronous Javascript and XML);
- 67. L'oggetto XmlHttpRequest (XHR) alla base di tutto;
- 68. Ajax = XML + DHTML(HTML+Javascript+CSS)+Rich Design;
- 69. XHR per chiamate GET e POST asincrone;
- 70. Asincronia: elimina la linearit del flusso dati;
- 71. Modello tradizionale e modello Ajax
- 72. Ajax: da syncrono ad asincrono
- 73. Si segue un design pattern basato su: Trigger (event o timer);
- 75. Update (dom). Ajax: da syncrono ad asincrono
- 76. Ajax: operation Chiamata AJAX:
- 77. Creare un oggetto XHR ( new XMLHttpRequest() );
- 78. Creare la richiesta( open e send );
- 79. Scrivere il callback ( per l'evento onreadystatechange );
- 81. Ajax: operation if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","ajax_info.txt",true); //open(method,url,async) xmlhttp.send(); //xmlhttp.open("POST","ajax_test.asp",true); //xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //settiamo l'handler onreadystatechange xmlhttp.onreadystatechange=function() //chiamata quando cambia il readyState { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } Property Description readyState Status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready status 200: "OK" 404: Page not found
- 82. C ROSSBROWSING Browser sniffing (es.:navigator.userAgent.indexOf("Opera"));
- 84. L IBRERIE J AVASCRIPT : PERCH USARLE Riduzione delle righe di codice;
- 85. Per ottenere javascript non intrusivo evitando " inline-javascript ";
- 86. Facilit nel manipolare il DOM;
- 87. Facilit nell'uso degli eventi;
- 88. Ajax reso molto pi湛 produttivo.
- 89. J QUERY : BASI Light-weight library open source (nata nel 2006);油
- 90. Rochester Institute of Technology;
- 91. Ben documentata con numerosi plugins;
- 92. Utilizzatori: Google, Microsoft, Amazon, Dell, Twitter,
- 93. Ogni cosa incapsulata nell'oggetto jQuery ($() -->restituisce $ abbreviazione);
- 94. jQuery.NoConflict() per evitare conflitti con altre librerie($ 竪 globale!)
- 95. J QUERY : C ORE FUNCTIONS .each() --> itera su tutti gli elementi di una collezione
- 96. .size() --> conoscere il numero di elementi dom di quel tipo
- 97. .data()--> memorizza dati in un dom non visibili
- 98. .get(n) --> ottiene l'n-simo elemento (0 based)
- 99. .slice(n,m) --> ottiene elementi tra la posiz. n ed m
- 100. J QUERY : C ORE FUNCTIONS esempi <!DOCTYPE html>
- 101. <html>
- 102. <head>
- 103. <style>
- 104. div { color:blue; }
- 105. div#five { color:red; }
- 106. </style>
- 108. </head>
- 109. <body>
- 115. <script>
- 117. var arr = [ "one", "two", "three", "four", "five" ];
- 118. var obj = { one:1, two:2, three:3, four:4, five:5 };
- 120. $("#" + this).text("Mine is " + this + ".");
- 121. return (this != "three"); // will stop running after "three"
- 122. });
- 124. $("#" + i).append(document.createTextNode(" - " + val));
- 125. });
- 126. });
- 127. </script>
- 128. </body>
- 129. </html>
- 130. J QUERY : S ELECTORS $(#id);
- 131. $('p');
- 132. $('.class');
- 133. $('ul.class');
- 134. $('p : odd')油
- 135. $('p, span') sia i <p> che gli <span>;
- 136. 油 $('p:empty') gli elementi <p> che non hanno figli;
- 137. $('li: has(ul)') tutti i <li> che hanno <ul> come discendente;
- 138. $('p >a') restituisce <a> figlio diretto di p油
- 139. 油 $('a' [href$=.pdf]) tutti gli <a> con un href che termina per pdf
- 140. $('a' [href*=gatto]) tutti gli <a> con href contenenti 'gatto'
- 141. $('div.section')[0] restituisce il primo DOM del div di quel tipo
- 143. J QUERY : A TTRIBUTES .html() -> ottiene o setta contenuto di un dom element
- 144. .val() --> per gli elementi forms
- 145. .addClass('myclass')
- 146. .hasClass('myclass')
- 147. 油 .text() -> ottiene il testo di tutti gli elementi individuati.
- 148. J QUERY : T RAVERSING Attraverso il DOM, non usa XPATH;
- 149. .add('<p>') --> aggiunge gli elementi p al set;
- 150. .children() --> restituisce tutti i figli di ogni elemento del set
- 151. .context() --> restituisce l'elemento DOM referenziato
- 152. .next() --> ottiene il successivo elemento del set;
- 153. 油 .siblings() --> ottiene油 i fratelli dell'elemento corrente;
- 154. .find(selector) --> ottiene il set degli elementi con ....油
- 155. .empty() --> rimuove il contenuto di tutti gli elementi
- 156. J QUERY : M ANIPULATION $('<div />').
- 158. .before('<p></p>');
- 159. .replaceWith().
- 160. J QUERY : CSS . css(property, value)
- 161. . height() -> attributo altezza dell'elemento
- 162. . position() -> restituisce la posizione rispetto all'offset parentv ( var position = $(div).position().top )
- 163. J QUERY : E VENTS event.target --> reference油 all'oggetto che ha scatenato evento
- 164. event.type --> tipo di evento;
- 165. event.data --> secondo parametro di bind()油
- 166. event.stopBubbling --> ferma il bubbling
- 167. .ready()
- 168. .toggle(funct1, funct2) --> 1属 click chiama funct1, 2属 click funct2
- 169. .mouseover()
- 170. .trigger(eventType) --> chiama l'appropriata funz in base ad evento
- 171. .submit()
- 172. var myOBJ = new OBJ();
- 174. //fai operazioni sul $(this)});
- 175. myOBJ.trigger('myevent_name'); // scatena l'evento
- 176. J QUERY : E FFECTS .show()
- 177. .hide()
- 178. .fadeTo() (es.: $('#book').fadeTo('slow', 0.5, function() { // Animation complete. });
- 179. Esempio: <p>
- 180. Click this paragraph to see it fade.
- 181. </p>
- 182. <p>
- 183. Compare to this one that won't fade.
- 184. </p>
- 185. <script>
- 188. });
- 189. </script>
- 190. J QUERY : A JAX .ajax()
- 191. .post()
- 192. .get()
- 193. .getJson() .serialize() -> crea stringa in URL-encoded notation da oggetti appartenenti ad una form bodyContent = $.ajax({ url: "script.php", global: false,油context: document.body, type: "POST", data: ({id : this.getAttribute('id')}), dataType: "html", async:true, success: function(msg){ alert(msg) } });
- 194. J QUERY : come estenderlo Estendere loggetto jQuery aggiungendo Funzioni; $.myFunc(); Estendere loggetto jQuery.fn aggiungedo Metodi; Fn 竪 un prototype dell'oggetto jQuery; jQuery.fn.mioPlugin = function() {
- 195. alert("questo 竪 il mio nuovo plugin")
- 196. return this;};
- 198. $().mioPlugin();
- 199. });
- 200. J QUERY : estendere var object1= { home: { city: "redmond" } } var object2= { home: { zipcode: "98034" } } $.extend(true,{},object1, object2); with deep extension will be: { home: { city: "redmond", zipcode: "98034" } }
- 201. J QUERY : SETUP AMBIENTE Scarica la libreria o linka CDN di google; 油 La ready function: 油 $(document).ready(function(){...})
- 202. $(dofunct{})
- 204. J QUERY : UI $("#draggable").draggable(); $('div.myclass').droppable({ drop: function(ui,event){}, over: function...., //si attiva quando un draggable 竪 dragged over out: function..., //si attiva mentre si fa il drag fuori dal droppable (se era dentro) tolerance: function //la condizione che lancia il drop viene richiamato il drop (Es. 'fit', 'touch',...) })
- 205. J QUERY : UI - DatePicker <input id="datepicker" type="text"> <script> $(function() { $("#datepicker").datepicker() </script>
- 206. J QUERY : UI - Dialog <div id="dialog" title="Dialog Title">I'm in a dialog</div> $("#dialog").dialog();
- 207. J QUERY : UI - Accordion <div id="accordion"> <h3><a href="#">Section 1</a></h3> <div>...content...</div> <h3><a href="#">Section 2</a></h3> <div>...content...</div> <h3><a href="#">Section 3</a></h3> <div>...content...</div> </div> $(#accordion).accordion();
- 208. J QUERY : CLASSI (1) var Fish = Class.extend { 油 init: function(name,description) { this.name=name; this.description=description; } showDescription : function() { $('div.descr').append("<p>Nome:<p><p>" +this.name + "</p> " + <p>Descrizione:</p><p>" +this.description+"</p>);油 } } var myFish = new Fish('Carpa', 'Pesce di acqua dolce molto prolifero...');
- 209. J QUERY : C LASSI (2) var TropicalFish = Fish.extend { 油 init: function (name, description){ this._super(name, description); this.eatable=false; } //override showDescription: function () { 油 alert (this.name.toUpperCase() + " is a tropical fish!"); } 油 } var MyTropicalFish = new TropicalFish("Guppy","Pesce tropicale ....."); MyTropicalFish istanceOf Fish //true
- 210. B EST P RACTICES Uso di funzione anonima per nascondere variabili dal global scope ( function(){
- 211. 油 var myvar=null;
- 212. }
- 213. )();
- 214. Struts2Jquery plugin Veniva usato DOJO, ma 竪 deprecated;
- 215. Meno codice rispetto al plain javascript;
- 216. Jsp pi湛 leggibili!
- 217. Supporto per la validazione;
- 218. Supporto ajax;
- 219. Supporto per i temi;
- 220. Quasi tutti i componenti UI.
- 221. Struts2Jquery: installazione Scarica struts2-jquery-plugin-x.x.x.jar
- 222. Aggiungilo al classpath (WEB-INF/lib)
- 223. Aggiungi la Tag-Lib to your JSP <%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
- 224. Aggiungi il Tag Head all'interno dell'html;
- 225. Jquery: Risorse