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

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

1. INTRODUÇÃO
AO JAVASCRIPT
Eduardo Mendes de Oliveira
[email protected]

2. Eduardo Mendes ([email protected])
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. Eduardo Mendes ([email protected])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. Eduardo Mendes ([email protected])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. Eduardo Mendes ([email protected])
“ 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. Eduardo Mendes ([email protected])
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. Eduardo Mendes ([email protected])
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. Eduardo Mendes ([email protected])
O que é riqueza?
Interação será tanto melhor 

quanto mais próxima estiver

de uma geração atualizada

de aplicativos desktop
8

9. Eduardo Mendes ([email protected])
9
Aplicações Mainframe
Aplicações Web RicasAplicações Cliente/Servidor
Aplicações Web
Experiência
do Usuário
Eficiência do Custo

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. Eduardo Mendes ([email protected])
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. Eduardo Mendes ([email protected])

13. Eduardo Mendes ([email protected])13

14. Eduardo Mendes ([email protected])
acessar na web
documentos

gerados dinamicamente
14
conteúdo
dinâmicoSurge a Aplicação Web

15. Eduardo Mendes ([email protected])
15
Aplicações Mainframe
Aplicações Web RicasAplicações Cliente/Servidor
Aplicações Web
Experiência
do Usuário
Eficiência do Custo

16. Aplicações Web Síncronas
O modelo síncrono do HTTP inviabilizava uma ideia de cliente rico
GARRET, 2005

18. Jesse James Garrett
2005
Ajax: A New Approach to Web Applications
http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/
JavaScript

19. O modelo síncrono
GARRET, 2005

20. Eduardo Mendes ([email protected])

21. Eduardo Mendes ([email protected])21

22. Eduardo Mendes ([email protected])
2. Questões sobre interface web
22

23. Eduardo Mendes ([email protected])
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

24. Eduardo Mendes ([email protected])
2.1 Modularização
e Separação de Interesses
24

25. Eduardo Mendes ([email protected])
Modularização
"Melhor maneira de criar

sistemas gerenciáveis”
PARNAS (1972)
25

26. Eduardo Mendes ([email protected])
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

27. Eduardo Mendes ([email protected])
03
27
interesses
Descrição
do Conteúdo
Apresentação

do Conteúdo
Controle do

comportamento
deste Conteúdo

28. Eduardo Mendes ([email protected])28
Descrição
do ConteúdoApresentação

do Conteúdo
Controle do

comportamento
deste Conteúdo

29. Eduardo Mendes ([email protected])29
O que é JavaScript?
LiveScript
Netscape Navigator 2.0
Linguagem baseada na linguagem JAVA

30. Eduardo Mendes ([email protected])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.

31. Eduardo Mendes ([email protected])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

32. Eduardo Mendes ([email protected])32
O que posso fazer com JavaScript?
Capturar eventos
Click do mouse
Tecla pressionada
Outros
Operações baseadas nas ações do usuário.

33. Eduardo Mendes ([email protected])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)“ />

34. Eduardo Mendes ([email protected])34
Blocos script
<script language=“javascript”>
... instruções JavaScript ...
</script>
Podem aparecer diversas vezes no código
De preferência dentro das tags <head>

35. Eduardo Mendes ([email protected])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>

36. Eduardo Mendes ([email protected])36
Arquivo Js para ser importado
funcoes.js
function soma(a, b) {
return a + b;
}
function multiplicacao(a, b) {
return a * b;
}

37. Eduardo Mendes ([email protected])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>

38. Eduardo Mendes ([email protected])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

39. Eduardo Mendes ([email protected])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

40. Eduardo Mendes ([email protected])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>

41. Eduardo Mendes ([email protected])
Funções
41

42. Eduardo Mendes ([email protected])
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

43. Eduardo Mendes ([email protected])
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 =

44. Eduardo Mendes ([email protected])
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

45. Eduardo Mendes ([email protected])
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

46. Eduardo Mendes ([email protected])
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

47. Eduardo Mendes ([email protected])
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

48. Eduardo Mendes ([email protected])
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

49. Eduardo Mendes ([email protected])
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

50. Eduardo Mendes ([email protected])
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

51. Eduardo Mendes ([email protected])
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

52. Eduardo Mendes ([email protected])
Curiosidade
52
var soma = function (x, y){
return x + y;
}
console.log(soma);

53. Eduardo Mendes ([email protected])
Curiosidade
53
var soma = function (x, y){
return x + y;
}
console.log(soma);

54. Eduardo Mendes ([email protected])
1.1 Funções como
parâmetros
54

55. Eduardo Mendes ([email protected])
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

56. Eduardo Mendes ([email protected])
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

57. Eduardo Mendes ([email protected])
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();
...
}

58. Eduardo Mendes ([email protected])
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();
...
}

59. Eduardo Mendes ([email protected])
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();
...
}

60. Eduardo Mendes ([email protected])
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();
...
}

61. Eduardo Mendes ([email protected])
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();
...
}

62. Eduardo Mendes ([email protected])
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();
...
}

63. Eduardo Mendes ([email protected])
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();
...
}

64. Eduardo Mendes ([email protected])
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;

65. Eduardo Mendes ([email protected])
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;

66. Eduardo Mendes ([email protected])
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 -

67. Eduardo Mendes ([email protected])
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

68. Eduardo Mendes ([email protected])
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 -

69. Eduardo Mendes ([email protected])
JavaScript: Objetos
69

70. Eduardo Mendes ([email protected])
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

71. Eduardo Mendes ([email protected])
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

72. Eduardo Mendes ([email protected])
Objetos

Literais
72
var moto = {cor: "vermelha", rodas: 4, cilindros: 4};

73. Eduardo Mendes ([email protected])
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);

74. Eduardo Mendes ([email protected])
Métodos
74
var moto = {cor: "vermelha", rodas: 4, cilindros: 4};
Como foi visto
os objetos são formados por
propriedades

75. Eduardo Mendes ([email protected])
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
}
};

76. Eduardo Mendes ([email protected])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;