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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

WTF Javascript - FrontInRio 2011

  • 2,178 views
Published

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,178
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
26
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