JavaScript WorkShop

Workshop de JavaScript - globo.com.

Transcript

1. JS
2. ABOUT ME desenvolvedor no entretenimento1 15 anos trabalhando com web autor no tableless @davitferreira
3. Qualquer aplicação que pode ser escrita em JavaScript, eventualmente vai ser escrita em JavaScript. -- Jeff Attwood ‘‘
4. JAVASCRIPT Brendan Eich, Netscape 1995 orientada a objetos, imperativa e funcional client & server
5. ECMA SCRIPT Netscape + Microsoft é a linguagem JavaScript, JScript, ActionScript 3 são os dialetos
6. ‣ variáveis ‣ funções ‣ objetos ‣ dom ‣ eventos ‣ testes ‣ bibliotecas ‣ recursos
7. tipagem dinâmica escopo local (var) ou global (window) VARIÁVEIS
8. exemplos var str = "globo.com"; variavelGlobal = "global"; var indice = 122; var times = ["Flamengo", "Vasco"]; var time = {nome: "Flamengo", titulos: 6, estado: "RJ"};
9. tipos var num = 22; var num2 = "22"; num + num2; // 2222 num + parseInt(num2, 10); num.toString() num === num2 // false typeof num2 // “string”
10. variável que ainda não recebeu nenhum valor undefined var nome; typeof nome; // “undefined” nome === undefined // true
11. var str = "globo.com", indice = 122, times = ["Flamengo", "Vasco"], time = {nome: "Flamengo", titulos: 6, estado: "RJ"}; legibilidade + otimização declarando
12. funções ( ) { }
13. declarando uma função function log (msg) { console.log(msg); } declaração simples expressão método var log = function (msg) { console.log(msg); }; var App = { log: function (msg) { console.log(msg); } };
14. escopo var a = 0, b = 1; function soma () { var a = 2, b = 3; return a + b; } soma(); // 5
15. constructor + this function Pessoa(nome) { this.nome = nome; this.getNome = function() { return this.nome; }; } var pessoa = new Pessoa("Davi");
16. this function Pessoa(nome) { this.nome = nome; $(‘.btn’).click(function () { alert(this.nome); }); }
17. this function Pessoa(nome) { var that = this; this.nome = nome; $(‘.btn’).click(function () { alert(that.nome); }); }
18. funções auto-executáveis (function (window, $, undefined) { $(window).load(function () { glb.init(); }); })(window, jQuery, undefined);
19. arguments toda função possui um array com seus parâmetros function soma () { var i, resultado = 0; for (i = 0; i < arguments.length; i += 1) { resultado += arguments[i]; } return resultado; } soma(4, 8, 15, 16, 23, 42);
20. todo mundo é OBJETO { uma string é um objeto um número é um objeto uma função é um objeto um array é um objeto um boolean é um objeto
21. exemplos var str = new String ("globo.net"); str.replace(".net", ".com"); var num = new Number (1); num.toString(); var opaChefe = new Function ("alert(‘Opa’)"); opaChefe(); opaChefe.prototype; // Object
22. var objeto = { descricao: "uma coleção de propriedades com chave e valor", "Tipos de valor": "qualquer coisa, exceto undefined" }; estrutura de um objeto
23. var objeto = { nome: "globo.com", url: "www.globo.com", keywords: ["TV", "Python"] }; estrutura de um objeto
24. var objeto = { nome: "globo.com", funcao: function () { alert(this.nome); } }; estrutura de um objeto
25. var objeto = { nome: "globo.com", filho: { init: function () { console.log("started"); } } }; estrutura de um objeto não confundir com herança!
26. namespace var TVG = { classe: "glb-tvg", init: function () { this.initWidgets(); this.bindKeyboardNavigation(); } }; TVG.init();
27. herança via prototype
28. herança via prototype function Pessoa (nome) { this.nome = nome; } Pessoa.prototype.__unicode__ = function () { return "Pessoa: " + this.nome; }; Pessoa.prototype.idade = 20; var p = new Pessoa("Davi"); p.__unicode__(); p.idade = 32;
29. herança via prototype Atualizando o prototype de objetos nativos String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ‘’); };
30. retrospectiva ‣ variáveis possuem escopo global ou local ‣ funções podem ser construtores ‣ this é uma referência ao escopo ‣ todo mundo é um objeto ‣ javascript não possui classes ‣ todo objeto possui um prototype
31. [ coleções ]
32. capitulos = [{ 'titulo': 'Capítulo 1', 'data_exibicao': '2012-09-22', 'conteudos': [ { 'id': 1, 'titulo': 'Conteúdo 1' }, { 'id': 2, 'titulo': 'Conteúdo 2' }] }]; COLEÇÕES
33. COLEÇÕES for (i in capitulos) { console.log(capitulos[i]); console.log(capitulos[i].descricao); for (j in capitulos[i].conteudos) { console.log(capitulos[i].conteudos[j]); } } iteração
34. (closures)
35. closures Closure é um tipo especial de objeto que combina duas coisas: uma função e o escopo no qual esta função foi criada.
36. var Counter = (function() { var privateCounter = 0; function changeBy(val) { privateCounter += val; } return { increment: function () { changeBy(1); }, decrement: function () { changeBy(-1); }, value: function () { return privateCounter; } } })(); closures
37. function makeSizer(size) { return function () { document.body.style.fontSize = size +'px'; }; } var size12 = makeSizer(12); var size14 = makeSizer(14); size12(); size14(); closures
38. <DOM> Document Object Model
39. document window DOM
40. document.documentElement document.childNodes document.body document.querySelector('#body'); document.getElementById('main'); document.getElementsByClassName('body-main'); DOM <html>
41. var e = document.createElement('h1'), texto = document.createTextNode('TVG'); e.appendChild(texto); var texto = document.createTextNode('TVG'), div = document.getElementById('header'); div.insertBefore(texto, div.childNodes[1]); DOM
42. (e)ventos
43. BIND var botao = document.getElementById('link-home'), redirect = function () { window.location.href = 'index.html'; }; botao.addEventListener('click', redirect); botao.onclick = function(){ window.location.href = 'index.html'; }; <button onclick="window.location.href='index.html'"> IE8< attachEvent
44. UNBIND botao.removeEventListener('click', redirect); botao.onclick = ‘’;
45. var evtPlantao = new CustomEvent('plantaoCarregado'); document.addEventListener('plantaoCarregado', function(e){...}, false); plantao.dispatchEvent(evtPlantao); PERSONALIZANDO var evtPlantao = document.createEvent('HTMLEvents'); evtPlantao.initEvent('plantaoCarregado', true, true); document.addEventListener('plantaoCarregado', function (e){ (...) }, false); window.load(function () { plantao.dispatchEvent(evtPlantao); }); Browsers modernos (todos, exceto IE :))
46. RESPONSABILIDADES $.ajax({ url: '/wherever', success: function(data, status, xhr) { $('selector').append($(data).hide().fadeIn(function(){ $('other-selector').remove(); })); $('yet-another-selector').text('Request successful'); } }); http://floatleft.com/notebook/backbone-has-made-me-a-better-programmer
47. RESPONSABILIDADES function DataModel() { this.url = '/wherever'; } DataModel.prototype.getData = function() { $.ajax({ url: this.url, context: this, success: this.onSuccess }); }; DataModel.prototype.onSuccess = function(data) { $(window).trigger('DataModel:success', data); };
48. DEBUG & VALIDAÇÃO
49. console if (!this.console) { window.console = { log: function() { // sua função de log } }; }
50. console
51. validação ‣ JSLint ‣ JSHint ‣ Google Closure Linter
52. TESTES
53. Jasmine describe("Load Data", function () { it("should call getJSON", function () { spyOn($, 'getJSON'); TVG.hojeNasNovelas.loadData(); expect($.getJSON).toHaveBeenCalled(); }); it("should set current page to 1", function () { expect(TVG.hojeNasNovelas.currentPage).toEqual(1); }); it("should call showData", function () { spyOn(TVG.hojeNasNovelas, 'showData'); TVG.hojeNasNovelas.loadData(); expect(TVG.hojeNasNovelas.showData).toHaveBeenCalled(); }); });
54. QUnit test("animate(Hash, Object, Function)", function() { expect(1); stop(); var hash = {opacity: "show"}; var hashCopy = jQuery.extend({}, hash); jQuery("#foo").animate(hash, 0, function() { equal( hash.opacity, hashCopy.opacity, "Check if animate changed the hash parameter" ); start(); }); });
55. BIBLIOTECAS & FRAMEWORKS
56. !== javascript
57. + bibliotecas ‣ mootools ‣ ExtJS ‣ YUI ‣ RaphaelJS ‣ Dojo ‣ UnderscoreJS ‣ Prototype ‣ Scriptaculous ‣ CoffeeScript
58. frameworks ‣ Backbone ‣ AngularJS ‣ KnockoutJS
59. RECURSOS
62. https://github.com/jquery/jquery https://github.com/documentcloud/underscore https://github.com/mootools/mootools-core https://github.com/documentcloud/backbone
63. developer.mozilla.org/docs/JavaScript
64. davi.ferreira@corp.globo.com