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

INTRODUÇÃO AO JAVASCRIPT

Eduardo Mendes de Oliveira [email protected]

mailto:[email protected]?subject=

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

mailto:[email protected]

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



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”

5

(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"

6

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

7



O que é riqueza?

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

de uma geração atualizadade aplicativos desktop

8



9

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

1989


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



acessar na web documentosgerados dinamicamente

14

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



15

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

22



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



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

24



Modularização

"Melhor maneira de criar sistemas gerenciáveis”

PARNAS (1972)

25



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



0327

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>

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



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>

<a href="javascript:alert(‘Link acionado!’)"> link </a>



Funções

41



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



Funções

43

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



o programa carrega

var soma =



Funções

44




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

45




o programa carrega


É preciso de um ponto e

vírgula no final da sentença



Funções

46




o programa carrega


Agora a função carrega

apenas quando este código

for alcançado



Funções

47




o programa carrega


Agora a função carrega

apenas quando este código

for alcançado

soma(3,4);

25



Funções

48



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

nome

soma(3,4);

25



Funções Anônimas

49

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


Funções Anônimas



Funções Anônimas

50


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

Funções Anônimas



Funções Anônimas

51


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

52

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

console.log(soma);



Curiosidade

53

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

console.log(soma);



1.1 Funções como parâmetros

54



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


...

encerrarJogo(mensagemFinal); A variável mensagemFinal

é passada como parâmetro

para uma função existente





57


...

encerrarJogo(mensagemFinal);A variável mensagemFinal

é passada como parâmetro

para uma função existente


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




58


...

encerrarJogo(mensagemFinal);







59


...




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




...


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


60






...


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


61






...




62






...



E se houvesse várias mensagens?

63

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




Utilizando funções arrays e map

66

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 -




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

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

69



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



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



ObjetosLiterais

72

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



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



Métodos

74

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

Como foi visto os objetos são formados por propriedades



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



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