Javascript

Alex Tercete Matosalex.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.htmlJavascript: 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();  // 2alteraNumero(); 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 exibealteraNumero(); 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();  // 1exibeContadorIncrementado();  // 2exibeContadorIncrementado();  // 3

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());  // Rexcachorro.definirNome("Fifi");alert(cachorro.obterNome());  // Fifi

http://jsfiddle.net/alextercete/svjtZ/

Nem tudo é o que parece

alert(12 + "34");        // 1234alert("" == false);      // truealert("" === false);     // falsealert(typeof Object());  // objectalert(typeof Array());   // objectalert(typeof 1);         // numberalert(typeof NaN);       // number

http://jsfiddle.net/alextercete/uksz9/

BOAS PRÁTICAS

Espaçamento

De tudo ao meu amor serei atentoAntes, e com tal zelo, e sempre, e tantoQue mesmo em face do maior encantoDele se encante mais meu pensamento.

Quero vivê-lo em cada vão momentoE em seu louvor hei de espalhar meu cantoE rir meu riso e derramar meu prantoAo seu pesar ou seu contentamento

E assim, quando mais tarde me procureQuem sabe a morte, angústia de quem viveQuem sabe a solidão, fim de quem ama

Eu possa me dizer do amor (que tive):Que não seja imortal, posto que é chamaMas que seja infinito enquanto dure.

DetudoaomeuamorsereiatentoAntes,ecomtalzelo,esempre,etantoQuemesmoemfacedomaiorencantoDeleseencantemaismeupensamento.QuerovivêloemcadavãomomentoEemseulouvorheideespalharmeucantoErirmeurisoederramarmeuprantoAoseupesarouseucontentamentoEassim,quandomaistardemeprocureQuemsabeamorte,angústiadequemviveQuemsabeasolidão,fimdequemamaEupossamedizerdoamor(quetive):Quenãosejaimortal,postoqueéchamaMasquesejainfinitoenquantodure.

// Nãovar 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];};

// Simvar 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.htmlConvençõ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ãovar idsDosItens = [1, 2, 4];var idDoItemSelecionado = 2;var itemEstaPresenteNaLista = function (lista, item) {    return $.inArray(item, lista) > 0;            };

// Simvar 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 ChromeFerramentas 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() {    // ...    }

function funcao2() {    // ...    }

function funcao1() {    // ...    }

function funcao3() {    // ...    }

function funcao4() {    funcao1(); // ops!    funcao3();    }

A.js B.js

C.js

Dica do Tercete #6

Funções globais são malvadas!

Namespaces

var A = {        funcao1: function () {     },

    funcao2: function () {    }    };

var B = {        funcao1: function () {    },

    funcao3: function () {     }    };

var C = {        funcao4: function () {        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 Patternvar 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

PERFORMANCE

Comprima seus arquivos

var Projeto=Projeto||{};Projeto.modulo=function(){var a=3,b=function(a){return a*2},c=function(c){return b(c)+a};return{funcao:c}}();alert(Projeto.modulo.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

OUTROS ASSUNTOS INTERESSANTES

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/JavaScript_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?