Aplicações Informáticas B · 12.º Ano

Ideias de aprendizagem ativa

Validação de Formulários com JavaScript

A aprendizagem ativa funciona especialmente bem neste tópico porque exige que os alunos testem, corrijam e melhorem o código em tempo real, o que reforça a compreensão prática dos conceitos. Ao validar formulários com JavaScript, os alunos veem imediatamente o impacto das suas decisões no código, tornando a abstração mais concreta e memorável.

• Aprendizagens Essenciais
• DGE: Secundário - Algoritmia e Programação
• DGE: Secundário - Segurança e Privacidade

• 20–50 min
• Pares → Turma inteira
• 4 atividades

Atividade 01

• Aprendizagem Baseada em Problemas
• 30 min · Pares

Pair Programming: Validação de Email

Os pares criam um formulário simples com campo de email e implementam uma função JavaScript com expressão regular para validar o formato. Testam com entradas inválidas e ajustam mensagens de erro. Partilham o código com a turma para feedback.

Como podemos validar dados do utilizador antes de os processar?

Sugestão de Facilitação

Durante a Pair Programming de validação de email, peça aos pares para alternarem entre o papel de quem escreve o código e o papel de quem testa os limites da validação.

O que observar

Apresente aos alunos um pequeno trecho de código JavaScript que valida um campo de formulário. Peça-lhes para identificarem o tipo de validação (ex: formato de email, campo obrigatório) e o que aconteceria se o utilizador inserisse dados inválidos.

• Analisar
• Avaliar
• Criar
• Tomada de Decisão
• Autogestão
• Competências Relacionais

Atividade 02

• Aprendizagem Baseada em Problemas
• 45 min · Pequenos grupos

Small Groups: Formulário Completo

Em grupos de quatro, os alunos constroem um formulário de registo com validações para nome, email, palavra-passe e telefone. Usam eventos onsubmit e onblur para feedback imediato. Apresentam e testam mutuamente os formulários.

Analise os riscos de segurança associados à falta de validação de formulários.

Sugestão de Facilitação

Na atividade de Formulário Completo em pequenos grupos, forneça um template com campos de diferentes tipos para garantir que todos abordam pelo menos um cenário de validação complexo.

O que observar

Distribua um formulário web simples (sem validação). Peça aos alunos para escreverem duas regras de validação em JavaScript que gostariam de adicionar e uma razão pela qual a validação do lado do servidor é crucial, mesmo com a validação do lado do cliente.

• Analisar
• Avaliar
• Criar
• Tomada de Decisão
• Autogestão
• Competências Relacionais

Atividade 03

• Aprendizagem Baseada em Problemas
• 20 min · Turma inteira

Whole Class: Debug Challenge

Projeta formulários com erros comuns no quadro ou online. A turma discute e corrige coletivamente, identificando falhas em validações client-side. Registam lições aprendidas num quadro partilhado.

Explique a diferença entre validação do lado do cliente e do lado do servidor.

Sugestão de Facilitação

No Debug Challenge em turma, altere propositadamente um erro no código partilhado para que os alunos tenham de detetar e corrigir problemas de lógica ou de sintaxe.

O que observar

Coloque a seguinte questão para discussão em grupo: 'Se um formulário tem validação robusta do lado do cliente, é realmente necessário ter validação do lado do servidor? Justifique a sua resposta com exemplos de riscos de segurança.'

• Analisar
• Avaliar
• Criar
• Tomada de Decisão
• Autogestão
• Competências Relacionais

Atividade 04

• Aprendizagem Baseada em Problemas
• 50 min · Individual

Individual: Projeto de Melhoria

Cada aluno escolhe um formulário web existente e adiciona validações JavaScript avançadas, como confirmação de palavra-passe. Testa em diferentes browsers e documenta melhorias na segurança.

Como podemos validar dados do utilizador antes de os processar?

Sugestão de Facilitação

No Projeto de Melhoria individual, forneça um formulário com validações básicas para que os alunos possam aplicar melhorias específicas, como mensagens de erro mais claras ou validações adicionais.

O que observar

Apresente aos alunos um pequeno trecho de código JavaScript que valida um campo de formulário. Peça-lhes para identificarem o tipo de validação (ex: formato de email, campo obrigatório) e o que aconteceria se o utilizador inserisse dados inválidos.

• Analisar
• Avaliar
• Criar
• Tomada de Decisão
• Autogestão
• Competências Relacionais

Algumas notas sobre lecionar esta unidade

Este tópico deve ser ensinado com uma abordagem prática e iterativa, onde os alunos começam com validações simples e gradualmente adicionam complexidade. É importante evitar aulas teóricas longas sobre expressões regulares; em vez disso, introduza conceitos como 'formato de email' ou 'comprimento de palavra-passe' através de exemplos concretos e problemas reais. Pesquisas sugerem que a aprendizagem baseada em erros, onde os alunos tentam contornar as suas próprias validações, aumenta a retenção e a compreensão das limitações da validação client-side.

No final destas atividades, espera-se que os alunos consigam implementar validações funcionais em formulários web, detetar erros comuns em tempo real e justificar a importância da validação server-side. Espera-se também que comuniquem feedback claro e seguro para os utilizadores.

---

Atenção a estes erros comuns

• Durante a atividade de Pair Programming: Validação de Email, alguns alunos podem assumir que a validação client-side é suficiente para garantir a segurança do sistema.

  Durante a Pair Programming: Validação de Email, peça aos pares para simularem um ataque básico, como enviar dados diretamente para o servidor via ferramentas de developer, para demonstrarem que a validação server-side é indispensável. Discutam depois como o código que escreveram poderia ser contornado e que soluções server-side seriam necessárias.

• Durante a atividade de Formulário Completo em pequenos grupos, alguns alunos podem acreditar que JavaScript valida automaticamente todos os tipos de dados.

  Durante o Formulário Completo, forneça um exemplo de código com erros comuns de validação, como uma regex incompleta para email, e peça aos grupos para identificarem e corrigirem os problemas. Peça-lhes também para compararem as suas soluções e discutirem porque é que padrões específicos exigem validação manual.

• Durante a discussão em turma do Debug Challenge, alguns alunos podem pensar que mensagens de erro vagas não afetam a segurança da aplicação.

  Durante o Debug Challenge, proponha um cenário onde um atacante pode inferir informações sensíveis a partir de mensagens de erro, como 'Palavra-passe demasiado curta' vs 'Palavra-passe deve ter pelo menos 8 caracteres'. Peça aos alunos para reescreverem as mensagens do formulário de forma a prevenir tais inferências.

---

Metodologias usadas neste resumo

• Aprendizagem Baseada em Problemas