Your SlideShare is downloading. ×
Javascript semana computação
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript semana computação

274
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
274
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Para o usuário, javascript já ajudava muito ao evitar chamadas desnecessários ao servidor, numa época de conexões discadas
  • Transcript

    • 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