SlideShare ist ein Scribd-Unternehmen logo
1 von 20
Downloaden Sie, um offline zu lesen
JAVASCRIPT - OBJETOS
Cristiano Pires Martins - Fonte: JavaScript Guia do Programador
Maujor - NOVATEC
Objetos
Pseudolinguagem orientada a objetos
Objetos
Coleção não ordenada de propriedades e métodos
constituída por pares nome/valor;
Criando Objetos
Função construtora nativa denominada Object()
var livro = new Object();
Sintaxe para
criar o
objeto livro
var livro = new Object();
livro.titulo = “JavaScript”;
livro.autor = “Maujor”;
livro.paginas = “432”;
livro.preco = “R$69,00”;
livro.freteSedex = function (ceporigem,cepdestino,peso){
var valorFrete = “”;
valorFrete = ceporigem * cepdestino * peso;
return valorFrete;
}
livro.capitulo1 = “Revisao JavaScript”;
livro.capitulo2 = “Funções”;
livro.capitulo3 = “Eventos”;
livro.capitulo4 = “Requisições”;
Para recuperar os valores de
propriedades e métodos
var nomeAutor = livro.autor;
var capituloQuatro = livro.capitulo4;
var valorFrete = livro.freteSedex(15700000,1,2);
alert(“Autor:“ + nomeAutor + “nCap4:“ +
capituloQuatro + “nValor Frete: ” + valorFrete);
Objetos
• Outra sintaxe para recuperar os valores de
propriedades de um objeto:
• var nomeAutor = livro[autor];
• var capituloCinco = livro[capitulo5];
Apresentar todos os
pares do objeto
var pares = “”;
for(var prop in livro){
pares += prop + “: ” + livro[prop] + “n”;
};
alert(pares);
Objeto Livro usando
objeto capítulos
aninhado
var livro = new Object();
livro.titulo = “JavaScript”;
livro.autor = “Maujor”;
livro.paginas = “432”;
livro.preco = “R$69,00”;
livro.freteSedex = function (ceporigem,cepdestino,peso){
var valorFrete = “”;
valorFrete = ceporigem * cepdestino * peso;
return valorFrete;
}
livro.capitulos = new Object(); //note que não usa “var”
livro.capitulos.capitulo1 = “Revisao JavaScript”;
livro.capitulos.capitulo2 = “Funções”;
livro.capitulos.capitulo3 = “Eventos”;
livro.capitulos.capitulo4 = “Requisições”;
Sintaxe Literal
var livro = {
“titulo” :“JavaScript”,
“autor” :“Maujor”,
“paginas” :“432”,
“preco” :“R$69,00”,
“freteSedex” : function (ceporigem,cepdestino,peso){
var valorFrete = “”;
valorFrete = ceporigem * cepdestino * peso;
return valorFrete;
},
“capitulos”:
{
“capitulo1” :“Revisao JavaScript”,
“capitulo2”:“Funções”,
“capitulo3” :“Eventos”,
“capitulo4” :“Requisições”
}
Objetos
Sintaxe Literal
• Outra sintaxe para recuperar os valores de
propriedades de um objeto:
• var autor = livro.autor;
• var autor = livro[“autor”];
Objetos
Sintaxe Literal
var pares = “”;
for(var prop in livro)
{
pares += prop + “: ” + livro[prop] + “n”;
};
alert(pares);
Listar Objetos
Aninhados
var pares = “”;
for(var prop in livro){
pares += prop + “: ” + livro[prop] + “n”;
if(typeof livro[prop] == “object”){
for(var prop1 in livro[prop]){
pares += prop1 + “: ” + livro[prop][prop1] + “n”;
}
}
};
alert(pares);
Listar Objetos Aninhados: Ocultar
a linha capítulos: [object Object]
var pares = “”;
for(var prop in livro){
if(typeof livro[prop] == “object”){
for(var prop1 in livro[prop]){
pares += prop1 + “: ” + livro[prop][prop1]
+ “n”;
}
}
else
pares += prop + “: ” + livro[prop] + “n”;
};
alert(pares);
Objeto Nativo Math
• var pi = Math.PI;
• var pot = Math.pow(x,y);
• Exemplo:
function areaBase(){
aBase = Math.PI * Math.pow(this.raioBase, 2);
return aBase;
}
Construtor
Denomina-se função
construtora ou simplesmente
construtor uma função capaz
de criar objetos
Exemplo de Construtor
function Cilindro(r,h) {
this.raioBase = r;
this.altura = h;
};
cilindroUm = new Cilindro(2,5);
alert(“Raio da base: “ + cilindroUm.raioBase +
“nAltura: “ + cilindroUm.altura);
cilindroDois = new Cilindro(20,10);
Construtor
Por convenção e de acordo com as boas práticas de programação,
nomes de construtores devem começar com letra maiúscula.
• No vocabulário de programação orientada a objetos,
uma função construtora é chamada de classe.
• Em JavaScript não existem classes com o mesmo
sentido de outras linguagens;
Funções para os
métodos criados
function Cilindro(r,h) {
this.raioBase = r;
this.altura = h;
this.areaBase = calculaAreaBase;
};
function calculaAreaBase(){
return Math.PI * Math.pow(this.raioBase, 2);
};
cilindroUm = new Cilindro(2,5);
alert(“Raio da base: “ + cilindroUm.raioBase + “nAltura: “
+ cilindroUm.altura + “nÁrea da base: “ +
cilindroUm.areaBase());
Sintaxe Alternativa
function Cilindro(r,h) {
this.raioBase = r;
this.altura = h;
this.areaBase = function calculaAreaBase()
return Math.PI * Math.pow(this.raioBase, 2);
};
function Cilindro(r,h) {
this.raioBase = r;
this.altura = h;
this.areaBase = function calculaAreaBase(){
return Math.PI * Math.pow(this.raioBase, 2);
};
this.areaLateral = function calculaAreaLateral(){
return 2 * Math.PI * this.raioBase * this.altura;
};
this.areaTotal = function calculaAreaTotal(){
return 2 * this.areaBase() + this.areaLateral();
};
this.volume = function calculaVolume(){
return this.areaBase() * this.altura;
};
};
cilindroDois = new Cilindro(3,10);
alert(“Raio da base: “ + cilindroDois.raioBase + “nAltura: “ +
cilindroDois.altura + “nÁrea da base: “ + cilindroDois.areaBase() + “nÁrea
Lateral:“ + cilindroDois.areaLateral() + “nÁrea Total: ” +
cilindroDois.areaTotal() + “nVolume: ” + cilindroDois.volume());
Função Construtora

Weitere ähnliche Inhalte

Andere mochten auch

Greek's Civilization
Greek's CivilizationGreek's Civilization
Greek's Civilizationreach
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Bruno Grange
 
Question 1 // PART ONE
Question 1 // PART ONEQuestion 1 // PART ONE
Question 1 // PART ONEKiera King
 

Andere mochten auch (20)

Java script aula 07 - eventos
Java script   aula 07 - eventosJava script   aula 07 - eventos
Java script aula 07 - eventos
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
 
Java script - funções
Java script - funçõesJava script - funções
Java script - funções
 
Java script aula 10 - angularjs
Java script   aula 10 - angularjsJava script   aula 10 - angularjs
Java script aula 10 - angularjs
 
Java script aula 08 - formulários
Java script   aula 08 - formuláriosJava script   aula 08 - formulários
Java script aula 08 - formulários
 
Aula 02 semiótica e cores
Aula 02   semiótica e coresAula 02   semiótica e cores
Aula 02 semiótica e cores
 
Aula 05 layout e composição do site
Aula 05   layout e composição do siteAula 05   layout e composição do site
Aula 05 layout e composição do site
 
Aula 06-oac-memoria-principal
Aula 06-oac-memoria-principalAula 06-oac-memoria-principal
Aula 06-oac-memoria-principal
 
Java script aula 07 - j-query
Java script   aula 07 - j-queryJava script   aula 07 - j-query
Java script aula 07 - j-query
 
Aula 06 textos na web
Aula 06   textos na webAula 06   textos na web
Aula 06 textos na web
 
Aula 07 - lista linear
Aula 07 - lista linearAula 07 - lista linear
Aula 07 - lista linear
 
Aula 07 acessibilidade
Aula 07  acessibilidadeAula 07  acessibilidade
Aula 07 acessibilidade
 
Aula 08 - árvores
Aula 08 - árvoresAula 08 - árvores
Aula 08 - árvores
 
OAC Aula 09 - Entrada e Saída
OAC Aula 09 - Entrada e SaídaOAC Aula 09 - Entrada e Saída
OAC Aula 09 - Entrada e Saída
 
Aula 04 layout e composição do site
Aula 04   layout e composição do siteAula 04   layout e composição do site
Aula 04 layout e composição do site
 
News SA 09 2017
News SA 09 2017News SA 09 2017
News SA 09 2017
 
La scrittura incamminati
La scrittura incamminatiLa scrittura incamminati
La scrittura incamminati
 
Greek's Civilization
Greek's CivilizationGreek's Civilization
Greek's Civilization
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
Question 1 // PART ONE
Question 1 // PART ONEQuestion 1 // PART ONE
Question 1 // PART ONE
 

Ähnlich wie Java script aula 03 - objetos

Introdução ao MongoDB em 30 slides
Introdução ao MongoDB em 30 slidesIntrodução ao MongoDB em 30 slides
Introdução ao MongoDB em 30 slidesDerek Willian Stavis
 
Javascript para CSharpers 4 - POO
Javascript para CSharpers 4 - POOJavascript para CSharpers 4 - POO
Javascript para CSharpers 4 - POOWesley Lemos
 
JavaScript - Objectos e Arrays
JavaScript - Objectos e ArraysJavaScript - Objectos e Arrays
JavaScript - Objectos e ArraysValter Cinquenta
 
Javascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - ConceitosJavascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - ConceitosWesley Lemos
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN StackBruno Catão
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o JavascriptMichel Ribeiro
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScriptBruno Catão
 
Programação web ii aulas 06 e 07
Programação web ii   aulas 06 e 07Programação web ii   aulas 06 e 07
Programação web ii aulas 06 e 07Yuri Bispo
 
LabMM4 (T13 - 12/13) - Funções
LabMM4 (T13 - 12/13) - FunçõesLabMM4 (T13 - 12/13) - Funções
LabMM4 (T13 - 12/13) - FunçõesCarlos Santos
 
Revisão Sobre Programação Orientada a Objetos com Java
Revisão Sobre Programação Orientada a Objetos com Java Revisão Sobre Programação Orientada a Objetos com Java
Revisão Sobre Programação Orientada a Objetos com Java Mario Jorge Pereira
 
Javascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQueryJavascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQueryWesley Lemos
 
Apresentação j query6
Apresentação j query6Apresentação j query6
Apresentação j query6douglasgrava
 
Mapeamento Objeto-Relacional com PEAR::DataObject
Mapeamento Objeto-Relacional com PEAR::DataObjectMapeamento Objeto-Relacional com PEAR::DataObject
Mapeamento Objeto-Relacional com PEAR::DataObjectManuel Lemos
 
Javascript para CSharpers 2 - Functions
Javascript para CSharpers   2 - FunctionsJavascript para CSharpers   2 - Functions
Javascript para CSharpers 2 - FunctionsWesley Lemos
 

Ähnlich wie Java script aula 03 - objetos (20)

Introdução ao MongoDB em 30 slides
Introdução ao MongoDB em 30 slidesIntrodução ao MongoDB em 30 slides
Introdução ao MongoDB em 30 slides
 
Javascript para CSharpers 4 - POO
Javascript para CSharpers 4 - POOJavascript para CSharpers 4 - POO
Javascript para CSharpers 4 - POO
 
JavaScript - Objectos e Arrays
JavaScript - Objectos e ArraysJavaScript - Objectos e Arrays
JavaScript - Objectos e Arrays
 
Javascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - ConceitosJavascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - Conceitos
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN Stack
 
Java 05 Oo Basica
Java 05 Oo BasicaJava 05 Oo Basica
Java 05 Oo Basica
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o Javascript
 
NoSQL e MongoDB
NoSQL e MongoDBNoSQL e MongoDB
NoSQL e MongoDB
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
 
JQuery
JQuery JQuery
JQuery
 
Programação web ii aulas 06 e 07
Programação web ii   aulas 06 e 07Programação web ii   aulas 06 e 07
Programação web ii aulas 06 e 07
 
LabMM4 (T13 - 12/13) - Funções
LabMM4 (T13 - 12/13) - FunçõesLabMM4 (T13 - 12/13) - Funções
LabMM4 (T13 - 12/13) - Funções
 
Revisão Sobre Programação Orientada a Objetos com Java
Revisão Sobre Programação Orientada a Objetos com Java Revisão Sobre Programação Orientada a Objetos com Java
Revisão Sobre Programação Orientada a Objetos com Java
 
NoSQL e MongoDB - ETEC
NoSQL e MongoDB - ETECNoSQL e MongoDB - ETEC
NoSQL e MongoDB - ETEC
 
Javascript + jQuery
Javascript + jQueryJavascript + jQuery
Javascript + jQuery
 
Javascript
JavascriptJavascript
Javascript
 
Javascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQueryJavascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQuery
 
Apresentação j query6
Apresentação j query6Apresentação j query6
Apresentação j query6
 
Mapeamento Objeto-Relacional com PEAR::DataObject
Mapeamento Objeto-Relacional com PEAR::DataObjectMapeamento Objeto-Relacional com PEAR::DataObject
Mapeamento Objeto-Relacional com PEAR::DataObject
 
Javascript para CSharpers 2 - Functions
Javascript para CSharpers   2 - FunctionsJavascript para CSharpers   2 - Functions
Javascript para CSharpers 2 - Functions
 

Mehr von Cristiano Pires Martins (13)

Aula 08 - árvores
Aula 08 - árvoresAula 08 - árvores
Aula 08 - árvores
 
Aula 01 introdução
Aula 01   introduçãoAula 01   introdução
Aula 01 introdução
 
Aula 03 esquema de cores
Aula 03   esquema de coresAula 03   esquema de cores
Aula 03 esquema de cores
 
WDI - aula 07 - css com html
WDI - aula 07 - css com htmlWDI - aula 07 - css com html
WDI - aula 07 - css com html
 
Aula 08-oac-execucao-de-programas
Aula 08-oac-execucao-de-programasAula 08-oac-execucao-de-programas
Aula 08-oac-execucao-de-programas
 
Aula 07-oac-processadores
Aula 07-oac-processadoresAula 07-oac-processadores
Aula 07-oac-processadores
 
Aula 05-oac-conceitos-de-logica-digital
Aula 05-oac-conceitos-de-logica-digitalAula 05-oac-conceitos-de-logica-digital
Aula 05-oac-conceitos-de-logica-digital
 
Aula 03-oac-componentes-de-um-sistema-de-computacao
Aula 03-oac-componentes-de-um-sistema-de-computacaoAula 03-oac-componentes-de-um-sistema-de-computacao
Aula 03-oac-componentes-de-um-sistema-de-computacao
 
Aula 02-oac-historia-da-computacao-part2
Aula 02-oac-historia-da-computacao-part2Aula 02-oac-historia-da-computacao-part2
Aula 02-oac-historia-da-computacao-part2
 
Aula 02-oac-historia-da-computacao-part1
Aula 02-oac-historia-da-computacao-part1Aula 02-oac-historia-da-computacao-part1
Aula 02-oac-historia-da-computacao-part1
 
Aula 01-oac-introducao-a-oac
Aula 01-oac-introducao-a-oacAula 01-oac-introducao-a-oac
Aula 01-oac-introducao-a-oac
 
Aula 10-oac-arquitetura-risc
Aula 10-oac-arquitetura-riscAula 10-oac-arquitetura-risc
Aula 10-oac-arquitetura-risc
 
Aula 06-sistemas de-arquivo
Aula 06-sistemas de-arquivoAula 06-sistemas de-arquivo
Aula 06-sistemas de-arquivo
 

Java script aula 03 - objetos

  • 1. JAVASCRIPT - OBJETOS Cristiano Pires Martins - Fonte: JavaScript Guia do Programador Maujor - NOVATEC
  • 2. Objetos Pseudolinguagem orientada a objetos Objetos Coleção não ordenada de propriedades e métodos constituída por pares nome/valor;
  • 3. Criando Objetos Função construtora nativa denominada Object() var livro = new Object();
  • 4. Sintaxe para criar o objeto livro var livro = new Object(); livro.titulo = “JavaScript”; livro.autor = “Maujor”; livro.paginas = “432”; livro.preco = “R$69,00”; livro.freteSedex = function (ceporigem,cepdestino,peso){ var valorFrete = “”; valorFrete = ceporigem * cepdestino * peso; return valorFrete; } livro.capitulo1 = “Revisao JavaScript”; livro.capitulo2 = “Funções”; livro.capitulo3 = “Eventos”; livro.capitulo4 = “Requisições”;
  • 5. Para recuperar os valores de propriedades e métodos var nomeAutor = livro.autor; var capituloQuatro = livro.capitulo4; var valorFrete = livro.freteSedex(15700000,1,2); alert(“Autor:“ + nomeAutor + “nCap4:“ + capituloQuatro + “nValor Frete: ” + valorFrete);
  • 6. Objetos • Outra sintaxe para recuperar os valores de propriedades de um objeto: • var nomeAutor = livro[autor]; • var capituloCinco = livro[capitulo5];
  • 7. Apresentar todos os pares do objeto var pares = “”; for(var prop in livro){ pares += prop + “: ” + livro[prop] + “n”; }; alert(pares);
  • 8. Objeto Livro usando objeto capítulos aninhado var livro = new Object(); livro.titulo = “JavaScript”; livro.autor = “Maujor”; livro.paginas = “432”; livro.preco = “R$69,00”; livro.freteSedex = function (ceporigem,cepdestino,peso){ var valorFrete = “”; valorFrete = ceporigem * cepdestino * peso; return valorFrete; } livro.capitulos = new Object(); //note que não usa “var” livro.capitulos.capitulo1 = “Revisao JavaScript”; livro.capitulos.capitulo2 = “Funções”; livro.capitulos.capitulo3 = “Eventos”; livro.capitulos.capitulo4 = “Requisições”;
  • 9. Sintaxe Literal var livro = { “titulo” :“JavaScript”, “autor” :“Maujor”, “paginas” :“432”, “preco” :“R$69,00”, “freteSedex” : function (ceporigem,cepdestino,peso){ var valorFrete = “”; valorFrete = ceporigem * cepdestino * peso; return valorFrete; }, “capitulos”: { “capitulo1” :“Revisao JavaScript”, “capitulo2”:“Funções”, “capitulo3” :“Eventos”, “capitulo4” :“Requisições” }
  • 10. Objetos Sintaxe Literal • Outra sintaxe para recuperar os valores de propriedades de um objeto: • var autor = livro.autor; • var autor = livro[“autor”];
  • 11. Objetos Sintaxe Literal var pares = “”; for(var prop in livro) { pares += prop + “: ” + livro[prop] + “n”; }; alert(pares);
  • 12. Listar Objetos Aninhados var pares = “”; for(var prop in livro){ pares += prop + “: ” + livro[prop] + “n”; if(typeof livro[prop] == “object”){ for(var prop1 in livro[prop]){ pares += prop1 + “: ” + livro[prop][prop1] + “n”; } } }; alert(pares);
  • 13. Listar Objetos Aninhados: Ocultar a linha capítulos: [object Object] var pares = “”; for(var prop in livro){ if(typeof livro[prop] == “object”){ for(var prop1 in livro[prop]){ pares += prop1 + “: ” + livro[prop][prop1] + “n”; } } else pares += prop + “: ” + livro[prop] + “n”; }; alert(pares);
  • 14. Objeto Nativo Math • var pi = Math.PI; • var pot = Math.pow(x,y); • Exemplo: function areaBase(){ aBase = Math.PI * Math.pow(this.raioBase, 2); return aBase; }
  • 15. Construtor Denomina-se função construtora ou simplesmente construtor uma função capaz de criar objetos
  • 16. Exemplo de Construtor function Cilindro(r,h) { this.raioBase = r; this.altura = h; }; cilindroUm = new Cilindro(2,5); alert(“Raio da base: “ + cilindroUm.raioBase + “nAltura: “ + cilindroUm.altura); cilindroDois = new Cilindro(20,10);
  • 17. Construtor Por convenção e de acordo com as boas práticas de programação, nomes de construtores devem começar com letra maiúscula. • No vocabulário de programação orientada a objetos, uma função construtora é chamada de classe. • Em JavaScript não existem classes com o mesmo sentido de outras linguagens;
  • 18. Funções para os métodos criados function Cilindro(r,h) { this.raioBase = r; this.altura = h; this.areaBase = calculaAreaBase; }; function calculaAreaBase(){ return Math.PI * Math.pow(this.raioBase, 2); }; cilindroUm = new Cilindro(2,5); alert(“Raio da base: “ + cilindroUm.raioBase + “nAltura: “ + cilindroUm.altura + “nÁrea da base: “ + cilindroUm.areaBase());
  • 19. Sintaxe Alternativa function Cilindro(r,h) { this.raioBase = r; this.altura = h; this.areaBase = function calculaAreaBase() return Math.PI * Math.pow(this.raioBase, 2); };
  • 20. function Cilindro(r,h) { this.raioBase = r; this.altura = h; this.areaBase = function calculaAreaBase(){ return Math.PI * Math.pow(this.raioBase, 2); }; this.areaLateral = function calculaAreaLateral(){ return 2 * Math.PI * this.raioBase * this.altura; }; this.areaTotal = function calculaAreaTotal(){ return 2 * this.areaBase() + this.areaLateral(); }; this.volume = function calculaVolume(){ return this.areaBase() * this.altura; }; }; cilindroDois = new Cilindro(3,10); alert(“Raio da base: “ + cilindroDois.raioBase + “nAltura: “ + cilindroDois.altura + “nÁrea da base: “ + cilindroDois.areaBase() + “nÁrea Lateral:“ + cilindroDois.areaLateral() + “nÁrea Total: ” + cilindroDois.areaTotal() + “nVolume: ” + cilindroDois.volume()); Função Construtora