16/04/2025, 21:22 Programação Orientada a Eventos

PROGRAMAÇÃO
ORIENTADA A EVENTOS

Aula 1

INTRODUÇÃO A EVENTOS

Introdução a eventos
Estudante, esta videoaula foi preparada especialmente para você. Nela,
você irá aprender conteúdos importantes para a sua formação
profissional. Vamos assisti-la?
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 1/42
16/04/2025, 21:22 Programação Orientada a Eventos

Ponto de Partida
Iniciamos, agora, a unidade na qual falaremos bastante sobre eventos
na programação web. De maneira bem simples, um evento nada mais é
do que a manifestação de algo que aconteceu. No contexto do
desenvolvimento de aplicações web, é natural utilizarmos os eventos,
pois são eles, de certa forma, que tornam a aplicação interativa, como
uma ação que é disparada com o movimento do mouse.

O desafio para esta aula é utilizar o Javascript para realizar uma ação de
verificar se os campos de uma tela de login (e-mail e senha) estão
preenchidos; se não estiverem, deverá aparecer uma mensagem
informando ao usuário que os campos não estão preenchidos. Trate,
também, o oposto disso.

Ao longo das aulas, você, certamente, identificará a existência desse

tipo de recurso a partir da sua experiência de usuário. Esperamos que
goste do que vai encontrar nesta unidade, pois enriquecerá a sua prática
no desenvolvimento de aplicações web. Que tal dominar a programação
orientada a eventos?

Bons estudos!

Vamos Começar!

Definindo eventos

Eventos são ações ou ocorrências que acontecem no sistema que

estamos desenvolvendo, e este, por sua vez, nos alerta sobre essas
ações, para que possamos responder de alguma forma, se desejado
(MDN, 2023).

Para lidar com esse tipo de situação, é possível realizar o tratamento de

um evento, que pode ser feito com uma função Javascript que
registramos no navegador, que chama quando ocorre algum tipo de
evento específico (Flanagan, 2013).

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 2/42
16/04/2025, 21:22 Programação Orientada a Eventos

Pode-se, ainda, com o uso de programação orientada a eventos, realizar

diversas tarefas que tornam a relação entre usuário e aplicação muito
mais significativa. Eventos permitem aumentar ainda mais o grau de
dinamismo de uma aplicação escrita para web, mas é importante estar
atento para que um determinado evento seja utilizado no momento
adequado.

Relacionando eventos com uma solução

tradicional

Um dos exemplos mais significativos do emprego de programação

orientada a eventos está presente no dia a dia da maioria das pessoas
que costumam realizar compras pela internet. Já sabe do que eu estou
falando? Se você pensou no cadastro que é necessário ter em um site
de ecommerce, você acertou.

Todo site de ecommerce exige que o usuário realize um cadastro com as

principais informações pessoais e dados de endereço, afinal, caso o
usuario efetive uma compra, faz-se necessário saber para onde o
produto deverá ser encaminho, não é mesmo? Esses cadastrados
precisam ser validados de alguma maneira, para melhorar a experiência
do usuário, bem como garantir que as informações dadas sejam válidas.
Nós, então, iniciamos pela informação mais básica: o nome. Você pode
desenvolver várias formas de validação; para o exemplo demonstrado a
seguir, vamos utilizar uma escolhida para ampliar o seu rol de
conhecimento: a propriedade textContent, que torna a validação
agradável ao usuário.

Veja o código HTML simples, com um campo para inserção de nome:

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 3/42
16/04/2025, 21:22 Programação Orientada a Eventos

Figura 1 | Código HTML simples - validanome.html. Fonte: elaborada pelo

autor.

Figura 2 | validanome.css. Fonte:

elaborada pelo autor.

Vamos para o arquivo Javascript. Nele, pegamos os campos de

mensagem e o campo de nome pelos seus Ids; depois, verificamos se o
tamanho do conteúdo do campo nome era igual a zero (0).

Se o tamanho do conteúdo for zero, ele mostrará a mensagem “Informe

o nome” em vermelho; se não for, ele exibirá um alerta dizendo “olá”
mais o nome digitado. Veja:

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 4/42
16/04/2025, 21:22 Programação Orientada a Eventos

Figura 4 | Arquivo Javascript – validanome.js. Fonte: elaborada

pelo autor.

Figura 5 | Resultado sem nome.

Fonte: elaborada pelo autor.

Figura 6 | Resultado com nomeFonte:

elaborada pelo autor.

Como você pode ver, o Javascript cumpre bem uma das principais
qualidades que o tornam indispensável na programação web: sua
utilização para verificação e validação local dos dados de um formulário,
evitando a realização de requisições desnecessárias ao servidor web e
melhorando drasticamente o desempenho da página (Oliveira, 2020).

Siga em Frente...

Tipos de eventos

Com o avanço da internet e de todas as tecnologias relacionadas a ela,

os eventos, que antes eram limitados, passaram a ser variados. Uma
das tecnologias mais presentes em nossas vidas, o aparelho celular, por

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 5/42
16/04/2025, 21:22 Programação Orientada a Eventos

sua característica de uso baseado em toque, exigiu a definição de novos

tipos de eventos de toque e gesto.

Segundo Flanagan (2013), os eventos, portanto, podem ser agrupados

por categoria: eventos de entrada dependentes de dispositivo, eventos
de entrada independentes de dispositivo, eventos de interface com o
usuário, eventos de mudança de estado, eventos específicos da API e
rotinas de tratamento de cronômetros e erro. No entanto, ainda segundo
o autor, existem os tipos legados, ou seja, aqueles que já existem há
mais tempo e que são universalmente suportados. Os principais são:

Eventos de formulário.
Eventos de janela.
Eventos de mouse.
Eventos de teclado.

Entre os eventos legados mais utilizados, estão os eventos de

formulário, pois este é um dos recursos mais utilizados no
desenvolvimento de aplicações web. Neles, existem diversos elementos
que podem ser afetados por eventos, como botões, campos de texto e
botões de opção. O evento que geralmente é utilizado é o evento
submit, que serve para realizar persistência em bases de dados, e vale a
pena saber mais sobre os eventos legados. Confira o Saiba mais e veja
as sugestões de leitura sobre eventos.

Vamos Exercitar?
Um dos problemas mais comuns encontrados e resolvidos com a
utilização de eventos diz respeito à validação de campos de formulários.
Esses formulários, por sua vez, podem ser diversos, logo, é muito
importante que você compreenda como utilizar a programação orientada
a eventos para lidar com isso.

Para pôr em prática tudo que aprendemos, vamos construir uma

pequena aplicação de tela de login para, com o auxílio de eventos,
realizar a validação dos campos dessa tela. A proposta é simples:
verificar se os campos foram preenchidos e informar o usuário para que

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 6/42
16/04/2025, 21:22 Programação Orientada a Eventos

faça o correto preenchimento ou, dar os parabéns pelo preenchimento

feito. Veja como ficará nosso código HTML e CSS:

Figura 7 | Códigos - login.html. Fonte: elaborada pelo autor.

Figura 8 | Códigos CSS -

login.css – parte 1. Fonte:
elaborada pelo autor.

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 7/42
16/04/2025, 21:22 Programação Orientada a Eventos

Figura 9 | Códigos CSS -

login.css – parte 2. Fonte:
elaborada pelo autor.

Agora, vejamos o código Javascript que fará o trabalho proposto no

problema em estudo:

Figura 10 | login.js. Fonte: elaborada pelo autor.

As três primeiras linhas servem para coletar os elementos por seus

respectivos Ids; depois, adiciona-se um evento ao botão e, dentro do
evento, uma função que verificará se os campos de e-mail e senha
foram informados. Caso um dos campos não seja informado, aparecerá
uma caixa de diálogo com uma mensagem informando ao usuário que
os campos e-mail e senha devem ser preenchidos. Caso eles tenham
sido preenchidos, aparecerá uma caixa de diálogo com uma mensagem
informando que os campos foram preenchidos.

Perceba que essa validação pode ser feita de diversas formas. Vamos,
agora, dar uma olhadinha no resultado, para ver como ficou:

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 8/42
16/04/2025, 21:22 Programação Orientada a Eventos

Figura 11 | Resultado da validação: e-mail ou senha não preenchidos. Fonte:

elaborada pelo autor.

Figura 12 | Resultado da validação: e-mail e senha preenchidos. Fonte: elaborada

pelo autor.

Não existe uma forma única de cumprir a tarefa de validação dos

campos propostos. Muito está ligado à criatividade e lógica de quem
está lidando com a situação e precisa pensar numa solução para
resolvê-la. Então, pratique e exercite sua criatividade.

Saiba Mais
https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 9/42
16/04/2025, 21:22 Programação Orientada a Eventos

Sugerimos a leitura do Capítulo 17 – Tratando eventos, do livro

JavaScript: o guia definitivo, que trata de eventos,

FLANAGAN, D. JavaScript: o guia definitivo. Tradução: João Eduardo

Nóbrega Tortello. 6. ed. Porto Alegre: Bookman, 2013.

Leia também o artigo Introdução a eventos.

MDN WEB DOCS. Introdução a eventos. 2023.

Referências Bibliográficas
FLANAGAN, D. JavaScript: o guia definitivo. Tradução: João Eduardo
Nóbrega Tortello. 6. ed. Porto Alegre: Bookman, 2013.

MDN WEB DOCS. Introdução a eventos. 2023. Disponível em:

https://developer.mozilla.org/pt-
BR/docs/Learn/JavaScript/Building_blocks/Events. Acesso em: 12 jan.
2024.

OLIVEIRA, C. L. V.; ZANETTI, H. A. P. Javascript descomplicado:

programação para web, IOT e dispositivos móveis. São Paulo: Érica,
2020.

Aula 2

EVENTOS

Eventos
Estudante, esta videoaula foi preparada especialmente para você. Nela,
você irá aprender conteúdos importantes para a sua formação
profissional. Vamos assisti-la?

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 10/42
16/04/2025, 21:22 Programação Orientada a Eventos

Clique aqui para acessar os slides da sua videoaula.

Bons estudos!

Ponto de Partida
Olá, estudante, nós daremos continuidade ao estudo de eventos. Como
já vimos, os eventos oportunizam o emprego de recursos de
interatividade, uma vez que permitem o tratamento de qualquer
mudança ou comportamento sofrido no documento web. Por exemplo,
com eles, é possível, dar foco a um determinado campo.

Agora, vamos conhecer eventos que nos permitem observar mudanças

e, a partir disso, nos possibilita aplicar ações sobre essas mudanças,
com o objetivo de melhorar a experiência do usuário no uso da aplicação
web.

A fim de entender melhor o tópico central desta aula, você criará uma
aplicação para pessoas que estão sendo alfabetizadas, para que,
utilizando a sua aplicação, possam conhecer melhor o alfabeto.
Desenvolva um protótipo com as seis primeiras letras, de A à F. O
funcionamento é simples: a pessoa clicará em uma letra e, um campo
com essa letra receberá foco, para que a pessoa possa redigir uma
palavra que inicie com a letra escolhida. Ao escolher a letra, ela sumirá
da lista de letras disponíveis, evitando confusão no processo de
aprendizagem.

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 11/42
16/04/2025, 21:22 Programação Orientada a Eventos

Você nunca sabe que resultados virão da sua ação. Mas se você não
fizer nada, não existirão resultados (Mahatma Gandhi).

Bons estudos!

Vamos Começar!

Eventos de foco e desfoco

A utilização de recurso de foco e desfoco tem um propósito muito óbvio.

Quando pensado a partir do contexto do desenvolvimento de aplicações
web, pode ser empregado para as mais variadas possibilidades. Você
pode pensar na utilização do foco de um dado campo de formulário para
chamar a atenção do usuário, evitando, assim, que ele faça o uso
incorreto da aplicação, ou ainda, pensar no público da terceira idade,
uma vez que o uso do foco e desfoco pode facilitar a aplicação,
mostrando um percurso a ser seguido pela pessoa que está utilizando o
aplicativo web. Veja um exemplo de uso de foco e desfoco numa
aplicação formulário de contato presente em vários sites na internet:

Figura 1 | Exemplo de uso de foco e desfoco em formulário. Fonte: elaborada pelo autor.

Note que o campo nome aparece com foco, quando sofre a ação do
clique do mouse, e isso favorece a compreensão do fluxo a ser seguido
no formulário.
https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 12/42
16/04/2025, 21:22 Programação Orientada a Eventos

Quando se fala da ação de desfocar, ou seja, perder o foco, é possível

utilizar recursos que executem uma ação. Por exemplo, é possível
utilizar o evento onblur, que é uma rotina de tratamento de evento que
executa uma ação quando um elemento perde o foco de entrada
(Flanagan, 2013).

Siga em Frente...

Eventos de interface do usuário

Define-se Interface como o meio pelo qual o usuário interage com o

computador (Barreto; Barboza, 2018), por esse motivo, considera-se a
linguagem Javascript com sendo a responsável por manter a interação
da interface com o usuário de forma perceptiva e agradável, afinal de
contas, devemos pensar sempre na experiência do usuário. Alguns dos
eventos mais utilizados e conhecidos estão:

Evento Local de uso

focus Em formulários e eventos Window (janela).
É disparado quando o usuário modifica o valor de um
change
elemento, como <input> e <select>.
blur Remove o foco de teclado do elemento atual
submit Utilizando quando se submete um formulário

Quadro 1 | Local de uso de eventos. Fonte: adaptado de MDN (2023).

Uma área em que a necessidade de eventos cresceu muito é a de

interfaces de dispositivos móveis. Por esse motivo, alguns eventos
foram e são criados para atender às demandas desse meio de
interação, e alguns eventos touchscreen são mapeados nos tipos de
eventos tradicionais, como o click e o scroll (Flanagan, 2013). Por
exemplo, a Apple criou eventos de gesto de mudança de escala e
rotação feitos com dois dedos.

Evento Utilidade
gesturestart É disparado quando um gesto começa.
gestureend É disparado quando o gesto termina.
gesturechange Usado para monitorar o progresso do gesto.
touchstart Disparado quando o dedo toca na tela.
touchmove Disparado quando o dedo se move.
touchend Disparado quando o dedo é tirado da tela.
https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 13/42
16/04/2025, 21:22 Programação Orientada a Eventos

Quadro 2 | Eventos. Fonte: adaptado de Flanagan (2013).

Mutation event e mutation observers

Mutation event é uma abordagem considerada inicial para se detectar e

responder às alterações do DOM. Graças a ela, foi possível configurar
os chamados ouvintes de eventos específicos de modificação, como
inserção de elementos, alteração de atributos ou remoção de nós, no
entanto, apresentava alguns problemas de inconsistência entre
navegadores. Um exemplo é o método addEventListener().

Diante desses problemas do Mutation event, foi criado o Mutation

observer, que é uma API JavaScript global que fornece aos
desenvolvedores uma maneira de reagir às modificações do DOM ou
tratá-las (Toreini, 2019). Considerado um construtor que serve para
instanciar novos observadores de mutação do DOM, ele conta com
vários métodos e propriedades úteis na construção de código.

Vamos Exercitar?
Ao longo da aula, nós compreendemos um pouco mais os eventos, seus
tipos, aplicação e conhecemos detalhes importantes que farão toda a
diferença em nossa prática enquanto pessoas responsáveis pela criação
de soluções em aplicativos web.

Agora, vamos colocar em prática um pouco esse conhecimento e

construir a aplicação que será utilizada para pessoas que estão em
processo de alfabetização, conforme foi apresentada no início da aula.
Se você percebeu, falamos muito sobre interface e sua relevância na
experiência do usuário, portanto, não podemos deixar de pensar na
usabilidade de nossa aplicação. Para facilitar esta etapa, vamos utilizar
o Bootstrap 5 (ou superior) como framework para a parte visual do site,
ou seja, estilo com CSS. A interface de nosso site deverá ficar assim:

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 14/42
16/04/2025, 21:22 Programação Orientada a Eventos

Figura 2 | Interface do site. Fonte: elaborada pelo autor.

Para esse projeto, foram escolhidos tons de verde, e como se trata de

um protótipo, em baixo, ficaram 6 letras, de A à F. Ao clicar sobre uma
delas, a letra some e o campo referente à letra é colocado em foco, com
a cor de fundo alterada. Por exemplo, quando a letra D é clicada, isso
acontece:

Figura 3 | Teste com a letra D. Fonte: elaborada pelo

autor.

O campo fica com foco e muda de cor para que a pessoa que utilizar a
aplicação saiba qual letra escolheu e onde digitar a palavra que se inicia
com aquela letra, como mencionado no escopo da proposta. Agora,
vamos ver o código para a criação dessa aplicação:

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 15/42
16/04/2025, 21:22 Programação Orientada a Eventos

Figura 4 | Código de criação da aplicação –

escolheletra.html – parte 1. Fonte: elaborada pelo
autor.

Figura 5 | Código de criação da aplicação –

escolheletra.html – parte 2. Fonte: elaborada pelo
autor.

Figura 6 | Código de criação da aplicação –

escolheletra.html – parte 3. Fonte: elaborada pelo
autor.

Note que na linha 8 foi inserido o caminho CDN para o uso do Bootstrap.
Na parte de cima da página, construímos os títulos e campos em que o
usuário deverá digitar alguma palavra que comece com a letra
escolhida; abaixo, aparecerá uma tabela para que o usuário possa clicar
e escolher a letra que desejar. Foi utilizado, também, um CSS simples
no elemento h, para colocar cor de fundo nos elementos label utilizados
no projeto. Veja:

Figura 7 | Código CSS. Fonte: elaborada pelo autor.

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 16/42
16/04/2025, 21:22 Programação Orientada a Eventos

Agora, vamos observar o Javascript utilizado para esse projeto:

Figura 8 | selecionaletra.js - Parte 1. Fonte: elaborada

pelo autor.

Figura 9 | selecionaletra.js - Parte 2. Fonte: elaborada

pelo autor.

O código coleta os elementos dos campos em que o usuário digitar algo

pelo ID, obtém o elemento da tabela e, utilizando o método
addEventListenter(), verifica qual elemento está sendo acionado pelo
click do mouse; com isso, ele coloca o campo do tipo input em foco e
modifica sua cor de fundo. Simples, não é?

Saiba Mais
Sugerimos o capítulo sobre Projeto de interface com o usuário, do livro
Interface humano-computador.

BARRETO, J. dos S. et al. Interface humano-computador. Porto

Alegre: SAGAH, 2018.

Saiba mais sobre MutationObserver.

MDN WEB DOCS. MutationObserver. 2023.

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 17/42
16/04/2025, 21:22 Programação Orientada a Eventos

Saiba mais sobre Javascript Events.

W3SCHOOLS. JavaScript Events. [s. d.]

Referências Bibliográficas
BARRETO, J. dos S. et al. Interface humano-computador. Porto
Alegre: SAGAH, 2018.

FLANAGAN, D. JavaScript: o guia definitivo. 6. ed. Porto Alegre:

Bookman, 2013.

TOREINI, E. et al. DOMtegrity: ensuring web page integrity against

malicious browser extensions. International Journal of Information
Security, Heidelberg, v. 18, n. 6, p. 801-814, 2019.

Aula 3

INTERAÇÃO COM INTERFACE

FÍSICA E LÓGICA

Interação com interface física e

lógica
Estudante, esta videoaula foi preparada especialmente para você. Nela,
você irá aprender conteúdos importantes para a sua formação
profissional. Vamos assisti-la?
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 18/42
16/04/2025, 21:22 Programação Orientada a Eventos

Ponto de Partida
Olá, estudante!

Iniciamos, nesta unidade, nossos estudos de eventos, que, como já

vimos em outros momentos, nos auxiliará na construção da experiência
com o usuário que utilizará nossa aplicação.

Existem muitas possibilidades de aplicação dos conhecimentos de

manutenção de eventos utilizando a linguagem Javascript, e para que
isso fique evidente, hoje, veremos uma situação um tanto quanto
inusitada para ser resolvida com a utilização de eventos.

Um tema muito importante e que frequentemente esquecemos é o da

inclusão, por esse motivo, o seu desafio na aula de hoje é construir um
protótipo de aplicação que capture a posição do mouse na tela à medida
que ele é movido dentro de uma página web. Isso é importante pois
apoia o desenvolvimento de projetos que consideram o público com
baixa ou nenhuma visão, como público potencial para uso das
aplicações desenvolvidas por você e sua equipe.

Diante disso, desenvolva seu lado profissional e fique ligado em temas

como o da inclusão, pois é crescente a necessidade de profissionais no
mercado com essa sensibilidade.

Bons estudos!

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 19/42
16/04/2025, 21:22 Programação Orientada a Eventos

Vamos Começar!

Eventos de formulário

Antes de qualquer coisa, tenha em mente que os eventos utilizados para

formulários são aqueles que, de alguma forma, destinam-se às
interações com elementos de um formulário. No entanto, não é tão
dividido assim!

Podemos pensar em evento aplicado a formulário iniciando com um

exemplo bem simples. A validação de campos de Nome e sobrenome.
Veja esse fragmento de código:

Figura 1 | Fragmento de código. Fonte: adaptada de MDN (2023).

A validação de formulários é algo indispensável, e utilizar o Javascript é

crucial para se evitar problemas com dados informados pelos usuários
(Miletto; Bertagnolli, 2014). Note que, na linha 7, o evento utilizado no
fragmento de código apresentado foi o onsubmit, típico de formulário
cujos dados são enviados.

Outros exemplos de evento possível de se utilizar em formulário são o

evento formdata e o evento reset. O primeiro é acionado após a
construção da lista de entradas que representa os dados do formulário,
e isso acontece quando o formulário é enviado, mas também pode ser
acionado pela invocação de um construtor FormData() (MDN, 2023); já o
segundo é acionado quando um formulário é redefinido.

Siga em Frente...

Eventos de mouse e teclado

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 20/42
16/04/2025, 21:22 Programação Orientada a Eventos

Eventos de mouse e teclado são variados e podem e devem ser

empregados em situações de uso adequado. Os eventos de mouse
podem ser utilizados nas mais variadas situações, como a captura de
movimento do mouse ou a ação de clique dele. Além disso, há que se
considerar que existem eventos que são independentes de dispositivos
e existem aqueles que são dependentes, como é o caso do
onmousedown e do onmouseover.

Quando o assunto é acessibilidade, faz-se importante utilizar os eventos

que são independentes, como onfocus e onchange (Flanagan, 2013).

Vejamos os eventos de mouse no quadro a seguir:

Evento Ocorre quando

onclick O usuário clica em um elemento.
ondbclick O usuário clica duas vezes em um elemento.
onmousedown O usuário pressiona o botão do mouse sobre um elemento.
onmousemove O ponteiro do mouse está em movimento na tela.
onmouseover O ponteiro do mouse está sobre o elemento.
onmouseout O usuário move o ponteiro do mouse para fora do elemento.
onmouseup O usuário solta o botão do mouse sobre um elemento.

Quadro 1 | Eventos de mouse. Fonte: adaptado de Miletto e Bertagnolli

(2014).

Os eventos de teclado são poucos, mas muito úteis em muitas

situações. Apesar de poucas opções, os eventos de teclado, geralmente
associados a outros eventos e recursos, podem significar uma excelente
estratégia tecnológica. Os principais eventos de teclado são:

Evento Ocorre quando

onKeyDown O usuário está pressionando uma tecla.
onKeyPress O usuário pressiona uma tecla.
onKeyUp O usuário solta a tecla (previamente pressionada).

Quadro 2 | Principais eventos de teclado. Fonte: adaptado de Miletto e

Bertagnolli (2014).

Há uma sutil diferença entre keyPress e keyDown; o último é disparado

para teclas que produzem e que não produzem um caractere.

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 21/42
16/04/2025, 21:22 Programação Orientada a Eventos

Eventos mobile

Os eventos do toque surgiram com a finalidade de dar suporte de

qualidade para interfaces baseadas em toque. Eventos dessa natureza
interpretam a atividade em telas sensíveis ao toque (MDN Web Docs,
2023), e algumas definições são relevantes para se compreender o
funcionamento desse tipo de evento. Primeiro, é importante que haja a
superfície sensível ao toque, e pode ser uma tela ou trackpad; depois,
temos o ponto de contato com a superfície, geralmente, feita com o dedo
das mãos, e só então temos os eventos atuando na aplicação.

Veja alguns exemplos a seguir:

Evento Ocorre quando

ontouchcancel O toque é interrompido.
ontouchend O dedo é removido da tela.
ontouchmove O dedo se move na tela.
ontouchstart O dedo entra em contato com a tela.

Quadro 3 | Exemplos de eventos de toque. Fonte: adaptado de W3C

(2023).

Você deve ter percebido quão ricas são as opções que nós, pessoas
que escrevem códigos de programa, temos ao nosso dispor. Por esse
motivo, é muito importante conhecer minimamente essas opções,
estudá-las e aplicá-las, para saber, num momento de criação de uma
solução web, que essas opções podem ser utilizadas. Por isso, leia todo
o material recomendado, pois só assim você enriquecerá o seu
vocabulário de programação.

Vamos Exercitar?
Como vimos no início da aula, o desafio é criar um protótipo de
aplicação que obtenha, da área de navegação de um browser, a posição
em que o mouse se encontra. Note que não é importante implementar
algo complexo; esse trabalho será a base para o desenvolvimento de
aplicações cujo propósito será disponibilizar ferramentas de
acessibilidade e inclusão de pessoas com baixa ou nenhuma visão.

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 22/42
16/04/2025, 21:22 Programação Orientada a Eventos

Vamos iniciar o código construindo uma página html que contenha uma
div que guardará as posições X e Y da tela, por onde o ponteiro do
mouse transitará. O código HTML ficará da seguinte maneira:

Figura 2 | Código HTML. Fonte: elaborada pelo autor.

Note que se trata de um projeto simples, que mostra um título na página

que diz “Posição do mouse” e cria uma div, em que os dados de posição
serão apresentados. O CSS dá conta somente da cor da página e dos
dados que serão exibidos. Veja:

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 23/42
16/04/2025, 21:22 Programação Orientada a Eventos

Figura 3 | Código CSS. Fonte: elaborada pelo autor.

Agora, temos o código Javascript para a solução do problema

apresentado. Para tanto, utilizaremos o evento de movimento do mouse,
chamado mousemove; com ele, capturaremos os valores das posições x
e y de nossa tela. O código ficará assim:

Figura 4 | Código Javascript. Fonte: elaborada pelo autor.

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 24/42
16/04/2025, 21:22 Programação Orientada a Eventos

O resultado do projeto fica bem interessante, com os dados

acompanhando o ponteiro do mouse à medida que você o movimento
dentro do navegador.

Figura 5 | Resultado do projeto. Fonte: elaborada pelo autor.

Saiba Mais
Sugerimos a leitura do Capítulo 5 – Comportamento com JavaScript, do
livro Desenvolvimento de software II: introdução ao desenvolvimento
web com HTML, CSS, javascript e PHP.

MILETTO, E. M.; BERTAGNOLLI, S. C. Desenvolvimento de software

II: introdução ao desenvolvimento web com HTML, CSS, javascript e
PHP. Porto Alegre: Bookman, 2014.

Assista ao tutorial sobre o uso do evento onclick com HTML e

Javascript.

CHRIS, K. Tutorial sobre button onclick em HTML e evento de clique

em JavaScript. Traduzido por Daniel Rosa, 2021.

Sugerimos, também, a leitura do artigo Desenvolvimento para

Dispositivos Móveis usando Tecnologias Web com Ênfase em Jogos,
que trata do uso de tecnologias web para desenvolvimento de jogos.

SANTANCHÈ, A. et al. Desenvolvimento para Dispositivos Móveis

usando Tecnologias Web com Ênfase em Jogos. 2013.

E, por fim, encontre mais informações sobre eventos de toque no link.

W3SCHOOL. HTML DOM TouchEvent.[s. d.].

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 25/42
16/04/2025, 21:22 Programação Orientada a Eventos

Referências Bibliográficas
FLANAGAN, D. JavaScript: o guia definitivo. Tradução: João Eduardo
Nóbrega Tortello. 6. ed. Porto Alegre: Bookman, 2013.

MDN WEB DOCS. Introdução a eventos. 2023. Disponível em:

https://developer.mozilla.org/pt-
BR/docs/Learn/JavaScript/Building_blocks/Events. Acesso em: 15 jan.
2024.

MILETTO, E. M.; BERTAGNOLLI, S. C. Desenvolvimento de software

II: introdução ao desenvolvimento web com HTML, CSS, javascript e
PHP. Porto Alegre: Bookman, 2014.

W3C SCHOOL. HTML DOM touchEvent. [s. d.]. Disponível em:

https://www.w3schools.com/jsref/obj_touchevent.asp. Acesso em: 15 jan.
2024.

Aula 4

EVENTOS EM NÍVEL DE
PÁGINA

Eventos em nível de página

Estudante, esta videoaula foi preparada especialmente para você. Nela,
você irá aprender conteúdos importantes para a sua formação
profissional. Vamos assisti-la?
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 26/42
16/04/2025, 21:22 Programação Orientada a Eventos

Ponto de Partida
Olá, estudante! Nesta aula, falaremos um pouco da importância das
técnicas e métodos que possibilitam a organização do processo de
desenvolvimento de uma aplicação web. Pensar na fase do projeto do
software é fundamental para assegurar a qualidade do produto que está
em desenvolvimento, e conhecer brevemente algumas metodologias
oportunizará um aprofundamento desse conhecimento. Você verá que é
indispensável discutir esse tema, mesmo que repetidas vezes, pois é
algo que nunca se dissipa; há sempre algo novo a se pensar, e a prática
na utilização de técnicas de gestão de projetos favorece a qualidade, a
redução de custo e o cumprimento de prazos.

Como desafio, temos um problema simples que precisa de eventos CSS

e do Javascript para ser resolvido. Como é possível inserir uma
animação no formulário de login, criado em aulas anteriores, para que,
ao pressionar o botão Login da tela, o formulário vá para cima e suma
da tela? Você tem alguma ideia de como resolver isso?

Por fim e não menos importante, abordaremos maneiras de lidar com

eventos no CSS e HTML5, já que essas linguagens são utilizadas com o
Javascript, mas lembre-se de que não há como programar com
Javascript focado na web sem o uso das linguagens HTML e CSS.
Dedique sua atenção ao estudo desse tema, uma vez que fará muito

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 27/42
16/04/2025, 21:22 Programação Orientada a Eventos

sentido na sua atuação na construção de aplicações web. Seu empenho

e esforço farão diferença, portanto, aproveite ao máximo esta aula.

Bons estudos!

Vamos Começar!

Criando um projeto

Ao longo de tudo que já foi visto sobre Javascript, você deve ter
percebido a importância de se ter métodos e processos bem definidos
para trabalhar no campo da programação. A utilização de estratégias,
técnicas e ferramentas no desenvolvimento de aplicações é crucial e
determinante para que você consiga trabalhar num determinado
intervalo de tempo e entregar o que se espera do seu esforço. Por esse
motivo, vamos falar um pouco sobre projetos.

Não é a nossa intenção dedicar todo o tempo disponível ao estudo do

tema, mas vamos conceituar minimamente o termo e entender sua
utilização no contexto do desenvolvimento de aplicações web. Para
Alves (2015), um projeto pode ser definido como um evento com um
tempo de duração predefinido e temporário. Em um projeto,
principalmente da área de software, costuma-se ter várias pessoas
dedicadas ao seu desenvolvimento. Existem propostas diversas de
metodologias para projetos, e na área do desenvolvimento de software,
as metodologias ágeis têm sido muito utilizadas. O desenvolvimento ágil
envolve mudanças rápidas e prioriza, às vezes, agilidade ante à
qualidade (Maschietto et. al., 2020). Geralmente, no desenvolvimento
ágil, equipes multidisciplinares são formadas e, basicamente, dá-se
prioridade à conversa em vez de documentação, diminuindo, assim, a
rigidez.

Eventos CSS

Com a linguagem de estilo CSS, é possível elaborar animações que

tornam o produto de website que está sendo desenvolvido muito mais
interessante. Com essa linguagem, também é possível utilizar eventos

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 28/42
16/04/2025, 21:22 Programação Orientada a Eventos

para a criação de coisas, como animação, somente com o CSS.

Vejamos alguns eventos mais conhecidos:

Evento Descrição
animationstart Acionado quando uma animação CSS é iniciada.
Disparado quando uma iteração de animação CSS termina e outra
animationiteration
se inicia.
animationend Acionado quando uma animação CSS é concluída.
animationcancel Acionado quando uma animação CSS é abortada inesperadamente.

Quadro 1 | Eventos mais conhecidos. Fonte: adaptado de MDN Web

Docs (2023).

Para que entenda melhor o uso desse tipo de recurso, vamos melhorar
nosso projeto de tela de login, aquele que criamos em aulas anteriores.
Agora, vamos utilizar uma regra CSS chamada @keyframes, que serve
para controlar etapas intermediárias em uma sequência de animação
CSS, em que é empregado o estilo por quadros-chave. Veja:

Figura 1 | Código CSS. Fonte: elaborada pelo autor.

Adicionamos, ao final do arquivo CSS que já havíamos construído, o

código que está entre as linhas 68 e 82; chamamos a regra Keyframe e,

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 29/42
16/04/2025, 21:22 Programação Orientada a Eventos

nela, adicionamos o ponto de partida (from) e ponto de chegada (to) e

definimos a opacidade e transform para criar o efeito de animação. A
opacidade cria a sensação de que o formulário está surgindo e o
transform modifica seu tamanho, aumentando-o levemente. Abra o seu
projeto e veja o resultado dessa simples modificação. Não ficou mais
elegante?

Siga em Frente...

Eventos HTML5

A linguagem HTML oferece muitos eventos, como já vimos

anteriormente, e esses eventos podem ser associados à utilização de
eventos em CSS e, com isso, resultar num projeto de qualidade
indiscutível. De maneira muito simples, os eventos podem ser utilizados
para atuar sobre a janela do documento em si, utilizando manipuladores
de eventos sobre os elementos do documento ou o objeto window, que
representa a própria janela aberta no browser.

Como pode ver, as possibilidades são variadas, por isso, faz-se

importante conhecer mais alguns eventos indispensáveis na construção
de aplicações web. Vejamos:

Evento Chamado quando

ononline O browser detecta conectividade e está trabalhando em modo online.
onoffline O browser não detecta conectividade e está trabalhando em modo offline.
onresize O evento é disparado quando a janela do navegador é redimensionada.
onload Quando a página está carregada.
onunload Quando a página é descarregada ou a janela é fechada.
onerror O carregamento do recurso falhou (normalmente, por erro na rede).

Quadro 2 | Eventos indispensáveis. Fonte: adaptado de Flanagan

(2013).

Vamos ver um exemplo de uso do onresize e mostrar as dimensões de

largura e altura na página à medida que a janela é redimensionada. Veja
o exemplo de código HTML para isso:

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 30/42
16/04/2025, 21:22 Programação Orientada a Eventos

Figura 2 | Exemplo de código HTML. Fonte: adaptada de MDN (2023).

Agora, o código Javascript que vai chamar o evento onresize, veja:

Figura 3 | Código Javascript para chamar o evento

onresize. Fonte: adaptada de MDN (2023).

Execute o código e veja como ficará o projeto direto no navegador, mas

não se esqueça de redimensionar a janela do navegador para ver o
resultado de uso do evento onresize.

Vamos Exercitar?
Nós já havíamos construído um formulário de login em aulas anteriores,
por isso, aproveitaremos o código já elaborado para conduzir os estudos
propostos para esta aula. Aliás, vamos aproveitar a animação que já
fizemos nesta aula e apenas complementá-la. A intenção, agora, é
aplicar outro efeito de animação com CSS ao formulário do login,
fazendo com que esse formulário suba na página, saindo dela,
causando a impressão de que estamos entrando em outra área.

Para tornar essa impressão mais realista, criaremos um arquivo html

chamado site.html, que servirá para essa mudança de página. Como já
tínhamos Javascript para validação do login, comentaremos esse código
para verificar somente a animação que estamos fazendo, assim,
evitaremos confusão com o estudo que estamos conduzindo agora. O
nosso código HTML desse projeto ficará da seguinte forma:

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 31/42
16/04/2025, 21:22 Programação Orientada a Eventos

Figura 4 | Código HTML do projeto. Fonte: elaborada pelo autor.

Agora, nosso código CSS não sofrerá alterações; aliás, nele, haverá
novos códigos. Vamos construir as animações, lembrando que
revisitaremos animações que já fizemos anteriormente. O código
(somente a parte das animações) ficará da seguinte forma:

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 32/42
16/04/2025, 21:22 Programação Orientada a Eventos

Figura 5 | Código CSS. Fonte: elaborada pelo autor.

A regra chamada “suave” nós criamos anteriormente, agora, foi adiciona

a regra “top” (linha 89), que será responsável pelo movimento do
formulário no sentido vertical, para cima. Será necessário trabalhar com
o valor translateY, pois ele é o responsável por esse movimento vertical
solicitado no desafio proposto para hoje.

Já o código javascript fica responsável pelos eventos de click e o

animationend, que será executado ao final da animação. Veja o código:

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 33/42
16/04/2025, 21:22 Programação Orientada a Eventos

Figura 6 | Código Javascript. Fonte: elaborada pelo autor.

Ao final da animação (animationend), após o botão ser clicado, o

formulário será ocultado (linha 12) e uma nova página será aberta,
site.html, conforme consta na linha 13. Execute o projeto e veja o
resultado.

Saiba Mais
Sugerimos a leitura do Capítulo 3, do livro Projetos de Sistemas Web
Conceitos, Estruturas, Criação de Banco de dados e Ferramentas de
Desenvolvimento, que trata de Gestão de projetos.

ALVES, W. P. Projetos de sistemas web conceitos, estruturas,

criação de banco de dados e ferramentas de desenvolvimento. 1.
ed. São Paulo: Érica, 2015.

Veja também a obra Desenvolvimento de Software com Metodologias

Ágeis.

MASCHIETTO, L. G. et al. Desenvolvimento de software com

metodologias ágeis. Porto Alegre: SAGAH, 2020.

Referências Bibliográficas
ALVES, W. P. Projetos de sistemas web conceitos, estruturas,
criação de banco de dados e ferramentas de desenvolvimento. 1.
ed. São Paulo: Érica, 2015.

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 34/42
16/04/2025, 21:22 Programação Orientada a Eventos

FLANAGAN, D. JavaScript: o guia definitivo. Tradução: João Eduardo

Nóbrega Tortello. 6. ed. Porto Alegre: Bookman, 2013.

MASCHIETTO, L. G. et al. Desenvolvimento de software com

metodologias ágeis. Porto Alegre: SAGAH, 2020.

MDN WEB DOCS. Elementos. 2023. Disponível em:

https://developer.mozilla.org/en-US/docs/Web/API/Element. Acesso em:
15 jan. 2024.

Encerramento da Unidade

PROGRAMAÇÃO ORIENTADA
A EVENTOS

Videoaula de Encerramento
Estudante, esta videoaula foi preparada especialmente para você. Nela,
você irá aprender conteúdos importantes para a sua formação
profissional. Vamos assisti-la?
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 35/42
16/04/2025, 21:22 Programação Orientada a Eventos

Ponto de Chegada
Olá, estudante, chegamos a mais um final! E que final, não é mesmo? A
competência de implementar eventos com a linguagem Javascript
pressupõe conhecer os eventos e suas finalidades. A implementação de
eventos com essa linguagem é uma forma de melhorar o
desenvolvimento de aplicações web, uma vez que esse caminho
possibilita tornar páginas dinâmicas e interativas. Com a utilização de
eventos, essa interação melhora drasticamente o que afeta diretamente
a experiência do usuário.

Existe uma quantidade muito grande de eventos com finalidades

variadas, e é preciso ter em mente que cada situação demandará uma
abordagem distinta por parte da pessoa responsável pelo
desenvolvimento do projeto web. Uma vez que você compreende e
conhece esses vários eventos, é possível aplicá-los adequadamente a
uma determinada situação cujo problema deve ser resolvido. Diante
disso, implementar eventos nas soluções que estão sendo escritas com
a linguagem Javascript será fácil e orgânica.

É Hora de Praticar!
A programação orientada a eventos é uma prática que favorece muito o
desenvolvimento de aplicações para web (Flanagan, 2013), e para que
você fixe definitivamente esse conceito, criaremos um pequeno
https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 36/42
16/04/2025, 21:22 Programação Orientada a Eventos

formulário e aplicaremos sobre ele uma forma de, por meio de eventos,
realizar a sua validação. A intenção é mostrar ao usuário que os campos
do formulário devem ser preenchidos para, então, poder avançar nas
telas.

Diante disso, para esse exercício, crie um formulário com no máximo 4

campos, sendo: nome, telefone, e-mail e CPF. Ao clicar no botão do
formulário, será exibida alguma forma de validação para orientar o
usuário. Note que esse tipo de implementação é comum no mercado de
trabalho, portanto, utilizar eventos na programação com Javascript é
base para uma boa função na área.

Perceba que a solução apresentada é uma entre várias, por esse

motivo, é valioso buscar outras formas de solucionar o problema. Tente,
ao menos, encontrar outra maneira de resolvê-lo.

Antes de finalizarmos, lembre-se de que conhecer técnicas e

ferramentas para auxiliar no gerenciamento de projetos de aplicações
web também é extremamente relevante (Alves, 2015). Entre o rol de
possibilidades, estão as metodologias ágeis, que servem como
abordagens de suporte ao processo de desenvolvimento, sobretudo
quando esse processo acontece a várias mãos, ou seja, envolve um
time repleto de conhecimentos (Maschietto et. al., 2020).

Reflita

Você conseguiu associar os eventos às suas finalidades?

É capaz de identificar que tipo de evento está sendo utilizado em
uma determinada aplicação?
Consegue implementar os principais eventos que você conheceu?

Resolução do estudo de caso

A criação do formulário de cadastro segue o proposto no enunciado.

Criamos 4 campos distintos e organizamos todos de forma a deixá-los
dentro de elementos div, para controlar o estilo e, também, a
programação com Javascript. O código proposto fica da seguinte forma:

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 37/42
16/04/2025, 21:22 Programação Orientada a Eventos

Figura 1 | Código proposto. Fonte: elaborada pelo autor.

O CSS implementado para esse projeto leva em consideração questões

como cor de fundo do projeto, centralização do formulário na página e
padronização de campos do formulário no que diz respeito a tamanho e
cores. O código proposto segue como nas imagens a seguir:

Figura 2 | Código CSS. Fonte: elaborada pelo autor.

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 38/42
16/04/2025, 21:22 Programação Orientada a Eventos

Figura 3 | Código CSS - cont. Fonte: elaborada pelo autor.

Agora, a programação com Javascript é a parte mais importante desse

processo. A solução proposta não deixará o código muito extenso,
contudo, faremos uso de eventos, escutador, seletores, métodos para
obtenção de elementos do formulário escrito em HTML, estrutura de
decisão e estrutura de repetição, basicamente. Veja o código a seguir:

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 39/42
16/04/2025, 21:22 Programação Orientada a Eventos

Figura 4 | Código HTML. Fonte: elaborada pelo autor.

O evento escolhido para a solução do problema proposto é o evento

click. Para utilizá-lo, adiciona-se um escutador ao código, o
addEventListener().

Para propormos diferentes soluções, utilizamos os métodos para

obtenção de elementos da página: o querySelector() e o
querySelectorAll(). Note que, na linha 7, criamos um array com todos os
elementos input do formulário para fazer a verificação do campo, se está
preenchido ou não, e isso acontece na linha 10. Se estiver vazio, a
animação validateErro será adicionada, executando um movimento e
causando a impressão de tremor no formulário.

Além disso, foi feita uma verificação na linha 14 e adicionado um novo

escutador, só que, agora, aplicando-se o animationend, que verifica se
os campos foram preenchidos e remove a animação validateErro.

Dê o play!

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 40/42
16/04/2025, 21:22 Programação Orientada a Eventos

Assimile

Figura | Programação orientada a eventos. Fonte: elaborada pelo autor.

Referências

ALVES, W. P. Projetos de sistemas web conceitos, estruturas,

criação de banco de dados e ferramentas de desenvolvimento. 1.
ed. São Paulo: Érica, 2015.

FLANAGAN, D. JavaScript: o guia definitivo. Tradução: João Eduardo

Nóbrega Tortello. 6. ed. Porto Alegre: Bookman, 2013.

MASCHIETTO, L. G. et al. Desenvolvimento de software com

metodologias ágeis. Porto Alegre: SAGAH, 2020.

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 41/42
16/04/2025, 21:22 Programação Orientada a Eventos

https://alexandria-html-published.platosedu.io/40118fd9-9b74-4b80-a9f1-52744cfd8bd4/v1/index.html 42/42