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

INTRODUÇÃO AO JAVASCRIPT

Eduardo Mendes de Oliveira edumendes@gmail.com

Eduardo Mendes (edumendes@gmail.com)

Sistemas de

50'sSoftware

Os primeiros sistemas começaram a aparecer no final da década de 40 e mais fortemente no anos 50

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'sSoftwareSistemas de

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

“ 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”

(SMEETS, BONESS e BANKRAS, 2009)

O que é riqueza?

“A riqueza de um cliente é determinada pelo

modelo de interaçãoque o cliente oferece ao usuário"

Experiência do usuário

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

O que é riqueza?

Interação será tanto melhor quanto mais próxima estiver

de uma geração atualizadade aplicativos desktop

Aplicações Mainframe

Aplicações Web RicasAplicações Cliente/Servidor

Aplicações Web

Experiência do Usuário

Eficiência do Custo

Internet

Cientistas do CERN lançaram uma proposta para a World Wide Web (HTML) Facilitou o compartilhamento de documentos de pesquisa Hipertexto + Internet

A Internet e a Web foram se espalhando e se tornando populares

Originalmente foi criada para que as pessoas pudessem compartilhar informações, publicando documentos,

e fazer referências cruzadas a eles através de hiperlinks

Entretanto a qualidade das aplicações eram baixas

acessar na web documentosgerados dinamicamente

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

Aplicações Mainframe

Aplicações Web RicasAplicações Cliente/Servidor

Aplicações Web

Experiência do Usuário

Eficiência do Custo

Aplicações Web SíncronasO modelo síncrono do HTTP inviabilizava uma ideia de cliente rico

GARRET, 2005

Jesse James Garrett

2005 Ajax: A New Approach to Web Applications

http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/

JavaScript

O modelo síncronoGARRET, 2005

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

2.1 Modularização e Separação de Interesses

Modularização

"Melhor maneira de criar sistemas gerenciáveis”

PARNAS (1972)

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)

interesses

Descrição do Conteúdo

Apresentaçãodo Conteúdo

Controle docomportamento deste Conteúdo

Descrição do ConteúdoApresentação

do Conteúdo

Controle docomportamento deste Conteúdo

O que é JavaScript?

LiveScript

Netscape Navigator 2.0

Linguagem baseada na linguagem JAVA

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.

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

O que posso fazer com JavaScript?

Capturar eventos Click do mouse Tecla pressionada Outros

Operações baseadas nas ações do usuário.

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)“ />

Blocos script<script language=“javascript”> ... instruções JavaScript ... </script>

Podem aparecer diversas vezes no código

De preferência dentro das tags <head>

Blocos Script<html>

<head>

function caixaAlta(obj) {

obj.value = obj.value.toUpperCase();

</script>

</head>

<body>

</form>

</body>

</html>

Arquivo Js para ser importadofuncoes.js

function soma(a, b) { return a + b; }

function multiplicacao(a, b) { return a * b; }

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>

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

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

Em Elementos HTML<form> <input type="button“ value=“Aperte aqui“ onclick="alert(‘Botão Pressionado')“> </form>

Funções

function somaDosQuadrados(x, y){ return Math.pow(x,2) + Math.pow(y,2); }

Está na memória assim que

o programa carrega

Funções

construindo funções em tempo de execução

o programa carrega

var soma =

Funções

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

Funções

o programa carrega

É preciso de um ponto e

vírgula no final da sentença

Funções

o programa carrega

Agora a função carrega

apenas quando este código

for alcançado

Funções

o programa carrega

Agora a função carrega

apenas quando este código

for alcançado

soma(3,4);

Funções

A variável precisou de parênteses e ponto e vírgula

O nome da função é opcional,

já que estamos usando uma

variável que já possui um

soma(3,4);

Funções Anônimas

não precisam ser nomeadas já que possuem uma variável

Funções Anônimas

var soma = function (x, y){ return Math.pow(x,2) + Math.pow(y,2); };

Funções Anônimas

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

Curiosidade

var soma = function (x, y){ return x + y; }

console.log(soma);

Curiosidade

var soma = function (x, y){ return x + y; }

console.log(soma);

1.1 Funções como parâmetros

Funções como parâmetros

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

encerrarJogo(mensagemFinal); A variável mensagemFinal

é passada como parâmetro

para uma função existente

encerrarJogo(mensagemFinal);A variável mensagemFinal

é passada como parâmetro

para uma função existente

function encerrarJogo(mensagem) { ... mensagem(); ... }

encerrarJogo(mensagemFinal);

function encerrarJogo( ) { ... mensagem(); ... }

function encerrarJogo(mensagemFinal) { ... mensagem(); ... }

function encerrarJogo(mensagemFinal) { ... mensagemFinal(); ... }

E se houvesse várias mensagens?

É possível ter flexibilidade com essa estrutura e escolher uma mensagem específica

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!"); }; }

var vencedor = false;

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!"); }; }

var vencedor = true;

Utilizando funções arrays e map

var numeros = [2, 4, 5, 6, 7, 8, 9];

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 -

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

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 -

JavaScript: Objetos

Objetos em JavaScript

Uma entidade independente com propriedades e tipo

como em outras linguagens as propriedades são acessadas pela notação do ponto

variavelObjeto

idade=10

variavelDoObjeto.nomeDaPropriedade o.idade

Criando objetos

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

ObjetosLiterais

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

FunçãoConstrutora

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);

Métodos

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

Como foi visto os objetos são formados por propriedades

Métodos

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 } };

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;

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

Software

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

Introdução a Orientação a Objetos

Aula Orientação a Objetos

Python e Orientação a Objetos

Orientação a Objetos - Computação Unioeste ...adair/ED/Apostilas/Curso OO - Daniel Destro.pdf · • Java, de fato, popularizou a Orientação a Objetos. ... Orientação a Objetos

Aprendendo Orientação a Objetos com JavaScript

Javascript e Orientação a Objetos - Palestra UNIFACS

AULA: Objetos em Javascript - docente.ifrn.edu.brdocente.ifrn.edu.br/.../autoria-web/Aula03ObjetosemJavaScript.pdf · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Objetos Objetos são

Orientação a Objetos em Python

Orientação objetos Prática

Capítulos 5 e 6 Orientação a Objetos Classes. 2 Capítulos 5 e 6 – Orientação a Objetos e Classes Orientação a Objetos Classe e Objeto Atributos Valor.

C# e Orientação a Objetos

Orientação a Objetos - Computação Unioesteadair/ED/Apostilas... · Orientação a Objetos Orientação a Objetos O paradigma da Orientação a Objetos, ou Programação Orientada

Orientação a Objetos e Java

FUNDAMENTOS DA ORIENTAÇÃO A OBJETOS- REVISÃO · FUNDAMENTOS DA ORIENTAÇÃO A OBJETOS- REVISÃO •Dado que a UML é uma ferramenta inserida no paradigma da orientação a objetos,

Orientação a Objetos (2)

Padrão Observador (Orientação à Objetos)

Conceitos de Orientação a Objetos

Orientação a Objetos

Curso : Introdução Orientação a Objetos

Orientação a Objetos usando Java