Atividade JavaScript ES6 — Catálogo GameData

Disciplina: Programação Web 2
Assunto: JavaScript ES6 Professor: Me. Danilo Bueno
Grupos: duplas
Duração: 4 aulas de 50 minutos (em sala)

Importante

Antes de começar a atividade leia o material de apoio sobre JavaScript!! É imprenscindível que você leia antes de começar a codar, pois a atividade é justamente para praticar os conceitos apresentados no material. Se tiver dúvidas, releia o material, pergunte ao professor ou aos colegas. Você também pode consultar os slides da aula, mas o material de apoio é mais completo e tem exemplos extras.

• Material de apoio
• Slides da aula

Contextualização

A GameData é uma empresa especializada em dados sobre videogames. A equipe de dados já fez o trabalho mais difícil: organizou as informações de 8 jogos em um arquivo JavaScript.

O problema é que o código mal começa — está cheio de tarefas pendentes (TODO) e nada aparece no console ainda.

Você e sua dupla foram contratados para implementar o catálogo.

Como começar

Crie um arquivo chamado catalogo.js (sem nomes na entrega) e cole o conteúdo abaixo:

// Como executar:
//   abra no navegador e rode pelo console do DevTools (F12)
// ─────────────────────────────────────────────────────────────

const jogos = [
    { titulo: "The Legend of Zelda: Breath of the Wild", genero: "Aventura", plataforma: "Switch", nota: 9.8, ano: 2017 },
    { titulo: "Red Dead Redemption 2", genero: "Ação", plataforma: "PS4", nota: 9.7, ano: 2018 },
    { titulo: "Hades", genero: "Roguelike", plataforma: "PC", nota: 9.2, ano: 2020 },
    { titulo: "Elden Ring", genero: "RPG", plataforma: "PC", nota: 9.5, ano: 2022 },
    { titulo: "God of War", genero: "Ação", plataforma: "PS4", nota: 9.6, ano: 2018 },
    { titulo: "Minecraft", genero: "Sandbox", plataforma: "PC", nota: 9.0, ano: 2011 },
    { titulo: "Celeste", genero: "Plataforma", plataforma: "PC", nota: 9.3, ano: 2018 },
    { titulo: "Hollow Knight", genero: "Metroidvania", plataforma: "PC", nota: 9.1, ano: 2017 },
];

Para executar, use o terminal:

node catalogo.js

Se não tiver o Node.js instalado, pesquise “como instalar Node.js Windows” (ou Mac). É simples e você vai precisar para o restante do curso.

Alternativa: abra o arquivo no navegador e cole o código no console do DevTools (F12 → aba Console).

Como funciona

O arquivo tem 4 missões. Implemente cada tarefa diretamente no catalogo.js, logo abaixo dos dados. Você não vai criar nada em HTML por enquanto — toda a saída é no console.

Dica: a cada tarefa concluída, rode o arquivo e confira a saída antes de avançar.

Cronograma

Material de apoio

• MDN — const e let
• MDN — Template Strings
• MDN — for…of
• MDN — Funções
• MDN — Arrow Functions
• MDN — Spread syntax

Missão 1 — const e let

Objetivo: entender na prática quando usar const e quando usar let.

Tarefa 1.1: crie uma const chamada totalJogos com o número de itens do array jogos e imprima:

Catálogo com 8 jogos

Em seguida, tente reatribuir totalJogos para outro valor (ex: totalJogos = 99). O que acontece? Anote o erro que aparecer no console.

Tarefa 1.2: declare uma variável chamada maiorNota com a nota do primeiro jogo (jogos[0].nota). Percorra o array com for...of e, dentro do loop, atualize maiorNota sempre que encontrar uma nota maior. Ao final, imprima:

Maior nota do catálogo: 9.8

Pergunta: você usou const ou let para declarar maiorNota? Por quê?

Tarefa 1.3: crie uma const chamada primeiroJogo com o primeiro item do array e imprima o objeto completo no console.

{ titulo: 'The Legend of Zelda: Breath of the Wild', ... }

Missão 2 — Template Strings

Objetivo: percorrer todos os jogos e imprimir uma linha formatada para cada um.

Tarefa 2.1: usando for...of, percorra o array jogos e imprima uma linha formatada para cada jogo.

[9.8] The Legend of Zelda: Breath of the Wild — Switch (2017)
[9.7] Red Dead Redemption 2 — PS4 (2018)
[9.2] Hades — PC (2020)
...

Missão 3 — Funções e Arrow Functions

Objetivo: organizar a lógica em funções reutilizáveis e depois refatorar a sintaxe.

Tarefa 3.1: crie uma função chamada exibirJogo(jogo) que recebe um objeto jogo e imprime a linha formatada (igual ao formato da Missão 2). Em seguida, percorra o array com for...of e chame exibirJogo para cada jogo.

Tarefa 3.2: crie uma função chamada contarPorPlataforma(plataforma) que recebe uma string e retorna quantos jogos existem para aquela plataforma. Chame a função e imprima o resultado.

contarPorPlataforma("PC")  → 5
contarPorPlataforma("PS4") → 2

Tarefa 3.3: converta exibirJogo para arrow function. Comente a versão anterior com /* */ antes de escrever a nova.

// Exemplo de sintaxe:
const minhaFuncao = (parametro) => { ... }

Tarefa 3.4 (desafio): crie uma arrow function chamada melhorJogo() (sem parâmetros) que percorre o array e retorna o objeto com a maior nota. Imprima o resultado.

{ titulo: 'The Legend of Zelda: Breath of the Wild', nota: 9.8, ... }

Missão 4 — Spread

Objetivo: adicionar um novo jogo ao catálogo sem alterar os dados originais.

Tarefa 4.1: crie um objeto chamado novoJogo com os campos titulo, genero, plataforma, nota e ano. Escolha um jogo real ou invente um — a dupla decide.

Tarefa 4.2: crie uma const chamada catalogoFinal usando spread para combinar o array jogos com o novoJogo, sem modificar o array original.

// Dica de sintaxe:
[...array, novoItem]

Tarefa 4.3: imprima no console os dois valores abaixo para provar que o array original não foi alterado.

jogos.length         → 8
catalogoFinal.length → 9

Tarefa 4.4: percorra catalogoFinal com for...of e exiba cada jogo usando a função exibirJogo.

Entrega individual (cada integrante deve enviar seu próprio arquivo)

1. Responder o questionário (link no Moodle)
2. Enviar o arquivo catalogo.js com as missões completas dentro da pergunta do questionário.