Your SlideShare is downloading. ×
0
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
WTF Javascript - FrontInRio 2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WTF Javascript - FrontInRio 2011

2,215

Published on

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

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,215
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
27
Comments
1
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. WTF JavascriptLeo Balter
  • 2. Leo Balter @leobalter
  • 3. Javascript é bom!
  • 4. Design Patterns vs. Padrões
  • 5. Padrões•Patterns•Standards•Default
  • 6. Escala Pentatônica
  • 7. Patterns são modelos funcionais, mas não precisamos adota-los sempre!
  • 8. Anti Padrõesfórmulas perfeitas para seu projeto dar errado!(1 < 2 < 3); // false!
  • 9. document.all
  • 10. O Javascript já foi assustador no ano passado!
  • 11. O retorno maldito!
  • 12. function(){    return    {        trololo: “document.all”    }}
  • 13. function(){    return;    {        trololo: “document.all”    }}
  • 14. function() { return { trololo: “document.all” }}
  • 15. Loop desgraçado
  • 16. var nome = [ “Leo”, “Balter” ];for (i in nome) { console.log(nome[i]);}
  • 17. var nome = [ “Leo”, “Balter” ];for (i in nome) { console.log(nome[i]);}
  • 18. var nome = [ “Leo”, “Balter” ];for (i in nome) { console.log(nome[i]);}
  • 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. 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. var nome = [ “Leo”, “Balter” ];for (i in nome) { if (nome.hasOwnProperty(i)) { console.log(nome[i]); // wtf }}
  • 22. Globais e locais
  • 23. imGlobal = 10;function changeGlobal() { console.log(imGlobal); // 10 (*)    imGlobal = 20;}changeGlobal();console.log(imGlobal); // 20
  • 24. imGlobal = 10;function changeGlobal() {    console.log(imGlobal); // undefined          var imGlobal = "What am I?";}changeGlobal();
  • 25. imGlobal = 10;function changeGlobal() {    var imGlobal; console.log(imGlobal); // undefined          imGlobal = "What am I?";}changeGlobal();
  • 26. Sempre declare suas variáveis no início da função!
  • 27. imGlobal = 10;function changeGlobal() {    console.log(window.imGlobal); // 10!           var imGlobal = "What am I?";}changeGlobal();
  • 28. Conheça seu escopo!Variáveis dentro de blocos de loop, ifs ou switches não criam um escopointerno!
  • 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. 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. 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. Valores verdadeiros podem ser falsos!
  • 33. console.log(!!0); // falseconsole.log(!!10); // trueconsole.log(!!"0");  // trueconsole.log(0 == ""); // trueconsole.log(!!0 == !!""); // true
  • 34. console.log(!!0); // falseconsole.log(!!10); // trueconsole.log(!!"0");  // trueconsole.log(0 == "0"); // trueconsole.log(!!0 == !!"0"); // false
  • 35. Pare de utilizar == e comece a utilizar === agora! console.log(90 === "90"); // false console.log(0 !== false); // true
  • 36. Fuja dos números octais!
  • 37. parseInt(“042”); // 34parseInt(“042”, 10); // 42
  • 38. Cuidado com os tipos
  • 39. 120 + “7”; // “1207”1 < 2 < 3; // false
  • 40. 1 < 2 < 3;(1 < 2) < 3;true < 3;
  • 41. O eval() é mal!
  • 42. eval(‘/* js dentro de uma string! */’);
  • 43. setTimeout(‘rotina(x);’, 500);setTimeout(function () { rotina(x);}, 500);
  • 44. Convenções de código
  • 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. 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. 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. function(foo) { var i = -1 var str for (var i = 0; i < 4; i++) { debugger; str += i; }}()
  • 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. http://csslint.net/
  • 51. Outras dicas para melhorar seu JS
  • 52. Entenda Javascript• jQuery• Mootools• CoffeScript• Dojo• Prototype
  • 53. Use o console!
  • 54. Use o console!• Opera Dragonfly• Chrome Developer Tools• Firefox’s Firebug (extensão)• Safari’s Developer Tools• Internet Explorer Developer Tools
  • 55. Largue o alert! Use o console.log e debugger!
  • 56. breakpoint simples!
  • 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. 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. Passe a ideia adiante!
  • 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. Compartilhe seu código e troque experiências!• Google Code• Github• Bitbucket• jsfiddle.net• jsbin.com
  • 62. Não leia o W3Schools!• Leia o http://w3fools.com• Pior forma de aprender é a errada!
  • 63. Não detecte o browser, mas a funcionalidade
  • 64. Moral da história
  • 65. você já pode transformar o seu maior vilão no seumelhor amigo!
  • 66. @leobalter // leo@balter.com.br

×