Introdução ao JavaScript

INTRODUÇÃO
AO JAVASCRIPT
Eduardo Mendes de Oliveira
edumendes@gmail.com

Eduardo Mendes (edumendes@gmail.com)
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

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's
Software
Sistemas de

Proﬁssional 
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

“ 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ção 
que 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 variedade 
de métodos de entrada, 
que responde intuitivamente 
e dentro de um prazo razoável
7

O que é riqueza?
Interação será tanto melhor  
quanto mais próxima estiver 
de uma geração atualizada 
de aplicativos desktop
8

9
Aplicações Mainframe
Aplicações Web RicasAplicações Cliente/Servidor
Aplicações Web
Experiência
do Usuário
Eﬁciê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
documentos 
gerados 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
Eﬁciência do Custo

Aplicações Web Síncronas
O 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íncrono
GARRET, 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

03 27
interesses
Descrição
do Conteúdo
Apresentação 
do Conteúdo
Controle do 
comportamento
deste Conteúdo

Descrição
do ConteúdoApresentação 
do Conteúdo
Controle do 
comportamento
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 importado
funcoes.js
function soma(a, b) {
return a + b;
}
function multiplicacao(a, b) {
return a * b;
}

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>

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

Em Elementos HTML
Atributos de eventos
Sempre começam com o preﬁxo “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){
};
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){
};
Funções Anônimas

Funções Anônimas
51
};
Funções Anônimas
Sem nome
soma(3,4);
25
Ainda precisa de parênteses e ponto e vírgula

Curiosidade
52
return x + y;
}
console.log(soma);

Curiosidade
53
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
}
...
A variável mensagemFinal
é passada como parâmetro
para uma função existente
function encerrarJogo(mensagem) {
...
mensagem();
...
}

58
}
...
...
mensagem();
...
}
...
mensagem();
...
}

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

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

}
...
...
mensagemFinal();
...
}
61
...
mensagem();
...
}

}
...
...
mensagemFinal();
...
}
62
...
mensagem();
...
}

}
...
...
mensagemFinal();
...
}
E se houvesse várias mensagens?
63
É possível ter ﬂexibilidade com essa estrutura e escolher uma mensagem especíﬁca
...
mensagem();
...
}

mensagem();
}
var mensagemFinal;
if (vencedor) {
mensagemFinal = function() {
alert("Você venceu! Batata frita!");
};
} else {
alert("Que pena! Tente mais uma vez!");
};
}
64
var vencedor = false;

mensagem();
}
var mensagemFinal;
if (vencedor) {
alert("Você venceu! Batata frita!");
};
} else {
alert("Que pena! Tente mais uma vez!");
};
}
65
var vencedor = true;

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

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

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

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

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;

Introdução ao JavaScript

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Introdução ao JavaScript

Semelhante a Introdução ao JavaScript (20)

Mais de Eduardo Mendes

Mais de Eduardo Mendes (20)

Introdução ao JavaScript