Your SlideShare is downloading. ×
0
Javascript + jQuery: With great power, comes great responsibility http://www.slideshare.net/ciberglo/scti-2011-minicurso-j...
 
 
 
Balanceando: Básicos <ul><li>typeof(&quot;&quot;) == &quot;string&quot;
typeof(0) == &quot;number&quot; </li><ul><li>&quot;2&quot; + &quot;2&quot; = &quot;22&quot; </li></ul><li>typeof(true) == ...
if ( 4 && !0 && &quot;test&quot; && !&quot;&quot; && !undefined && { } ){
alert(&quot;true&quot;);
} </li></ul>
Balanceando: Funções
Balanceando: Objetos <ul><li>Tudo que não é uma string, um número ou booleano
var shape = new Shape();
var obj = { };  // Object literal, == &quot;new Object()&quot;
var arr = [ ];  // Array literal, == &quot;new Array()&quot;
var exp = /[0-9a-z]/ig;  // reg exp literal </li></ul>
Balanceando: Hashes <ul><li>Objetos podem ser manipulados como hashes:
var lastNames = { };
lastNames[&quot;Jason&quot;] = &quot;Horton&quot;;
lastNames[&quot;Matheu&quot;] = &quot;Chambers&quot;;
lastNames[&quot;Rohit&quot;] = &quot;Mistry&quot;;
for ( var key in lastNames ) {
alert( key + &quot; &quot; + lastNames[key] );
} </li></ul>
Exemplo: Array sorting <ul>var arr = [&quot;a&quot;,&quot;f&quot;,&quot;Z&quot;,&quot;b&quot;,&quot;x&quot;, &quot;o&quot;...
Exemplo: Array sorting <ul><li>var arr = [&quot;a&quot;,&quot;f&quot;,&quot;Z&quot;,&quot;b&quot;,&quot;x&quot;, &quot;o&q...
// retorna [&quot;a&quot;, &quot;A&quot;, &quot;b&quot;, &quot;f&quot;, &quot;o&quot;, &quot;x&quot;, &quot;Z&quot;]  ... ...
Scope var iAmGlobal = 5 * 5; function doSomething() { var inner = 5 * 5; }; var g = &quot;global&quot;; function go() { va...
Scope: How it works function go() { console.debug(this); } go(); var myObject = { go: function() { console.debug(this); } ...
Scope: How it works function MyClass() { this.go = function() { console.debug(this); } }; var instance1 = new MyClass(); v...
Qual o lugar do javascript? <ul><li>JavaScript é bom para cálculo, conversão, acesso a fontes externas (Ajax) e definição ...
Todo o resto deve ser deixado pra tecnologia que temos pra fazer o serviço. </li></ul>
 
Progressive enhancement <ul><li>Web Page :: Printed page
Web Site – Web Browser ?
Não!
Web Browser – Web Page
Televisão – Show de música
Sim! </li></ul>
 
Progressive enhancement 2.0
Progressive enhancement 2.0 <ul><li>Chrome </li></ul>
Progressive enhancement 2.0 <ul><li>Firefox </li></ul>
Progressive enhancement 2.0 <ul><li>IE 9 </li></ul>
Progressive enhancement 2.0 <ul><li>IE 6 </li></ul>
Progressive enhancement 2.0 <ul><li>Netscape 4 </li></ul>
Melhor experiência de acordo com capacidade do dispositivo
<ul><li>Bordas curvas, Sombra, Gradient -> CSS
Script avançado e comportamentos -> somente com APIs javascript nativas
Navegadores antigos quase sempre precisam de  muito mais  código pra fazer a mesma coisa! </li></ul>
 
 
<ul><li>Mas as pessoas não vão notar? </li></ul>
 
<ul>O que você viu? </ul>
 
 
Você não está sozinho
Keep javascript out of HTML <ul><li><button onclick='do_something()'>wrong!</a>
<button id='do_search'>better!</button>
(function(){   var search_button = document.getElementById('do_search');   search_button.onclick = function(event) {   do_...
HTML vs Javascript <ul><li>Fuja de inserir HTML diretamente no código javascript
Se você percebe que está digitando muito código HTML num codigo javascript, você deve estar fazendo algo errado </li></ul>
Keep HTML out of Javascript <ul>var element = document.getElementById('container'); element.innerHTML = “<div class=”popup...
Keep Javascript out of CSS <ul>.foo {   width: expression(document.offsetwidth + “px”); } </ul>
Keep CSS out of Javascript <ul><li>Estilos não devem ser confundidos com comportamentos
Exemplo: borda vermelha </li><ul><li>Coloque uma borda vermelha em todos campos com uma classe “required” quando estiverem...
Exemplo: borda vermelha
Exemplo: borda vermelha
Event handlers should only handle events //the wrong way!!! function handleClick(event){ var popup = document.getElementBy...
Don't pass the event object around //better, but still wrong function handleClick(event){ showPopup(event); } function sho...
Separe corretamente os event handlings //fuck yeah!! function handleClick(event){ showPopup(event.clientX, event.clientY);...
Avoid global functions and variables function handleClick(event){ showPopup(event.clientX, event.clientY); } function show...
Create a single global (se necessário) var Controller = { handleClick: function(event){ this.showPopup(event.clientX, even...
Separe configurações function validate(value) { if (!value) { alert(&quot;Invalid value&quot;); location.href = &quot;/err...
Separe configurações var config = { urls: { invalid: &quot;/errors/invalid.php&quot; }, strs: { invalidmsg: &quot;Invalid ...
Separe configurações <ul><li>Todas URLs requeridas pelo javascript
Qualquer texto exibido para o usuário
Qualquer HTML que precisa ser criado pelo javascript
Configurações (exemplo: itens por página)
Valores únicos repetidos
Qualquer coisa que talvez seja modificada no futuro, e utilizada em mais de um lugar </li></ul>
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']; for(var i=0,j=names.length;i<j;i++){ doSomeThingWith(names[i]); } <ul><li>Ma...
Isso inclui expressões regulares, mas primeiro e mais importante: DOM manipulation (CAUTION!)
Você pode criar nós do DOM no loop, mas evitar sua inserção no documento </li></ul>
Repaint vs Reflow
Repaint <ul><li>...is what happenswhenever something is made visible when it was not previously visible, or vice versa, wi...
- Mark 'Tarquin' Wilton-Jones, Opera </li></ul>
When Repaint? <ul><li>Change to 'visibility'
Formatting style changes </li><ul><li>Backgrounds
Borders
Colors
Anything that doesn't change the size, shape or position of element but change appearance </li></ul><li>When a reflow occu...
Reflow <ul><li>...is the process by which the geometry of the layout engine's formatting objects are computed.
- Chris Waterson, Mozilla </li></ul>
When Reflow? <ul><li>Initial page load
Browser window resize
DOM nodes added or removed
Layout styles applied
Layout information retrieved </li></ul>
O que fazer? <ul><li>Fazer modificações no DOM “off-document”
Agrupar modificações de estilos
Cachear informações de layout </li></ul>
 
Off-Document operations <ul><li>Rápido porque não há repaint/reflow
Técnica: </li><ul><li>Easy: Remover elemento do documento, aplicar modificações, inserir o elemento de volta
Medium: Colocar 'display' do elemento como 'none', aplicar modificações, colocar 'display' volta ao padrão
Fuck yeah!: Construir modificações do DOM num 'DocumentFragment' e depois aplicar tudo de uma vez </li></ul></ul>
DocumentFragment <ul><li>Quase um 'document'
Não tem representação visual
Seu pai é o document que o gerou
Quando passado para 'appendChild()', adiciona todos seus filhos ao invés de si próprio </li></ul>
 
<ul><li>Fazer modificações no DOM “off-document”
Agrupar modificações de estilos
Cachear informações de layout </li></ul>
 
O que fazer? <ul><li>Minimizar modificações na propriedade 'style'
Definir a classe CSS com todas modificações e então apenas modificar a propriedade 'className'
Definir diretamente o 'cssText' no elemento </li></ul>
 
 
<ul><li>Fazer modificações no DOM “off-document”
Agrupar modificações de estilos
Cachear informações de layout </li><ul><li>Reflow talvez seja cacheado </li></ul></ul>
 
O que fazer? <ul><li>Minizar acesso as informações de layout
Se um valor é usado mais de uma vez, armazene-o em uma variável local </li></ul>
Responsive UI Interface <ul><li>UI Thread: high-performance-javascript-2011-110918100745-phpapp02.pptx </li></ul>
<ul><button id=&quot;btn&quot; style=&quot;font-size: 30px; padding: 0.5em 1em&quot;>Click Me</button> <script type=&quot;...
<ul>Quando clicado </ul><ul><li>A button UI change job is created </li></ul><ul><ul><li>Draws the button in the down state...
<ul>Before Click </ul><ul>Start </ul><ul>UI Thread </ul><ul>UI Queue </ul>
<ul>When Clicked </ul><ul>Start </ul><ul>UI Thread </ul><ul>onclick </ul><ul>UI Queue </ul>
<ul>When Clicked </ul><ul>Start </ul><ul>UI Thread </ul><ul>onclick </ul><ul>UI Queue </ul>
<ul>When Clicked </ul><ul>onclick </ul><ul>Start </ul><ul>UI Thread </ul><ul>UI Queue </ul>
<ul>When Clicked </ul><ul>onclick </ul><ul>Start </ul><ul>UI Thread </ul><ul>UI Queue </ul>
<ul>Não há UI updates enquanto JavaScript está executando! </ul>
Upcoming SlideShare
Loading in...5
×

Scti 2011 minicurso jquery

973

Published on

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

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
973
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Scti 2011 minicurso jquery"

  1. 1. Javascript + jQuery: With great power, comes great responsibility http://www.slideshare.net/ciberglo/scti-2011-minicurso-jquery Gabriel Lima @glima5 github.com/gabriellima
  2. 5. Balanceando: Básicos <ul><li>typeof(&quot;&quot;) == &quot;string&quot;
  3. 6. typeof(0) == &quot;number&quot; </li><ul><li>&quot;2&quot; + &quot;2&quot; = &quot;22&quot; </li></ul><li>typeof(true) == &quot;boolean&quot;
  4. 7. if ( 4 && !0 && &quot;test&quot; && !&quot;&quot; && !undefined && { } ){
  5. 8. alert(&quot;true&quot;);
  6. 9. } </li></ul>
  7. 10. Balanceando: Funções
  8. 11. Balanceando: Objetos <ul><li>Tudo que não é uma string, um número ou booleano
  9. 12. var shape = new Shape();
  10. 13. var obj = { }; // Object literal, == &quot;new Object()&quot;
  11. 14. var arr = [ ]; // Array literal, == &quot;new Array()&quot;
  12. 15. var exp = /[0-9a-z]/ig; // reg exp literal </li></ul>
  13. 16. Balanceando: Hashes <ul><li>Objetos podem ser manipulados como hashes:
  14. 17. var lastNames = { };
  15. 18. lastNames[&quot;Jason&quot;] = &quot;Horton&quot;;
  16. 19. lastNames[&quot;Matheu&quot;] = &quot;Chambers&quot;;
  17. 20. lastNames[&quot;Rohit&quot;] = &quot;Mistry&quot;;
  18. 21. for ( var key in lastNames ) {
  19. 22. alert( key + &quot; &quot; + lastNames[key] );
  20. 23. } </li></ul>
  21. 24. Exemplo: Array sorting <ul>var arr = [&quot;a&quot;,&quot;f&quot;,&quot;Z&quot;,&quot;b&quot;,&quot;x&quot;, &quot;o&quot;, &quot;A&quot;].sort(); // retorna [&quot;A&quot;, &quot;Z&quot;, &quot;a&quot;, &quot;b&quot;, &quot;f&quot;, &quot;o&quot;, &quot;x&quot;] ... rápido mas não tão legal... </ul>
  22. 25. Exemplo: Array sorting <ul><li>var arr = [&quot;a&quot;,&quot;f&quot;,&quot;Z&quot;,&quot;b&quot;,&quot;x&quot;, &quot;o&quot;, &quot;A&quot;].sort( by_alpha )
  23. 26. // retorna [&quot;a&quot;, &quot;A&quot;, &quot;b&quot;, &quot;f&quot;, &quot;o&quot;, &quot;x&quot;, &quot;Z&quot;] ... mais útil </li></ul>
  24. 27. Scope var iAmGlobal = 5 * 5; function doSomething() { var inner = 5 * 5; }; var g = &quot;global&quot;; function go() { var l = &quot;local&quot;; } go(); console.log(l); // throws a reference error
  25. 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
  26. 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
  27. 30. Qual o lugar do javascript? <ul><li>JavaScript é bom para cálculo, conversão, acesso a fontes externas (Ajax) e definição de comportamentos na interface (eventos).
  28. 31. Todo o resto deve ser deixado pra tecnologia que temos pra fazer o serviço. </li></ul>
  29. 33. Progressive enhancement <ul><li>Web Page :: Printed page
  30. 34. Web Site – Web Browser ?
  31. 35. Não!
  32. 36. Web Browser – Web Page
  33. 37. Televisão – Show de música
  34. 38. Sim! </li></ul>
  35. 40. Progressive enhancement 2.0
  36. 41. Progressive enhancement 2.0 <ul><li>Chrome </li></ul>
  37. 42. Progressive enhancement 2.0 <ul><li>Firefox </li></ul>
  38. 43. Progressive enhancement 2.0 <ul><li>IE 9 </li></ul>
  39. 44. Progressive enhancement 2.0 <ul><li>IE 6 </li></ul>
  40. 45. Progressive enhancement 2.0 <ul><li>Netscape 4 </li></ul>
  41. 46. Melhor experiência de acordo com capacidade do dispositivo
  42. 47. <ul><li>Bordas curvas, Sombra, Gradient -> CSS
  43. 48. Script avançado e comportamentos -> somente com APIs javascript nativas
  44. 49. Navegadores antigos quase sempre precisam de muito mais código pra fazer a mesma coisa! </li></ul>
  45. 52. <ul><li>Mas as pessoas não vão notar? </li></ul>
  46. 54. <ul>O que você viu? </ul>
  47. 57. Você não está sozinho
  48. 58. Keep javascript out of HTML <ul><li><button onclick='do_something()'>wrong!</a>
  49. 59. <button id='do_search'>better!</button>
  50. 60. (function(){ var search_button = document.getElementById('do_search'); search_button.onclick = function(event) { do_something(); } })(); </li></ul>
  51. 61. HTML vs Javascript <ul><li>Fuja de inserir HTML diretamente no código javascript
  52. 62. Se você percebe que está digitando muito código HTML num codigo javascript, você deve estar fazendo algo errado </li></ul>
  53. 63. Keep HTML out of Javascript <ul>var element = document.getElementById('container'); element.innerHTML = “<div class=”popup”></div>” </ul>
  54. 64. Keep Javascript out of CSS <ul>.foo { width: expression(document.offsetwidth + “px”); } </ul>
  55. 65. Keep CSS out of Javascript <ul><li>Estilos não devem ser confundidos com comportamentos
  56. 66. Exemplo: borda vermelha </li><ul><li>Coloque uma borda vermelha em todos campos com uma classe “required” quando estiverem vazios. </li></ul></ul>
  57. 67. Exemplo: borda vermelha
  58. 68. Exemplo: borda vermelha
  59. 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;; }
  60. 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;; }
  61. 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;; }
  62. 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;; }
  63. 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;; } };
  64. 74. Separe configurações function validate(value) { if (!value) { alert(&quot;Invalid value&quot;); location.href = &quot;/errors/invalid.php&quot;; } };
  65. 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; } };
  66. 76. Separe configurações <ul><li>Todas URLs requeridas pelo javascript
  67. 77. Qualquer texto exibido para o usuário
  68. 78. Qualquer HTML que precisa ser criado pelo javascript
  69. 79. Configurações (exemplo: itens por página)
  70. 80. Valores únicos repetidos
  71. 81. Qualquer coisa que talvez seja modificada no futuro, e utilizada em mais de um lugar </li></ul>
  72. 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]); }
  73. 83. var names = ['George','Ringo','Paul','John']; for(var i=0,j=names.length;i<j;i++){ doSomeThingWith(names[i]); } <ul><li>Mantenha processamento pesado fora de loops
  74. 84. Isso inclui expressões regulares, mas primeiro e mais importante: DOM manipulation (CAUTION!)
  75. 85. Você pode criar nós do DOM no loop, mas evitar sua inserção no documento </li></ul>
  76. 86. Repaint vs Reflow
  77. 87. Repaint <ul><li>...is what happenswhenever something is made visible when it was not previously visible, or vice versa, without altering the layout of the document.
  78. 88. - Mark 'Tarquin' Wilton-Jones, Opera </li></ul>
  79. 89. When Repaint? <ul><li>Change to 'visibility'
  80. 90. Formatting style changes </li><ul><li>Backgrounds
  81. 91. Borders
  82. 92. Colors
  83. 93. Anything that doesn't change the size, shape or position of element but change appearance </li></ul><li>When a reflow occurs </li></ul>
  84. 94. Reflow <ul><li>...is the process by which the geometry of the layout engine's formatting objects are computed.
  85. 95. - Chris Waterson, Mozilla </li></ul>
  86. 96. When Reflow? <ul><li>Initial page load
  87. 97. Browser window resize
  88. 98. DOM nodes added or removed
  89. 99. Layout styles applied
  90. 100. Layout information retrieved </li></ul>
  91. 101. O que fazer? <ul><li>Fazer modificações no DOM “off-document”
  92. 102. Agrupar modificações de estilos
  93. 103. Cachear informações de layout </li></ul>
  94. 105. Off-Document operations <ul><li>Rápido porque não há repaint/reflow
  95. 106. Técnica: </li><ul><li>Easy: Remover elemento do documento, aplicar modificações, inserir o elemento de volta
  96. 107. Medium: Colocar 'display' do elemento como 'none', aplicar modificações, colocar 'display' volta ao padrão
  97. 108. Fuck yeah!: Construir modificações do DOM num 'DocumentFragment' e depois aplicar tudo de uma vez </li></ul></ul>
  98. 109. DocumentFragment <ul><li>Quase um 'document'
  99. 110. Não tem representação visual
  100. 111. Seu pai é o document que o gerou
  101. 112. Quando passado para 'appendChild()', adiciona todos seus filhos ao invés de si próprio </li></ul>
  102. 114. <ul><li>Fazer modificações no DOM “off-document”
  103. 115. Agrupar modificações de estilos
  104. 116. Cachear informações de layout </li></ul>
  105. 118. O que fazer? <ul><li>Minimizar modificações na propriedade 'style'
  106. 119. Definir a classe CSS com todas modificações e então apenas modificar a propriedade 'className'
  107. 120. Definir diretamente o 'cssText' no elemento </li></ul>
  108. 123. <ul><li>Fazer modificações no DOM “off-document”
  109. 124. Agrupar modificações de estilos
  110. 125. Cachear informações de layout </li><ul><li>Reflow talvez seja cacheado </li></ul></ul>
  111. 127. O que fazer? <ul><li>Minizar acesso as informações de layout
  112. 128. Se um valor é usado mais de uma vez, armazene-o em uma variável local </li></ul>
  113. 129. Responsive UI Interface <ul><li>UI Thread: high-performance-javascript-2011-110918100745-phpapp02.pptx </li></ul>
  114. 130. <ul><button id=&quot;btn&quot; style=&quot;font-size: 30px; padding: 0.5em 1em&quot;>Click Me</button> <script type=&quot;text/javascript&quot;> window.onload = function (){ document.getElementById(&quot;btn&quot;).onclick = function (){ //do something }; }; </script> </ul>
  115. 131. <ul>Quando clicado </ul><ul><li>A button UI change job is created </li></ul><ul><ul><li>Draws the button in the down state </li></ul></ul><ul><li>A JavaScript execution job is created </li></ul><ul><ul><li>The onclick event handler </li></ul></ul><ul><li>A button UI change job is created </li></ul><ul><ul><li>Draws the button in the up state </li></ul></ul>
  116. 132. <ul>Before Click </ul><ul>Start </ul><ul>UI Thread </ul><ul>UI Queue </ul>
  117. 133. <ul>When Clicked </ul><ul>Start </ul><ul>UI Thread </ul><ul>onclick </ul><ul>UI Queue </ul>
  118. 134. <ul>When Clicked </ul><ul>Start </ul><ul>UI Thread </ul><ul>onclick </ul><ul>UI Queue </ul>
  119. 135. <ul>When Clicked </ul><ul>onclick </ul><ul>Start </ul><ul>UI Thread </ul><ul>UI Queue </ul>
  120. 136. <ul>When Clicked </ul><ul>onclick </ul><ul>Start </ul><ul>UI Thread </ul><ul>UI Queue </ul>
  121. 137. <ul>Não há UI updates enquanto JavaScript está executando! </ul>
  122. 138. <ul>Por quê? </ul>
  123. 139. <ul>JavaScript May Cause UI Update </ul><ul><button id=&quot;btn&quot; style=&quot;font-size: 30px; padding: 0.5em 1em&quot;>Click Me</button> <script type=&quot;text/javascript&quot;> window.onload = function (){ document.getElementById(&quot;btn&quot;).onclick = function (){ </ul><ul>var div = document.createElement(“div”); div.className = “tip”; div.innerHTML = “You clicked me!”; document.body.appendChild(div); </ul><ul>}; }; </script> </ul>
  124. 140. <ul>UI updates devem usar a última informação disponível </ul>
  125. 141. <ul>Long-running JavaScript = Unresponsive UI </ul>
  126. 142. <ul>Runaway Script Timer </ul><ul><li>Projetada para previnir que o browser afete o OS
  127. 143. Limita a qtd. de tempo que um script tem para ser executado
  128. 144. 2 tipos delimites: </li></ul><ul><ul><li>Tempo de execução
  129. 145. Número de statements (stack) </li></ul></ul><ul><li>Sempre gera um pop up horroroso pro usuário
  130. 146. Exceção: Opera não tem runaway timer </li></ul>
  131. 147. <ul>Internet Explorer </ul>
  132. 148. <ul>Firefox </ul>
  133. 149. <ul>Safari </ul>
  134. 150. <ul>Chrome </ul>
  135. 151. <ul>Runaway Script Timer Limits </ul><ul><li>Internet Explorer: 5 million statements
  136. 152. Firefox: 10 seconds
  137. 153. Safari: 5 seconds
  138. 154. Chrome: Unknown, hooks into normal crash control mechanism
  139. 155. Opera: none </li></ul>
  140. 156. <ul>How long is too long? </ul>
  141. 157. <ul>How Long Is Too Long? </ul><ul>“ 0.1 second [100ms] is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.” - Jakob Nielsen </ul>
  142. 158. <ul>Translation: JavaScript não deve ser executado por mais do que 100ms para garantir uma responsive UI </ul>
  143. 159. <ul>Recommendation: Limitar o JavaScript para não mais do que 50ms at a time </ul>
  144. 160. <ul>function processArray(items, process, callback){ </ul><ul>for ( var i=0,len=items.length; i < len; i++){ process(items[i]); } callback(); } </ul>
  145. 161. <ul>Timers to the rescue! </ul>
  146. 162. <ul>JavaScript Timers </ul><ul><li>Created using setTimeout()
  147. 163. Schedules a new JavaScript execution job for some time in the future
  148. 164. When the delay is up, the job is added to the UI queue </li></ul><ul><ul><li>Note: This does not guarantee execution after the delay, just that the job is added to the UI queue and will be executed when appropriate </li></ul></ul>
  149. 165. <ul>JavaScript Timers </ul><ul><li>For complex processing, split up into timed functionality
  150. 166. Use timers to delay some processing for later </li></ul>
  151. 167. <ul>function timedProcessArray(items, process, callback){ </ul><ul>//create a clone of the original var todo = items.concat(); setTimeout(function(){ var start = +new Date(); do { process(todo.shift()); } while (todo.length > 0 && (+ new Date() - start < 50)); if (todo.length > 0){ setTimeout(arguments.callee, 25); } else { callback(items); } }, 25); } </ul>
  152. 168. <ul>Web Workers to the rescue! </ul>
  153. 170. <ul>Web Workers </ul><ul><li>Asynchronous JavaScript execution
  154. 171. Execution happens in a separate process </li></ul><ul><ul><li>Not on the UI thread = no UI delays </li></ul></ul><ul><li>Data-driven API </li></ul><ul><ul><li>Data is serialized when sending data into or out of Worker
  155. 172. No access to DOM, BOM
  156. 173. Completely separate execution environment </li></ul></ul>
  157. 174. <ul>//in page var worker = new Worker(&quot;code.js&quot;); </ul><ul>worker.onmessage = function (event){ alert(event.data); }; worker.postMessage(&quot;Nicholas&quot;); </ul><ul>//in code.js </ul><ul>self.onmessage = function (event){ self.postMessage(&quot;Hello, &quot; + event.data + &quot;!&quot;); }; </ul>
  158. 175. <ul>Resumo de Responsive UI </ul><ul><li>UI thread is used both for JavaScript execution and UI updates
  159. 176. UI cannot be updated while JavaScript is executing
  160. 177. Keep JavaScript execution to 50ms – use timers and/or web workers to offload processing </li></ul>
  161. 178. Jquery: Traversing
  162. 179. jQuery <ul><li>Um “Faz quase tudo” da vida
  163. 180. Porém, deve ser usado com cautela, pois ao mesmo tempo que pode melhorar o código pode às vezes prejudicar a performance
  164. 181. Principal teoria: html / css selectors
  165. 182. http://code.jquery.com/jquery-latest.js
  166. 183. // jQuery 1.7 </li></ul>
  167. 184. Jquery: Traversing <ul><li>O HTML </li><ul><li>div.container é o 'wrapping element'
  168. 185. div.photo, div.title and div.rating são filhos 'imediatos' do div.container
  169. 186. Cada div.star é filho de div.rating
  170. 187. Quando uma div.star tem a class 'on', é uma estrela selecionada </li></ul></ul>
  171. 188. Mas por quê traversing? <ul><li>“O select do jQuery já não é poderoso o suficiente?” </li></ul>
  172. 189. Jquery: Traversing <ul><li>Bem, no exemplo anterior, queremos que quando o usuário clicar numa dada estrela, todas as estrelas à esquerda sejam também selecionadas, e todas as direita não sejam selecionadas </li></ul>$('.star').click(function(){ $(this).addClass('on'); // How to select the parent div of 'this'? // How to select stars to the left side of 'this'? });
  173. 190. .children <ul><li>This function gets the immediate children of a set of elements.
  174. 191. This can be very handy in a variety of situations. Look at the figure below: </li><ul><li>The container of the stars are selected initially.
  175. 192. A selector expression is passed to children() to narrow the result down to only the full stars.
  176. 193. If children() receives no parameters, all immediate children will be returned.
  177. 194. No grandchildren will be returned. Sorry. </li></ul></ul>
  178. 195. .children
  179. 196. .filter <ul><li>This function filters out elements from the wrapped set using a passed selector expression. Any elements that doesn’t match the expression will be removed from the selection.
  180. 197. The following example should be pretty straightforward. The full stars are filtered out from a collection of all five stars. </li></ul>
  181. 198. .not <ul><li>Quite the opposite from filter(), not() removes the matching elements from the wrapped set.
  182. 199. See the example below. Even stars are removed from the selection, leaving only the odd ones. </li></ul><ul><li>Notice! “Even” and “odd” selectors are zero-indexed. They count index from 0, NOT 1. </li></ul>
  183. 200. .add <ul><li>What if we want to add some elements to the wrapped set? The add() function does this.
  184. 201. Again, very straightforward. The photo box is added to the selection. </li></ul>
  185. 202. .slice <ul><li>Sometimes we may wish to obtain a subset of the wrapped set, based on the position of elements within the set. And slice() is the way to go. </li><ul><li>The first parameter is the zero-based position of the first element to be included in the returned slice.
  186. 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.
  187. 204. So slice(0, 2) selects the first two stars. </li></ul></ul>
  188. 205. .slice
  189. 206. .parent <ul><li>The parent() function selects the direct parent of a set of elements.
  190. 207. As shown in the figure below, the first star’s direct parent is selected. Very handy, hah?
  191. 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. </li></ul>
  192. 209. .parents <ul><li>This one is plural! The parents() function selects all ancestors of a set of elements. I mean ALL ancestors from the direct parent all the way up to ‘body‘ and ‘html‘. So it’s best to pass a selector expression to narrow down the result.
  193. 210. By passing ‘.container‘ to parents(), div.container, which actually is the grandparent of the first star, is selected. </li></ul>
  194. 211. .siblings <ul><li>This function selects all siblings (brothers and sisters) of a set of elements. An expression can be passed to filter the result.
  195. 212. Look at the example: </li><ul><li>Who’s the first star’s siblings? The other four stars, right?
  196. 213. The ‘odd’ siblings are selected as shown. Again, the index is zero-based. Look at the red numbers below the stars. </li></ul></ul>
  197. 214. .prev e .prevAll <ul><li>The prev() function selects the previous (one) sibling
  198. 215. The prevAll() selects all previous siblings of a set of elements.
  199. 216. This is super handy if you’re building a star rating widget. The previous siblings of the third star are selected. </li></ul>
  200. 217. .next e .nextAll <ul><li>These functions work in the same way as prev and prevAll, except for that they select the NEXT siblings. </li></ul>
  201. 218. Traversing - Solução <ul><li>Vejamos como essa função resolve nossa dor de cabeça: </li></ul>$('.star').click(function(){ $(this).addClass('on'); // How to select the parent div of 'this'? $(this).parent().addClass('rated'); // How to select stars to the left side of 'this'? $(this).prevAll().addClass('on'); $(this).nextAll().removeClass('on'); });
  202. 219. Traversing <ul><li>This is the very problem we mentioned early in this tutorial, right? Several traversing functions are used in these lines of code. </li><ul><li>In Line 5, look at the use of parent(). Easy, hah?
  203. 220. In Line 8 and 9, prevAll() and nextAll() select the to-be full stars and empty stars. </li></ul><li>Traversing can be even more powerful when used together.
  204. 221. The output of one function can be the input of another – that is to say, they’re chainable . </li></ul>
  205. 222. Multi-select transfer $().ready(function() { $('#add').click(function() { return !$('#select1 option:selected').appendTo('#select2'); }); $('#remove').click(function() { return !$('#select2 option:selected').appendTo('#select1'); }); });
  206. 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>
  207. 224. Select all $('form').submit(function() { $('#select2 option').each(function(i) { $(this).attr(&quot;selected&quot;, &quot;selected&quot;); }); });
  208. 225. .append <ul><li>Talvez o método mais erroneamente utilizado no jQuery
  209. 226. Extremamente útil, se souber utilizá-lo devidamente
  210. 227. Exemplo de código ruim: </li></ul>
  211. 228. .append
  212. 229. .append
  213. 230. .append
  214. 231. .append
  215. 232. .append <ul><li>.each com callback function será sempre mais lento que iterar diretamente sobre o array em javascript
  216. 233. A última solução poderia ser ainda melhorada, salvando antecipadamente o atributo '.length' </li></ul>
  217. 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'];
  218. 235. Events <ul><li>.bind() and .unbind()
  219. 236. .click()
  220. 237. .live() and .die() </li></ul>
  221. 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>
  222. 239. Chrome permissions chromium-browser --allow-file-access-from-files
  223. 240. Jquery AJAX <ul><li>jQuery.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] ) </li></ul>$.ajax({ url: url, data: data, success: success, dataType: dataType }); <ul><li>jQuery.ajax( url [, settings] )
  224. 241. .load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] ) </li></ul>
  225. 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');
  226. 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); } });
  227. 244. Referências <ul><li>Em construção... </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×