Javascript: classes e objetos
Afluentes: Desenvolvimento Front-end I, Desenvolvimento Front-end II, Usabilidade, desenvolvimento web, mobile e jogos
Objetos
Os objetos são tipos especiais que possuem atributos e métidos. No Javascript, temos o nome do objeto e um atributo ou método separado por ponto.
Para criar um objeto do tipo animal:
var animal = { tipo:"gato", cor:"preto" }
Para usar um atributo:
animal.cor = "branco";
document.write(animal.tipo);
É possível adicionar um novo atributo dinâmicamente:
animal.nome = "Kuroneko";
Classe
No javascript não existe exatamente o conceito orientação a objetos, mas é possível construir classes por meio da prototipação. Podemos construir variáveis e simular o comportamento de uma classe.
<!DOCTYPE html>
<html>
<head>
<title>Animal</title>
</head>
<body>
<script>
class Animal {
static cores = ["Branco", "Preto", "Malhado"];
constructor(tipo, cor, idade) {
// Atributos
this.tipo = tipo;
this.cor = cor;
this.idade = idade;
}
//Métodos
mudaIdade(novaIdade) {
this.idade = novaIdade;
}
// Método estático
static getCoresJson() {
return JSON.stringify(Animal.cores);
}
}
// Cria um objeto do tipo Animal
let gato = new Animal("gato", "Preto", 2);
let cachorro = new Animal("cão", "Branco", 1);
let gecko = new Animal("gecko", "Verde", 4);
// Imprime os atributos na página. Veja que estamos vendo o
// Objeto como um JSON e transformamos ele em string.
document.write(JSON.stringify(gato) + "<br>");
document.write(JSON.stringify(cachorro) + "<br>");
document.write(JSON.stringify(gecko) + "<br>");
document.write(JSON.stringify(Animal.cores) + "<br>");
document.write(Animal.getCoresJson());
</script>
</body>
</html>
Herança
A orientação a objetos possui um recurso de reutilização de código em que herdamos código de outra classe. Nesse caso, a classe filha pode herdar atributos (variáveis) e métodos (funções) de uma classe pai. Isso é chamado de herança.
No exemplo abaixo, criamos a classe Animal com dois atributos (tipo e nome) e o método getInfo(). Vejam que a classe Pet herda a classe Animal com a palavra chave extends. Então, um objeto instanciado a partir de Pet, também tem os atributos e métodos da classe Animal.
<!DOCTYPE html>
<html>
<body>
<script>
class Animal {
constructor(tipo, nome) {
this.tipo = tipo;
this.nome = nome;
}
getInfo() {
return 'Eu sou um ' + this.tipo + ' e me chamo ' + this.nome;
}
}
class Pet extends Animal {
constructor(tipo, nome, idade) {
super(tipo, nome);
this.idade = idade;
}
show() {
document.write(this.getInfo() + ' e tenho ' + this.idade + ' anos<br>');
}
}
var a1 = new Animal("vaca", "Joaninha");
var p1 = new Pet("cão", "Leon", 2);
var p2 = new Pet("gato", "Kuroneko", 3);
document.write(a1.getInfo() + "<br>");
p1.show();
p2.show();
</script>
</body>
</html>
Atividade
Crie um formulário com informações para serem envidadas à um servidor (por exemplo: nome, cpf, idade, telefone, data de nascimento, e-mail, senha e campo para redigitar a senha com um botão de apagar tudo e outro botão para enviar). Mas pensem em uma aplicação específica e com um objetivo certo. Aqui só coloquei uma ideia bastante genérica.
Quando clicar no botão enviar, usando JavaScript, valide o formulário, ou seja, todos os campos do formulário. Todas as questões devem ser obrigatórias. Caso um ou mais campos não esteja ok, mostre onde estão os erros.
Caso o formulário tenha sido validado, mostre, em um campo textarea não editável os dados no formato de string JSON.
Usar HTML, CSS e JavaScript (pode usar Bootstrap também). Trabalhe com classes, objetos e eventos.
