SlideShare ist ein Scribd-Unternehmen logo
1 von 35
Downloaden Sie, um offline zu lesen
JS 101
                                    Introdução a Programação em JavaScript




quarta-feira, 19 de outubro de 11
Arquitetura REST




                                    WWW


quarta-feira, 19 de outubro de 11
CLIENTE-SERVIDOR




                                    CLIENTE        SERVIDOR




quarta-feira, 19 de outubro de 11
STATELESS


                                    CLIENTE



                                    CLIENTE       SERVIDOR



                                    CLIENTE




quarta-feira, 19 de outubro de 11
CACHE


                                    CLIENTE
                                              $



                                    CLIENTE   $       SERVIDOR


                                              $
                                    CLIENTE




quarta-feira, 19 de outubro de 11
INTERFACE COMUM


                                                  SERVIDOR
                                    CLIENTE
                                              $




                                    CLIENTE   $   SERVIDOR


                                              $
                                    CLIENTE




quarta-feira, 19 de outubro de 11
CAMADAS


                                          PROXY   $   SERVIDOR
                       CLIENTE
                                    $




                       CLIENTE      $     PROXY   $   SERVIDOR


                                    $
                       CLIENTE




quarta-feira, 19 de outubro de 11
CÓDIGO SOB DEMANDA


                                           PROXY   $     SERVIDOR
                       CLIENTE
                                    $




                       CLIENTE      $      PROXY   $     SERVIDOR


                                    $
                       CLIENTE




quarta-feira, 19 de outubro de 11
= JavaScript




quarta-feira, 19 de outubro de 11
PROTOCOLO HTTP
                   Protocolo usado na Web

                   “Interface Comum”
                   mencionada pelo REST




quarta-feira, 19 de outubro de 11
Anatomia do HTTP




quarta-feira, 19 de outubro de 11
Anatomia do HTTP




                                               Requisição

                                    CLIENTE                 SERVIDOR
                                               Resposta




quarta-feira, 19 de outubro de 11
REQUISIÇÃO

                   Verbo

                   Resource

                   Cabeçalhos

                   Corpo da Mensagem
                   (Opcional)




quarta-feira, 19 de outubro de 11
REQUISIÇÃO

                             Verbo   Resource     Cabeçalhos




quarta-feira, 19 de outubro de 11
RESPOSTA

                   Status

                   Cabeçalhos

                   Corpo da Mensagem




quarta-feira, 19 de outubro de 11
RESPOSTA
                                    Status              Cabeçalhos




quarta-feira, 19 de outubro de 11
VERBOS


                                    GET    POST     HEAD



                                    PUT    DELETE   TRACE




                            OPTIONS       CONNECT   PATCH



quarta-feira, 19 de outubro de 11
STATUS (Alguns exemplos)


                          200 (OK)


                          301 (MOVED PERMANENTLY)


                          404 (NOT FOUND)


                          500 (INTERNAL SERVER ERROR)




quarta-feira, 19 de outubro de 11
JavaScript
                   Linguagem de Programação

                   Alto Nível

                   Netscape, 1995




quarta-feira, 19 de outubro de 11
JavaScript vs Java
                   Frequentemente Confundido
                   com Java

                         Convenções de nomes são
                         semelhantes

                         Ambos herdam a sintaxe
                         do C




quarta-feira, 19 de outubro de 11
Java                        Python




                                               Forte
                                    Estática           Dinâmica

                                               Fraca



                                C                      JavaScript

quarta-feira, 19 de outubro de 11
Hello, World!
                  document.write('Hello, World!');




quarta-feira, 19 de outubro de 11
Variáveis, ifs, loops
                  var max = 20;
                  for (var i = 0; i < max; i++) {
                    if (i % 2 == 0) {
                       document.writeln("Par: "+i);
                    } else {
                       document.writeln("Impar: "+i);
                    }
                  }




quarta-feira, 19 de outubro de 11
Pontos-e-vírgulas São Opcionais

                  var max = 20
                  for (var i = 0; i < max; i++) {
                    if (i % 2 == 0) {
                       document.writeln("Par: "+i)
                    } else {
                       document.writeln("Impar: "+i)
                    }
                  }




quarta-feira, 19 de outubro de 11
Dinamicamente Tipada

                  // mesma variável pode abrigar valores de
                  // tipos diferentes ao longo da execução

                  var foo
                  foo = 5
                  foo = 'Hello'
                  foo = false




quarta-feira, 19 de outubro de 11
Fracamente Tipada

                                    Expressão          Resultado

                                     1 == "1"            .true.

                                      2-"1"                  1

                                      1/"3"             0.3333...

                                      2+"2"                22




quarta-feira, 19 de outubro de 11
Fracamente Tipada

                                     Expressão           Resultado

                                      1 === "1"            .false.

                                         2-"1"                 1

                                         1/"3"            0.3333...

                                    2+parseInt("2")            4




quarta-feira, 19 de outubro de 11
Arrays

                  var arr = [4, 32, 7, false, 'abc']

                  document.write(arr[0]) // 4

                  arr.push(9)                // [4, 32, 7, false, 'abc', 9]

                  var p = arr.shift()        // [32, 7, false, 'abc', 9]

                  document.write(p)          // 4


quarta-feira, 19 de outubro de 11
Objetos

                  var pessoa = {
                    nome: ‘José’,
                    idade: 23
                  }

                  document.write(pessoa.nome)
                  document.write(pessoa['nome']) // equivalentes

                  pessoa.sexo = 'M'              // perfeitamente válido
                  document.write(pessoa.sexo)


quarta-feira, 19 de outubro de 11
Funções

                  function somaDois(x) {
                    return x+2
                  }

                  somaDois(5) // retorna 7




quarta-feira, 19 de outubro de 11
Funções de Primeira Classe

                  var mensagem = function() {
                    document.write('Hello!')
                  }

                  mensagem()

                  setTimeout(mensagem, 5000)




quarta-feira, 19 de outubro de 11
Funções de Primeira Classe

                  var chamar10x = function(f) {
                    for(var i = 0; i < 10; i++) {
                       f()
                    }
                  }

                  chamar10x(mensagem)

                  var x = 0
                  chamar10x(function(){ x++ })
                  document.write(x)            // 10


quarta-feira, 19 de outubro de 11
Funções + Objetos

                  var pessoa = {
                    nome: "José",
                    sobrenome: "da Silva",
                    nomeCompleto: function() {
                      return this.nome + ' ' + this.sobrenome
                    }
                  }

                  document.write(pessoa.nomeCompleto())


quarta-feira, 19 de outubro de 11
Protótipos

                  var Pessoa = function(nome, sobrenome){
                    this.nome = nome
                    this.sobrenome = sobrenome
                  }
                  Pessoa.protoype.nomeCompleto = function() {
                    return this.nome + ' ' + this.sobrenome
                  }

                  var p = new Pessoa('José', 'da Silva')
                  document.write(p.nomeCompleto())


quarta-feira, 19 de outubro de 11
Código de Exemplo

                   http://github.com/coreh/js101




quarta-feira, 19 de outubro de 11

Weitere ähnliche Inhalte

Andere mochten auch (7)

Introdução à programação javascript
Introdução à programação javascriptIntrodução à programação javascript
Introdução à programação javascript
 
Curso javascript básico
Curso javascript básicoCurso javascript básico
Curso javascript básico
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
 
JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)
 
Javascript levado a serio
Javascript levado a serioJavascript levado a serio
Javascript levado a serio
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 

Kürzlich hochgeladen

Assessement Boas Praticas em Kubernetes.pdf
Assessement Boas Praticas em Kubernetes.pdfAssessement Boas Praticas em Kubernetes.pdf
Assessement Boas Praticas em Kubernetes.pdf
Natalia Granato
 

Kürzlich hochgeladen (6)

ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docxATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
 
Assessement Boas Praticas em Kubernetes.pdf
Assessement Boas Praticas em Kubernetes.pdfAssessement Boas Praticas em Kubernetes.pdf
Assessement Boas Praticas em Kubernetes.pdf
 
Boas práticas de programação com Object Calisthenics
Boas práticas de programação com Object CalisthenicsBoas práticas de programação com Object Calisthenics
Boas práticas de programação com Object Calisthenics
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
Padrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemploPadrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemplo
 
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docxATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
 

JS 101 - Introdução ao JavaScript

  • 1. JS 101 Introdução a Programação em JavaScript quarta-feira, 19 de outubro de 11
  • 2. Arquitetura REST WWW quarta-feira, 19 de outubro de 11
  • 3. CLIENTE-SERVIDOR CLIENTE SERVIDOR quarta-feira, 19 de outubro de 11
  • 4. STATELESS CLIENTE CLIENTE SERVIDOR CLIENTE quarta-feira, 19 de outubro de 11
  • 5. CACHE CLIENTE $ CLIENTE $ SERVIDOR $ CLIENTE quarta-feira, 19 de outubro de 11
  • 6. INTERFACE COMUM SERVIDOR CLIENTE $ CLIENTE $ SERVIDOR $ CLIENTE quarta-feira, 19 de outubro de 11
  • 7. CAMADAS PROXY $ SERVIDOR CLIENTE $ CLIENTE $ PROXY $ SERVIDOR $ CLIENTE quarta-feira, 19 de outubro de 11
  • 8. CÓDIGO SOB DEMANDA PROXY $ SERVIDOR CLIENTE $ CLIENTE $ PROXY $ SERVIDOR $ CLIENTE quarta-feira, 19 de outubro de 11
  • 9. = JavaScript quarta-feira, 19 de outubro de 11
  • 10. PROTOCOLO HTTP Protocolo usado na Web “Interface Comum” mencionada pelo REST quarta-feira, 19 de outubro de 11
  • 11. Anatomia do HTTP quarta-feira, 19 de outubro de 11
  • 12. Anatomia do HTTP Requisição CLIENTE SERVIDOR Resposta quarta-feira, 19 de outubro de 11
  • 13. REQUISIÇÃO Verbo Resource Cabeçalhos Corpo da Mensagem (Opcional) quarta-feira, 19 de outubro de 11
  • 14. REQUISIÇÃO Verbo Resource Cabeçalhos quarta-feira, 19 de outubro de 11
  • 15. RESPOSTA Status Cabeçalhos Corpo da Mensagem quarta-feira, 19 de outubro de 11
  • 16. RESPOSTA Status Cabeçalhos quarta-feira, 19 de outubro de 11
  • 17. VERBOS GET POST HEAD PUT DELETE TRACE OPTIONS CONNECT PATCH quarta-feira, 19 de outubro de 11
  • 18. STATUS (Alguns exemplos) 200 (OK) 301 (MOVED PERMANENTLY) 404 (NOT FOUND) 500 (INTERNAL SERVER ERROR) quarta-feira, 19 de outubro de 11
  • 19. JavaScript Linguagem de Programação Alto Nível Netscape, 1995 quarta-feira, 19 de outubro de 11
  • 20. JavaScript vs Java Frequentemente Confundido com Java Convenções de nomes são semelhantes Ambos herdam a sintaxe do C quarta-feira, 19 de outubro de 11
  • 21. Java Python Forte Estática Dinâmica Fraca C JavaScript quarta-feira, 19 de outubro de 11
  • 22. Hello, World! document.write('Hello, World!'); quarta-feira, 19 de outubro de 11
  • 23. Variáveis, ifs, loops var max = 20; for (var i = 0; i < max; i++) { if (i % 2 == 0) { document.writeln("Par: "+i); } else { document.writeln("Impar: "+i); } } quarta-feira, 19 de outubro de 11
  • 24. Pontos-e-vírgulas São Opcionais var max = 20 for (var i = 0; i < max; i++) { if (i % 2 == 0) { document.writeln("Par: "+i) } else { document.writeln("Impar: "+i) } } quarta-feira, 19 de outubro de 11
  • 25. Dinamicamente Tipada // mesma variável pode abrigar valores de // tipos diferentes ao longo da execução var foo foo = 5 foo = 'Hello' foo = false quarta-feira, 19 de outubro de 11
  • 26. Fracamente Tipada Expressão Resultado 1 == "1" .true. 2-"1" 1 1/"3" 0.3333... 2+"2" 22 quarta-feira, 19 de outubro de 11
  • 27. Fracamente Tipada Expressão Resultado 1 === "1" .false. 2-"1" 1 1/"3" 0.3333... 2+parseInt("2") 4 quarta-feira, 19 de outubro de 11
  • 28. Arrays var arr = [4, 32, 7, false, 'abc'] document.write(arr[0]) // 4 arr.push(9) // [4, 32, 7, false, 'abc', 9] var p = arr.shift() // [32, 7, false, 'abc', 9] document.write(p) // 4 quarta-feira, 19 de outubro de 11
  • 29. Objetos var pessoa = { nome: ‘José’, idade: 23 } document.write(pessoa.nome) document.write(pessoa['nome']) // equivalentes pessoa.sexo = 'M' // perfeitamente válido document.write(pessoa.sexo) quarta-feira, 19 de outubro de 11
  • 30. Funções function somaDois(x) { return x+2 } somaDois(5) // retorna 7 quarta-feira, 19 de outubro de 11
  • 31. Funções de Primeira Classe var mensagem = function() { document.write('Hello!') } mensagem() setTimeout(mensagem, 5000) quarta-feira, 19 de outubro de 11
  • 32. Funções de Primeira Classe var chamar10x = function(f) { for(var i = 0; i < 10; i++) { f() } } chamar10x(mensagem) var x = 0 chamar10x(function(){ x++ }) document.write(x) // 10 quarta-feira, 19 de outubro de 11
  • 33. Funções + Objetos var pessoa = { nome: "José", sobrenome: "da Silva", nomeCompleto: function() { return this.nome + ' ' + this.sobrenome } } document.write(pessoa.nomeCompleto()) quarta-feira, 19 de outubro de 11
  • 34. Protótipos var Pessoa = function(nome, sobrenome){ this.nome = nome this.sobrenome = sobrenome } Pessoa.protoype.nomeCompleto = function() { return this.nome + ' ' + this.sobrenome } var p = new Pessoa('José', 'da Silva') document.write(p.nomeCompleto()) quarta-feira, 19 de outubro de 11
  • 35. Código de Exemplo http://github.com/coreh/js101 quarta-feira, 19 de outubro de 11