Javascript

533 visualizações

Publicada em

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
533
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
12
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

    1. 1. Ramon Felipe de Oliveira
    2. 2. Origens <ul><li>Javascript surgiu em 1995 e quando lançado se chamava LiveScript </li></ul>Brendan Eich
    3. 3. <ul><li>Numa época de conexões discadas, seu foco era outro: </li></ul><ul><li>Evitar chamadas desnecessárias ao servidor. </li></ul>Origens
    4. 4. Novo cenário <ul><li>De doze linhas, para duzentas. </li></ul>Esta questão pode ser vista no ie 6 hoje.
    5. 5. Novo cenário <ul><li> </li></ul><ul><li> </li></ul><ul><li>O cenário mudou drasticamente ... </li></ul><ul><li>... mas o Javascript mudou muito pouco. </li></ul>Browsers começaram a oferecer suporte para Html dinâmico e surgiu o DOM.
    6. 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. Características <ul><li>Pequena </li></ul><ul><li>Interpretada (compilada) </li></ul><ul><li>Sofisticada </li></ul><ul><li>Linguagem funcional </li></ul><ul><li>Linguagem cliente </li></ul><ul><li>Baixa tipagem </li></ul><ul><li>Objetos são “containers” </li></ul><ul><li>Herança por protótipos </li></ul>
    8. 8. Tipos principais
    9. 9. Typeof
    10. 10. var
    11. 11. Objeto em JS
    12. 12. Criando um objeto
    13. 13. Acessando membros
    14. 14. Sintaxe Literal <ul><li>var obj = { </li></ul><ul><li>nome: “Fusca&quot;, </li></ul><ul><li>detalhes: { </li></ul><ul><li> cor: “vermelho&quot;, </li></ul><ul><li> ano: 1988 </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
    15. 15. Functions
    16. 16. Functions
    17. 17. Método
    18. 18. Função add <ul><li>function add(x, y) { </li></ul><ul><ul><li>var total = x + y; </li></ul></ul><ul><ul><li>return total; </li></ul></ul><ul><li>} </li></ul>
    19. 19. Funções
    20. 20. <ul><li>function add() { </li></ul><ul><ul><li> var soma = 0; </li></ul></ul><ul><ul><li> for (var i = 0, j = arguments.length; i < j; i++) { </li></ul></ul><ul><ul><ul><li> soma += arguments[i]; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>return soma; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul>
    21. 21. Funções anônimas <ul><li>var add = function() { </li></ul><ul><ul><li> var soma = 0; </li></ul></ul><ul><ul><li> for (var i = 0, j = arguments.length; i < j; i++) { </li></ul></ul><ul><ul><ul><li> soma += arguments[i]; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>return soma; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul>Pode se usar recursão utilizando a função implícita arguments.callee.
    22. 22. Herança por Protótipo
    23. 23. Herança por Protótipo
    24. 24. Herança por Protótipo
    25. 25. Problema
    26. 26. <ul><li>function criarPessoa(nome, sobrenome) { </li></ul><ul><li>return { </li></ul><ul><li>nome: nome, </li></ul><ul><li>sobrenome: sobrenome </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>function nomeCompleto(pessoa) { </li></ul><ul><li>return pessoa.nome + ‘ ‘ + pessoa.sobrenome; </li></ul><ul><li>} </li></ul><ul><li>function nomeCompletoInvertido(pessoa) { </li></ul><ul><li>return pessoa.sobrenome + ', ' + pessoa.nome; </li></ul><ul><li>} </li></ul>Solução 1
    27. 27. > p = criarPessoa(“João&quot;, “Silva&quot;); > 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. <ul><li>function criarPessoa(nome, sobrenome) { </li></ul><ul><li>return { </li></ul><ul><li>nome: nome, </li></ul><ul><li> sobrenome : sobrenome, </li></ul><ul><li>nomeCompleto: function() { </li></ul><ul><li> return pessoa.nome + ‘ ‘ + pessoa.sobrenome; </li></ul><ul><li>}, </li></ul><ul><li>nomeCompletoInvertido: function() { </li></ul><ul><li>return pessoa.sobrenome + ', ' + pessoa.nome; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>Solução 2
    29. 29. > s = criarPessoa(“João&quot;, “Silva&quot;) > s. nomeCompleto() João Silva > s. nomeCompletoInvertido() Silva, João
    30. 30. Solução 3 <ul><li>function Pessoa(nome, sobrenome) { </li></ul><ul><li>this.nome = nome; </li></ul><ul><li>this.sobrenome = sobrenome; </li></ul><ul><li>} </li></ul><ul><li>Pessoa.prototype.nomeCompleto = function() { </li></ul><ul><li>return this.nome+ ' ' + this.sobrenome; </li></ul><ul><li>} </li></ul><ul><li>Pessoa.prototype.nomeCompletoInverso = function() { </li></ul><ul><li>return this.sobrenome + ', ' + this.nome; </li></ul><ul><li>} </li></ul>
    31. 31. Prototype
    32. 32. Funções Internas
    33. 33. Closures <ul><li>function realizaSoma(a) { </li></ul><ul><li> return function(b) { </li></ul><ul><li>return a + b; </li></ul><ul><li> } </li></ul><ul><li>} </li></ul><ul><li>x = realizaSoma(5 ); </li></ul><ul><li>y = realizaSoma(20 ); </li></ul><ul><li>x(6) ? y(7) ? </li></ul>
    34. 34. The old-school way
    35. 35. Module Pattern
    36. 36. Revealing Module Pattern

    ×