Uma introdução ao JavaScript

Uma (re)introdução ao JavaScript

TDC Florianópolis
Rodrigo Vieira
25/08/2012 @rodbv
1

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

 Herança por prototipação

Saturday, August 25, 2012 5

Java + script

DOM

AJAX

jQuery

 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


 true
 false


 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;
}
}
Closure
var somador = geraSoma(5);

somador(3); //8


return x + num;
}
}
var x = 5; Closure
var somador = geraSoma(x);

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

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

Closure

Função

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”


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;
} Variável global

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


 Um dicionário enfeitado


 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”
};

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


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”);

setColors.call(botao1, “red”, “blue”);
setColors.call(botao2, “blue”, “green”);

“ this”

function setStyle(color, border){
this.style.backgroundColor = color;
this.style.borderColor = border;
}


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 funcao
alert(‘oeeee’);
executaUmaVez.jaExecutou = true;
}

executaUmaVez(); //oeeee
executaUmaVez(); //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?


 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


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


 Ponto-e-vírgula é opcional, mas o js coloca
pra você na hora de rodar
return;
x + y;
}
soma(2,3); //undefined


 Pra quebrar linha, use “pontuação”

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

var a = b = 10;

}
minhaFuncao();
alert(a); //undefined, beleza
alert(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/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>


Douglas Crockford é o cara
http://javascript.crockford.com/


@rodbv
rodrigo.vieira@gmail.com


Uma introdução ao JavaScript

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de Rodrigo Vieira

Mais de Rodrigo Vieira (12)

Uma introdução ao JavaScript