Exibir código-fonte para Javascript: classes e objetos


Afluentes: [[Desenvolvimento Front-end I]], [[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:

<syntaxhighlight lang=javascript>
var animal = { tipo:"gato", cor:"preto" }
</syntaxhighlight>

Para usar um atributo:

<syntaxhighlight lang=javascript>
animal.cor = "branco";
document.write(animal.tipo);
</syntaxhighlight>

É possível adicionar um novo atributo dinâmicamente:

<syntaxhighlight lang=javascript>
animal.nome = "Kuroneko";
</syntaxhighlight>

== 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.

<syntaxhighlight lang=html>
<!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>
</syntaxhighlight>

== 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 <code>Animal</code> com dois atributos (<code>tipo</code> e <code>nome</code>) e o método <code>getInfo()</code>. Vejam que a classe <code>Pet</code> herda a classe Animal com a palavra chave <code>extends</code>. Então, um objeto instanciado a partir de Pet, também tem os atributos e métodos da classe Animal. <syntaxhighlight lang=html>
<!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>
</syntaxhighlight>

= Polimorfismo =
<syntaxhighlight lang="javascript">
<!DOCTYPE html>
<html>

<head>
    <title>Objetos com JavaScript</title>
</head>

<body>
    <script>

        // Classe Animal
        class Animal {
            constructor(t, n, i) {
                this.tipo = t;
                this.nome = n;
                this.idade = i;
            }

            getInfo() {
                return `Eu sou um ${this.tipo}, me chamo ${this.nome}, e tenho ${this.idade} anos`;
            }

            incrementaIdade() {
                this.idade++;
            }
        }

        // Classe Pet
        class Pet extends Animal {
            constructor(t, n, i, d) {
                super(t, n, i);
                this.dono = d;
            }

            getDono() {
                return this.dono;
            }

            setDono(d) {
                this.dono = d;
            }

            getInfo() {
                return super.getInfo() + ' e meu/minha dono/a é ' + this.dono;
            }
        }

        let vet = [];
        vet.push(new Animal("galinha", "Martinha", "1"));
        vet.push(new Animal("vaca", "Joaninha", 3));
        vet.push(new Pet("gato", "Kuroneko", 2, "João Miranda"));
        vet.push(new Pet("Cão", "Bidu", 5, "Maria Joaquina"));
        vet.push(new Pet("Gekko", "Midori", 1, "Ronaldo Ricardo"));

        for (i = 0; i < vet.length; i++) {
            console.log(vet[i].getInfo());
        }

        for (i = 0; i < vet.length; i++) {
            if (vet[i] instanceof Pet) {
                vet[i].setDono("Marcos da Silva");
            }
        }

        for (i = 0; i < vet.length; i++) {
            console.log(vet[i].getInfo());
        }
    </script>
</body>

</html>
</syntaxhighlight>

= 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 <code>textarea</code> 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.