javascript semana computação
TRANSCRIPT
Ramon Felipe de Ramon Felipe de OliveiraOliveira
Page 2
Origens
Javascript surgiu em 1995 e quando lançado se chamava LiveScript
Brendan Eich
Page 3
Numa época de conexões discadas, seu foco era outro:
Evitar chamadas desnecessárias ao servidor.
Origens
Page 4
Novo cenário
De doze linhas, para duzentas.
Esta questão
pode ser vista
no ie6 hoje.
Page 5
Novo cenário
O cenário mudou drasticamente...
... mas o Javascript mudou muito pouco.
Browsers começaram a oferecer suporte para Html dinâmico e surgiu o DOM.
Page 6
DOM
O Document Object Model (DOM) é uma interface de programação para documentos HTML e XML.
Ele provê uma representação estruturada do documento e define um meio pelo qual a estrutura pode ser acessada por programas permitindo-os alterar a estrutura do documento, estilo e conteúdo
Essencialmente ele conecta páginas de internet a scripts ou linguagens de programação. Uma página de internet é um documento.
Page 7
Características
Pequena
Interpretada (compilada)
Sofisticada
Linguagem funcional
Linguagem cliente
Baixa tipagem
Objetos são “containers”
Herança por protótipos
Page 8
Tipos principais
Page 9
Typeof
Page 10
var
Page 11
Objeto em JS
Page 12
Criando um objeto
Page 13
Acessando membros
Page 14
Sintaxe Literal
var obj = {
nome: “Fusca",
detalhes: {
cor: “vermelho",
ano: 1988
}
}
Page 15
Functions
Page 16
Functions
Page 17
Método
Page 18
Função add
function add(x, y) {
var total = x + y;
return total;
}
Page 19
Funções
Page 20
function add() {
var soma = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
soma += arguments[i];
}
return soma;
}
Page 21
Funções anônimas
var add = function() {
var soma = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
soma += arguments[i];
}
return soma;
}
Pode se usar recursão utilizando a função implícita arguments.callee.
Page 22
Herança por Protótipo
Page 23
Herança por Protótipo
Page 24
Herança por Protótipo
Page 25
Problema
Page 26
function criarPessoa(nome, sobrenome) {
return {
nome: nome,
sobrenome: sobrenome
}
}
function nomeCompleto(pessoa) {
return pessoa.nome + ‘ ‘ + pessoa.sobrenome;
}
function nomeCompletoInvertido(pessoa) {
return pessoa.sobrenome + ', ' + pessoa.nome;
}
Solução 1
Page 27
> p = criarPessoa(“João", “Silva"); > nomeCompleto(p) João Silva> nomeCompletoInvertido(p) Silva, João
Apesar de funcionar, não é uma solução interessante.
Provavelmente, logo existirá dezenas de funções no global namespace.
Page 28
function criarPessoa(nome, sobrenome) {
return {
nome: nome,
sobrenome : sobrenome,
nomeCompleto: function() {
return pessoa.nome + ‘ ‘ + pessoa.sobrenome;
},
nomeCompletoInvertido: function() {
return pessoa.sobrenome + ', ' + pessoa.nome;
}
}
}
Solução 2
Page 29
> s = criarPessoa(“João", “Silva")> s. nomeCompleto() João Silva > s. nomeCompletoInvertido() Silva, João
Page 30
Solução 3
function Pessoa(nome, sobrenome) {
this.nome = nome;
this.sobrenome = sobrenome;
}
Pessoa.prototype.nomeCompleto = function() {
return this.nome+ ' ' + this.sobrenome;
}
Pessoa.prototype.nomeCompletoInverso = function() {
return this.sobrenome + ', ' + this.nome;
}
Page 31
Prototype
Page 32
Funções Internas
Page 33
Closures
function realizaSoma(a) {
return function(b) {
return a + b;
}
}
x = realizaSoma(5);
y = realizaSoma(20);
x(6) ? y(7) ?
Page 34
The old-school way
Page 35
Module Pattern
Page 36
Revealing Module Pattern