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

1,528 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,528
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

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

×