Tudo que você não sabia que queria saber sobre Javascript

Javascript
Alex Tercete Matos
alex.matos@chemtech.com.br
14 de março de 2012

Tópicos sugeridos:
(Clique no tópico para acessá-lo)
Pirâmide de acidentes e estatística Chemtech 2010-2011
Principais fontes de acidentes na Chemtech e formas de prevenção
Acesso as apresentações dos Diálogos Semanais de Segurança
Histórico de Acidentes na Chemtech
Acidentes nas instalações de nossos clientes
Rotas de fuga

Tudo que você não sabia que
queria saber sobre Javascript

A LINGUAGEM MAIS
INCOMPREENDIDA DE TODAS

http://javascript.crockford.com/javascript.html
Javascript: A linguagem mais mal compreendida do mundo

Dica do Tercete #1
“Para quem só sabe usar
martelo, parafuso tem cara
de prego.”

Variáveis globais
function defineNumero()
{
numero = 2;
}
function alteraNumero()
{
numero = 3;
}
function exibeNumero()
{
alert(numero);
}
defineNumero();
exibeNumero(); // 2
alteraNumero();
exibeNumero(); // 3
http://jsfiddle.net/alextercete/bKjSS/, http://jsfiddle.net/alextercete/C92ry/
function defineNumero()
{
var numero = 2;
}
function alteraNumero()
{
numero = 3;
}
function exibeNumero()
{
if (typeof numero != "undefined") {
alert(numero);
}
}
defineNumero();
exibeNumero(); // Não exibe
alteraNumero();
exibeNumero(); // 3

Dica do Tercete #2
Nunca use variáveis globais.

Dica do Tercete #3
Sempre use var quando for
definir variáveis.

Closure
var exibeContadorIncrementado = (function () {
var contador = 0,
incrementa = function () {
contador++;
},
exibe = function () {
incrementa();
alert(contador);
};
return exibe;
}());
exibeContadorIncrementado(); // 1

http://jsfiddle.net/alextercete/fgVBp/

Classes e objetos

var Cachorro = function (nome) {
var _nome = nome;
this.definirNome = function (nome) {
_nome = nome;
}
this.obterNome = function () {
return _nome;
}
};
var cachorro = new Cachorro("Rex");
alert(cachorro.obterNome()); // Rex
cachorro.definirNome("Fifi");
alert(cachorro.obterNome()); // Fifi
http://jsfiddle.net/alextercete/svjtZ/

Nem tudo é o que parece
alert(12 + "34"); // 1234
alert("" == false); // true
alert("" === false); // false
alert(typeof Object()); // object
alert(typeof Array()); // object
alert(typeof 1); // number
alert(typeof NaN); // number
http://jsfiddle.net/alextercete/uksz9/

Espaçamento
De tudo ao meu amor serei atento
Antes, e com tal zelo, e sempre, e tanto
Que mesmo em face do maior encanto
Dele se encante mais meu pensamento.
Quero vivê-lo em cada vão momento
E em seu louvor hei de espalhar meu canto
E rir meu riso e derramar meu pranto
Ao seu pesar ou seu contentamento
E assim, quando mais tarde me procure
Quem sabe a morte, angústia de quem vive
Quem sabe a solidão, fim de quem ama
Eu possa me dizer do amor (que tive):
Que não seja imortal, posto que é chama
Mas que seja infinito enquanto dure.
DetudoaomeuamorsereiatentoAntes,ecomt
alzelo,esempre,etantoQuemesmoemfaced
omaiorencantoDeleseencantemaismeupen
samento.Querovivêloemcadavãomomento
EemseulouvorheideespalharmeucantoErir
meurisoederramarmeuprantoAoseupesaro
useucontentamentoEassim,quandomaistar
demeprocureQuemsabeamorte,angústiade
quemviveQuemsabeasolidão,fimdequema
maEupossamedizerdoamor(quetive):Quen
ãosejaimortal,postoqueéchamaMasquesej
ainfinitoenquantodure.

// Não
var baskara=function(a,b,c){
var delta=Math.pow(b,2)-4*a*c,
calcularRaiz=function(multiplicador){
return(-b+multiplicador*Math.sqrt(delta))/(2*a);
},
raiz1=calcularRaiz(1),
raiz2=calcularRaiz(-1);
return [raiz1, raiz2];
};
// Sim
var baskara = function (a, b, c) {
var delta = Math.pow(b, 2) - 4 * a * c,
calcularRaiz = function (multiplicador) {
return (-b + multiplicador * Math.sqrt(delta)) / (2 * a);
},
raiz1 = calcularRaiz(1),
raiz2 = calcularRaiz(-1);
return [raiz1, raiz2];
};

Dica do Tercete #4
Os espaços são seus
amigos.

http://javascript.crockford.com/code.html
Convenções de estilo de codificação para a linguagem Javascript

Bons nomes
• Você daria o nome “a” ou “fn” ao seu filho?
• Nomes devem ser claros e facilitar a
compreensão do significado do item
– quantidadeDeItens
– calcularBalancoMensal()
– Exceções: controle de loops (i, j) ou
parâmetros matemáticos (x, y)
• Evite abreviações
– Exceções: id, num, qtd

Dica do Tercete #5
Dê bons nomes aos seus
itens, e saberá como chamá-
los quando precisar.

Só um var
// Não
var idsDosItens = [1, 2, 4];
var idDoItemSelecionado = 2;
var itemEstaPresenteNaLista = function (lista, item) {
return $.inArray(item, lista) > 0;
};
// Sim
var idsDosItens = [1, 2, 4],
idDoItemSelecionado = 2,
itemEstaPresenteNaLista = function (lista, item) {
return $.inArray(item, lista) > 0;
};

RESOLVENDO PROBLEMAS
DO DIA A DIA

http://jsfiddle.net/
Criação e teste de código Javascript

Developer Tools – Google Chrome
Ferramentas para debug e Console para execução de código
Javascript

http://jquery.com/
Biblioteca Javascript que simplifica (e muito!) o desenvolvimento

ORGANIZAÇÃO EM GRANDES
PROJETOS

O problema das funções globais
function funcao1() {
// ...
}
// ...
}
// ...
}
// ...
}
funcao1(); // ops!
funcao3();
}
A.js B.js
C.js

Dica do Tercete #6
Funções globais são
malvadas!

Namespaces
var A = {
funcao1: function () {
},
}
};
var B = {
},
}
};
var C = {
A.funcao1();
B.funcao3();
}
};
A.js B.js
C.js

Namespaces
• Vantagens
– Organiza o código
– Permite funções e variáveis com o mesmo
nome em diferentes namespaces
• Desvantagens
– Não permite membros privados
– É necessário especificar todo o “caminho”
para outro membro no mesmo namespace

Revealing Module Pattern
var Projeto = Projeto || {};
Projeto.modulo = (function () {
var variavelPrivada = 3,
funcaoPrivada = function (parametro) {
return parametro * 2;
},
funcaoQueSeraPublica = function (parametro) {
return funcaoPrivada(parametro) + variavelPrivada;
};
return {
funcao: funcaoQueSeraPublica
};
}());
alert(Projeto.modulo.funcao(1)); // 5
http://jsfiddle.net/alextercete/35y6z/

Revealing Module Pattern
• Vantagens
– Permite membros privados
– Acesso direto a outros membros do
mesmo namespace
– Auto-completar do Visual Studio funciona
• Desvantagens
– É necessário utilizar uma ferramenta para
juntar os arquivos em um só

Um <script /> por .html
var Projeto = Projeto || {};
Projeto.modulo = (function ($) {
var config = {
umaConfiguracao: 0,
outraConfiguracao: 2
},
init = function (parametros) {
$.extend(config, parametros.config);
};
return {
config: config,
init: init
};
}(jQuery));
arquivo.js

Um <script /> por .html
<script type="text/javascript" src="arquivo.js" />
<script type="text/javascript">
Projeto.modulo.init({
config: {
umaConfiguracao: 1
}
});
alert(Projeto.modulo.config.umaConfiguracao); // 1
alert(Projeto.modulo.config.outraConfiguracao); // 2
</script>

arquivo.html

Comprima seus arquivos
var Projeto=Projeto||{};Projeto.modulo
=function(){var a=3,b=function(a){retu
rn a*2},c=function(c){return b(c)+a};r
eturn{funcao:c}}();alert(Projeto.modul
o.funcao(1))
424 caracteres  164 caracteres

http://requirejs.org/
Gerenciamento de inclusão de vários arquivos e suas
dependências, com compressão nativa

http://ajax.dynatrace.com/ajax/en/
Ajuda a identificar os “gargalos” do seu código

http://jqueryui.com/
Widgets para uma aplicação web mais moderna

Dica do Tercete #7
Não reinvente a roda.

AJAX/JSON
• Web 2.0
– Gmail
– Facebook
• API’s REST
– Facebook
– Twitter
– ...
• JSON é Javascript

Dica do Tercete #8
Leia muito!

Referências
• http://www.klauskomenda.com/code/javascript-
programming-patterns
• http://bonsaiden.github.com/JavaScript-Garden/
• http://www.developer.nokia.com/Community/Wiki/Ja
vaScript_Performance_Best_Practices
• http://api.jquery.com/
• http://paulirish.com/2009/perf/
• http://ejohn.org/apps/learn/
• http://code.google.com/p/google-js-test/

Obrigado pela atenção!
Dúvidas?

Tudo que você não sabia que queria saber sobre Javascript

Tudo que você não sabia que queria saber sobre Javascript

Recommended

Recommended

More Related Content

Similar to Tudo que você não sabia que queria saber sobre Javascript

Similar to Tudo que você não sabia que queria saber sobre Javascript (20)

Tudo que você não sabia que queria saber sobre Javascript