javascript não é java+script (tdc floripa 2012)
DESCRIPTION
Slides da palestra JavaScript não é Java+Script, apresentada no TDC Floripa em 25/8/2012TRANSCRIPT
![Page 1: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/1.jpg)
TDC Florianópolis 25/08/2012 Rodrigo Vieira
@rodbv1
Uma (re)introdução ao JavaScript
![Page 2: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/2.jpg)
Saturday, August 25, 2012 2
![Page 3: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/3.jpg)
Um pouco de história A linguagem Dicas e erros comuns
![Page 4: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/4.jpg)
4
Mocha!LiveScript!
Brendan Eich Scheme
![Page 5: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/5.jpg)
Linguagem dinâmica, fracamente tipada, funcional e OO
Objetos e vetores são “dicionários melhorados”
Herança por prototipação
Saturday, August 25, 2012 5
![Page 6: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/6.jpg)
Java + script
DOM
AJAX
jQuerySaturday, August 25, 2012 6
![Page 7: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/7.jpg)
Valor String, Number, Boolean, null, undefined
Referência Objetos Funções Arrays RegEx Date Math
Saturday, August 25, 2012 7
![Page 8: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/8.jpg)
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étodos
Saturday, August 25, 2012 8
![Page 9: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/9.jpg)
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) //8
Saturday, August 25, 2012 9
![Page 10: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/10.jpg)
undefined: valor padrão para variáveis, parâmetros e atributos sem valor atribuído
null: objeto nulo, atribuído explicitamente
Saturday, August 25, 2012 10
![Page 11: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/11.jpg)
truefalse
Saturday, August 25, 2012 11
![Page 12: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/12.jpg)
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
![Page 13: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/13.jpg)
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
![Page 14: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/14.jpg)
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; //4
Saturday, August 25, 2012 14
![Page 15: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/15.jpg)
Saturday, August 25, 2012 15
![Page 16: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/16.jpg)
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, “”); //12xyz
Saturday, August 25, 2012 16
![Page 17: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/17.jpg)
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ção
Saturday, August 25, 2012 17
![Page 18: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/18.jpg)
Declaração comum
function fala(texto) {alert(“Oi,” + texto + “!”);
}
fala(“amigo”); //Oi,amigo!
Saturday, August 25, 2012 18
![Page 19: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/19.jpg)
Variável com função anônima
var minhaFuncao = function(texto) {alert(“Fala,” + texto + “!”);
};
minhaFuncao(“amigo”); //Fala,amigo!
Saturday, August 25, 2012 19
![Page 20: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/20.jpg)
function geraSoma (x) {return function(num) {
return x + num;}
}
var soma5 = geraSoma(5);
soma5(3); //8
Saturday, August 25, 2012 20
![Page 21: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/21.jpg)
function geraSoma (x) {return function(num) {
return x + num;}
}
var somador = geraSoma(5);
somador(3); //8
Saturday, August 25, 2012 21
Closure
![Page 22: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/22.jpg)
function geraSoma (x) {return function(num) {
return x + num;}
}var x = 5;var somador = geraSoma(x);
somador(3); //8x = 9;somador(3); //ainda 8
Saturday, August 25, 2012 22
Closure
![Page 23: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/23.jpg)
Uma função cria cópias dos valores disponíveis durante sua criação, para serem usados em tempo de execução
Saturday, August 25, 2012 23
Função
Closure
![Page 24: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/24.jpg)
function executa(func) {func();
}
function dizOi() { alert(“oi!”);
}
executa(dizOi); //oi!
Saturday, August 25, 2012 24
![Page 25: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/25.jpg)
executa(function() { alert(‘oi’);
}); //oi!
Saturday, August 25, 2012 25
![Page 26: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/26.jpg)
function soma(x,y) {return x + y;
}
soma(2,3); //5
soma(2,”5”) //”25”
Saturday, August 25, 2012 26
![Page 27: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/27.jpg)
function soma(x,y) {return x + y;
}
soma(2,3,5,”hello”); //5
soma(2); //NaN
Saturday, August 25, 2012 27
![Page 28: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/28.jpg)
Coleção de argumentos passado para a função
function soma() {var total=0;for (var i=0; i<arguments.length; i++) {
total += arguments[i];}return total;
}
soma(1,2,3,4,5); //15
Saturday, August 25, 2012 28
![Page 29: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/29.jpg)
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
![Page 30: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/30.jpg)
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
![Page 31: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/31.jpg)
function calculaMedia(x,y){soma = x + y;
return soma/2;}calculaMedia(2,3); //5alert(soma); //5
Saturday, August 25, 2012 31
Variável global
![Page 32: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/32.jpg)
Um dicionário enfeitado
Saturday, August 25, 2012 32
![Page 33: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/33.jpg)
Clássicavar ator = new Object();ator.nome = “Jim”;ator.sobrenome = “Parsons”;
Simplificada var ator = {}; ator.nome = “Jim”;
ator.sobrenome = “Parsons”;
Inlinevar ator = {
nome: “Jim”,sobrenome: “Parsons”
};
Saturday, August 25, 2012 33
![Page 34: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/34.jpg)
var ator = {nome: “Jim”,sobrenome: “Parsons”,nomeCompleto: function() {
return this.nome + “ ” + this.sobrenome;}
};
ator.nomeCompleto(); //Jim Parsons
Saturday, August 25, 2012 34
![Page 35: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/35.jpg)
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úscula
Saturday, August 25, 2012 35
![Page 36: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/36.jpg)
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 Parsons
Saturday, August 25, 2012 36
![Page 37: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/37.jpg)
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
![Page 38: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/38.jpg)
Permitem executar uma função especificando qual objeto será o “this”
Saturday, August 25, 2012 38
![Page 39: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/39.jpg)
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”);
Saturday, August 25, 2012 39
“this”
![Page 40: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/40.jpg)
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);
Saturday, August 25, 2012 40
“this”
![Page 41: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/41.jpg)
Como funções são objetos, elas podem ter atributos – isso evita variáveis globais
Saturday, August 25, 2012 41
![Page 42: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/42.jpg)
function executaUmaVez() {if (executaUmaVez.jaExecutou) {
return;}//executa a funcaoalert(‘oeeee’);executaUmaVez.jaExecutou = true;
}
executaUmaVez(); //oeeeeexecutaUmaVez(); //Não executa
Saturday, August 25, 2012 42
![Page 43: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/43.jpg)
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
![Page 44: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/44.jpg)
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
![Page 45: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/45.jpg)
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
![Page 46: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/46.jpg)
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); //3
Saturday, August 25, 2012 46
![Page 47: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/47.jpg)
Saturday, August 25, 2012 47
![Page 48: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/48.jpg)
function soma(x,y) { return x + y;}soma(2,3); //undefined
Saturday, August 25, 2012 48
![Page 49: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/49.jpg)
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); //undefined
Saturday, August 25, 2012 49
![Page 50: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/50.jpg)
Pra quebrar linha, use “pontuação”
function soma(x,y) { return x + y;}soma(2,3); //5
Saturday, August 25, 2012 50
![Page 51: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/51.jpg)
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
![Page 52: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/52.jpg)
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
![Page 53: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/53.jpg)
Use === e !==
Saturday, August 25, 2012 53
1 == “1” //true 1 === “1” //false
0 == false //true 0 === false //false
“” == 0 //true “” === 0 //false
1 != true //false 1!== true //true
![Page 54: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/54.jpg)
Lembre-se do “var” no for loop
function minhaFuncao() {for (i = 0; i < 10; i++){
//…}
}alert(i) //10;
Saturday, August 25, 2012 54
![Page 55: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/55.jpg)
Cuidado com o seguinte padrão
function minhaFuncao() {var a = b = 10;
}minhaFuncao();
alert(a); //undefined, belezaalert(b); //10 ?!?
Saturday, August 25, 2012 55
![Page 56: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/56.jpg)
Cuidado com o seguinte padrão
function minhaFuncao() {var a = b = 10;
}minhaFuncao();
alert(a); //undefined, belezaalert(b); //10 ?!?
Saturday, August 25, 2012 56
![Page 57: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/57.jpg)
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
![Page 58: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/58.jpg)
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/utilities.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>
Saturday, August 25, 2012 58
![Page 59: Javascript não é Java+Script (TDC Floripa 2012)](https://reader031.vdocuments.pub/reader031/viewer/2022013108/559813771a28ab510a8b456c/html5/thumbnails/59.jpg)
Saturday, August 25, 2012 59
Douglas Crockford é o carahttp://javascript.crockford.com/