tudo que você não sabia que queria saber sobre javascript
DESCRIPTION
TRANSCRIPT
![Page 2: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/2.jpg)
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
![Page 3: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/3.jpg)
Tudo que você não sabia que queria saber sobre Javascript
![Page 4: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/4.jpg)
A LINGUAGEM MAIS INCOMPREENDIDA DE TODAS
![Page 5: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/5.jpg)
http://javascript.crockford.com/javascript.htmlJavascript: A linguagem mais mal compreendida do mundo
![Page 6: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/6.jpg)
Dica do Tercete #1
“Para quem só sabe usar martelo, parafuso tem cara
de prego.”
![Page 7: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/7.jpg)
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
![Page 8: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/8.jpg)
Dica do Tercete #2
Nunca use variáveis globais.
![Page 9: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/9.jpg)
Dica do Tercete #3
Sempre use var quando for definir variáveis.
![Page 10: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/10.jpg)
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/
![Page 11: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/11.jpg)
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/
![Page 12: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/12.jpg)
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/
![Page 13: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/13.jpg)
BOAS PRÁTICAS
![Page 14: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/14.jpg)
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.
![Page 15: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/15.jpg)
// 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]; };
![Page 16: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/16.jpg)
Dica do Tercete #4
Os espaços são seus amigos.
![Page 17: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/17.jpg)
http://javascript.crockford.com/code.htmlConvenções de estilo de codificação para a linguagem Javascript
![Page 18: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/18.jpg)
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
![Page 19: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/19.jpg)
Dica do Tercete #5
Dê bons nomes aos seus itens, e saberá como chamá-
los quando precisar.
![Page 20: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/20.jpg)
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; };
![Page 21: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/21.jpg)
RESOLVENDO PROBLEMAS DO DIA A DIA
![Page 22: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/22.jpg)
http://jsfiddle.net/Criação e teste de código Javascript
![Page 23: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/23.jpg)
Developer Tools – Google ChromeFerramentas para debug e Console para execução de código Javascript
![Page 24: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/24.jpg)
http://jquery.com/Biblioteca Javascript que simplifica (e muito!) o desenvolvimento
![Page 25: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/25.jpg)
ORGANIZAÇÃO EM GRANDES PROJETOS
![Page 26: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/26.jpg)
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
![Page 27: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/27.jpg)
Dica do Tercete #6
Funções globais são malvadas!
![Page 28: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/28.jpg)
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
![Page 29: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/29.jpg)
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
![Page 30: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/30.jpg)
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/
![Page 31: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/31.jpg)
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ó
![Page 32: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/32.jpg)
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
![Page 33: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/33.jpg)
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
![Page 34: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/34.jpg)
PERFORMANCE
![Page 35: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/35.jpg)
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
![Page 36: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/36.jpg)
http://requirejs.org/Gerenciamento de inclusão de vários arquivos e suas dependências, com compressão nativa
![Page 37: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/37.jpg)
http://ajax.dynatrace.com/ajax/en/Ajuda a identificar os “gargalos” do seu código
![Page 38: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/38.jpg)
OUTROS ASSUNTOS INTERESSANTES
![Page 39: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/39.jpg)
http://jqueryui.com/Widgets para uma aplicação web mais moderna
![Page 40: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/40.jpg)
Dica do Tercete #7
Não reinvente a roda.
![Page 41: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/41.jpg)
AJAX/JSON
• Web 2.0– Gmail– Facebook
• API’s REST– Facebook– Twitter– ...
• JSON é Javascript
![Page 42: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/42.jpg)
Dica do Tercete #8
Leia muito!
![Page 43: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/43.jpg)
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/
![Page 44: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/44.jpg)
Obrigado pela atenção!
Dúvidas?
![Page 45: Tudo que você não sabia que queria saber sobre Javascript](https://reader033.vdocuments.pub/reader033/viewer/2022061201/547a1bf1b4af9fd3158b49f3/html5/thumbnails/45.jpg)