12 – Javascript – Programação orientada a objetos – parte 02

toticavalcanti

12 – Javascript – Programação orientada a objetos – parte 02

Orientação a objetos com javascript e html

Voltar para página principal do blog

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:

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

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

Obrigado, até a próxima e bons estudos. 😉

Category: Algoritmo - Linguagem de Programação, Fundamentos do javascript, Javascript

3 Comentários

Isaac
at 15:08 Reply
Ola, o link para aula 13 esta vinculado para aula12. Excelente seus ensinamentos e a forma como apresenta. obrigado
- toticavalcanti
  at 12:45 Reply
  Obrigado Isaac, vou consertar. \o/ 🙂
  - toticavalcanti
    at 13:03 Reply
    Na verdade Isaac, a aula 13 não existe, pelo menos ainda. O link tá cego, aí ele acaba voltando pra aula 12. 🙂

12 – Javascript – Programação orientada a objetos – parte 02

12 – Javascript – Programação orientada a objetos – parte 02

Aula 11 Aula 13 (Ainda não disponível)

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:

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

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á!

Crie ele, por exemplo, em uma pasta tipo: curso_javascript/aula12/aula12.css

Primeiro exemplo – Object literal

curso_javascript/aula12/index12_object_literal.html

curso_javascript/aula12/script12_object_literal.js

Segundo exemplo – new

curso_javascript/aula12/index12_new.html

curso_javascript/aula12/script12_new.js

Terceiro exemplo – Object.create()

curso_javascript/aula12/index12_object_create.html

curso_javascript/aula12/script12_object_create.js

Quarto exemplo – Object.assign()

curso_javascript/aula12/index12_object_assign.html

curso_javascript/aula12/script12_object_assign.js

Quinto exemplo – class ES6

curso_javascript/aula12/index12_class.html

curso_javascript/aula12/script12_class.js

Continue aprendendo mais!

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:

Obrigado, até a próxima e bons estudos. 😉

About The Author

11 – Javascript – Programação orientada a objetos – parte 01

Aula 03 – Computação Quântica – Instalando o Anaconda e o QISKIT

Related Videos

3 Comentários

Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook

Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook