O documento discute vários tópicos sobre Javascript, incluindo padrões, anti-padrões, loops, escopo, tipos de dados e convenções de código. Ele fornece dicas sobre como melhorar as habilidades com a linguagem, como usar ferramentas de depuração e compartilhar código.

1. WTF Javascript
Leo Balter

2. Leo Balter
@leobalter

4. Javascript é bom!

5. Design Patterns vs. Padrões

6. Padrões
•Patterns
•Standards
•Default

7. Escala Pentatônica

8. Patterns são modelos funcionais, mas não precisamos
adota-los sempre!

9. Anti Padrões
fórmulas perfeitas para seu projeto dar errado!
(1 < 2 < 3); // false!

10. document.all

11. O Javascript já foi assustador no ano passado!

12. O retorno maldito!

13. function()
{
return
{
trololo: “document.all”
}
}

14. function()
{
return;
{
trololo: “document.all”
}
}

15. function() {
return {
trololo: “document.all”
}
}

16. Loop desgraçado

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 nome = [ “Leo”, “Balter” ];
for (i in nome) {
console.log(nome[i]);
}

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 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
}

23. var nome = [ “Leo”, “Balter” ];
for (i in nome) {
if (nome.hasOwnProperty(i)) {
console.log(nome[i]); // wtf
}
}

24. Globais e locais

25. imGlobal = 10;
function changeGlobal() {
console.log(imGlobal); // 10 (*)
imGlobal = 20;
}
changeGlobal();
console.log(imGlobal); // 20

26. imGlobal = 10;
function changeGlobal() {
console.log(imGlobal); // undefined
var imGlobal = "What am I?";
}
changeGlobal();

27. imGlobal = 10;
function changeGlobal() {
var imGlobal;
console.log(imGlobal); // undefined
imGlobal = "What am I?";
}
changeGlobal();

28. Sempre declare suas variáveis no início da função!

29. imGlobal = 10;
function changeGlobal() {
console.log(window.imGlobal); // 10!
var imGlobal = "What am I?";
}
changeGlobal();

30. Conheça seu escopo!
Variáveis dentro de blocos de loop, ifs ou switches não criam um escopo
interno!

31. function foo() {
var bar = [ 123, 234, 345 ],
x = 5;
for (var i = 0; i < bar.length; i++) {
var x = i;
}
console.log(i);
}
foo();

32. 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();

33. 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();

34. Valores verdadeiros podem ser falsos!

35. console.log(!!0); // false
console.log(!!10); // true
console.log(!!"0"); // true
console.log(0 == ""); // true
console.log(!!0 == !!""); // true

36. console.log(!!0); // false
console.log(!!10); // true
console.log(!!"0"); // true
console.log(0 == "0"); // true
console.log(!!0 == !!"0"); // false

37. Pare de utilizar == e comece a utilizar === agora!
console.log(90 === "90"); // false
console.log(0 !== false); // true

38. Fuja dos números octais!

39. parseInt(“042”); // 34
parseInt(“042”, 10); // 42

40. Cuidado com os tipos

41. 120 + “7”; // “1207”
1 < 2 < 3; // false

42. 1 < 2 < 3;
(1 < 2) < 3;
true < 3;

43. O eval() é mal!

44. eval(‘/* js dentro de uma string! */’);

45. setTimeout(‘rotina(x);’, 500);
setTimeout(function () {
rotina(x);
}, 500);

46. Convenções de código

47. 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!

48. 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

49. 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

50. function(foo) {
var i = -1
var str
for (var i = 0; i < 4; i++) {
debugger;
str += i;
}
}()

51. 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).

52. http://csslint.net/

53. Outras dicas para melhorar seu JS

54. Entenda Javascript
• jQuery
• Mootools
• CoffeScript
• Dojo
• Prototype

55. Use o console!

56. Use o console!
• Opera Dragonfly
• Chrome Developer Tools
• Firefox’s Firebug (extensão)
• Safari’s Developer Tools
• Internet Explorer Developer Tools

57. Largue o alert! Use o console.log e debugger!

58. breakpoint simples!

59. Não se preocupe com a tecnologia server-side
• Ruby • C / C++
• Python • Perl
• PHP • Erlang
• .NET • Lisp
• ColdFusion • Cobol
• ASP • Pseudo-código

60. 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

61. Passe a ideia adiante!

62. 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”

64. Compartilhe seu código e troque experiências!
• Google Code
• Github
• Bitbucket
• jsfiddle.net
• jsbin.com

65. Não leia o W3Schools!
• Leia o http://w3fools.com
• Pior forma de aprender é a errada!

66. Não detecte o browser, mas a funcionalidade

67. Moral da história

68. você já pode transformar o seu maior vilão no seu
melhor amigo!

69. @leobalter // leo@balter.com.br