Javascript
Upcoming SlideShare
Loading in...5
×
 

Javascript

on

  • 523 views

 

Statistics

Views

Total Views
523
Views on SlideShare
523
Embed Views
0

Actions

Likes
0
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Para o usuário, javascript já ajudava muito ao evitar chamadas desnecessários ao servidor, numa época de conexões discadas

Javascript Javascript Presentation Transcript

  • Ramon Felipe de Oliveira
  • Origens
    • Javascript surgiu em 1995 e quando lançado se chamava LiveScript
    Brendan Eich
    • Numa época de conexões discadas, seu foco era outro:
    • Evitar chamadas desnecessárias ao servidor.
    Origens
  • Novo cenário
    • De doze linhas, para duzentas.
    Esta questão pode ser vista no ie 6 hoje.
  • 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.
  • 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.
  • Características
    • Pequena
    • Interpretada (compilada)
    • Sofisticada
    • Linguagem funcional
    • Linguagem cliente
    • Baixa tipagem
    • Objetos são “containers”
    • Herança por protótipos
  • Tipos principais
  • Typeof
  • var
  • Objeto em JS
  • Criando um objeto
  • Acessando membros
  • Sintaxe Literal
    • var obj = {
    • nome: “Fusca",
    • detalhes: {
    • cor: “vermelho",
    • ano: 1988
    • }
    • }
  • Functions
  • Functions
  • Método
  • Função add
    • function add(x, y) {
      • var total = x + y;
      • return total;
    • }
  • Funções
    • function add() {
      • var soma = 0;
      • for (var i = 0, j = arguments.length; i < j; i++) {
        • soma += arguments[i];
        • }
        • return soma;
        • }
  • 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.
  • Herança por Protótipo
  • Herança por Protótipo
  • Herança por Protótipo
  • Problema
    • 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
  • > 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.
    • 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
  • > s = criarPessoa(“João&quot;, “Silva&quot;) > s. nomeCompleto() João Silva > s. nomeCompletoInvertido() Silva, João
  • 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;
    • }
  • Prototype
  • Funções Internas
  • Closures
    • function realizaSoma(a) {
    • return function(b) {
    • return a + b;
    • }
    • }
    • x = realizaSoma(5 );
    • y = realizaSoma(20 );
    • x(6) ? y(7) ?
  • The old-school way
  • Module Pattern
  • Revealing Module Pattern