1. O Cenário
Ao capturar dados de formulários HTML, o JavaScript sempre recebe valores do tipo String. Para realizar cálculos matemáticos ou validações lógicas, precisamos converter esses dados para os tipos primitivos corretos: Number e Boolean.
2. A Atividade
Desenvolva um sistema de Checkout Inteligente que receba os dados abaixo e processe o valor final da compra:
- inputPreco:
"125.50"(String) - inputQtd:
"3"(String) - inputCupom:
"true"(String)
Regras:
- Converta os inputs para os tipos corretos.
- Calcule o subtotal (Preço x Quantidade).
- Aplique 10% de desconto se o cupom for verdadeiro.
- Exiba o resultado formatado como moeda (R$).
3. Tabela de Referência
| Método | Entrada | Saída (Tipo) |
|---|---|---|
parseFloat() |
"10.5" | 10.5 (Number) |
parseInt() |
"10.5" | 10 (Number) |
Number() |
"123" | 123 (Number) |
.toFixed(2) |
150.5 | "150.50" (String) |
4. Instruções de Entrega
Prazo e Formato: O aluno deverá enviar dois links:
- URL do Projeto: O site deve estar publicado via GitHub Pages.
- Vídeo Demonstrativo: Link de uma gravação (Loom, YouTube ou Drive) de até 2 minutos realizando os testes guiados abaixo.
5. Roteiro do Vídeo (Testes Guiados)
No seu vídeo, você deve demonstrar as seguintes situações no seu sistema:
- Teste 1 (Sucesso): Insira valores válidos (ex: Preço 50.00, Qtd 2) e mostre o cálculo correto no console/tela.
- Teste 2 (Casting de Booleano): Ative e desative o cupom de desconto para provar que a string "true"/"false" foi convertida corretamente.
- Teste 3 (Tratamento de Erro): Tente inserir uma letra no campo de preço e mostre como o sistema lida com o resultado
NaN. - Explicação Técnica: Mostre o trecho do código onde você usou
parseFloat,parseIntouNumber.
6. Demonstração em Tempo Real
Clique no botão para ver o JavaScript processando o casting e o cálculo:
> Aguardando execução...