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

Ideias de aprendizagem ativa

Interatividade com JavaScript: DOM e Eventos

A aprendizagem ativa funciona especialmente bem neste tópico porque os alunos aprendem melhor quando veem o código a transformar a página em tempo real. Manipular o DOM e gerir eventos são conceitos abstratos que se tornam concretos quando os alunos interagem com o resultado imediato das suas ações no navegador.

• Aprendizagens Essenciais
• DGE: Secundário - Algoritmia e Programação
• DGE: Secundário - Criação de Conteúdos Digitais

• 30–45 min
• Pares → Turma inteira
• 4 atividades

Atividade 01

• Aprendizagem Baseada em Problemas
• 30 min · Pares

Pairs Coding: Botão Interativo

Em pares, os alunos criam um botão HTML simples e adicionam um ouvinte de evento click com JavaScript para alterar a cor de fundo da página. Um aluno escreve o código enquanto o outro testa no browser e sugere melhorias. Depois, trocam papéis e estendem para um contador de cliques.

Como a interatividade altera a forma como o utilizador consome informação?

Sugestão de Facilitação

Durante a atividade de pares, circule entre os grupos para garantir que ambos os alunos participam ativamente, alternando quem digita e quem supervisiona o resultado no browser.

O que observar

Apresente aos alunos um pequeno snippet de HTML e peça-lhes para escreverem o código JavaScript necessário para selecionar um elemento específico e alterar o seu texto. Verifique se utilizam corretamente `querySelector` e `innerHTML`.

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

Atividade 02

• Aprendizagem Baseada em Problemas
• 45 min · Pequenos grupos

Small Groups: Lista de Tarefas Dinâmica

Em pequenos grupos, criem uma lista de tarefas com input de texto. Usem eventos keypress para adicionar itens ao DOM e click para remover. Cada grupo partilha o código final num repositório partilhado para revisão coletiva.

Analise a importância da manipulação do DOM para criar interfaces dinâmicas.

Sugestão de Facilitação

Na atividade em pequenos grupos, forneça um exemplo funcional incompleto para que os alunos possam comparar e adaptar a sua solução, promovendo discussões sobre boas práticas.

O que observar

Peça aos alunos para descreverem, numa frase, como um evento de 'click' num botão pode ser usado para mostrar ou esconder uma secção de texto numa página web. Avalie a compreensão da ligação entre evento e ação.

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

Atividade 03

• Aprendizagem Baseada em Problemas
• 35 min · Turma inteira

Whole Class: Depuração de Eventos

Apresente um código com erros comuns em DOM e eventos num editor partilhado online. A turma discute e corrige coletivamente, votando em sugestões via chat ou ferramenta colaborativa, vendo mudanças em tempo real.

Explique como os eventos do JavaScript permitem que as páginas web respondam às ações do utilizador.

Sugestão de Facilitação

Na depuração em turma inteira, escolha um snippet com um erro comum, como um ouvinte de evento mal associado, e peça aos alunos para identificarem e corrigirem o problema em conjunto.

O que observar

Em pares, os alunos criam uma pequena página com um botão que muda a cor de um parágrafo quando clicado. Cada par avalia o trabalho do outro, verificando se o código está funcional e se os conceitos de DOM e evento foram aplicados corretamente.

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

Atividade 04

• Aprendizagem Baseada em Problemas
• 40 min · Individual

Individual Challenge: Galeria de Imagens

Individualmente, os alunos modificam uma página com imagens estáticas, adicionando eventos mouseover para ampliar e click para trocar imagens via manipulação do DOM. Testam e documentam o código num ficheiro pessoal.

Como a interatividade altera a forma como o utilizador consome informação?

Sugestão de Facilitação

Na galeria de imagens individual, disponibilize um template estruturado com comentários para guiar os alunos nas etapas de seleção de elementos e manipulação de eventos.

O que observar

Apresente aos alunos um pequeno snippet de HTML e peça-lhes para escreverem o código JavaScript necessário para selecionar um elemento específico e alterar o seu texto. Verifique se utilizam corretamente `querySelector` e `innerHTML`.

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

Algumas notas sobre lecionar esta unidade

Ensine este tópico com ciclos curtos de teoria e prática. Comece com demonstrações visuais no projetor, mostrando como uma pequena mudança no código afeta a página em tempo real. Evite longas explicações teóricas sem prática imediata, pois os alunos precisam de ver a relação entre o código e o resultado para consolidar o conhecimento. Pesquisas mostram que a aprendizagem é mais eficaz quando os alunos constroem o seu entendimento através de tentativas e erros supervisionados.

No final destas atividades, espera-se que os alunos consigam selecionar elementos HTML com confiança, alterar propriedades dinamicamente e associar eventos a ações específicas. Os alunos demonstram compreensão ao explicar como um evento desencadeia uma mudança no DOM e ao justificar as suas escolhas de código.

---

Atenção a estes erros comuns

• Durante a atividade de pares 'Botão Interativo', alguns alunos podem acreditar que o DOM é apenas o HTML estático da página.

  Peça aos pares que alterem dinamicamente o texto e a cor do botão após o clique, mostrando que o DOM é uma representação viva que muda sem recarregar a página. Use o inspetor do navegador para que visualizem a árvore DOM atualizada em tempo real.

• Durante a atividade em pequenos grupos 'Lista de Tarefas Dinâmica', os alunos podem pensar que eventos só funcionam com cliques de rato.

  Inclua no enunciado da atividade a adição de um evento 'keydown' para adicionar tarefas pressionando a tecla Enter. Durante a implementação, peça aos grupos que testem diferentes eventos e discutam como cada um captura interações distintas.

• Durante a atividade individual 'Galeria de Imagens', alguns alunos podem acreditar que manipular o DOM recarrega a página inteira.

  Peça aos alunos que abram a consola do navegador e observem que a página não recarrega ao clicar nas miniaturas. Mostre-lhes como verificar o histórico de navegação para confirmar que apenas o conteúdo da galeria muda.

---

Metodologias usadas neste resumo

• Aprendizagem Baseada em Problemas