Slide 1

Slide 1 text

JS

Slide 2

Slide 2 text

ABOUT ME desenvolvedor no entretenimento1 15 anos trabalhando com web autor no tableless @davitferreira

Slide 3

Slide 3 text

Qualquer aplicação que pode ser escrita em JavaScript, eventualmente vai ser escrita em JavaScript. -- Jeff Attwood ‘‘

Slide 4

Slide 4 text

JAVASCRIPT Brendan Eich, Netscape 1995 orientada a objetos, imperativa e funcional client & server

Slide 5

Slide 5 text

ECMA SCRIPT Netscape + Microsoft é a linguagem JavaScript, JScript, ActionScript 3 são os dialetos

Slide 6

Slide 6 text

‣ variáveis ‣ funções ‣ objetos ‣ dom ‣ eventos ‣ testes ‣ bibliotecas ‣ recursos

Slide 7

Slide 7 text

tipagem dinâmica escopo local (var) ou global (window) VARIÁVEIS

Slide 8

Slide 8 text

exemplos var str = "globo.com"; variavelGlobal = "global"; var indice = 122; var times = ["Flamengo", "Vasco"]; var time = {nome: "Flamengo", titulos: 6, estado: "RJ"};

Slide 9

Slide 9 text

tipos var num = 22; var num2 = "22"; num + num2; // 2222 num + parseInt(num2, 10); num.toString() num === num2 // false typeof num2 // “string”

Slide 10

Slide 10 text

variável que ainda não recebeu nenhum valor undefined var nome; typeof nome; // “undefined” nome === undefined // true

Slide 11

Slide 11 text

var str = "globo.com", indice = 122, times = ["Flamengo", "Vasco"], time = {nome: "Flamengo", titulos: 6, estado: "RJ"}; legibilidade + otimização declarando

Slide 12

Slide 12 text

funções ( ) { }

Slide 13

Slide 13 text

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); } };

Slide 14

Slide 14 text

escopo var a = 0, b = 1; function soma () { var a = 2, b = 3; return a + b; } soma(); // 5

Slide 15

Slide 15 text

constructor + this function Pessoa(nome) { this.nome = nome; this.getNome = function() { return this.nome; }; } var pessoa = new Pessoa("Davi");

Slide 16

Slide 16 text

this function Pessoa(nome) { this.nome = nome; $(‘.btn’).click(function () { alert(this.nome); }); }

Slide 17

Slide 17 text

this function Pessoa(nome) { var that = this; this.nome = nome; $(‘.btn’).click(function () { alert(that.nome); }); }

Slide 18

Slide 18 text

funções auto-executáveis (function (window, $, undefined) { $(window).load(function () { glb.init(); }); })(window, jQuery, undefined);

Slide 19

Slide 19 text

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);

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

var objeto = { descricao: "uma coleção de propriedades com chave e valor", "Tipos de valor": "qualquer coisa, exceto undefined" }; estrutura de um objeto

Slide 23

Slide 23 text

var objeto = { nome: "globo.com", url: "www.globo.com", keywords: ["TV", "Python"] }; estrutura de um objeto

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

var objeto = { nome: "globo.com", filho: { init: function () { console.log("started"); } } }; estrutura de um objeto não confundir com herança!

Slide 26

Slide 26 text

namespace var TVG = { classe: "glb-tvg", init: function () { this.initWidgets(); this.bindKeyboardNavigation(); } }; TVG.init();

Slide 27

Slide 27 text

herança via prototype

Slide 28

Slide 28 text

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;

Slide 29

Slide 29 text

herança via prototype Atualizando o prototype de objetos nativos String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ‘’); };

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

[ coleções ]

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

(closures)

Slide 35

Slide 35 text

closures Closure é um tipo especial de objeto que combina duas coisas: uma função e o escopo no qual esta função foi criada.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

function makeSizer(size) { return function () { document.body.style.fontSize = size +'px'; }; } var size12 = makeSizer(12); var size14 = makeSizer(14); size12(); size14(); closures

Slide 38

Slide 38 text

Document Object Model

Slide 39

Slide 39 text

document window DOM

Slide 40

Slide 40 text

document.documentElement document.childNodes document.body document.querySelector('#body'); document.getElementById('main'); document.getElementsByClassName('body-main'); DOM

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

(e)ventos

Slide 43

Slide 43 text

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'; }; IE8< attachEvent

Slide 44

Slide 44 text

UNBIND botao.removeEventListener('click', redirect); botao.onclick = ‘’;

Slide 45

Slide 45 text

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 :))

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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); };

Slide 48

Slide 48 text

DEBUG & VALIDAÇÃO

Slide 49

Slide 49 text

console if (!this.console) { window.console = { log: function() { // sua função de log } }; }

Slide 50

Slide 50 text

console

Slide 51

Slide 51 text

validação ‣ JSLint ‣ JSHint ‣ Google Closure Linter

Slide 52

Slide 52 text

TESTES

Slide 53

Slide 53 text

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(); }); });

Slide 54

Slide 54 text

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(); }); });

Slide 55

Slide 55 text

BIBLIOTECAS & FRAMEWORKS

Slide 56

Slide 56 text

!== javascript

Slide 57

Slide 57 text

+ bibliotecas ‣ mootools ‣ ExtJS ‣ YUI ‣ RaphaelJS ‣ Dojo ‣ UnderscoreJS ‣ Prototype ‣ Scriptaculous ‣ CoffeeScript

Slide 58

Slide 58 text

frameworks ‣ Backbone ‣ AngularJS ‣ KnockoutJS

Slide 59

Slide 59 text

RECURSOS

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

https://github.com/jquery/jquery https://github.com/documentcloud/underscore https://github.com/mootools/mootools-core https://github.com/documentcloud/backbone

Slide 63

Slide 63 text

developer.mozilla.org/docs/JavaScript

Slide 64

Slide 64 text