Aula 6 Cadastro de Produto (JSON Funcoes)

Prévia do material em texto

Aula 6 – Cadastro de Produto (JSON + 
Funções) 
🎯 Objetivo 
Criar uma página que: 
● Recebe dados do usuário 
● Armazena em um objeto (estilo JSON) 
● Usa funções separadas para processar 
● Exibe o resultado na tela 
 
🧱 1. HTML (estrutura da página) 
Arquivo index.html: 
 
 
 
 
 Cadastro de Produto 
 
 
 
 
 Cadastro de Produto 
 
 
 
 
 
 Cadastrar 
 
 Resultado aparecerá aqui 
 
 
 
 
 
 
🎨 2. CSS (visual simples) 
Arquivo style.css: 
body { 
 font-family: Arial; 
 padding: 20px; 
} 
 
input { 
 display: block; 
 margin: 10px 0; 
 padding: 8px; 
} 
 
button { 
 padding: 10px; 
 cursor: pointer; 
} 
 
p { 
 margin-top: 20px; 
 font-weight: bold; 
} 
 
 
⚙ 3. JavaScript (modelo correto) 
Arquivo script.js: 
 
📌 Função principal 
function cadastrar() { 
 
 let nome = document.getElementById("txtNome").value; 
 let preco = parseFloat(document.getElementById("txtPreco").value); 
 
 let produto = criarProduto(nome, preco); 
 
 let resultado = formatarProduto(produto); 
 
 document.getElementById("txtResultado").innerHTML = resultado; 
} 
 
 
📌 Função que cria o objeto (JSON) 
function criarProduto(nome, preco) { 
 return { 
 nome: nome, 
 preco: preco 
 }; 
} 
 
👉 Aqui temos um objeto estilo JSON (somente dados) 
 
📌 Função que processa os dados 
function formatarProduto(produto) { 
 
 let texto = "Produto: " + produto.nome + 
 "Preço: R$ " + produto.preco; 
 
 if (produto.preco > 100) { 
 texto += "Produto caro"; 
 } else { 
 texto += "Produto barato"; 
 } 
 
 return texto; 
} 
 
 
🧠 4. Conceitos trabalhados 
✔ Objeto (JSON) 
{ 
 nome: nome, 
 preco: preco 
} 
 
✔ Só dados 
✔ Muito usado em APIs 
JSON (JavaScript Object Notation) é um formato de texto usado para representar dados 
de forma estruturada. 
Exemplo: 
{ 
 "nome": "Mouse", 
 "preco": 50, 
 "disponivel": true, 
 "cores": ["preto", "branco"] 
} 
 
✔ Funções separadas 
● criarProduto() → cria dados 
● formatarProduto() → processa 
● cadastrar() → controla fluxo 
👉 Isso é organização de código 
 
🔄 5. Comparação com Java (importante 
para fixação) 
Java JavaScript 
Classe Objeto (JSON) 
Construtor Função criarProduto 
Método Função formatarProduto 
Objeto Objeto 
 
🧪 6. Exercício de Fixação 
📝 Parte 1 
Adicionar campo: 
● Quantidade (txtQuantidade) 
 
📝 Parte 2 
Modificar função: 
function criarProduto(nome, preco, quantidade) { 
 return { 
 nome: nome, 
 preco: preco, 
 quantidade: quantidade 
 }; 
} 
 
 
📝 Parte 3 
Atualizar saída: 
"Quantidade: " + produto.quantidade 
 
 
🧩 7. Desafio (nível médio) 
Criar função nova: 
function calcularTotal(produto) { 
 return produto.preco * produto.quantidade; 
} 
 
E mostrar no resultado: 
"Total: R$ " + calcularTotal(produto) 
 
 
⚠ 8. Problema clássico (explorar em 
aula) 
👉 O que acontece se o preço estiver vazio? 
Resposta: 
NaN 
👉 Como evitar este erro? 
 
❓ 9. Perguntas Discursivas 
1. O que é um objeto (JSON) em JavaScript? 
2. Qual a vantagem de separar funções do objeto? 
3. O que faz a função criarProduto()? 
4. O que faz a função formatarProduto()? 
5. Por que usamos parseFloat()? 
6. O que significa NaN? 
7. Qual a vantagem de dividir o programa em várias funções? 
 
 
	Aula 6 – Cadastro de Produto (JSON + Funções) 
	🎯 Objetivo 
	🧱 1. HTML (estrutura da página) 
	🎨 2. CSS (visual simples) 
	⚙️ 3. JavaScript (modelo correto) 
	📌 Função principal 
	📌 Função que cria o objeto (JSON) 
	📌 Função que processa os dados 
	🧠 4. Conceitos trabalhados 
	✔ Objeto (JSON) 
	✔ Funções separadas 
	🔄 5. Comparação com Java (importante para fixação) 
	🧪 6. Exercício de Fixação 
	📝 Parte 1 
	📝 Parte 2 
	📝 Parte 3 
	🧩 7. Desafio (nível médio) 
	⚠️ 8. Problema clássico (explorar em aula) 
	❓ 9. Perguntas Discursivas