Mudanças entre as edições de "Javascript: classes e objetos"

De Aulas
Linha 74: Linha 74:
 
     </script>
 
     </script>
 
</body>
 
</body>
 +
 +
== Herança ==
 +
 +
<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>
  
 
</html>
 
</html>

Edição das 09h40min de 22 de abril de 2024

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>

== Herança ==

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

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

Disponível em “https://saulo.arisa.com.br/wiki/index.php?title=Javascript:_classes_e_objetos&oldid=9230”