WTF Javascript - FrontInRio 2011

2,484 views
2,392 views

Published on

Slides da palestra apresentada no dia 18 de Junho de 2011 no evento FrontInRio

Published in: Technology, Business
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
2,484
On SlideShare
0
From Embeds
0
Number of Embeds
235
Actions
Shares
0
Downloads
28
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

WTF Javascript - FrontInRio 2011

  1. 1. WTF JavascriptLeo Balter
  2. 2. Leo Balter @leobalter
  3. 3. Javascript é bom!
  4. 4. Design Patterns vs. Padrões
  5. 5. Padrões•Patterns•Standards•Default
  6. 6. Escala Pentatônica
  7. 7. Patterns são modelos funcionais, mas não precisamos adota-los sempre!
  8. 8. Anti Padrõesfórmulas perfeitas para seu projeto dar errado!(1 < 2 < 3); // false!
  9. 9. document.all
  10. 10. O Javascript já foi assustador no ano passado!
  11. 11. O retorno maldito!
  12. 12. function(){    return    {        trololo: “document.all”    }}
  13. 13. function(){    return;    {        trololo: “document.all”    }}
  14. 14. function() { return { trololo: “document.all” }}
  15. 15. Loop desgraçado
  16. 16. var nome = [ “Leo”, “Balter” ];for (i in nome) { console.log(nome[i]);}
  17. 17. var nome = [ “Leo”, “Balter” ];for (i in nome) { console.log(nome[i]);}
  18. 18. var nome = [ “Leo”, “Balter” ];for (i in nome) { console.log(nome[i]);}
  19. 19. var pessoa = function (a, b) {    this.nome = a,    this.sobrenome = b};pessoa.prototype.falar = function () {    console.log("olá");};var mim = new pessoa("Leo", "Balter");for (i in mim) {    console.log(mim[i]); // wtf}
  20. 20. var pessoa = function (a, b) {    this.nome = a,    this.sobrenome = b};pessoa.prototype.falar = function () {    console.log("olá");};var mim = new pessoa("Leo", "Balter");for (i in mim) {    console.log(mim[i]); // wtf}
  21. 21. var nome = [ “Leo”, “Balter” ];for (i in nome) { if (nome.hasOwnProperty(i)) { console.log(nome[i]); // wtf }}
  22. 22. Globais e locais
  23. 23. imGlobal = 10;function changeGlobal() { console.log(imGlobal); // 10 (*)    imGlobal = 20;}changeGlobal();console.log(imGlobal); // 20
  24. 24. imGlobal = 10;function changeGlobal() {    console.log(imGlobal); // undefined          var imGlobal = "What am I?";}changeGlobal();
  25. 25. imGlobal = 10;function changeGlobal() {    var imGlobal; console.log(imGlobal); // undefined          imGlobal = "What am I?";}changeGlobal();
  26. 26. Sempre declare suas variáveis no início da função!
  27. 27. imGlobal = 10;function changeGlobal() {    console.log(window.imGlobal); // 10!           var imGlobal = "What am I?";}changeGlobal();
  28. 28. Conheça seu escopo!Variáveis dentro de blocos de loop, ifs ou switches não criam um escopointerno!
  29. 29. function foo() {    var bar = [ 123, 234, 345 ],            x = 5;    for (var i = 0; i < bar.length; i++) {        var x = i;    }        console.log(i);}foo();
  30. 30. function foo() {    var bar = [ 123, 234, 345 ],            x = 5;    for (var i = 0; i < bar.length; i++) {        var x = i;    }        console.log(i, x); // 3, 3}foo();
  31. 31. function foo() {    var bar = [ 123, 234, 345 ],            x = 5;    for (var i = 0; i < bar.length; i++) {        var x = i;    }        console.log(i, x); // 3, 3}foo();
  32. 32. Valores verdadeiros podem ser falsos!
  33. 33. console.log(!!0); // falseconsole.log(!!10); // trueconsole.log(!!"0");  // trueconsole.log(0 == ""); // trueconsole.log(!!0 == !!""); // true
  34. 34. console.log(!!0); // falseconsole.log(!!10); // trueconsole.log(!!"0");  // trueconsole.log(0 == "0"); // trueconsole.log(!!0 == !!"0"); // false
  35. 35. Pare de utilizar == e comece a utilizar === agora! console.log(90 === "90"); // false console.log(0 !== false); // true
  36. 36. Fuja dos números octais!
  37. 37. parseInt(“042”); // 34parseInt(“042”, 10); // 42
  38. 38. Cuidado com os tipos
  39. 39. 120 + “7”; // “1207”1 < 2 < 3; // false
  40. 40. 1 < 2 < 3;(1 < 2) < 3;true < 3;
  41. 41. O eval() é mal!
  42. 42. eval(‘/* js dentro de uma string! */’);
  43. 43. setTimeout(‘rotina(x);’, 500);setTimeout(function () { rotina(x);}, 500);
  44. 44. Convenções de código
  45. 45. Convenções de código• JSLint se você for o Douglas Crockford• JSHint se você não for o Douglas Crockford• e agora também o CSSLint!
  46. 46. JSLint• Douglas Crockford• “JSLint will hurt your feelings”• Escreva JS como ele escreve ou não use a ferramenta• for (var x in y) ...• http://www.jslint.com
  47. 47. JSHint• Comunidade - fork do JSLint iniciado por Anton Kovalyov• “does not tyrannize your code”• Estabeleça as suas convenções!• Douglas Crockford diz que JSHint é para babacas• http://jshint.com
  48. 48. function(foo) { var i = -1 var str for (var i = 0; i < 4; i++) { debugger; str += i; }}()
  49. 49. The code check failed.Errors:• Line 1 function(foo) { Missing name in function declaration.• Line 2 var i = -1 Missing semicolon.• Line 3 var str Missing semicolon.• Line 5 for (var i = 0; i < 4; i++) { i is already defined.• Line 9 }() Function declarations are not invocable. Wrap the whole function invocation in parens.• Line 9 Stopping, unable to continue. (100% scanned).
  50. 50. http://csslint.net/
  51. 51. Outras dicas para melhorar seu JS
  52. 52. Entenda Javascript• jQuery• Mootools• CoffeScript• Dojo• Prototype
  53. 53. Use o console!
  54. 54. Use o console!• Opera Dragonfly• Chrome Developer Tools• Firefox’s Firebug (extensão)• Safari’s Developer Tools• Internet Explorer Developer Tools
  55. 55. Largue o alert! Use o console.log e debugger!
  56. 56. breakpoint simples!
  57. 57. Não se preocupe com a tecnologia server-side• Ruby • C / C++• Python • Perl• PHP • Erlang• .NET • Lisp• ColdFusion • Cobol• ASP • Pseudo-código
  58. 58. Mas se puder escolher prefira node.js• Javascript em server side• é fácil• é grátis• é tendência• se integra facilmente com ferramentas como CSSLint e JSHint• http://nodejs.org
  59. 59. Passe a ideia adiante!
  60. 60. Estude muito!• Mozilla Developer Network - MDN - https://developer.mozilla.org/• Google Code University - http://code.google.com/intl/pt-BR/edu/ submissions/html-css-javascript/• Livros! Ex.: “Padrões Javascript”
  61. 61. Compartilhe seu código e troque experiências!• Google Code• Github• Bitbucket• jsfiddle.net• jsbin.com
  62. 62. Não leia o W3Schools!• Leia o http://w3fools.com• Pior forma de aprender é a errada!
  63. 63. Não detecte o browser, mas a funcionalidade
  64. 64. Moral da história
  65. 65. você já pode transformar o seu maior vilão no seumelhor amigo!
  66. 66. @leobalter // leo@balter.com.br

×