Ramon Felipe de OliveiraRamon Felipe de Oliveira
Page  2
Origens
Javascript surgiu em 1995 e
quando lançado se chamava
LiveScript
BrendanEich
Page  3
Numa época de conexões
discadas, seu foco era outro:
Evitar chamadas
desnecessárias ao servidor.
Origens
Page  4
Novo cenário
De doze linhas, para duzentas.
Esta questão
pode ser vista
no ie6
hoje.
Page  5
Novo cenário
O cenário mudou drasticamente...
... mas o Javascript mudou muito pouco.
Browsers começaram a oferec...
Page  6
DOM
O Document Object Model (DOM) é uma interface de programação
para documentos HTML e XML.
Ele provê uma repres...
Page  7
Características
Pequena
Interpretada (compilada)
Sofisticada
Linguagem funcional
Linguagem cliente
Baixa tipagem
...
Page  8
Tipos principais
Page  9
Typeof
Page  10
var
Page  11
Objeto em JS
Page  12
Criando um objeto
Page  13
Acessando membros
Page  14
Sintaxe Literal
var obj = {
nome: “Fusca",
detalhes: {
cor: “vermelho",
ano: 1988
}
}
Page  15
Functions
Page  16
Functions
Page  17
Método
Page  18
Função add
function add(x, y) {
var total = x + y;
return total;
}
Page  19
Funções
Page  20
function add() {
var soma = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
soma += arguments[i];
}
retu...
Page  21
Funções anônimas
var add = function() {
var soma = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
soma ...
Page  22
Herança por Protótipo
Page  23
Herança por Protótipo
Page  24
Herança por Protótipo
Page  25
Problema
Page  26
function criarPessoa(nome, sobrenome) {
return {
nome: nome,
sobrenome: sobrenome
}
}
function nomeCompleto(pess...
Page  27
> p = criarPessoa(“João", “Silva");
> nomeCompleto(p) João Silva
> nomeCompletoInvertido(p) Silva, João
Apesar d...
Page  28
function criarPessoa(nome, sobrenome) {
return {
nome: nome,
sobrenome : sobrenome,
nomeCompleto: function() {
r...
Page  29
> s = criarPessoa(“João", “Silva")
> s. nomeCompleto() João Silva
> s. nomeCompletoInvertido() Silva, João
Page  30
Solução 3
function Pessoa(nome, sobrenome) {
this.nome = nome;
this.sobrenome = sobrenome;
}
Pessoa.prototype.no...
Page  31
Prototype
Page  32
Funções Internas
Page  33
Closures
function realizaSoma(a) {
return function(b) {
return a + b;
}
}
x = realizaSoma(5);
y = realizaSoma(20...
Page  34
The old-school way
Page  35
Module Pattern
Page  36
Revealing Module Pattern
Próximos SlideShares
Carregando em…5
×

Javascript semana computação

439 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
439
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Para o usuário, javascript já ajudava muito ao evitar chamadas desnecessários ao servidor, numa época de conexões discadas
  • Javascript semana computação

    1. 1. Ramon Felipe de OliveiraRamon Felipe de Oliveira
    2. 2. Page  2 Origens Javascript surgiu em 1995 e quando lançado se chamava LiveScript BrendanEich
    3. 3. Page  3 Numa época de conexões discadas, seu foco era outro: Evitar chamadas desnecessárias ao servidor. Origens
    4. 4. Page  4 Novo cenário De doze linhas, para duzentas. Esta questão pode ser vista no ie6 hoje.
    5. 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. 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. 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. 8. Page  8 Tipos principais
    9. 9. Page  9 Typeof
    10. 10. Page  10 var
    11. 11. Page  11 Objeto em JS
    12. 12. Page  12 Criando um objeto
    13. 13. Page  13 Acessando membros
    14. 14. Page  14 Sintaxe Literal var obj = { nome: “Fusca", detalhes: { cor: “vermelho", ano: 1988 } }
    15. 15. Page  15 Functions
    16. 16. Page  16 Functions
    17. 17. Page  17 Método
    18. 18. Page  18 Função add function add(x, y) { var total = x + y; return total; }
    19. 19. Page  19 Funções
    20. 20. Page  20 function add() { var soma = 0; for (var i = 0, j = arguments.length; i < j; i++) { soma += arguments[i]; } return soma; }
    21. 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. 22. Page  22 Herança por Protótipo
    23. 23. Page  23 Herança por Protótipo
    24. 24. Page  24 Herança por Protótipo
    25. 25. Page  25 Problema
    26. 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. 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. 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. 29. Page  29 > s = criarPessoa(“João", “Silva") > s. nomeCompleto() João Silva > s. nomeCompletoInvertido() Silva, João
    30. 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. 31. Page  31 Prototype
    32. 32. Page  32 Funções Internas
    33. 33. Page  33 Closures function realizaSoma(a) { return function(b) { return a + b; } } x = realizaSoma(5); y = realizaSoma(20); x(6) ? y(7) ?
    34. 34. Page  34 The old-school way
    35. 35. Page  35 Module Pattern
    36. 36. Page  36 Revealing Module Pattern

    ×