1. Ramon Felipe de OliveiraRamon Felipe de Oliveira

2. Page  2
Origens
Javascript surgiu em 1995 e
quando lançado se chamava
LiveScript
BrendanEich

3. Page  3
Numa época de conexões
discadas, seu foco era outro:
Evitar chamadas
desnecessárias ao servidor.
Origens

4. Page  4
Novo cenário
De doze linhas, para duzentas.
Esta questão
pode ser vista
no ie6
hoje.

5. Page  5
Novo cenário
O cenário mudou drasticamente...
... mas o Javascript mudou muito pouco.
Browsers começaram a oferecer
suporte
para Html dinâmico e surgiu o DOM.

6. Page  6
DOM
O Document Object Model (DOM) é uma interface de programação
para documentos HTML e XML.
Ele provê uma representação estruturada do documento e define um
meio pelo qual a estrutura pode ser acessada por programas
permitindo-os alterar a estrutura do documento, estilo e conteúdo
Essencialmente ele conecta páginas de internet a scripts ou
linguagens de programação.
Uma página de internet é um documento.

7. Page  7
Características
Pequena
Interpretada (compilada)
Sofisticada
Linguagem funcional
Linguagem cliente
Baixa tipagem
Objetos são “containers”
Herança por protótipos

8. Page  8
Tipos principais

9. Page  9
Typeof

10. Page  10
var

11. Page  11
Objeto em JS

12. Page  12
Criando um objeto

13. Page  13
Acessando membros

14. Page  14
Sintaxe Literal
var obj = {
nome: “Fusca",
detalhes: {
cor: “vermelho",
ano: 1988
}
}

15. Page  15
Functions

16. Page  16
Functions

17. Page  17
Método

18. Page  18
Função add
function add(x, y) {
var total = x + y;
return total;
}

19. Page  19
Funções

20. Page  20
function add() {
var soma = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
soma += arguments[i];
}
return soma;
}

21. Page  21
Funções anônimas
var add = function() {
var soma = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
soma += arguments[i];
}
return soma;
}
Pode se usar recursão utilizando a função
implícita arguments.callee.

22. Page  22
Herança por Protótipo

23. Page  23
Herança por Protótipo

24. Page  24
Herança por Protótipo

25. Page  25
Problema

26. Page  26
function criarPessoa(nome, sobrenome) {
return {
nome: nome,
sobrenome: sobrenome
}
}
function nomeCompleto(pessoa) {
return pessoa.nome + ‘ ‘ + pessoa.sobrenome;
}
function nomeCompletoInvertido(pessoa) {
return pessoa.sobrenome + ', ' + pessoa.nome;
}
Solução 1

27. Page  27
> p = criarPessoa(“João", “Silva");
> nomeCompleto(p) João Silva
> nomeCompletoInvertido(p) Silva, João
Apesar de funcionar, não é uma
solução interessante.
Provavelmente, logo existirá dezenas
de funções no global namespace.

28. Page  28
function criarPessoa(nome, sobrenome) {
return {
nome: nome,
sobrenome : sobrenome,
nomeCompleto: function() {
return pessoa.nome + ‘ ‘ + pessoa.sobrenome;
},
nomeCompletoInvertido: function() {
return pessoa.sobrenome + ', ' + pessoa.nome;
}
}
}
Solução 2

29. Page  29
> s = criarPessoa(“João", “Silva")
> s. nomeCompleto() João Silva
> s. nomeCompletoInvertido() Silva, João

30. Page  30
Solução 3
function Pessoa(nome, sobrenome) {
this.nome = nome;
this.sobrenome = sobrenome;
}
Pessoa.prototype.nomeCompleto = function() {
return this.nome+ ' ' + this.sobrenome;
}
Pessoa.prototype.nomeCompletoInverso = function() {
return this.sobrenome + ', ' + this.nome;
}

31. Page  31
Prototype

32. Page  32
Funções Internas

33. Page  33
Closures
function realizaSoma(a) {
return function(b) {
return a + b;
}
}
x = realizaSoma(5);
y = realizaSoma(20);
x(6) ? y(7) ?

34. Page  34
The old-school way

35. Page  35
Module Pattern

36. Page  36
Revealing Module Pattern