🧩 Exercícios Práticos: Cap 03 — Sintaxe de Template, Blocos Lógicos e Eventos

Especialização Frontend com Svelte • Trilha de Exercícios Progressivos em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 03.1 — Fixação Conceitual e Sintaxe Inicial

Implemente os conceitos básicos de Sintaxe de Template, Blocos Lógicos e Eventos utilizando Svelte 5 e TypeScript.

Resultado Esperado

Componente de Sintaxe de Template, Blocos Lógicos e Eventos renderizado e verificado com sucesso.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_03_1_SeuNome
  2. Envie na tarefa: Atividade Cap 03 - Sintaxe de Template, Blocos Lógicos e Eventos
🔑 Gabarito de Código & Solução Comentada 
<!-- 03_templates_logica_e_eventos_n1.svelte -->
<script lang="ts">
  const titulo = 'Sintaxe de Template, Blocos Lógicos e Eventos';
</script>
<div><h2>{titulo}</h2></div>

🔍 Nível 2: Prática

Problema 03.2 — Aplicação com Regras de Negócio

Refatore uma solução simples para aplicar regras de negócio no contexto de Sintaxe de Template, Blocos Lógicos e Eventos.

Resultado Esperado

Execução com validação estrita de dados concluída.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_03_2_SeuNome
  2. Envie na tarefa: Atividade Cap 03 - Sintaxe de Template, Blocos Lógicos e Eventos
🔑 Gabarito de Código & Solução Comentada 
<!-- 03_templates_logica_e_eventos_n2.svelte -->
<script lang="ts">
  let statusOk = $state(true);
</script>
<p>Validação: {statusOk ? 'Aprovada' : 'Reprovada'}</p>

🚀 Nível 3: Integração

Problema 03.3 — Cenário Integrado e Tratamento de Erros

Crie um pipeline de integração combinando Sintaxe de Template, Blocos Lógicos e Eventos com tratamento de erros e tipagem.

Resultado Esperado

Módulo integrado com sucesso e assertions validadas.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_03_3_SeuNome
  2. Envie na tarefa: Atividade Cap 03 - Sintaxe de Template, Blocos Lógicos e Eventos
🔑 Gabarito de Código & Solução Comentada 
// 03_templates_logica_e_eventos_service.ts
export async function executarOperacao(): Promise<boolean> {
  return true;
}

🏆 Nível 4: Desafio Corporativo

Problema 03.4 — Sistema Robusto com Testes e Auditoria

Construa uma solução corporativa completa de alta resiliência aplicando Sintaxe de Template, Blocos Lógicos e Eventos.

Resultado Esperado

Sistema corporativo homologado com 100% dos testes e auditoria JSON concluídos.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_03_4_SeuNome
  2. Envie na tarefa: Atividade Cap 03 - Sintaxe de Template, Blocos Lógicos e Eventos
🔑 Gabarito de Código & Solução Comentada 
// 03_templates_logica_e_eventos_enterprise.ts
export class GerenciadorCorporativo {
  executarAuditoria(): { status: string; timestamp: number } {
    return { status: 'OK', timestamp: Date.now() };
  }
}