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