WDD 131: Fundamentos da Web Dinâmica

S04 – Atividade de Aprendizagem: Objetos JavaScript

Visão Geral

Objetos JavaScript são uma maneira de agrupar dados e funções relacionadas. Eles são um conceito central em JavaScript e são amplamente utilizados na linguagem. Nesta atividade, você aprenderá a criar e usar objetos em JavaScript.

Preparação

Em vez de armazenar dados relacionados em arrays paralelos ou multidimensionais complexos, os dados relacionados podem ser armazenados usando objetos que são mais legíveis, estáveis e fáceis de manter.

Este é um exemplo de um literal de objeto JavaScript (uma coleção de pares de chave-valor) representando uma pessoa em um formato conciso e legível.

let pessoa = {
  nome: "Antonia Francesca",
  idade: 30,
  profissao: "Engenheira de Software",
  hobbies: ["ler", "tocar violão", "caminhar"],
  endereco: {
    rua: "123 Camino Real",
    cidade: "Santa Rosa",
    pais: "Honduras"
  },
  estaEmpregado: true,
  saudacao: function() {
    console.log(`Olá, meu nome é ${this.nome}.`);
  }
};

• O objeto pessoa inclui as propriedades nome, idade, profissao, hobbies, endereco e estaEmpregado.
• Ele também inclui um método saudacao que registra uma mensagem de saudação no console usando o nome da pessoa.
• A propriedade endereco é um objeto em si, contendo propriedades aninhadas: rua, cidade e país.
• Você pode acessar e modificar as propriedades e invocar os métodos do objeto pessoa usando colchetes [] ou notação de ponto.

✓ Determine a saída das seguintes declarações dado o objeto pessoa definido acima.

1. console.log(pessoa['estaEmpregado']);   // notação de colchetes

2. console.log(pessoa.hobbies[0]);   // notação de ponto

3. console.log(pessoa.idade);   // notação de ponto

4. console.log(pessoa['endereco'].cidade);   // notação combinada

Atualizar um valor funciona como você espera.

pessoa.idade = 31;

Instruções da Atividade

Use objetos e encapsulamento para criar uma representação de um cronograma típico de cursos universitários.

1. Considerando o seguinte literal de objeto para um único curso, WDD 131,

   let umCurso = {
             codigo: "WDD131",
             nome: "Fundamentos da Web Dinâmica",
             creditos: 2,
           };

   adicione uma propriedade secoes ao objeto. Como o curso pode ter mais de uma seção, faça dessas seções um array de pelo menos 2 (dois) objetos com as seguintes propriedades:
   • secao
   • matriculado
   • instrutor
   Avalie Seu Conhecimento

   let umCurso = {
     codigo: "WDD131",
     nome: "Fundamentos da Web Dinâmica",
     creditos: 2,
     secoes: [
       { secao: "001", matriculado: 95, instrutor: "Roberto Diaz Rodriguez" },
       { secao: "002", matriculado: 80, instrutor: "Sarah Gobble" }
     ]
   };

2. Crie uma função chamada definirInformacoesCurso para definir o código e o nome do curso em HTML. Passe o objeto do curso para sua função. Use a notação de ponto para acessar o elemento com o id nomeCurso na página HTML.
   Avalie Seu Conhecimento

   function definirInformacoesCurso(curso) {
     document.querySelector("#nomeCurso").innerHTML = `${curso.codigo} – ${curso.nome}`;
   }

3. Crie outra função chamada exibirSecoes que irá exibir as seções em uma tabela com um id de secoes.
   Avalie Seu Conhecimento

   function exibirSecoes(curso) {
     const tbody = document.querySelector("#secoes tbody");
     let linhas = "";
     for (const secao of curso.secoes) {
       linhas += `<tr>
         <td>${secao.secao}</td>
         <td>${secao.matriculado}</td>
         <td>${secao.instrutor}</td>
       </tr>`;
     }
     tbody.innerHTML = linhas;
   }