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

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


Java + script

DOM

AJAX

jQuerySaturday, August 25, 2012 6

Valor String, Number, Boolean, null, undefined

Referência Objetos Funções Arrays RegEx Date Math


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


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


undefined: valor padrão para variáveis, parâmetros e atributos sem valor atribuído

null: objeto nulo, atribuído explicitamente


truefalse


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”!


d = new Date(); //data atual

d = new Date (88500); //ms desde 1.1.1970

d = new Date(2012, 25, 7);


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



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


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


Declaração comum

function fala(texto) {alert(“Oi,” + texto + “!”);

}

fala(“amigo”); //Oi,amigo!


Variável com função anônima

var minhaFuncao = function(texto) {alert(“Fala,” + texto + “!”);

};

minhaFuncao(“amigo”); //Fala,amigo!


function geraSoma (x) {return function(num) {

return x + num;}

}

var soma5 = geraSoma(5);

soma5(3); //8



return x + num;}

}

var somador = geraSoma(5);

somador(3); //8


Closure


return x + num;}

}var x = 5;var somador = geraSoma(x);

somador(3); //8x = 9;somador(3); //ainda 8


Closure

Uma função cria cópias dos valores disponíveis durante sua criação, para serem usados em tempo de execução


Função

Closure

function executa(func) {func();

}

function dizOi() { alert(“oi!”);

}

executa(dizOi); //oi!


executa(function() { alert(‘oi’);

}); //oi!


function soma(x,y) {return x + y;

}

soma(2,3); //5

soma(2,”5”) //”25”


function soma(x,y) {return x + y;

}

soma(2,3,5,”hello”); //5

soma(2); //NaN


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


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.


Esse código é feio, mas é válido

function calculaMedia(x,y){ soma = fazSoma(); return soma/2; function fazSoma() { return x + y; } var soma;}


function calculaMedia(x,y){soma = x + y;

return soma/2;}calculaMedia(2,3); //5alert(soma); //5


Variável global

Um dicionário enfeitado


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”

};


var ator = {nome: “Jim”,sobrenome: “Parsons”,nomeCompleto: function() {

return this.nome + “ ” + this.sobrenome;}

};

ator.nomeCompleto(); //Jim Parsons


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


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


carro.marca = “Citroen”;carro[“placa”] = “MHJ8832”;

A segunda forma aceita palavras reservadas, símbolos etc

carro[“#”] = “dummy”;carro[“for”] = “yammy”;


Permitem executar uma função especificando qual objeto será o “this”


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”

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”

Como funções são objetos, elas podem ter atributos – isso evita variáveis globais


function executaUmaVez() {if (executaUmaVez.jaExecutou) {

return;}//executa a funcaoalert(‘oeeee’);executaUmaVez.jaExecutou = true;

}

executaUmaVez(); //oeeeeexecutaUmaVez(); //Não executa


function ehPrimo(x) {if (!ehPrimo.cache) {

ehPrimo.cache = {};}

if (!ehPrimo.cache[x]) {ehPrimo.cache[x] = … //calcula a parada

}

return ehPrimo.cache[x];}


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?


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



function soma(x,y) { return x + y;}soma(2,3); //undefined


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


Pra quebrar linha, use “pontuação”

function soma(x,y) { return x + y;}soma(2,3); //5


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() {…};


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 */})();


Use === e !==


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;


Cuidado com o seguinte padrão

function minhaFuncao() {var a = b = 10;

}minhaFuncao();

alert(a); //undefined, belezaalert(b); //10 ?!?


Cuidado com o seguinte padrão

function minhaFuncao() {var a = b = 10;

}minhaFuncao();

alert(a); //undefined, belezaalert(b); //10 ?!?


Evite eval

setTimeout(“alert(‘ola’);”, 10);setTimeout(function() { alert(‘ola’);}, 10);

var p = eval(“ator.” + propr);

var p = ator[propr];


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>



Douglas Crockford é o carahttp://javascript.crockford.com/

@[email protected]


Technology

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