Javascript não é Java+Script (TDC Floripa 2012)
Post on 05-Jul-2015
612 Views
Preview:
DESCRIPTION
Transcript
TDC Florianópolis 25/08/2012 Rodrigo Vieira
@rodbv1
Uma (re)introdução ao JavaScript
Saturday, August 25, 2012 2
Um pouco de história A linguagem Dicas e erros comuns
4
Mocha!LiveScript!
Brendan Eich Scheme
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
Java + script
DOM
AJAX
jQuerySaturday, August 25, 2012 6
Valor String, Number, Boolean, null, undefined
Referência Objetos Funções Arrays RegEx Date Math
Saturday, August 25, 2012 7
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
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
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
truefalse
Saturday, August 25, 2012 11
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
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
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
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”.replace(/\w{1,3}/gim, “”); //12xyz
Saturday, August 25, 2012 16
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
Declaração comum
function fala(texto) {alert(“Oi,” + texto + “!”);
}
fala(“amigo”); //Oi,amigo!
Saturday, August 25, 2012 18
Variável com função anônima
var minhaFuncao = function(texto) {alert(“Fala,” + texto + “!”);
};
minhaFuncao(“amigo”); //Fala,amigo!
Saturday, August 25, 2012 19
function geraSoma (x) {return function(num) {
return x + num;}
}
var soma5 = geraSoma(5);
soma5(3); //8
Saturday, August 25, 2012 20
function geraSoma (x) {return function(num) {
return x + num;}
}
var somador = geraSoma(5);
somador(3); //8
Saturday, August 25, 2012 21
Closure
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
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
function executa(func) {func();
}
function dizOi() { alert(“oi!”);
}
executa(dizOi); //oi!
Saturday, August 25, 2012 24
executa(function() { alert(‘oi’);
}); //oi!
Saturday, August 25, 2012 25
function soma(x,y) {return x + y;
}
soma(2,3); //5
soma(2,”5”) //”25”
Saturday, August 25, 2012 26
function soma(x,y) {return x + y;
}
soma(2,3,5,”hello”); //5
soma(2); //NaN
Saturday, August 25, 2012 27
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
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
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
function calculaMedia(x,y){soma = x + y;
return soma/2;}calculaMedia(2,3); //5alert(soma); //5
Saturday, August 25, 2012 31
Variável global
Um dicionário enfeitado
Saturday, August 25, 2012 32
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
var ator = {nome: “Jim”,sobrenome: “Parsons”,nomeCompleto: function() {
return this.nome + “ ” + this.sobrenome;}
};
ator.nomeCompleto(); //Jim Parsons
Saturday, August 25, 2012 34
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
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
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
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 = document.getElementById(“botao1”);var botao2 = document.getElementById(“botao2”);
setColors.call(botao1, “red”, “blue”);setColors.call(botao2, “blue”, “green”);
Saturday, August 25, 2012 39
“this”
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”
Como funções são objetos, elas podem ter atributos – isso evita variáveis globais
Saturday, August 25, 2012 41
function executaUmaVez() {if (executaUmaVez.jaExecutou) {
return;}//executa a funcaoalert(‘oeeee’);executaUmaVez.jaExecutou = true;
}
executaUmaVez(); //oeeeeexecutaUmaVez(); //Não executa
Saturday, August 25, 2012 42
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
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
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
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
Saturday, August 25, 2012 47
function soma(x,y) { return x + y;}soma(2,3); //undefined
Saturday, August 25, 2012 48
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
Pra quebrar linha, use “pontuação”
function soma(x,y) { return x + y;}soma(2,3); //5
Saturday, August 25, 2012 50
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
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
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
Lembre-se do “var” no for loop
function minhaFuncao() {for (i = 0; i < 10; i++){
//…}
}alert(i) //10;
Saturday, August 25, 2012 54
Cuidado com o seguinte padrão
function minhaFuncao() {var a = b = 10;
}minhaFuncao();
alert(a); //undefined, belezaalert(b); //10 ?!?
Saturday, August 25, 2012 55
Cuidado com o seguinte padrão
function minhaFuncao() {var a = b = 10;
}minhaFuncao();
alert(a); //undefined, belezaalert(b); //10 ?!?
Saturday, August 25, 2012 56
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
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
Saturday, August 25, 2012 59
Douglas Crockford é o carahttp://javascript.crockford.com/
@rodbvrodrigo.vieira@gmail.com
Saturday, August 25, 2012 60
top related