Uma (re)introdução ao JavaScriptTDC Florianópolis                                         Rodrigo Vieira25/08/2012        ...
Saturday, August 25, 2012   2
 Um pouco de história A linguagem Dicas e erros comuns
Mocha!           LiveScript!Brendan Eich       Scheme                            4
    Linguagem dinâmica, fracamente tipada, funcional     e OO    Objetos e vetores são “dicionários melhorados”    Hera...
Java + scriptDOMAJAXjQuerySaturday, August 25, 2012   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 (1.23e-8) Octal: p...
 undefined: valor padrão para variáveis,     parâmetros e atributos sem valor atribuído null: objeto nulo, atribuído exp...
 true falseSaturday, August 25, 2012   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(2012, 25, 7);Saturday, August 25, ...
 Não são arrays de verdade, mas um     dicionário com chaves numéricas       Não dá erro de limites       Aceita difere...
Saturday, August 25, 2012   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(“Oi,” + texto + “!”);             }          ...
 Variável com função anônimavar minhaFuncao = function(texto) {  alert(“Fala,” + texto + “!”);};minhaFuncao(“amigo”); //F...
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 geraSoma (x) {     return function(num) {           return x + num;     } } var x = 5;                   Closure ...
Uma função cria cópias dos valores disponíveis durante sua criação, para serem usados em tempo de execução                ...
function executa(func) {     func(); } function dizOi() {     alert(“oi!”); } executa(dizOi); //oi!Saturday, August 25, 20...
executa(function() {      alert(‘oi’);}); //oi!Saturday, August 25, 2012   25
function soma(x,y) {    return x + y;}soma(2,3); //5soma(2,”5”) //”25”Saturday, August 25, 2012   26
function soma(x,y) {    return x + y;}soma(2,3,5,”hello”); //5soma(2); //NaNSaturday, August 25, 2012   27
    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 ...
 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áve...
 Um dicionário enfeitadoSaturday, August 25, 2012   32
    Clássica          var ator = new Object();          ator.nome = “Jim”;          ator.sobrenome = “Parsons”;    Simpl...
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”Saturday, August 25, 2012                      38
function setColors(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 globaisSaturday, August 25, 2012          ...
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])...
function MeuModulo(p1,p2) {    //privado    var x = p1, y = p2;    function funcaoPrivada() {           //…    }    //públ...
    Usando função         function meuModulo(p1,p2) {             //privado             var x = p1, y = p2;             f...
Saturday, August 25, 2012   47
function soma(x,y) {                 return                   x + y;              }              soma(2,3); //undefinedSat...
 Ponto-e-vírgula é opcional, mas o js coloca     pra você na hora de rodar            function soma(x,y) {              r...
 Pra quebrar linha, use “pontuação”              function soma(x,y) {                 return x +                         ...
 Caso você queira usar uma variável global,     use MAIÚSCULAS (assim todos sabem que     foi por querer) E, melhor aind...
 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;     }     minhaFuncao();        a...
 Cuidado com o seguinte padrão     function minhaFuncao() {             var a = b = 10;     }     minhaFuncao();        a...
 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/javascript" src="...
Douglas Crockford é o carahttp://javascript.crockford.com/Saturday, August 25, 2012          59
@rodbvrodrigo.vieira@gmail.comSaturday, August 25, 2012   60
Upcoming SlideShare
Loading in …5
×

Javascript não é Java+Script (TDC Floripa 2012)

764 views

Published on

Slides da palestra JavaScript não é Java+Script, apresentada no TDC Floripa em 25/8/2012

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
764
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Javascript não é Java+Script (TDC Floripa 2012)

  1. 1. Uma (re)introdução ao JavaScriptTDC Florianópolis Rodrigo Vieira25/08/2012 @rodbv 1
  2. 2. Saturday, August 25, 2012 2
  3. 3.  Um pouco de história A linguagem Dicas e erros comuns
  4. 4. Mocha! LiveScript!Brendan Eich Scheme 4
  5. 5.  Linguagem dinâmica, fracamente tipada, funcional e OO Objetos e vetores são “dicionários melhorados” Herança por prototipaçãoSaturday, August 25, 2012 5
  6. 6. Java + scriptDOMAJAXjQuerySaturday, August 25, 2012 6
  7. 7.  Valor  String, Number, Boolean, null, undefined Referência  Objetos  Funções  Arrays  RegEx  Date  MathSaturday, August 25, 2012 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étodosSaturday, August 25, 2012 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) //8Saturday, August 25, 2012 9
  10. 10.  undefined: valor padrão para variáveis, parâmetros e atributos sem valor atribuído null: objeto nulo, atribuído explicitamenteSaturday, August 25, 2012 10
  11. 11.  true falseSaturday, August 25, 2012 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”!Saturday, August 25, 2012 12
  13. 13.  d = new Date(); //data atual d = new Date (88500); //ms desde 1.1.1970 d = new Date(2012, 25, 7);Saturday, August 25, 2012 13
  14. 14.  Não são arrays de verdade, mas um dicionário com chaves numéricas  Não dá erro de limites  Aceita diferentes tipos de dados var a = new Array(); //oldskool var a = []; //cool var a = [1, “a”, obj]; //inline a.push(“floripa”); a.length; //4Saturday, August 25, 2012 14
  15. 15. Saturday, August 25, 2012 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, “”); //12xyzSaturday, August 25, 2012 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çãoSaturday, August 25, 2012 17
  18. 18.  Declaração comum function fala(texto) { alert(“Oi,” + texto + “!”); } fala(“amigo”); //Oi,amigo!Saturday, August 25, 2012 18
  19. 19.  Variável com função anônimavar minhaFuncao = function(texto) { alert(“Fala,” + texto + “!”);};minhaFuncao(“amigo”); //Fala,amigo!Saturday, August 25, 2012 19
  20. 20. function geraSoma (x) { return function(num) { return x + num; } } var soma5 = geraSoma(5); soma5(3); //8Saturday, August 25, 2012 20
  21. 21. function geraSoma (x) { return function(num) { return x + num; } } Closure var somador = geraSoma(5); somador(3); //8Saturday, August 25, 2012 21
  22. 22. function geraSoma (x) { return function(num) { return x + num; } } var x = 5; Closure var somador = geraSoma(x); somador(3); //8 x = 9; somador(3); //ainda 8Saturday, August 25, 2012 22
  23. 23. Uma função cria cópias dos valores disponíveis durante sua criação, para serem usados em tempo de execução Closure FunçãoSaturday, August 25, 2012 23
  24. 24. function executa(func) { func(); } function dizOi() { alert(“oi!”); } executa(dizOi); //oi!Saturday, August 25, 2012 24
  25. 25. executa(function() { alert(‘oi’);}); //oi!Saturday, August 25, 2012 25
  26. 26. function soma(x,y) { return x + y;}soma(2,3); //5soma(2,”5”) //”25”Saturday, August 25, 2012 26
  27. 27. function soma(x,y) { return x + y;}soma(2,3,5,”hello”); //5soma(2); //NaNSaturday, August 25, 2012 27
  28. 28.  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); //15Saturday, August 25, 2012 28
  29. 29.  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.Saturday, August 25, 2012 29
  30. 30.  Esse código é feio, mas é válido function calculaMedia(x,y){ soma = fazSoma(); return soma/2; function fazSoma() { return x + y; } var soma; }Saturday, August 25, 2012 30
  31. 31. function calculaMedia(x,y){ soma = x + y; return soma/2; } Variável global calculaMedia(2,3); //5 alert(soma); //5Saturday, August 25, 2012 31
  32. 32.  Um dicionário enfeitadoSaturday, August 25, 2012 32
  33. 33.  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” };Saturday, August 25, 2012 33
  34. 34. var ator = { nome: “Jim”, sobrenome: “Parsons”, nomeCompleto: function() { return this.nome + “ ” + this.sobrenome; }};ator.nomeCompleto(); //Jim ParsonsSaturday, August 25, 2012 34
  35. 35. 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úsculaSaturday, August 25, 2012 35
  36. 36. 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 ParsonsSaturday, August 25, 2012 36
  37. 37. carro.marca = “Citroen”; carro[“placa”] = “MHJ8832”; A segunda forma aceita palavras reservadas, símbolos etc carro[“#”] = “dummy”; carro[“for”] = “yammy”;Saturday, August 25, 2012 37
  38. 38.  Permitem executar uma função especificando qual objeto será o “this”Saturday, August 25, 2012 38
  39. 39. function setColors(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”Saturday, August 25, 2012 39
  40. 40. 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”Saturday, August 25, 2012 40
  41. 41.  Como funções são objetos, elas podem ter atributos – isso evita variáveis globaisSaturday, August 25, 2012 41
  42. 42. function executaUmaVez() { if (executaUmaVez.jaExecutou) { return; } //executa a funcao alert(‘oeeee’); executaUmaVez.jaExecutou = true;}executaUmaVez(); //oeeeeexecutaUmaVez(); //Não executaSaturday, August 25, 2012 42
  43. 43. function ehPrimo(x) { if (!ehPrimo.cache) { ehPrimo.cache = {}; } if (!ehPrimo.cache[x]) { ehPrimo.cache[x] = … //calcula a parada } return ehPrimo.cache[x];}Saturday, August 25, 2012 43
  44. 44. 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?Saturday, August 25, 2012 44
  45. 45. 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); //3 45
  46. 46.  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); //3Saturday, August 25, 2012 46
  47. 47. Saturday, August 25, 2012 47
  48. 48. function soma(x,y) { return x + y; } soma(2,3); //undefinedSaturday, August 25, 2012 48
  49. 49.  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); //undefinedSaturday, August 25, 2012 49
  50. 50.  Pra quebrar linha, use “pontuação” function soma(x,y) { return x + y; } soma(2,3); //5Saturday, August 25, 2012 50
  51. 51.  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 MINHALIB = {}; MINHALIB.usuario = “rodbv”; MINHALIB.quebraTudo = function() {…};Saturday, August 25, 2012 51
  52. 52.  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 */ })();Saturday, August 25, 2012 52
  53. 53.  Use === e !== 1 == “1” //true 1 === “1” //false 0 == false //true 0 === false //false “” == 0 //true “” === 0 //false 1 != true //false 1!== true //trueSaturday, August 25, 2012 53
  54. 54.  Lembre-se do “var” no for loop function minhaFuncao() { for (i = 0; i < 10; i++){ //… } } alert(i) //10;Saturday, August 25, 2012 54
  55. 55.  Cuidado com o seguinte padrão function minhaFuncao() { var a = b = 10; } minhaFuncao(); alert(a); //undefined, beleza alert(b); //10 ?!?Saturday, August 25, 2012 55
  56. 56.  Cuidado com o seguinte padrão function minhaFuncao() { var a = b = 10; } minhaFuncao(); alert(a); //undefined, beleza alert(b); //10 ?!?Saturday, August 25, 2012 56
  57. 57.  Evite eval setTimeout(“alert(‘ola’);”, 10); setTimeout(function() { alert(‘ola’);}, 10); var p = eval(“ator.” + propr); var p = ator[propr];Saturday, August 25, 2012 57
  58. 58.  Coloque o seu javascript sempre no fundo da página Minifique e combine os arquivos<script type="text/javascript" src="http://yui.yahooapis.com/co mbo? 2.9.0/build/utilities/utilities.js&2.9.0/build/datasource/dataso urce-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>Saturday, August 25, 2012 58
  59. 59. Douglas Crockford é o carahttp://javascript.crockford.com/Saturday, August 25, 2012 59
  60. 60. @rodbvrodrigo.vieira@gmail.comSaturday, August 25, 2012 60

×