12 – Javascript – Programação orientada a objetos – parte 02
12 – Javascript – Programação orientada a objetos – parte 02
Orientação a objetos com javascript e html
Voltar para página principal do blog
Todas as aulas desse curso
Aula 11 Aula 13 (Ainda não disponível)
Repositório com os códigos das aulas
Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook
Link do código fluente no Pinterest
Meus links de afiliados:
Hostinger
Digital Ocean
One.com
Dicas de livros relacionados:
Javascript – Programação orientada a objetos – Continuação
Orientação a objetos com javascript, html e css.
Na aula passada vimos cinco formas de criar objetos em Javascript:
Usando Object literal
Usando ‘new’
Usando Object.create()
Usando Object.assign()
Usando class ES6
Resumo do que faremos
Nessa aula a gente vai ver 5 exemplos que mostra cada uma dessas formas de criar objetos em Javascript.
Vamos usar principalmente o carro como objeto de exemplo, mas vamos ter também o objeto Motorista e Empresa.
Dessa vez, ao invés de usar o console como fizemos na aula passada, vamos usar HTML(hyper text markup language), CSS(cascade style sheet) e o nosso principal protagonista, o JS(javascript).
Teremos 5 arquivos HTML e seus 5 JS correspondentes.
O CSS será o mesmo para todos os exemplos.
Vamos pegar os dados em um form no HTML, que vai chamar uma função do nosso JS, para iniciar o processo de criação do objeto.
Teremos uma função também que mostrará as informações nos campos de saída no form do HTML.
Então, no HTML, teremos campos de entradas de dados, na parte de cima, e logo mais abaixo teremos os campos de saída das informações dos objetos.
Obs. Na aula passada vimos um exemplo de criação de objeto com o class, mas o objete que criamos não tinha métodos, apenas propriedades. Nessa aula criaremos um objeto carro, com todos aqueles métodos: start(), stop(), etc.
Então vamos lá!
Esse é o CSS que vai servir a todos os exemplos.
Crie ele, por exemplo, em uma pasta tipo: curso_javascript/aula12/aula12.css
/* Estrutura */
.input-container {
position: relative;
width: 50%;
}
input {
border: 0;
border-radius: 30px;
border-bottom: 2px solid #9e9e9e;
outline: none;
transition: .2s ease-in-out;
box-sizing: border-box;
text-align: center;
}
label {
top: 0;
left: 0; right: 0;
color: #616161;
box-sizing: border-box;
}
input,
label {
width: 100%;
height: 3rem;
font-size: 1rem;
}
/* Interação*/
input:valid,
input:focus {
border-bottom: 2px solid #ffcdc8;
}
input:valid + label,
input:focus + label {
color: #ffcdc8;
font-size: .8rem;
top: -30px;
pointer-events: none;
}
/* Só pra deixar um pouco mais bonito */
* {
font-family: sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
background-color: #feebe6;
}
h1 {
color: #616161;
text-align: center;
margin-bottom: 30px;
}
h2 {
color: #616161;
text-align: center;
margin-bottom: 30px;
}
section {
margin: 15px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
padding: 20px;
border-radius: 0 0 2px 2px;
background-color: #FFF;
}Primeiro exemplo – Object literal
curso_javascript/aula12/index12_object_literal.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aula 12: Fundamentos da Linguagem JavaScript - Código Fluente</title>
<link rel="stylesheet" type="text/css" href="aula12.css">
</head>
<body>
<h1 align="center">Aula 12: Fundamentos da Linguagem JavaScript - Código Fluente</h1>
<br>
<h1 align="center">Programação orientada a objetos</h1>
<br>
<h2 align="center">Criando um objeto carro utilizando object literal</h2>
<br>
<h2 align="center">Digite os dados do carro</h2>
<div align="center">
<div class="input-container">
<input class="input" type="text" id="nomeCarroInput" placeholder="Informe o nome do carro">
<input class="input" type="text" id="montadoraInput" placeholder="O fabricante">
<input class="input" type="text" id="pesoInput" placeholder="O peso">
<input class="input" type="text" id="corInput" placeholder="E a cor">
<br>
<br>
<button type="button" onclick="car_object.get_data_from_form()">Enviar</button>
<br>
<br>
<h2>Saída</h2>
<input class="input" type="text" id="nomeCarro" placeholder="Nome">
<input class="input" type="text" id="montadora" placeholder="Fabricante">
<input class="input" type="text" id="peso" placeholder="Peso">
<input class="input" type="text" id="cor" placeholder="Cor">
<input class="input" type="text" id="motorLigado" placeholder="Aqui será impresso a saída do método start()">
<input class="input" type="text" id="sendoDirigido" placeholder="Aqui a saída do método drive()">
<input class="input" type="text" id="freiado" placeholder="Aqui a saída do método brake()">
<input class="input" type="text" id="motorDesligado" placeholder="Aqui a saída do método stop()">
<input class="input" type="text" id="informacaoGeral" placeholder="Aqui a saída do método toString()">
<div>
</div>
<script src="script12_object_literal.js"></script>
</body>
</html>
curso_javascript/aula12/script12_object_literal.js
//Constroi o objeto carro
const car_object = {
car_constructor: function(n, f, p, c) {
car_object.name = n;
car_object.carMaker = f;
car_object.weight = p;
car_object.color = c;
//chama a função show_info() do objeto carro
//pra mostrar as informações
car_object.show_info();
},
//Pega os dados do form do HTML
get_data_from_form: function() {
const name = document.getElementById("nomeCarroInput").value;
const carMaker = document.getElementById("montadoraInput").value;
const weight = document.getElementById("pesoInput").value;
const color = document.getElementById("corInput").value;
this.car_constructor(name, carMaker, weight, color);
},
//mostra as informações nos campos de saída do HTML
show_info: function() {
document.getElementById("nomeCarro").value = this.name;
document.getElementById("montadora").value = this.carMaker;
document.getElementById("peso").value = this.weight;
document.getElementById("cor").value = this.color;
document.getElementById("motorLigado").value = this.start();
document.getElementById("sendoDirigido").value = this.drive();
document.getElementById("freiado").value = this.brake();
document.getElementById("motorDesligado").value = this.stop();
document.getElementById("informacaoGeral").value = this.toString();
},
//ligar motor
start: function() {
return "O motor foi ligado";
},
//Sendo dirigido
drive: function() {
return "Carro sendo dirigido";
},
//Freiar
brake: function() {
return "O freio foi acionado";
},
//Desligar motor
stop: function() {
return "O motor foi desligado";
},
//Retorna as informações do carro
toString: function(){
return "Nome: " + this.name + ", " + "Modelo: " + this.carMaker + ", " + "Peso: " + this.weight + ", " + "Cor: " + this.color;
}
};
Segundo exemplo – new
curso_javascript/aula12/index12_new.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aula 12: Fundamentos da Linguagem JavaScript - Código Fluente</title>
<link rel="stylesheet" type="text/css" href="aula12.css">
</head>
<body>
<h1 align="center">Aula 12: Fundamentos da Linguagem JavaScript - Código Fluente</h1>
<br>
<h1 align="center">Programação orientada a objetos</h1>
<br>
<h2>Criando um objeto carro utilizando new</h2>
<br>
<h2 align="center">Digite os dados do carro</h2>
<div align="center">
<div class="input-container">
<input class="input" type="text" id="nomeCarroInput" placeholder="Informe o nome do carro">
<input class="input" type="text" id="montadoraInput" placeholder="O fabricante">
<input class="input" type="text" id="pesoInput" placeholder="O peso">
<input class="input" type="text" id="corInput" placeholder="E a cor">
<br>
<br>
<button type="button" onclick="getDataFromForm()">Enviar</button>
<br>
<br>
<h2>Saída</h2>
<input class="input" type="text" id="nomeCarro" placeholder="Aqui será impresso o nome">
<input class="input" type="text" id="montadora" placeholder="Aqui o fabricante">
<input class="input" type="text" id="peso" placeholder="Aqui o peso">
<input class="input" type="text" id="cor" placeholder="E aqui a cor">
<input class="input" type="text" id="motorLigado" placeholder="Aqui será impresso a saída do método start()">
<input class="input" type="text" id="sendoDirigido" placeholder="Aqui a saída do método drive()">
<input class="input" type="text" id="freiado" placeholder="Aqui a saída do método brake()">
<input class="input" type="text" id="motorDesligado" placeholder="Aqui a saída do método stop()">
<input class="input" type="text" id="informacaoGeral" placeholder="Aqui a saída do método toString()">
<div>
</div>
<script src="script12_new.js"></script>
</body>
</html>
curso_javascript/aula12/script12_new.js
//Constroi o objeto carro
function CarObject(n, f, p, c) {
this.name = n;
this.carMaker = f;
this.weight = p;
this.color = c;
};
//Pega os dados do form do HTML
function getDataFromForm() {
const name = document.getElementById("nomeCarroInput").value;
const carMaker = document.getElementById("montadoraInput").value;
const weight = document.getElementById("pesoInput").value;
const color = document.getElementById("corInput").value;
const car = new CarObject(name, carMaker, weight, color);
showInfo(car);
};
//mostra as informações nos campos de saída do HTML
function showInfo(c) {
document.getElementById("nomeCarro").value = c.name;
document.getElementById("montadora").value = c.carMaker;
document.getElementById("peso").value = c.weight;
document.getElementById("cor").value = c.color;
document.getElementById("motorLigado").value = start();
document.getElementById("sendoDirigido").value = drive();
document.getElementById("freiado").value = brake();
document.getElementById("motorDesligado").value = stop();
document.getElementById("informacaoGeral").value = info(c);
}
//ligar motor
function start() {
return "O motor foi ligado";
};
//Sendo dirigido
function drive() {
return "O carro está sendo dirigido";
};
//Freiar
function brake() {
return "O freio foi acionado";
};
//Desligar motor
function stop() {
return "O motor foi desligado";
};
//Retorna as informações do carro
function info(c){
return "Nome: " + c.name + ", " + "Fabricante: " + c.carMaker + ", " + "Peso: " + c.weight + ", " + "Cor: " + c.color;
};
Terceiro exemplo – Object.create()
curso_javascript/aula12/index12_object_create.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aula 12: Fundamentos da Linguagem JavaScript - Código Fluente</title>
<link rel="stylesheet" type="text/css" href="aula12.css">
</head>
<body>
<h1 align="center">Aula 12: Fundamentos da Linguagem JavaScript - Código Fluente</h1>
<br>
<h1 align="center">Programação orientada a objetos</h1>
<br>
<h2 align="center">Criando um objeto empresa utilizando object create</h2>
<br>
<h2 align="center">Digite os dados da empresa e do carro</h2>
<div align="center">
<div class="input-container">
<input class="input" type="text" id="nomeEmpresaInput" placeholder="Informe o nome da empresa">
<input class="input" type="text" id="CNPJEmpresaInput" placeholder="O CNPJ">
<input class="input" type="text" id="nomeCarroInput" placeholder="Informe o nome do carro">
<input class="input" type="text" id="placaCarroInput" placeholder="Informe a placa do carro">
<br>
<br>
<button type="button" onclick="getDataFromForm()">Enviar</button>
<br>
<br>
<h2>Saída</h2>
<input class="input" type="text" id="nomeEmpresa" placeholder="Nome da empresa">
<input class="input" type="text" id="CNPJEmpresa" placeholder="CNPJ">
<input class="input" type="text" id="informacaoGeralEmpresa" placeholder="Saída da toString() da empresa">
<input class="input" type="text" id="informacaoGeralCarro" placeholder="Saída da toString() do carro">
<input class="input" type="text" id="metodoLigarMotor" placeholder="Saída do método start() do carro">
<div>
</div>
<script src="script12_object_create.js"></script>
</body>
</html>
curso_javascript/aula12/script12_object_create.js
//Pega os dados do form do HTML
function getDataFromForm() {
const companyName = document.getElementById("nomeEmpresaInput").value;
const cnpj = document.getElementById("CNPJEmpresaInput").value;
const carName = document.getElementById("nomeCarroInput").value;
const carPlate = document.getElementById("placaCarroInput").value;
//Preenche o objeto company
companyObject.companyConstructor(companyName, cnpj);
//Cria o objeto carro a partir do companyObject
carObject = Object.create(companyObject , {});
//Adiciona propriedades ao carro
carObject.name = carName;
carObject.plate = carPlate;
//Adiciona métodos ao carro
carObject.start = function() { return "O motor foi ligado"; };
carObject.stop = function() { return "O motor foi desligado"; };
carObject.toString = function(){return "Nome do carro: " + this.name + ", " + "Placa: " + this.plate;};
//Chama a função showInfo()
showInfo(carObject, companyObject);
};
//mostra as informações nos campos de saída do HTML
function showInfo(carObject, companyObject) {
document.getElementById("nomeEmpresa").value = companyObject.companyName;
document.getElementById("CNPJEmpresa").value = companyObject.cnpj;
document.getElementById("informacaoGeralEmpresa").value = companyObject.toString();
document.getElementById("informacaoGeralCarro").value = carObject.toString();
document.getElementById("metodoLigarMotor").value = carObject.start();
};
//Constroi o objeto company (empresa)
const companyObject = {
companyConstructor: function(name, cnpj) {
this.companyName = name;
this.cnpj = cnpj;
},
//Retorna as informações da empresa
toString: function(){
return "Empresa: " + this.companyName + ", " + "CNPJ: " + this.cnpj;
}
};
Quarto exemplo – Object.assign()
curso_javascript/aula12/index12_object_assign.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aula 12: Fundamentos da Linguagem JavaScript - Código Fluente</title>
<link rel="stylesheet" type="text/css" href="aula12.css">
</head>
<body>
<h1 align="center">Aula 12: Fundamentos da Linguagem JavaScript - Código Fluente</h1>
<br>
<h1 align="center">Programação orientada a objetos</h1>
<br>
<h2 align="center">Criando um objeto empresa utilizando object assign</h2>
<br>
<h2 align="center">Digite os dados da empresa, do carro e do motorista</h2>
<div align="center">
<div class="input-container">
<input class="input" type="text" id="nomeEmpresaInput" placeholder="Informe o nome da empresa">
<input class="input" type="text" id="CNPJEmpresaInput" placeholder="O CNPJ">
<input class="input" type="text" id="nomeCarroInput" placeholder="Informe o nome do carro">
<input class="input" type="text" id="placaCarroInput" placeholder="Informe a placa do carro">
<input class="input" type="text" id="nomeMotoristaInput" placeholder="Informe o nome do motorista">
<input class="input" type="text" id="carteiraMotoristaInput" placeholder="Número da carteira de motorista">
<br>
<br>
<button type="button" onclick="getDataFromForm()">Enviar</button>
<br>
<br>
<h2>Saída</h2>
<input class="input" type="text" id="informacaoGeralEmpresa" placeholder="Saída da toString() da empresa">
<input class="input" type="text" id="informacaoGeralCarro" placeholder="Saída da toString() do carro">
<input class="input" type="text" id="metodoLigarMotor" placeholder="Saída do método start() do carro">
<input class="input" type="text" id="informacaoGeralMotorista" placeholder="Saída da toString() do motorista">
<div>
</div>
<script src="script12_object_assign.js"></script>
</body>
</html>
curso_javascript/aula12/script12_object_assign.js
//Pega os dados do form do HTML
function getDataFromForm() {
const companyName = document.getElementById("nomeEmpresaInput").value;
const cnpj = document.getElementById("CNPJEmpresaInput").value;
const carName = document.getElementById("nomeCarroInput").value;
const carPlate = document.getElementById("placaCarroInput").value;
const driverName = document.getElementById("nomeMotoristaInput").value;
const driverLicense = document.getElementById("carteiraMotoristaInput").value;
//Preenche o objeto company
companyObject.companyConstructor(companyName, cnpj);
//Cria o objeto carro a partir do companyObject
carObject = Object.create(companyObject , {});
//Adiciona propriedades ao carro
carObject.name = carName;
carObject.plate = carPlate;
//Adiciona métodos ao carro
carObject.start = function() { return "O motor foi ligado"; };
carObject.stop = function() { return "O motor foi desligado"; };
carObject.toString = function(){return "Nome do carro: " + this.name + ", " + "Placa: " + this.plate;};
driverObject = Object.assign({}, companyObject , carObject);
driverObject.driverName = driverName;
driverObject.driverLicense = driverLicense;
driverObject.toString = function(){return "Nome do motorista: " + this.driverName + ", " + "Carteira de motorista: " + this.driverLicense;};
//Chama a função showInfo()
showInfo(carObject, companyObject, driverObject);
};
//mostra as informações nos campos de saída do HTML
function showInfo(carObject, companyObject, driverObject) {
document.getElementById("informacaoGeralEmpresa").value = companyObject.toString();
document.getElementById("informacaoGeralCarro").value = carObject.toString();
document.getElementById("metodoLigarMotor").value = carObject.start();
document.getElementById("informacaoGeralMotorista").value = driverObject.toString();
};
//Constroi o objeto company (empresa)
const companyObject = {
companyConstructor: function(name, cnpj) {
this.companyName = name;
this.cnpj = cnpj;
},
//Retorna as informações da empresa
toString: function(){
return "Empresa: " + this.companyName + ", " + "CNPJ: " + this.cnpj;
}
};
Quinto exemplo – class ES6
curso_javascript/aula12/index12_class.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aula 12: Fundamentos da Linguagem JavaScript - Código Fluente</title>
<link rel="stylesheet" type="text/css" href="aula12.css">
</head>
<body>
<h1 align="center">Aula 12: Fundamentos da Linguagem JavaScript - Código Fluente</h1>
<br>
<h1 align="center">Programação orientada a objetos</h1>
<br>
<h2 align="center">Criando um objeto empresa utilizando class</h2>
<br>
<h2 align="center">Digite os dados da empresa, do carro e do motorista</h2>
<div align="center">
<div class="input-container">
<input class="input" type="text" id="nomeCarroInput" placeholder="Informe qual o carro">
<input class="input" type="text" id="placaCarroInput" placeholder="Informe a placa">
<br>
<br>
<button type="button" onclick="getDataFromForm()">Enviar</button>
<br>
<br>
<h2>Saída</h2>
<input class="input" type="text" id="nomeCarro" placeholder="Nome do carro">
<input class="input" type="text" id="placaCarro" placeholder="Placa do carro">
<input class="input" type="text" id="motorLigado" placeholder="Saída do método start() do carro">
<div>
</div>
<script src="script12_class.js"></script>
</body>
</html>
curso_javascript/aula12/script12_class.js
class Car {
constructor(n, p){
this.name = n;
this.plate = p;
};
start(){
return "O motor foi ligado";
};
drive(){
return "Carro sendo dirigido";
};
brake(){
return "O freio foi acionado";
};
stop(){
return "O motor foi desligado";
}
toString(){
return "Nome: " + this.name + ", " + "Placa: " + this.plate
}
};
//Pega os dados do form do HTML
function getDataFromForm() {
const name = document.getElementById("nomeCarroInput").value;
const plate = document.getElementById("placaCarroInput").value;
//chama o construtor do carro pra instanciar um objeto carro
const car = new Car(name, plate);
show_info(car);
};
//mostra as informações nos campos de saída do HTML
function show_info(c) {
document.getElementById("nomeCarro").value = c.name;
document.getElementById("placaCarro").value = c.plate;
document.getElementById("motorLigado").value = c.start();
}
Continue aprendendo mais!
Repositório com os códigos das aulas
Voltar para página principal do blog
Todas as aulas desse curso
Aula 11 Aula 13
Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook
Link do código fluente no Pinterest
Novamente deixo meus link de afiliados:
Hostinger
Digital Ocean
One.com
Obrigado, até a próxima e bons estudos. 😉
Ola, o link para aula 13 esta vinculado para aula12. Excelente seus ensinamentos e a forma como apresenta. obrigado
Obrigado Isaac, vou consertar. \o/ 🙂
Na verdade Isaac, a aula 13 não existe, pelo menos ainda. O link tá cego, aí ele acaba voltando pra aula 12. 🙂