Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript - Introdução com Orientação a Objetos

618 views

Published on

Este material é preparatório para a utilização básica do JavaScript em contexto de outros frameworks. O material é pensado para pessoas que já possuem conhecimento de linguagens de programação e querem entender rapidamente conceito básico de objetos em JavaScript

Published in: Software
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

JavaScript - Introdução com Orientação a Objetos

  1. 1. INTRODUÇÃO AO JAVASCRIPT Eduardo Mendes de Oliveira edumendes@gmail.com
  2. 2. Eduardo Mendes (edumendes@gmail.com) Sistemas de 2 50's Software Os primeiros sistemas começaram a aparecer no final da década de 40 e mais fortemente no anos 50
  3. 3. Eduardo Mendes (edumendes@gmail.com)3 Apesar de já estarem presentes há várias décadas, pode-se dizer que só recentemente começaram a ser usados por milhões de pessoas no mundo todo 50's Software Sistemas de
  4. 4. Eduardo Mendes (edumendes@gmail.com)4 Profissional
 Treinado Hoje Há alguns anos uma aplicação de software só era usada por profissionais treinados Hoje a maioria das pessoas interagem diretamente com uma ou mais aplicaçõess
  5. 5. Eduardo Mendes (edumendes@gmail.com) “ Este enorme e rápido crescimento no número de usuários de computadores não poderia ter acontecido sem o grande avanço na facilidade de uso
 e nas técnicas de interface que se seguiram” 5 (SMEETS, BONESS e BANKRAS, 2009)
  6. 6. Eduardo Mendes (edumendes@gmail.com) O que é riqueza? “A riqueza de um cliente é determinada pelo
 modelo de interação
 que o cliente oferece ao usuário" 6 Experiência do usuário
  7. 7. Eduardo Mendes (edumendes@gmail.com) O que é riqueza? Um modelo rico de interação oferece suporte para uma variedade
 de métodos de entrada,
 que responde intuitivamente
 e dentro de um prazo razoável 7
  8. 8. Eduardo Mendes (edumendes@gmail.com) O que é riqueza? Interação será tanto melhor 
 quanto mais próxima estiver
 de uma geração atualizada
 de aplicativos desktop 8
  9. 9. Eduardo Mendes (edumendes@gmail.com) 9 Aplicações Mainframe Aplicações Web RicasAplicações Cliente/Servidor Aplicações Web Experiência do Usuário Eficiência do Custo
  10. 10. Internet Cientistas do CERN lançaram uma proposta para a World Wide Web (HTML) 
 Facilitou o compartilhamento de documentos de pesquisa Hipertexto + Internet 1989
  11. 11. Eduardo Mendes (edumendes@gmail.com) A Internet e a Web foram se espalhando e se tornando populares 11 Originalmente foi criada para que as pessoas pudessem compartilhar informações, publicando documentos, e fazer referências cruzadas a eles através de hiperlinks 90's Entretanto a qualidade das aplicações eram baixas
  12. 12. Eduardo Mendes (edumendes@gmail.com)
  13. 13. Eduardo Mendes (edumendes@gmail.com)13
  14. 14. Eduardo Mendes (edumendes@gmail.com) acessar na web documentos
 gerados dinamicamente 14 conteúdo dinâmicoSurge a Aplicação Web
  15. 15. Eduardo Mendes (edumendes@gmail.com) 15 Aplicações Mainframe Aplicações Web RicasAplicações Cliente/Servidor Aplicações Web Experiência do Usuário Eficiência do Custo
  16. 16. Aplicações Web Síncronas O modelo síncrono do HTTP inviabilizava uma ideia de cliente rico GARRET, 2005
  17. 17. Jesse James Garrett 2005 Ajax: A New Approach to Web Applications http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/ JavaScript
  18. 18. O modelo síncrono GARRET, 2005
  19. 19. Eduardo Mendes (edumendes@gmail.com)
  20. 20. Eduardo Mendes (edumendes@gmail.com)21
  21. 21. Eduardo Mendes (edumendes@gmail.com) 2. Questões sobre interface web 22
  22. 22. Eduardo Mendes (edumendes@gmail.com) 2. Questões sobre interface web 2.1 Modularização e Separação de interesses 2.2 A web é uma só 2.3 Progressive Enhacement 2.4 Web Design Responsivo 23
  23. 23. Eduardo Mendes (edumendes@gmail.com) 2.1 Modularização e Separação de Interesses 24
  24. 24. Eduardo Mendes (edumendes@gmail.com) Modularização "Melhor maneira de criar
 sistemas gerenciáveis” PARNAS (1972) 25
  25. 25. Eduardo Mendes (edumendes@gmail.com) Separation Of Concerns (SoC) Para tratar a complexidade é melhor se concentrar em um assunto de cada vez, para melhorar a compreensão sobre o sistema e melhorar sua capacidade de evolução (DIJKSTRA, 1974) 26
  26. 26. Eduardo Mendes (edumendes@gmail.com) 03 27 interesses Descrição do Conteúdo Apresentação
 do Conteúdo Controle do
 comportamento deste Conteúdo
  27. 27. Eduardo Mendes (edumendes@gmail.com)28 Descrição do ConteúdoApresentação
 do Conteúdo Controle do
 comportamento deste Conteúdo
  28. 28. Eduardo Mendes (edumendes@gmail.com)29 O que é JavaScript? LiveScript Netscape Navigator 2.0 Linguagem baseada na linguagem JAVA
  29. 29. Eduardo Mendes (edumendes@gmail.com)30 O que é JavaScript? Não faz parte das plataformas Java Destinada para o uso em páginas Web (client-side) ou em servidores web (server-side) Front-end JavaScript é uma linguagem interpretada.
  30. 30. Eduardo Mendes (edumendes@gmail.com)31 O que posso fazer com JavaScript? Acesso à elementos de uma página web Imagens Elementos de um formulário Links etc Manipulados ou mudados via programação
  31. 31. Eduardo Mendes (edumendes@gmail.com)32 O que posso fazer com JavaScript? Capturar eventos Click do mouse Tecla pressionada Outros Operações baseadas nas ações do usuário.
  32. 32. Eduardo Mendes (edumendes@gmail.com)33 Como usar JavaScript? 3 maneiras: Dentro de blocos HTML <script> ... </script> Arquivo externo importado pela página <script language=“javascript” src=“funcoes.js"></script> Dentro dos elementos HTML sensíveis a eventos <input type="text" name="nome" value="" onblur="caixaAlta(this)“ />
  33. 33. Eduardo Mendes (edumendes@gmail.com)34 Blocos script <script language=“javascript”> ... instruções JavaScript ... </script> Podem aparecer diversas vezes no código De preferência dentro das tags <head>
  34. 34. Eduardo Mendes (edumendes@gmail.com)35 Blocos Script <html> <head> <script language=“javascript"> function caixaAlta(obj) { obj.value = obj.value.toUpperCase(); } </script> </head> <body> <form name="main" action="#"> Nome: <input type="text" name="nome" value="“ onblur="caixaAlta(this)“ /> <br /><br /> <input type="reset" name="reset" value="Limpar“ /><br /> </form> </body> </html>
  35. 35. Eduardo Mendes (edumendes@gmail.com)36 Arquivo Js para ser importado funcoes.js function soma(a, b) { return a + b; } function multiplicacao(a, b) { return a * b; }
  36. 36. Eduardo Mendes (edumendes@gmail.com)37 Importando um arquivo Código de importação deve vir no <head> Atributo SRC no descritor <script> <html> <head> <script language=“javascript” src=“funcoes.js"></script> </head> <body> .... <script> resultado = soma(10, 30); document.write("<p>A soma de 5 e 6 é " + resultado + “</p>”); </script>
  37. 37. Eduardo Mendes (edumendes@gmail.com)38 Em Elementos HTML Atributos para captura de eventos disparados Arrasto de um mouse Clique de um botão Quando ocorre um evento Um procedimento de tratamento do evento é chamado
  38. 38. Eduardo Mendes (edumendes@gmail.com)39 Em Elementos HTML Atributos de eventos Sempre começam com o prefixo “ON” onblur, onerror, onfocus, onchange, onclick, onkeydown, onkeypress, onkeyup... Valores recebidos por esses atributos Código JavaScript
  39. 39. Eduardo Mendes (edumendes@gmail.com)40 Em Elementos HTML <form> <input type="button“ value=“Aperte aqui“ onclick="alert(‘Botão Pressionado')“> </form> <a href="javascript:alert(‘Link acionado!’)"> link </a>
  40. 40. Eduardo Mendes (edumendes@gmail.com) Funções 41
  41. 41. Eduardo Mendes (edumendes@gmail.com) Funções 42 function somaDosQuadrados(x, y){ return Math.pow(x,2) + Math.pow(y,2); } Está na memória assim que o programa carrega
  42. 42. Eduardo Mendes (edumendes@gmail.com) Funções 43 construindo funções em tempo de execução function somaDosQuadrados(x, y){ return Math.pow(x,2) + Math.pow(y,2); } Está na memória assim que o programa carrega var soma =
  43. 43. Eduardo Mendes (edumendes@gmail.com) Funções 44 construindo funções em tempo de execução function somaDosQuadrados(x, y){ return Math.pow(x,2) + Math.pow(y,2); } Está na memória assim que o programa carrega var soma = function somaDosQuadrados(x, y){ return Math.pow(x,2) + Math.pow(y,2); }; A função foi atribuída à variável soma
  44. 44. Eduardo Mendes (edumendes@gmail.com) Funções 45 construindo funções em tempo de execução function somaDosQuadrados(x, y){ return Math.pow(x,2) + Math.pow(y,2); } Está na memória assim que o programa carrega var soma = function somaDosQuadrados(x, y){ return Math.pow(x,2) + Math.pow(y,2); }; É preciso de um ponto e vírgula no final da sentença
  45. 45. Eduardo Mendes (edumendes@gmail.com) Funções 46 construindo funções em tempo de execução function somaDosQuadrados(x, y){ return Math.pow(x,2) + Math.pow(y,2); } Está na memória assim que o programa carrega var soma = function somaDosQuadrados(x, y){ return Math.pow(x,2) + Math.pow(y,2); }; Agora a função carrega apenas quando este código for alcançado
  46. 46. Eduardo Mendes (edumendes@gmail.com) Funções 47 construindo funções em tempo de execução function somaDosQuadrados(x, y){ return Math.pow(x,2) + Math.pow(y,2); } Está na memória assim que o programa carrega var soma = function somaDosQuadrados(x, y){ return Math.pow(x,2) + Math.pow(y,2); }; Agora a função carrega apenas quando este código for alcançado soma(3,4); 25
  47. 47. Eduardo Mendes (edumendes@gmail.com) Funções 48 construindo funções em tempo de execução function somaDosQuadrados(x, y){ return Math.pow(x,2) + Math.pow(y,2); } A variável precisou de parênteses e ponto e vírgula var soma = function somaDosQuadrados(x, y){ return Math.pow(x,2) + Math.pow(y,2); }; O nome da função é opcional, já que estamos usando uma variável que já possui um nome soma(3,4); 25
  48. 48. Eduardo Mendes (edumendes@gmail.com) Funções Anônimas 49 não precisam ser nomeadas já que possuem uma variável var soma = function somaDosQuadrados(x, y){ return Math.pow(x,2) + Math.pow(y,2); }; Funções Anônimas
  49. 49. Eduardo Mendes (edumendes@gmail.com) Funções Anônimas 50 não precisam ser nomeadas já que possuem uma variável var soma = function (x, y){ return Math.pow(x,2) + Math.pow(y,2); }; Funções Anônimas
  50. 50. Eduardo Mendes (edumendes@gmail.com) Funções Anônimas 51 não precisam ser nomeadas já que possuem uma variável var soma = function (x, y){ return Math.pow(x,2) + Math.pow(y,2); }; Funções Anônimas Sem nome soma(3,4); 25 Ainda precisa de parênteses e ponto e vírgula
  51. 51. Eduardo Mendes (edumendes@gmail.com) Curiosidade 52 var soma = function (x, y){ return x + y; } console.log(soma);
  52. 52. Eduardo Mendes (edumendes@gmail.com) Curiosidade 53 var soma = function (x, y){ return x + y; } console.log(soma);
  53. 53. Eduardo Mendes (edumendes@gmail.com) 1.1 Funções como parâmetros 54
  54. 54. Eduardo Mendes (edumendes@gmail.com) Funções como parâmetros 55 var mensagemFinal = function() { alert("Fim de Jogo! Obrigado por participar!"); } uma variável que armazena uma função pode ser passada para outras funções
  55. 55. Eduardo Mendes (edumendes@gmail.com) Funções como parâmetros 56 var mensagemFinal = function() { alert("Fim de Jogo! Obrigado por participar!"); } ... encerrarJogo(mensagemFinal); A variável mensagemFinal é passada como parâmetro para uma função existente uma variável que armazena uma função pode ser passada para outras funções
  56. 56. Eduardo Mendes (edumendes@gmail.com) Funções como parâmetros 57 var mensagemFinal = function() { alert("Fim de Jogo! Obrigado por participar!"); } ... encerrarJogo(mensagemFinal); A variável mensagemFinal é passada como parâmetro para uma função existente uma variável que armazena uma função pode ser passada para outras funções function encerrarJogo(mensagem) { ... mensagem(); ... }
  57. 57. Eduardo Mendes (edumendes@gmail.com) Funções como parâmetros 58 var mensagemFinal = function() { alert("Fim de Jogo! Obrigado por participar!"); } ... encerrarJogo(mensagemFinal); uma variável que armazena uma função pode ser passada para outras funções function encerrarJogo(mensagem) { ... mensagem(); ... } function encerrarJogo(mensagem) { ... mensagem(); ... }
  58. 58. Eduardo Mendes (edumendes@gmail.com) Funções como parâmetros 59 var mensagemFinal = function() { alert("Fim de Jogo! Obrigado por participar!"); } ... encerrarJogo(mensagemFinal); uma variável que armazena uma função pode ser passada para outras funções function encerrarJogo(mensagem) { ... mensagem(); ... } function encerrarJogo( ) { ... mensagem(); ... }
  59. 59. Eduardo Mendes (edumendes@gmail.com) var mensagemFinal = function() { alert("Fim de Jogo! Obrigado por participar!"); } ... encerrarJogo(mensagemFinal); function encerrarJogo(mensagemFinal) { ... mensagem(); ... } Funções como parâmetros 60 uma variável que armazena uma função pode ser passada para outras funções function encerrarJogo(mensagem) { ... mensagem(); ... }
  60. 60. Eduardo Mendes (edumendes@gmail.com) var mensagemFinal = function() { alert("Fim de Jogo! Obrigado por participar!"); } ... encerrarJogo(mensagemFinal); function encerrarJogo(mensagemFinal) { ... mensagemFinal(); ... } Funções como parâmetros 61 uma variável que armazena uma função pode ser passada para outras funções function encerrarJogo(mensagem) { ... mensagem(); ... }
  61. 61. Eduardo Mendes (edumendes@gmail.com) var mensagemFinal = function() { alert("Fim de Jogo! Obrigado por participar!"); } ... encerrarJogo(mensagemFinal); function encerrarJogo(mensagemFinal) { ... mensagemFinal(); ... } Funções como parâmetros 62 uma variável que armazena uma função pode ser passada para outras funções function encerrarJogo(mensagem) { ... mensagem(); ... }
  62. 62. Eduardo Mendes (edumendes@gmail.com) var mensagemFinal = function() { alert("Fim de Jogo! Obrigado por participar!"); } ... encerrarJogo(mensagemFinal); function encerrarJogo(mensagemFinal) { ... mensagemFinal(); ... } E se houvesse várias mensagens? 63 É possível ter flexibilidade com essa estrutura e escolher uma mensagem específica function encerrarJogo(mensagem) { ... mensagem(); ... }
  63. 63. Eduardo Mendes (edumendes@gmail.com) function encerrarJogo(mensagem) { mensagem(); } var mensagemFinal; if (vencedor) { mensagemFinal = function() { alert("Você venceu! Batata frita!"); }; } else { mensagemFinal = function() { alert("Que pena! Tente mais uma vez!"); }; } encerrarJogo(mensagemFinal); E se houvesse várias mensagens? 64 É possível ter flexibilidade com essa estrutura e escolher uma mensagem específica var vencedor = false;
  64. 64. Eduardo Mendes (edumendes@gmail.com) function encerrarJogo(mensagem) { mensagem(); } var mensagemFinal; if (vencedor) { mensagemFinal = function() { alert("Você venceu! Batata frita!"); }; } else { mensagemFinal = function() { alert("Que pena! Tente mais uma vez!"); }; } encerrarJogo(mensagemFinal); E se houvesse várias mensagens? 65 É possível ter flexibilidade com essa estrutura e escolher uma mensagem específica var vencedor = true;
  65. 65. Eduardo Mendes (edumendes@gmail.com) Utilizando funções arrays e map 66 var numeros = [2, 4, 5, 6, 7, 8, 9]; uma variável que armazena uma função pode ser passada para outras funções var resultados = numeros.map( );- outra função - o método map recebe uma função e retorna um array processado pela função 2 4 5 6 7 8 9 outro valor outro valor outro valor outro valor outro valor outro valor outro valor - outra função -
  66. 66. Eduardo Mendes (edumendes@gmail.com) Utilizando funções arrays e map 67 var numeros = [2, 4, 5, 6, 7, 8, 9]; Map funciona com um laço que executa sobre cada índice do array var resultados = numbers.map( );- outra função - var resultados = []; for (var i = 0; i < numeros.length; i++) { resultados[i] = algumaFuncao(numeros[i]); } o método map encapsula este processamento e o resume em uma linha de código
  67. 67. Eduardo Mendes (edumendes@gmail.com) Utilizando funções arrays e map 68 var numeros = [2, 4, 5, 6, 7, 8, 9]; Map funciona com um laço que executa sobre cada índice do array var resultados = numeros.map(function(celula) { return celula * 2; } ); 2 4 5 6 7 8 9 4 8 10 12 14 16 18 - função -
  68. 68. Eduardo Mendes (edumendes@gmail.com) JavaScript: Objetos 69
  69. 69. Eduardo Mendes (edumendes@gmail.com) Objetos em JavaScript Uma entidade independente com propriedades e tipo como em outras linguagens as propriedades são acessadas pela notação do ponto 70 variavel Objeto idade=10 variavelDoObjeto.nomeDaPropriedade o.idade
  70. 70. Eduardo Mendes (edumendes@gmail.com) Criando objetos 71 var carro = new Object(); carro.fabricante = "KIA"; carro.modelo = "Picanto"; carro.ano = 2012; carro["fabricante"] = "Volks"; carro["modelo"] = "Gol"; carro["ano"] = 2013; pode ser utilizado como um array associativo
  71. 71. Eduardo Mendes (edumendes@gmail.com) Objetos
 Literais 72 var moto = {cor: "vermelha", rodas: 4, cilindros: 4};
  72. 72. Eduardo Mendes (edumendes@gmail.com) Função
 Construtora 73 function Carro(fabricante, modelo, ano) { this.fabricante = fabricante; this.modelo = modelo; this.ano = ano; } var outroCarro = new Carro("Hyundai", "Tucson", 2009); var aqueleCarro = new Carro("Ford", "Fiesta", 2014);
  73. 73. Eduardo Mendes (edumendes@gmail.com) Métodos 74 var moto = {cor: "vermelha", rodas: 4, cilindros: 4}; Como foi visto os objetos são formados por propriedades
  74. 74. Eduardo Mendes (edumendes@gmail.com) Métodos 75 variavelDoObjeto.nomeDoMetodo = nome_funcao; São funções associadas a um objeto… ou é uma propriedade de um objeto
 que é uma função um método é uma função atribuída
 a uma propriedade do objeto var meuObjeto = { meuMetodo: function(params) { // algum comportamento } };
  75. 75. Eduardo Mendes (edumendes@gmail.com)76 Métodos function Moto(cor, rodas, cilindros) { this.cor = cor; this.rodas = rodas; this.cilindros = cilindros; } function exibirDados() { var resultado = "Dados da moto: cor - " + this.cor + ", rodas: " + this.rodas + ", cilindros: " + this.cilindros; alert(resultado); } this.exibirDados = exibirDados;

×