Successfully reported this slideshow.
Rodrigo VieiraDotNetFloripa – 9/11/2011                                 @rodbv                                             1
Wednesday, November 09,2011                      2
   Um pouco de história   Tipos de dados   Funções   Escopo, closures   Objetos   Encapsulamento   Dicas e erros co...
Mocha!           LiveScript!Brendan Eich       Scheme                            4
    Linguagem dinâmica, fracamente tipada, funcional     e OO    Objetos e arrays são dicionários “melhorados”    Não p...
 Java + script DOM AJAX , XmlHttpRequest jQueryWednesday, November 09,2011                      6
    Valor      String, Number, Boolean, null, undefined    Referência        Objetos        Funções        Arrays   ...
    Sequência de caracteres unicode    Strings com mesmo valor são consideradas     idênticas    Não existe tipo char ...
    Ponto flutuante de 64 bits    Não existe tipo inteiro    NaN    Infinity    Hexa (0xa12)    Notação científica (...
    null: objeto nulo, atribuído explicitamente    undefined: valor padrão para variáveis,     parâmetros e atributos se...
    true    falseWednesday, November 09,2011                      11
    Os seguintes valores são avaliados como false quando fazem     partes de expressões booleanas (falsy):      0      ...
    d = new Date(); //data atual    d = new Date (88500); //ms desde 1.1.1970    d = new Date(2011, 10, 9);Wednesday, N...
    Não são arrays de verdade, mas um     dicionário com chaves numéricas      Não dá erro de limite    var a = new Arr...
Wednesday, November 09,2011                      15
    var r = new RegExp(‚w{1,3}d{2}‛, ‚gim‛);    var r = /w{1,3}d{2}/gim;    r.test(‚ab12‛); //true    ‚abc12xyz‛.repla...
    O coração de programação decente em JS      Cidadãs de primeira classe      Uma função pode ser:       ▪ Variável  ...
    Declaração comum           function fala(texto) {                alert(‚Fala,‛ + texto + ‚!‛);           }           ...
    Variável com função anônima var fala = function(texto) {     alert(‚Fala,‛ + texto + ‚!‛); }; fala(‚amigo‛); //Fala,a...
function geraSoma (x) {     return function(num) {           return x + num;     } } var soma5 = geraSoma(5); soma5(3); //...
function geraSoma (x) {     return function(num) {           return x + num;     } }                              Closure ...
function executa(func) {     func(); } function dizOi() {     alert(‚oi!‛); } executa(dizOi); //oi!Wednesday, November 09,...
executa(function() { alert(‘oi’);}); //oi!Wednesday, November 09,2011                                         23
function soma(x,y) {    return x + y;}soma(2,3); //5soma(2,‛5‛) //‛25‛Wednesday, November 09,2011                      24
function soma(x,y) {    return x + y;}soma(2,3,5,‛hello‛); //5soma(2); //NaNWednesday, November 09,2011                   ...
    Coleção de argumentos passado para a funçãofunction soma() {  var total=0;  for (var i=0; i<arguments.length; i++) { ...
    JavaScript possui apenas 2 blocos de escopo      Global      Função    Variável declarada dentro de função, com “v...
    Esse código é feio, mas é válido        function calculaMedia(x,y){            soma = fazSoma();            return so...
function calculaMedia(x,y){          soma = x + y;          return soma/2;                                      Variável g...
    Um dicionário enfeitadoWednesday, November 09,2011                           30
    Clássica         var ator = new Object();         ator.nome = ‚Jim‛;         ator.sobrenome = ‚Parsons‛;    Simplifi...
var ator = {   nome: ‚Jim‛,   sobrenome: ‚Parsons‛,   nomeCompleto: function() {      return this.nome + ‚ ‛ + this.sobren...
function Ator(nome, sobrenome){  this.nome = nome;  this.sobrenome = sobrenome;  this.nomeCompleto = function() {     retu...
function Ator(nome, sobrenome){  var ator = {} ;  ator.sobrenome = sobrenome;  ator.nomeCompleto = function() {     return...
carro.marca = ‚Citroen‛;     carro[‚placa‛] = ‚MHJ8832‛;    A segunda forma aceita palavras reservadas, símbolos etc     ...
    Permitem executar uma função especificando     qual objeto será o “this”Wednesday, November 09,2011                  ...
function setStyle(color, border){     this.style.backgroundColor = color;     this.style.borderColor = border;}var botao1 ...
function setStyle(color, border){     this.style.backgroundColor = color;     this.style.borderColor = border;}var botao1 ...
    Como funções são objetos, elas podem ter     atributos – isso evita variáveis globaisWednesday, November 09,2011     ...
function executaUmaVez() {      if (executaUmaVez.jaExecutou) {             return;      }      //executa a funcao      al...
function ehPrimo(x) {      if (!ehPrimo.cache) {             ehPrimo.cache = {};      }           if (!ehPrimo.cache[x]) {...
function ehPrimo(x) {      if (!ehPrimo.cache) {             ehPrimo.cache = {};      }           if (!ehPrimo.cache[x]) {...
    Usando método construtor        function MeuModulo(p1,p2) {          //privado          var x = p1, y = p2;          ...
    Usando função        function meuModulo(p1,p2) {            //privado            var x = p1, y = p2;            funct...
    Declare todas variáveis e funções no topo da     função (já que o escopo é esse mesmo…)        function minhaFuncao()...
function soma(x,y) {             return               x + y;           }           soma(2,3); //undefinedWednesday, Novemb...
    Ponto-e-vírgula é opcional, mas o js coloca     pra você na hora de rodar           function soma(x,y) {             ...
    Pra quebrar linha, use “pontuação”           function soma(x,y) {             return x +                    y;       ...
    Caso você queira usar uma variável global,     use MAIÚSCULAS (assim todos sabem que     foi por querer)    E, melho...
    Executando código descartável        (function() {         /* todas variáveis e funções declaradas         aqui têm a...
    Use === e !==       1 == ‚1‛ //true     1 === ‚1‛ //false       0 == false //true   0 === false //false       ‚‛ == 0...
    Lembre-se do “var” no for loop           function minhaFuncao() {                for (i = 0; i < 10; i++){           ...
    Cuidado com o seguinte padrão           function minhaFuncao() {                var a = b = 10;           }          ...
    Cuidado com o seguinte padrão           function minhaFuncao() {                var a = b = 10;           }          ...
    Evite eval     setTimeout(‚alert(‘ola’);‛, 10);     setTimeout(function() { alert(‘ola’);}, 10);     var p = eval(‚at...
    Coloque o seu javascript sempre no fundo da     página    Minifique e combine os arquivos    <script type="text/jav...
Douglas Crockford é o carahttp://javascript.crockford.com/Wednesday, November 09,2011                               57
@rodbvrodrigo.vieira@gmail.comWednesday, November 09,2011                       58
Upcoming SlideShare
Loading in …5
×

Código limpo e eficiente com JavaScript

5,938 views

Published on

Palestra de 9/11/2011 do DotNetFloripa

Published in: Technology
  • Be the first to comment

Código limpo e eficiente com JavaScript

  1. 1. Rodrigo VieiraDotNetFloripa – 9/11/2011 @rodbv 1
  2. 2. Wednesday, November 09,2011 2
  3. 3.  Um pouco de história Tipos de dados Funções Escopo, closures Objetos Encapsulamento Dicas e erros comuns
  4. 4. Mocha! LiveScript!Brendan Eich Scheme 4
  5. 5.  Linguagem dinâmica, fracamente tipada, funcional e OO Objetos e arrays são dicionários “melhorados” Não precisa ser compilada, em geral roda dentro de um “host” Variáveis globais amarram diferentes componentes Herança por prototipaçãoWednesday, November 09,2011 5
  6. 6.  Java + script DOM AJAX , XmlHttpRequest jQueryWednesday, November 09,2011 6
  7. 7.  Valor  String, Number, Boolean, null, undefined Referência  Objetos  Funções  Arrays  RegEx  Date  MathWednesday, November 09,2011 7
  8. 8.  Sequência de caracteres unicode Strings com mesmo valor são consideradas idênticas Não existe tipo char Podemos usar aspas simples e duplas Possui métodosWednesday, November 09,2011 8
  9. 9.  Ponto flutuante de 64 bits Não existe tipo inteiro NaN Infinity Hexa (0xa12) Notação científica (1.23e-8) Octal: primeiro dígito zero, cuidado!  parseInt(‚08‛) //0  parseInt(‚08‛, 10) //8Wednesday, November 09,2011 9
  10. 10.  null: objeto nulo, atribuído explicitamente undefined: valor padrão para variáveis, parâmetros e atributos sem valor atribuídoWednesday, November 09,2011 10
  11. 11.  true falseWednesday, November 09,2011 11
  12. 12.  Os seguintes valores são avaliados como false quando fazem partes de expressões booleanas (falsy):  0  ‚‛  null  undefined  NaN Todo o resto é avaliado como true (truthy)  inclusive as strings ‛false‛ e ‛0‛!Wednesday, November 09,2011 12
  13. 13.  d = new Date(); //data atual d = new Date (88500); //ms desde 1.1.1970 d = new Date(2011, 10, 9);Wednesday, November 09,2011 13
  14. 14.  Não são arrays de verdade, mas um dicionário com chaves numéricas  Não dá erro de limite var a = new Array(); //oldskool var a = []; var a = [1, ‚a‛, obj]; //inline a.push(‚floripa‛); a.length; //4Wednesday, November 09,2011 14
  15. 15. Wednesday, November 09,2011 15
  16. 16.  var r = new RegExp(‚w{1,3}d{2}‛, ‚gim‛); var r = /w{1,3}d{2}/gim; r.test(‚ab12‛); //true ‚abc12xyz‛.replace(/w{1,3}/gim, ‚‛); //12xyzWednesday, November 09,2011 16
  17. 17.  O coração de programação decente em JS  Cidadãs de primeira classe  Uma função pode ser: ▪ Variável ▪ Parâmetro ▪ Propriedade de objeto ▪ Anônima ▪ Retorno de outra função ▪ Interna a outra funçãoWednesday, November 09,2011 17
  18. 18.  Declaração comum function fala(texto) { alert(‚Fala,‛ + texto + ‚!‛); } fala(‚amigo‛); //Fala,amigo!Wednesday, November 09,2011 18
  19. 19.  Variável com função anônima var fala = function(texto) { alert(‚Fala,‛ + texto + ‚!‛); }; fala(‚amigo‛); //Fala,amigo!Wednesday, November 09,2011 19
  20. 20. function geraSoma (x) { return function(num) { return x + num; } } var soma5 = geraSoma(5); soma5(3); //8Wednesday, November 09,2011 20
  21. 21. function geraSoma (x) { return function(num) { return x + num; } } Closure var soma5 = geraSoma(5); soma5(3); //8Wednesday, November 09,2011 21
  22. 22. function executa(func) { func(); } function dizOi() { alert(‚oi!‛); } executa(dizOi); //oi!Wednesday, November 09,2011 22
  23. 23. executa(function() { alert(‘oi’);}); //oi!Wednesday, November 09,2011 23
  24. 24. function soma(x,y) { return x + y;}soma(2,3); //5soma(2,‛5‛) //‛25‛Wednesday, November 09,2011 24
  25. 25. function soma(x,y) { return x + y;}soma(2,3,5,‛hello‛); //5soma(2); //NaNWednesday, November 09,2011 25
  26. 26.  Coleção de argumentos passado para a funçãofunction soma() { var total=0; for (var i=0; i<arguments.length; i++) { total += arguments[i]; } return total;}soma(1,2,3,4,5); //15Wednesday, November 09,2011 26
  27. 27.  JavaScript possui apenas 2 blocos de escopo  Global  Função Variável declarada dentro de função, com “var”, é local Função declarada dentro de função é local Variáveis declaradas dentro de blocos if, while, for etc não são locais ao bloco, e sim à função.Wednesday, November 09,2011 27
  28. 28.  Esse código é feio, mas é válido function calculaMedia(x,y){ soma = fazSoma(); return soma/2; function fazSoma() { return x + y; } var soma; }Wednesday, November 09,2011 28
  29. 29. function calculaMedia(x,y){ soma = x + y; return soma/2; Variável global } calculaMedia(2,3); //5 alert(soma); //5Wednesday, November 09,2011 29
  30. 30.  Um dicionário enfeitadoWednesday, November 09,2011 30
  31. 31.  Clássica var ator = new Object(); ator.nome = ‚Jim‛; ator.sobrenome = ‚Parsons‛; Simplificada var ator = {}; ator.nome = ‚Jim‛; ator.sobrenome = ‚Parsons‛; Inline var ator = { nome: ‚Jim‛, sobrenome: ‚Parsons‛ };Wednesday, November 09,2011 31
  32. 32. var ator = { nome: ‚Jim‛, sobrenome: ‚Parsons‛, nomeCompleto: function() { return this.nome + ‚ ‛ + this.sobrenome; }}; ator.nomeCompleto(); //Jim ParsonsWednesday, November 09,2011 32
  33. 33. function Ator(nome, sobrenome){ this.nome = nome; this.sobrenome = sobrenome; this.nomeCompleto = function() { return this.nome + ‚ ‛ + this.sobrenome; };}var jim = new Ator(‚Jim‛, ‚Parsons‛);jim.nomeCompleto(); //Jim Parsons Convenciona-se usar inicial maiúsculaWednesday, November 09,2011 33
  34. 34. function Ator(nome, sobrenome){ var ator = {} ; ator.sobrenome = sobrenome; ator.nomeCompleto = function() { return ator.nome + ‚ ‛ + ator.sobrenome; }; return ator;}var jim = new Ator(‚Jim‛, ‚Parsons‛);jim.nomeCompleto(); //Jim ParsonsWednesday, November 09,2011 34
  35. 35. carro.marca = ‚Citroen‛; carro[‚placa‛] = ‚MHJ8832‛; A segunda forma aceita palavras reservadas, símbolos etc carro[‚#‛] = ‚dummy‛; carro[‚for‛] = ‚yammy‛;Wednesday, November 09,2011 35
  36. 36.  Permitem executar uma função especificando qual objeto será o “this”Wednesday, November 09,2011 36
  37. 37. function setStyle(color, border){ this.style.backgroundColor = color; this.style.borderColor = border;}var botao1 = document.getElementById(‚botao1‛);var botao2 = document.getElementById(‚botao2‛);setColors.call(botao1, ‚red‛, ‚blue‛);setColors.call(botao2, ‚blue‛, ‚green‛); “this”Wednesday, November 09,2011 37
  38. 38. function setStyle(color, border){ this.style.backgroundColor = color; this.style.borderColor = border;}var botao1 = document.getElementById(‚botao1‛);var botao2 = document.getElementById(‚botao2‛);setColors.apply(botao1, [‚red‛, ‚blue‛]);setColors.apply(botao2, arguments); “this”Wednesday, November 09,2011 38
  39. 39.  Como funções são objetos, elas podem ter atributos – isso evita variáveis globaisWednesday, November 09,2011 39
  40. 40. function executaUmaVez() { if (executaUmaVez.jaExecutou) { return; } //executa a funcao alert(‘oeeee’); executaUmaVez.jaExecutou = true;}executaUmaVez(); //oeeeeexecutaUmaVez(); //Não executaWednesday, November 09,2011 40
  41. 41. function ehPrimo(x) { if (!ehPrimo.cache) { ehPrimo.cache = {}; } if (!ehPrimo.cache[x]) { ehPrimo.cache[x] = … //calcula a parada } return ehPrimo.cache[x];}Wednesday, November 09,2011 41
  42. 42. function ehPrimo(x) { if (!ehPrimo.cache) { ehPrimo.cache = {}; } if (!ehPrimo.cache[x]) { ehPrimo.cache[x] = … //calcula a parada } return ehPrimo.cache[x];} Quiz: por que eu usei um objeto e não um array no memo?Wednesday, November 09,2011 42
  43. 43.  Usando método construtor function MeuModulo(p1,p2) { //privado var x = p1, y = p2; function funcaoPrivada() { //… } //público this.valor1 = x + y; this.funcaoPublica = function() { return funcaoPrivada(x,y); }; } var m = new MeuModulo(1,2); alert(m.valor1); //3Wednesday, November 09,2011 43
  44. 44.  Usando função function meuModulo(p1,p2) { //privado var x = p1, y = p2; function fazAlgumaCoisa() { //… } //público return { valor1: x + y, funcaoPublica: function() { return fazAlgumaCoisa(x,y); } }; } var m = meuModulo(1,2); alert(m.valor1); //3Wednesday, November 09,2011 44
  45. 45.  Declare todas variáveis e funções no topo da função (já que o escopo é esse mesmo…) function minhaFuncao() { var x = 1, z = ‚a‛; function() { … } //resto do código }Wednesday, November 09,2011 45
  46. 46. function soma(x,y) { return x + y; } soma(2,3); //undefinedWednesday, November 09,2011 46
  47. 47.  Ponto-e-vírgula é opcional, mas o js coloca pra você na hora de rodar function soma(x,y) { return; x + y; } soma(2,3); //undefinedWednesday, November 09,2011 47
  48. 48.  Pra quebrar linha, use “pontuação” function soma(x,y) { return x + y; } soma(2,3); //5Wednesday, November 09,2011 48
  49. 49.  Caso você queira usar uma variável global, use MAIÚSCULAS (assim todos sabem que foi por querer) E, melhor ainda, crie “namespaces” para suas variáveis e funções globais var DOTNETFLORIPA = {}; DOTNETFLORIPA.usuario = ‚rodbv‛; DOTNETFLORIPA.quebraTudo = function() {…};Wednesday, November 09,2011 49
  50. 50.  Executando código descartável (function() { /* todas variáveis e funções declaradas aqui têm acesso ao escopo global, mas sairão de escopo quando a função terminar de ser executada */ })();Wednesday, November 09,2011 50
  51. 51.  Use === e !== 1 == ‚1‛ //true 1 === ‚1‛ //false 0 == false //true 0 === false //false ‚‛ == 0 //true ‚‛ === 0 //false 1 != true //false 1!== true //trueWednesday, November 09,2011 51
  52. 52.  Lembre-se do “var” no for loop function minhaFuncao() { for (i = 0; i < 10; i++){ //… } } alert(i) //10;Wednesday, November 09,2011 52
  53. 53.  Cuidado com o seguinte padrão function minhaFuncao() { var a = b = 10; } minhaFuncao(); alert(a); //undefined, beleza alert(b); //10 ?!?Wednesday, November 09,2011 53
  54. 54.  Cuidado com o seguinte padrão function minhaFuncao() { var a = b = 10; } minhaFuncao(); alert(a); //undefined, beleza alert(b); //10 ?!?Wednesday, November 09,2011 54
  55. 55.  Evite eval setTimeout(‚alert(‘ola’);‛, 10); setTimeout(function() { alert(‘ola’);}, 10); var p = eval(‚ator.‛ + propr); var p = ator[propr];Wednesday, November 09,2011 55
  56. 56.  Coloque o seu javascript sempre no fundo da página Minifique e combine os arquivos <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.9.0/build/utilities/util ities.js&2.9.0/build/datasource/datasource- min.js&2.9.0/build/autocomplete/autocomplete-min.js&2.9.0/build/calendar/calendar- min.js&2.9.0/build/tabview/tabview-min.js"></script>Wednesday, November 09,2011 56
  57. 57. Douglas Crockford é o carahttp://javascript.crockford.com/Wednesday, November 09,2011 57
  58. 58. @rodbvrodrigo.vieira@gmail.comWednesday, November 09,2011 58

×