Stela JavaScript Aulas Aula 11
Cada aluno é um objeto
Cadastro de Alunos, parte II: objetos, arrays de objetos e JSON.
Modelar dados com objetos, organizar listas de objetos e converter para JSON.
Pesquisar exemplos de arquivos JSON em APIs públicas.
Entrega da parte II do Cadastro (Moodle).
Nome num array, nota em outro… e a bagunça começa
Na aula passada, nomes e notas ficaram em arrays separados. Basta um sort() numa lista para tudo desalinhar. Que tal guardar cada aluno inteiro, com nome, notas e frequência, num pacote só? Em grupo, modelem o objeto "aluno" numa tabela no Loop.
Objetos e JSON em quatro passos
Objeto: propriedades com nome
Um objeto guarda pares de chave e valor entre chaves. Cada par é uma propriedade.
Acesse com ponto (aluno.nome) ou com colchetes (aluno["nome"]), que servem quando a chave está numa variável.
1const aluno = {2 nome: "Ana",3 notas: [8.5, 7, 9],4 frequencia: 925};67console.log(aluno.nome); // Ana8console.log(aluno["frequencia"]); // 92Mudar, acrescentar, apagar e métodos
Dá para alterar e acrescentar propriedades a qualquer momento, e apagar com delete.
Uma função guardada dentro do objeto é um método.
1aluno.frequencia = 95; // altera2aluno.curso = "ADS"; // acrescenta3delete aluno.curso; // apaga45const outra = {6 nome: "Bia",7 apresentar() {8 return `Eu sou a ${this.nome}`;9 }10};11console.log(outra.apresentar()); // Eu sou a BiaArray de objetos: a turma inteira
Juntando a aula passada com a de hoje: uma lista de objetos. Os métodos de array funcionam do mesmo jeito.
1const turma = [2 { nome: "Ana", media: 8.2 },3 { nome: "Caio", media: 5.4 },4 { nome: "Bia", media: 9.1 }5];67const aprovados = turma.filter((a) => a.media >= 6);8console.log(aprovados.map((a) => a.nome)); // ["Ana", "Bia"]JSON: o idioma da troca de dados
JSON é texto no formato de objeto. É assim que sistemas conversam pela internet.
JSON.stringify() transforma objeto em texto. JSON.parse() faz o caminho de volta.
Dica: abra https://viacep.com.br/ws/01001000/json/ no navegador e veja um JSON de verdade, vindo de uma API pública.
1const texto = JSON.stringify({ nome: "Ana", media: 8.2 });2console.log(texto); // {"nome":"Ana","media":8.2}34const deVolta = JSON.parse(texto);5console.log(deVolta.nome); // AnaSalvar o cadastro e abrir de novo amanhã
Ator: Secretaria da escola
Objetivo: Não perder os alunos cadastrados quando a página fecha.
Fluxo principal
- A secretaria cadastra alunos com nome, curso e notas.
- O sistema guarda cada aluno como um objeto.
- Transforma a lista em JSON e salva.
- No dia seguinte, a página lê o JSON e mostra os alunos de volta.
E se...
- O arquivo salvo está vazio: o sistema começa com a lista vazia, sem erro.
Para pensar
- Que propriedades tem o objeto aluno?
- Por que salvar em JSON, e não como texto solto?
Cadastro de Alunos, parte II
O projeto ganha estrutura de verdade. O que você marcar fica salvo neste navegador.
Objetos fora da tela
Ciência
Cientistas guardam medições em JSON e trocam dados entre laboratórios do mundo todo nesse formato.
Eletrônica
Um ESP32 manda as leituras do sensor para a nuvem num JSON como {"temp": 24.5, "umidade": 60}.
Arte
Uma obra de arte também vira objeto: título, artista, ano e materiais. Museus inteiros catalogam acervo assim.
Terminou antes? Tem mais.
Busque um CEP real com fetch("https://viacep.com.br/ws/SEUCEP/json/"), converta a resposta com .json() e mostre a cidade no console. É seu primeiro consumo de API.
Para estudar e praticar
Parte II do Cadastro no Moodle
E commit no GitHub. Na próxima aula, o Cadastro sai do console e ganha cara de página.