Mudanças entre as edições de "Javascript: classes e objetos"
(Criou página com 'Afluentes: Desenvolvimento Front-end I, Desenvolvimento Front-end II, Usabilidade, desenvolvimento web, mobile e jogos == Objetos == Os objetos são tipos especi...') |
|||
| Linha 77: | Linha 77: | ||
</html> | </html> | ||
</syntaxhighlight> | </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. | ||
Edição das 14h15min de 15 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>
</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.
