Upload
eduardo-mendes
View
475
Download
1
Embed Size (px)
Citation preview
INTRODUÇÃO AO JAVASCRIPT
Eduardo Mendes de Oliveira [email protected]
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
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
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
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)
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
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
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
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
Internet
Cientistas do CERN lançaram uma proposta para a World Wide Web (HTML) Facilitou o compartilhamento de documentos de pesquisa Hipertexto + Internet
1989
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
Eduardo Mendes ([email protected])
Eduardo Mendes ([email protected])13
Eduardo Mendes ([email protected])
acessar na web documentosgerados dinamicamente
14
conteúdo dinâmicoSurge a Aplicação Web
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
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
Eduardo Mendes ([email protected])
Eduardo Mendes ([email protected])21
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
Eduardo Mendes ([email protected])
Modularização
"Melhor maneira de criar sistemas gerenciáveis”
PARNAS (1972)
25
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
Eduardo Mendes ([email protected])
0327
interesses
Descrição do Conteúdo
Apresentaçãodo Conteúdo
Controle docomportamento deste Conteúdo
Eduardo Mendes ([email protected])28
Descrição do ConteúdoApresentação
do Conteúdo
Controle docomportamento deste Conteúdo
Eduardo Mendes ([email protected])29
O que é JavaScript?
LiveScript
Netscape Navigator 2.0
Linguagem baseada na linguagem JAVA
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.
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
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.
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)“ />
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>
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>
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; }
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>
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
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
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>
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
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 =
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
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
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
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
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
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
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
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
Eduardo Mendes ([email protected])
Curiosidade
52
var soma = function (x, y){ return x + y; }
console.log(soma);
Eduardo Mendes ([email protected])
Curiosidade
53
var soma = function (x, y){ return x + y; }
console.log(soma);
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
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
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(); ... }
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(); ... }
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(); ... }
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(); ... }
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(); ... }
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(); ... }
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(); ... }
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;
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;
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 -
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
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 -
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
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
Eduardo Mendes ([email protected])
ObjetosLiterais
72
var moto = {cor: "vermelha", rodas: 4, cilindros: 4};
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);
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
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 } };
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;