Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript WorkShop

JavaScript WorkShop

Workshop de JavaScript - globo.com.

Davi Ferreira

October 04, 2012
Tweet

More Decks by Davi Ferreira

Other Decks in Programming

Transcript

  1. JS

  2. Qualquer aplicação que pode ser escrita em JavaScript, eventualmente vai

    ser escrita em JavaScript. -- Jeff Attwood ‘‘
  3. ‣ variáveis ‣ funções ‣ objetos ‣ dom ‣ eventos

    ‣ testes ‣ bibliotecas ‣ recursos
  4. exemplos var str = "globo.com"; variavelGlobal = "global"; var indice

    = 122; var times = ["Flamengo", "Vasco"]; var time = {nome: "Flamengo", titulos: 6, estado: "RJ"};
  5. tipos var num = 22; var num2 = "22"; num

    + num2; // 2222 num + parseInt(num2, 10); num.toString() num === num2 // false typeof num2 // “string”
  6. variável que ainda não recebeu nenhum valor undefined var nome;

    typeof nome; // “undefined” nome === undefined // true
  7. var str = "globo.com", indice = 122, times = ["Flamengo",

    "Vasco"], time = {nome: "Flamengo", titulos: 6, estado: "RJ"}; legibilidade + otimização declarando
  8. 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); } };
  9. escopo var a = 0, b = 1; function soma

    () { var a = 2, b = 3; return a + b; } soma(); // 5
  10. constructor + this function Pessoa(nome) { this.nome = nome; this.getNome

    = function() { return this.nome; }; } var pessoa = new Pessoa("Davi");
  11. this function Pessoa(nome) { var that = this; this.nome =

    nome; $(‘.btn’).click(function () { alert(that.nome); }); }
  12. 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);
  13. 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
  14. 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
  15. var objeto = { descricao: "uma coleção de propriedades com

    chave e valor", "Tipos de valor": "qualquer coisa, exceto undefined" }; estrutura de um objeto
  16. var objeto = { nome: "globo.com", funcao: function () {

    alert(this.nome); } }; estrutura de um objeto
  17. var objeto = { nome: "globo.com", filho: { init: function

    () { console.log("started"); } } }; estrutura de um objeto não confundir com herança!
  18. namespace var TVG = { classe: "glb-tvg", init: function ()

    { this.initWidgets(); this.bindKeyboardNavigation(); } }; TVG.init();
  19. 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;
  20. herança via prototype Atualizando o prototype de objetos nativos String.prototype.trim

    = function() { return this.replace(/^\s+|\s+$/g, ‘’); };
  21. 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
  22. 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
  23. 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
  24. closures Closure é um tipo especial de objeto que combina

    duas coisas: uma função e o escopo no qual esta função foi criada.
  25. 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
  26. function makeSizer(size) { return function () { document.body.style.fontSize = size

    +'px'; }; } var size12 = makeSizer(12); var size14 = makeSizer(14); size12(); size14(); closures
  27. 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
  28. 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
  29. 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 :))
  30. 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
  31. 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); };
  32. 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(); }); });
  33. 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(); }); });
  34. + bibliotecas ‣ mootools ‣ ExtJS ‣ YUI ‣ RaphaelJS

    ‣ Dojo ‣ UnderscoreJS ‣ Prototype ‣ Scriptaculous ‣ CoffeeScript