Rich Ajax Web Interfaces in Jquery

1. Rich Ajax Web Interfaces A LBERTO B USCHETTU

3. Ajax: la svolta del web 2.0;

4. Jquery: introduzione;

5. Jquery: operazioni più comuni e utili;

6. UI Jquery;

7. Casi d'uso e dettagli;

8. Jquery e Struts;

9. Guide, books e link utili.

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="my-script.js"></script> </head> <body>  <script type="text/javascript"> // <![CDATA[ // ]]> </script> </body> </html>

16. Text : il testo dentro un element;

19. IE usa Trident ;

20. Safari, Chrome, Konqueror usano WebKit ;

22. <head>

23. <title>My Document</title>

24. </head>

25. <body>

26. <h1>Header</h1>

27. <p>

28. Paragraph

29. </p>

30. </body>

31. </html> DOM in Html

33. String: var myString = "mio nome";

34. Date: var Data = new Date();

35. Math: Math.acos(x);

36. Object, Function, Boolean, RegExp.

37. ps. Undefined, Null, Boolean, Number, and String sono primitive Quelli definiti dall'utente

39. // Literal (curly braces): var Fish = { name: "",

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)

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]; } }

48. var myParagraph = document.getElementById('myid');

49. var content = myParagraph.firstChild.data;

51. var newTxt= document.createTextNode(text); //text='blabla';

52. newEl.setAttribute(name, value); // es.: newEl.setAttribute ('href',' http://www ...');

53. newEl.appendChild(newTxt);

54. //adding to the DOM

55. var element = document.getElementById("para1");

56. element.appendChild(newEl);

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'); }

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

74. Operation (ajax);

75. Update (dom). Ajax: da syncrono ad asincrono

77. Creare un oggetto XHR ( new XMLHttpRequest() );

78. Creare la richiesta( open e send );

79. Scrivere il callback ( per l'evento onreadystatechange );

80. Parsing della risposta.

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

83. Object detection (window.XMLHttpRequest);

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.

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!)

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

101. <html>

102. <head>

103. <style>

104. div { color:blue; }

105. div#five { color:red; }

106. </style>

107. <script src="http://code.jquery.com/jquery-latest.min.js"></script>

108. </head>

109. <body>

110. <div id="one"></div>

111. <div id="two"></div>

112. <div id="three"></div>

113. <div id="four"></div>

114. <div id="five"></div>

115. <script>

116. $().ready(function() {

117. var arr = [ "one", "two", "three", "four", "five" ];

118. var obj = { one:1, two:2, three:3, four:4, five:5 };

119. jQuery.each(arr, function() {

120. $("#" + this).text("Mine is " + this + ".");

121. return (this != "three"); // will stop running after "three"

122. });

123. jQuery.each(obj, function(i, val) {

124. $("#" + i).append(document.createTextNode(" - " + val));

125. });

126. });

127. </script>

128. </body>

129. </html>

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

142. $('ul#goo li:first');

144. .val() --> per gli elementi forms

145. .addClass('myclass')

146. .hasClass('myclass')

147. .text() -> ottiene il testo di tutti gli elementi individuati.

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

157. .append('<p>blablabla bla </p>')

158. .before('<p></p>');

159. .replaceWith().

161. . height() -> attributo altezza dell'elemento

162. . position() -> restituisce la posizione rispetto all'offset parentv ( var position = $(“div”).position().top )

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();

173. myOBJ.bind('myevent_name', function(){

174. //fai operazioni sul $(this)});

175. myOBJ.trigger('myevent_name'); // scatena l'evento

177. .hide()

178. .fadeTo() (es.: $('#book').fadeTo('slow', 0.5, function() { // Animation complete. });

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>

186. $("p:first").click(function () {

187. $(this).fadeTo("slow", 0.33);

188. });

189. </script>

191. .post()

192. .get()

195. alert("questo è il mio nuovo plugin")

196. return this;};

197. $(document).ready(function(){

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" } }

202. $(dofunct{})

203. $(function(){}); //funzione anonima

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

211. var myvar=null;

212. }

213. )();

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.

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

Rich Ajax Web Interfaces in Jquery

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (10)

Semelhante a Rich Ajax Web Interfaces in Jquery

Semelhante a Rich Ajax Web Interfaces in Jquery (20)

Rich Ajax Web Interfaces in Jquery