3
At the beginning of my Javascript studies, I made a simple application of a supermarket stock, where the customer could search for a particular product and see if it was still in stock or had finished. Built on procedural paradigm.
let mercado = Array();
mercado['frutas'] = Array('banana', 'maçã', 'laranja', 'goiaba');
mercado['sucos'] = Array('tang', 'mit', 'fit');
mercado['higienicos'] = Array('papel higienico', 'escova de dente', 'creme dental');
function pesquisar() {
let digitado = document.getElementById('pesquisa');
digitado = digitado.value;
digitado = digitado.toLowerCase();
let fruta = mercado['frutas'].indexOf(digitado);
let suco = mercado['sucos'].indexOf(digitado);
let higienicos = mercado['higienicos'].indexOf(digitado);
if(fruta != -1){
alert("Temos essa fruta");
} else if (suco != -1) {
alert("Temos esse suco");
} else if (higienicos != -1) {
alert("Temos esse higiênico");
} else {
alert("Não temos esse produto em nosso estoque");
}
}
Continuing with the studies, I discovered the paradigm of object orientation, then, to practice it I decided to pass this application of procedural to OO, and the problem arose, it did not work!
class ListaEstoque {
constructor(){
this.frutas = Array('banana', 'maçã', 'laranja', 'goiaba');
this.sucos = Array('tang', 'mit', 'fit');
this.higienicos = Array('papel higienico', 'escova de dentes', 'creme dental');
}
pesquisar(){
let digitado = document.getElementById('pesquisa');
digitado = digitado.value;
digitado = digitado.toLowerCase();
let fruta = this.frutas.indexOf(digitado);
let suco = this.sucos.indexOf(digitado);
let higienicos = this.indexOf(digitado);
if(fruta != -1){
alert("Temos essa fruta");
} else if (suco != -1) {
alert("Temos esse suco");
} else if (higienicos != -1) {
alert("Temos esse higiênico");
} else {
alert("Não temos esse produto em nosso estoque");
}
}
}
let y = new ListaEstoque();
function pesquisar(){
y.pequisar();
}
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Treino</title>
<meta charset="utf-8">
<script src="script_OO.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>Mercado</h1>
<p>Use nossa aplicação para saber se o produto ainda está em estoque!</p>
<form id="formulário" method="POST">
<input type="text" autocomplete="off" name="campo" id="pesquisa">
<input type="submit" value="pesquisar" onclick="pesquisar()">
</form>
</div>
</body>
</html>
Where am I going wrong? How to solve it?
What’s wrong is thinking that OOP will make your code better. OOP is one of the most difficult things there is, and almost everyone does it wrong and worse, without a very large mastery and commitment, it’s best not to try. It takes a lot of study and experience to get it right.
– Maniero
It may seem frustrating but throwing some classes and instantiating some objects within the code does not make it Object Oriented. It remains Imperative or Functional only with Objects. Guidance is only achieved by respecting certain principles, methods, standards and principles of implementation and design.
– Augusto Vasques