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:
   • section
   • matriculado
   • instrutor
2. Crie uma função para definir o nome e o número do curso em HTML. Passe o objeto do curso para sua função. Use a notação de ponto para acessar as partes do objeto que você precisa.
3. Crie outra função que irá gerar as seções em uma tabela com um id de secoes.

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

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

function sectionTemplate(section) {
  return `<tr>
           <td>${section.numeroSecao}</td>
           <td>${section.matriculado}</td>
           <td>${section.instrutor}</td>
          </tr>`;
}

function criarSecoes(curso) {
  const html = curso.secoes.map(sectionTemplate);
  document.querySelector("#secoes tbody").innerHTML = html.join("");
}