Aprofunde-se em JavaScript e exiba resultados dinâmicos – Aula 03

Por Ricardo Costa Val do Rosario auxiliado por ChatGPT 5.0 Plus

Tema Principal: MANIPULAÇÃO DO DOM E RENDERIZAÇÃO DE CARDS COM JAVASCRIPT

Introdução

- A aula aborda como transformar dados exibidos no console em elementos visuais na página.
- O objetivo é aprender a manipular o DOM, criar elementos HTML dinamicamente e preparar 
a base para implementar um sistema de busca inteligente.

Principais Objetivos da Aula

- Selecionar elementos HTML no JavaScript usando document.querySelector().

- Criar função para renderizar cards na tela.

- Iterar sobre listas JSON com o laço for...of.

- Criar elementos HTML dinamicamente com document.createElement().

- Utilizar template strings para inserir dados dinâmicos dentro da estrutura HTML.

- Alterar estilos e fontes pelo CSS e Google Fonts.

- Introduzir a funcionalidade de busca utilizando filter().

Manipulação do DOM (Document Object Model)

- O DOM representa a página como uma árvore de elementos.

- Através do JavaScript, é possível:
1.	Criar novos elementos,
2.	Editar conteúdos,
3.	Adicionar classes,
4.	Modificar estilos,
5.	Inserir elementos visualmente na página.

Renderização Dinâmica de Cards

# Passos principais:
1. Selecionar o container dos cards:
   const cardContainer = document.querySelector(".card-container");

2. Criar a função renderizarCards(dados):
  
- Recebe os dados (lista JSON).
  
- Para cada item da lista:
 
1. Cria um <article>

2. Adiciona a classe "card"

3. Define seu conteúdo usando template strings

4. Anexa o card ao container usando appendChild()

3. Uso de template strings:
- Interpolação ${dado.nome}.

- Facilita substituir dados diretamente no HTML gerado.

Conceitos Reforçados

1. CSS: utilizado para estilização, controle de layout, cores e fontes.

2. JSON: formato leve de armazenamento de dados utilizado na Base de Conhecimento.

3. Java: linguagem clássica e estruturada; aparecendo no conteúdo como exemplo de item.

4. Python: linguagem dinâmica e moderna, muito usada em IA; aparece na demonstração de cards.

5. JavaScript: protagonista da aula, responsável pela interação, lógica e manipulação do DOM.

Implementação da Busca Inteligente

- A busca é implementada com dados.filter()
- O código converte termo digitado para minúsculas com toLowerCase()
- Filtra por:
1. Nome
2. Descrição

- Permite tolerância entre letras maiúsculas e minúsculas.
- Exibe apenas o resultado correspondente.

Personalização Visual

1. Alteração de cores no arquivo CSS usando variáveis no :root.
2. Seleção de novas fontes no Google Fonts.
3. Aplicação via @import no CSS.

Conclusão

- A aula consolida o uso conjunto de HTML + CSS + JavaScript.

- Prepara o projeto para:
1.	Disponibilização pública,
2.	Uso de GitHub,
3.	Aprimoramento da Base de Conhecimento,
4.	Integração com IA e APIs (passo da próxima aula).