javascript - introdução com orientação a objetos
TRANSCRIPT
![Page 2: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/2.jpg)
Eduardo Mendes ([email protected])
Sistemas de
2
50'sSoftware
Os primeiros sistemas começaram a aparecer no final da década de 40 e mais fortemente no anos 50
![Page 3: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/3.jpg)
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'sSoftwareSistemas de
![Page 4: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/4.jpg)
Eduardo Mendes ([email protected])4
ProfissionalTreinado 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
![Page 5: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/5.jpg)
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)
![Page 6: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/6.jpg)
Eduardo Mendes ([email protected])
O que é riqueza?
“A riqueza de um cliente é determinada pelo
modelo de interaçãoque o cliente oferece ao usuário"
6
Experiência do usuário
![Page 7: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/7.jpg)
Eduardo Mendes ([email protected])
O que é riqueza?
Um modelo rico de interação oferece
suporte para uma variedadede métodos de entrada,
que responde intuitivamentee dentro de um prazo razoável
7
![Page 8: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/8.jpg)
Eduardo Mendes ([email protected])
O que é riqueza?
Interação será tanto melhor quanto mais próxima estiver
de uma geração atualizadade aplicativos desktop
8
![Page 9: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/9.jpg)
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
![Page 10: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/10.jpg)
Internet
Cientistas do CERN lançaram uma proposta para a World Wide Web (HTML) Facilitou o compartilhamento de documentos de pesquisa Hipertexto + Internet
1989
![Page 11: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/11.jpg)
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
![Page 14: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/14.jpg)
Eduardo Mendes ([email protected])
acessar na web documentosgerados dinamicamente
14
conteúdo dinâmicoSurge a Aplicação Web
![Page 15: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/15.jpg)
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
![Page 16: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/16.jpg)
Aplicações Web SíncronasO modelo síncrono do HTTP inviabilizava uma ideia de cliente rico
GARRET, 2005
![Page 17: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/17.jpg)
![Page 18: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/18.jpg)
Jesse James Garrett
2005 Ajax: A New Approach to Web Applications
http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/
JavaScript
![Page 19: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/19.jpg)
O modelo síncronoGARRET, 2005
![Page 23: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/23.jpg)
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
![Page 25: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/25.jpg)
Eduardo Mendes ([email protected])
Modularização
"Melhor maneira de criar sistemas gerenciáveis”
PARNAS (1972)
25
![Page 26: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/26.jpg)
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
![Page 27: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/27.jpg)
Eduardo Mendes ([email protected])
0327
interesses
Descrição do Conteúdo
Apresentaçãodo Conteúdo
Controle docomportamento deste Conteúdo
![Page 28: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/28.jpg)
Eduardo Mendes ([email protected])28
Descrição do ConteúdoApresentação
do Conteúdo
Controle docomportamento deste Conteúdo
![Page 29: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/29.jpg)
Eduardo Mendes ([email protected])29
O que é JavaScript?
LiveScript
Netscape Navigator 2.0
Linguagem baseada na linguagem JAVA
![Page 30: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/30.jpg)
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.
![Page 31: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/31.jpg)
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
![Page 32: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/32.jpg)
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.
![Page 33: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/33.jpg)
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)“ />
![Page 34: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/34.jpg)
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>
![Page 35: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/35.jpg)
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>
![Page 36: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/36.jpg)
Eduardo Mendes ([email protected])36
Arquivo Js para ser importadofuncoes.js
function soma(a, b) { return a + b; }
function multiplicacao(a, b) { return a * b; }
![Page 37: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/37.jpg)
Eduardo Mendes ([email protected])37
Importando um arquivoCó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>
![Page 38: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/38.jpg)
Eduardo Mendes ([email protected])38
Em Elementos HTMLAtributos 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
![Page 39: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/39.jpg)
Eduardo Mendes ([email protected])39
Em Elementos HTMLAtributos 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
![Page 40: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/40.jpg)
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>
![Page 42: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/42.jpg)
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
![Page 43: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/43.jpg)
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 =
![Page 44: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/44.jpg)
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
![Page 45: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/45.jpg)
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
![Page 46: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/46.jpg)
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
![Page 47: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/47.jpg)
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
![Page 48: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/48.jpg)
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
![Page 49: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/49.jpg)
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
![Page 50: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/50.jpg)
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
![Page 51: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/51.jpg)
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);
25Ainda precisa de parênteses e ponto e vírgula
![Page 52: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/52.jpg)
Eduardo Mendes ([email protected])
Curiosidade
52
var soma = function (x, y){ return x + y; }
console.log(soma);
![Page 53: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/53.jpg)
Eduardo Mendes ([email protected])
Curiosidade
53
var soma = function (x, y){ return x + y; }
console.log(soma);
![Page 55: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/55.jpg)
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
![Page 56: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/56.jpg)
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
![Page 57: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/57.jpg)
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(); ... }
![Page 58: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/58.jpg)
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(); ... }
![Page 59: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/59.jpg)
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(); ... }
![Page 60: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/60.jpg)
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(); ... }
![Page 61: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/61.jpg)
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(); ... }
![Page 62: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/62.jpg)
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(); ... }
![Page 63: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/63.jpg)
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(); ... }
![Page 64: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/64.jpg)
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;
![Page 65: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/65.jpg)
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;
![Page 66: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/66.jpg)
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 -
![Page 67: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/67.jpg)
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
![Page 68: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/68.jpg)
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 -
![Page 70: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/70.jpg)
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
variavelObjeto
idade=10
variavelDoObjeto.nomeDaPropriedade o.idade
![Page 71: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/71.jpg)
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
![Page 72: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/72.jpg)
Eduardo Mendes ([email protected])
ObjetosLiterais
72
var moto = {cor: "vermelha", rodas: 4, cilindros: 4};
![Page 73: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/73.jpg)
Eduardo Mendes ([email protected])
FunçãoConstrutora
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);
![Page 74: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/74.jpg)
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
![Page 75: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/75.jpg)
Eduardo Mendes ([email protected])
Métodos
75
variavelDoObjeto.nomeDoMetodo = nome_funcao;
São funções associadas a um objeto…
ou é uma propriedade de um objetoque é uma função
um método é uma função atribuídaa uma propriedade do objeto
var meuObjeto = { meuMetodo: function(params) { // algum comportamento } };
![Page 76: JavaScript - Introdução com Orientação a Objetos](https://reader034.vdocuments.mx/reader034/viewer/2022051710/5a6d01a77f8b9af8418b4987/html5/thumbnails/76.jpg)
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;