Slides do minicurso "Javascript + JQuery: With great power, comes great responsability" apresentado no SCTI 2011 (http://scti.uenf.br/2011).

1. Javascript + jQuery: With great power, comes great responsibility http://www.slideshare.net/ciberglo/scti-2011-minicurso-jquery Gabriel Lima @glima5 github.com/gabriellima

7. if ( 4 && !0 && "test" && !"" && !undefined && { } ){

8. alert("true");

9. }

10. Balanceando: Funções

12. var shape = new Shape();

13. var obj = { }; // Object literal, == "new Object()"

14. var arr = [ ]; // Array literal, == "new Array()"

15. var exp = /[0-9a-z]/ig; // reg exp literal

17. var lastNames = { };

18. lastNames["Jason"] = "Horton";

19. lastNames["Matheu"] = "Chambers";

20. lastNames["Rohit"] = "Mistry";

21. for ( var key in lastNames ) {

22. alert( key + " " + lastNames[key] );

23. }

26. // retorna ["a", "A", "b", "f", "o", "x", "Z"] ... mais útil

27. Scope var iAmGlobal = 5 * 5; function doSomething() { var inner = 5 * 5; }; var g = "global"; function go() { var l = "local"; } go(); console.log(l); // throws a reference error

28. Scope: How it works function go() { console.debug(this); } go(); var myObject = { go: function() { console.debug(this); } }; myObject.go(); // console.debugs a reference to myObject

29. Scope: How it works function MyClass() { this.go = function() { console.debug(this); } }; var instance1 = new MyClass(); var instance2 = new MyClass(); instance1.go(); // console.debugs a reference to the MyClass instance1 instance2.go(); // console.debugs a reference to the MyClass instance2

31. Todo o resto deve ser deixado pra tecnologia que temos pra fazer o serviço.

34. Web Site – Web Browser ?

35. Não!

36. Web Browser – Web Page

37. Televisão – Show de música

38. Sim!

40. Progressive enhancement 2.0

46. Melhor experiência de acordo com capacidade do dispositivo

48. Script avançado e comportamentos -> somente com APIs javascript nativas

49. Navegadores antigos quase sempre precisam de muito mais código pra fazer a mesma coisa!

57. Você não está sozinho

59. <button id='do_search'>better!</button>

60. (function(){ var search_button = document.getElementById('do_search'); search_button.onclick = function(event) { do_something(); } })();

62. Se você percebe que está digitando muito código HTML num codigo javascript, você deve estar fazendo algo errado

67. Exemplo: borda vermelha

68. Exemplo: borda vermelha

69. Event handlers should only handle events //the wrong way!!! function handleClick(event){ var popup = document.getElementById(&quot;popup&quot;); popup.style.left = event.clientX + &quot;px&quot;; popup.style.top = event.clientY + &quot;px&quot;; popup.className = &quot;reveal&quot;; }

70. Don't pass the event object around //better, but still wrong function handleClick(event){ showPopup(event); } function showPopup(event){ var popup = document.getElementById(&quot;popup&quot;); popup.style.left = event.clientX + &quot;px&quot;; popup.style.top = event.clientY + &quot;px&quot;; popup.className = &quot;reveal&quot;; }

71. Separe corretamente os event handlings //fuck yeah!! function handleClick(event){ showPopup(event.clientX, event.clientY); } function showPopup(x, y){ var popup = document.getElementById(&quot;popup&quot;); popup.style.left = x + &quot;px&quot;; popup.style.top = y + &quot;px&quot;; popup.className = &quot;reveal&quot;; }

72. Avoid global functions and variables function handleClick(event){ showPopup(event.clientX, event.clientY); } function showPopup(x, y){ var popup = document.getElementById(&quot;popup&quot;); popup.style.left = x + &quot;px&quot;; popup.style.top = y + &quot;px&quot;; popup.className = &quot;reveal&quot;; }

73. Create a single global (se necessário) var Controller = { handleClick: function(event){ this.showPopup(event.clientX, event.clientY); }, showPopup: function (x, y){ var popup = document.getElementById(&quot;popup&quot;); popup.style.left = x + &quot;px&quot;; popup.style.top = y + &quot;px&quot;; popup.className = &quot;reveal&quot;; } };

74. Separe configurações function validate(value) { if (!value) { alert(&quot;Invalid value&quot;); location.href = &quot;/errors/invalid.php&quot;; } };

75. Separe configurações var config = { urls: { invalid: &quot;/errors/invalid.php&quot; }, strs: { invalidmsg: &quot;Invalid value&quot; } }; function validate(value) { if (!value) { alert(config.strs.invalidmsg); location.href = config.urls.invalid; } };

77. Qualquer texto exibido para o usuário

78. Qualquer HTML que precisa ser criado pelo javascript

79. Configurações (exemplo: itens por página)

80. Valores únicos repetidos

81. Qualquer coisa que talvez seja modificada no futuro, e utilizada em mais de um lugar

82. Otimizando Loops: var names = ['George','Ringo','Paul','John']; for(var i=0;i<names.length;i++){ doSomeThingWith(names[i]); } var names = ['George','Ringo','Paul','John']; var all = names.length; for(var i=0;i<all;i++){ doSomeThingWith(names[i]); }

84. Isso inclui expressões regulares, mas primeiro e mais importante: DOM manipulation (CAUTION!)

85. Você pode criar nós do DOM no loop, mas evitar sua inserção no documento

86. Repaint vs Reflow

88. - Mark 'Tarquin' Wilton-Jones, Opera

91. Borders

92. Colors

95. - Chris Waterson, Mozilla

97. Browser window resize

98. DOM nodes added or removed

99. Layout styles applied

100. Layout information retrieved

102. Agrupar modificações de estilos

103. Cachear informações de layout

107. Medium: Colocar 'display' do elemento como 'none', aplicar modificações, colocar 'display' volta ao padrão

108. Fuck yeah!: Construir modificações do DOM num 'DocumentFragment' e depois aplicar tudo de uma vez

110. Não tem representação visual

111. Seu pai é o document que o gerou

112. Quando passado para 'appendChild()', adiciona todos seus filhos ao invés de si próprio

115. Agrupar modificações de estilos

116. Cachear informações de layout

119. Definir a classe CSS com todas modificações e então apenas modificar a propriedade 'className'

120. Definir diretamente o 'cssText' no elemento

124. Agrupar modificações de estilos

128. Se um valor é usado mais de uma vez, armazene-o em uma variável local

143. Limita a qtd. de tempo que um script tem para ser executado

146. Exceção: Opera não tem runaway timer

152. Firefox: 10 seconds

153. Safari: 5 seconds

154. Chrome: Unknown, hooks into normal crash control mechanism

155. Opera: none

163. Schedules a new JavaScript execution job for some time in the future

166. Use timers to delay some processing for later

172. No access to DOM, BOM

173. Completely separate execution environment

176. UI cannot be updated while JavaScript is executing

177. Keep JavaScript execution to 50ms – use timers and/or web workers to offload processing

178. Jquery: Traversing

180. Porém, deve ser usado com cautela, pois ao mesmo tempo que pode melhorar o código pode às vezes prejudicar a performance

181. Principal teoria: html / css selectors

182. http://code.jquery.com/jquery-latest.js

183. // jQuery 1.7

185. div.photo, div.title and div.rating são filhos 'imediatos' do div.container

186. Cada div.star é filho de div.rating

187. Quando uma div.star tem a class 'on', é uma estrela selecionada

192. A selector expression is passed to children() to narrow the result down to only the full stars.

193. If children() receives no parameters, all immediate children will be returned.

194. No grandchildren will be returned. Sorry.

195. .children

197. The following example should be pretty straightforward. The full stars are filtered out from a collection of all five stars.

201. Again, very straightforward. The photo box is added to the selection.

203. The second parameter is the zero-based index of the first element NOT to be included in the returned slice. If omitted, the slice extends to the end of the set.

204. So slice(0, 2) selects the first two stars.

205. .slice

207. As shown in the figure below, the first star’s direct parent is selected. Very handy, hah?

208. It should be noted that only the direct parent will be returned, which is why it’s singular. No grandparent or ancestors will be selected.

210. By passing ‘.container‘ to parents(), div.container, which actually is the grandparent of the first star, is selected.

213. The ‘odd’ siblings are selected as shown. Again, the index is zero-based. Look at the red numbers below the stars.

215. The prevAll() selects all previous siblings of a set of elements.

216. This is super handy if you’re building a star rating widget. The previous siblings of the third star are selected.

221. The output of one function can be the input of another – that is to say, they’re chainable .

222. Multi-select transfer $().ready(function() { $('#add').click(function() { return !$('#select1 option:selected').appendTo('#select2'); }); $('#remove').click(function() { return !$('#select2 option:selected').appendTo('#select1'); }); });

223. Multi-transfer <html> <head> <script src=&quot;jquery-latest.js&quot; type=&quot;text/javascript&quot;></script> <script type=&quot;text/javascript&quot;> $().ready(function() { $('#add').click(function() { return !$('#select1 option:selected').remove().appendTo('#select2'); }); $('#remove').click(function() { return !$('#select2 option:selected').remove().appendTo('#select1'); }); }); </script> <style type=&quot;text/css&quot;> a { display: block; border: 1px solid #aaa; text-decoration: none; background-color: #fafafa; color: #123456; margin: 2px; clear:both; } div { float:left; text-align: center; margin: 10px; } select { width: 100px; height: 80px; } </style> </head> <body> <div> <select multiple id=&quot;select1&quot;> <option value=&quot;1&quot;>Option 1</option> <option value=&quot;2&quot;>Option 2</option> <option value=&quot;3&quot;>Option 3</option> <option value=&quot;4&quot;>Option 4</option> </select> <a href=&quot;#&quot; id=&quot;add&quot;>add &gt;&gt;</a> </div> <div> <select multiple id=&quot;select2&quot;></select> <a href=&quot;#&quot; id=&quot;remove&quot;>&lt;&lt; remove</a> </div> </body> </html>

224. Select all $('form').submit(function() { $('#select2 option').each(function(i) { $(this).attr(&quot;selected&quot;, &quot;selected&quot;); }); });

226. Extremamente útil, se souber utilizá-lo devidamente

227. Exemplo de código ruim:

228. .append

229. .append

230. .append

231. .append

233. A última solução poderia ser ainda melhorada, salvando antecipadamente o atributo '.length'

234. .append var arr = [1, 2, 3, 4, 5, 'adsf', 'as', 6, 2, 3, 6, 'ffadscdasc', 'cada', '2wd', 3, 7, 3, 2, 'sdf', 1, 2, 3, 4, 5, 'adsf', 'as', 6, 2, 3, 6, 'ffadscdasc', 'cada', '2wd', 3, 7, 3, 2, 'sdf', 1, 2, 3, 4, 5, 'adsf', 'as', 6, 2, 3, 6, 'ffadscdasc', 'cada', '2wd', 3, 7, 3, 2, 'sdf', 1, 2, 3, 4, 5, 'adsf', 'as', 6, 2, 3, 6, 'ffadscdasc', 'cada', '2wd', 3, 7, 3, 2, 'sdf', 1, 2, 3, 4, 5, 'adsf', 'as', 6, 2, 3, 6, 'ffadscdasc', 'cada', '2wd', 3, 7, 3, 2, 'sdf', 1, 2, 3, 4, 5, 'adsf', 'as', 6, 2, 3, 6, 'ffadscdasc', 'cada', '2wd', 3, 7, 3, 2, 'sdf', 1, 2, 3, 4, 5, 'adsf', 'as', 6, 2, 3, 6, 'ffadscdasc', 'cada', '2wd', 3, 7, 3, 2, 'sdf', 1, 2, 3, 4, 5, 'adsf', 'as', 6, 2, 3, 6, 'ffadscdasc', 'cada', '2wd', 3, 7, 3, 2, 'sdf', 1, 2, 3, 4, 5, 'adsf', 'as', 6, 2, 3, 6, 'ffadscdasc', 'cada', '2wd', 3, 7, 3, 2, 'sdf', 1, 2, 3, 4, 5, 'adsf', 'as', 6, 2, 3, 6, 'ffadscdasc', 'cada', '2wd', 3, 7, 3, 2, 'sdf'];

236. .click()

237. .live() and .die()

238. Event .toggle and animation .toggle <html> <head> <style> ul { margin:10px; list-style:inside circle; font-weight:bold; } li { cursor:pointer; } </style> <script src=&quot;jquery-latest.js&quot;></script> </head> <body> <ul> <li>Go to the store</li> <li>Pick up dinner</li> <li>Debug crash</li> <li>Take a jog</li> </ul> <script> $(&quot;li&quot;).toggle( function () { $(this).css({&quot;list-style-type&quot;:&quot;disc&quot;, &quot;color&quot;:&quot;blue&quot;}); }, function () { $(this).css({&quot;list-style-type&quot;:&quot;disc&quot;, &quot;color&quot;:&quot;red&quot;}); }, function () { $(this).css({&quot;list-style-type&quot;:&quot;&quot;, &quot;color&quot;:&quot;&quot;}); } ); </script> </body> </html>

239. Chrome permissions chromium-browser --allow-file-access-from-files

241. .load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

242. .get or .load? $.get('ajax/test.html', function(data) { $('.result').html(data); alert('Load was performed.'); }); $('.result').load('ajax/test.html', function(){ console.log('finished!'); }); $('#b').load('article.html #target');

243. .load $(&quot;#success&quot;).load(&quot;/not-here.php&quot;, function(response, status, xhr) { if (status == &quot;error&quot;) { var msg = &quot;Sorry but there was an error: &quot;; $(&quot;#error&quot;).html(msg + xhr.status + &quot; &quot; + xhr.statusText); } });