[UFMS Digital] Fundamentos de Web - Videoaula do Módulo 3 - Unidade 2

Prévia do material em texto

Fundamentos de Web
Prof. Dr. Leonardo Souza Silva
Módulo 3 - Interatividade em 
páginas Web
Unidade 2 — Avançando na interação com Formulários
Nesta aula…
● Vamos avançar na interatividade de nossas páginas.
● Mostrar possibilidades de aplicação do JavaScript em formulários 
construídos em Linguagem HTML.
● Reforçando a importância das folhas de estilo em cascata (CSS) 
para refinar a apresentação das informações.
Modelo de Documento por Objetos
● Do inglês: Document Model Object (DOM).
● Gerado pelo navegador no momento do carregamento da página.
○ Será por meio do DOM que o JavaScript irá se conectar ao HTML
○ Permitirá ao JavaScript modificar o comportamento da página.
■ Usando a marcação , que deve estar antes do 
fechamento da marcação , garantindo que o script 
seja carregado após o código da página, ou
■ Usando um arquivo externo, com a extensão .js.
DOM — Árvore de Objetos
Fonte: Hostinger. 2025
DOM — Aplicações para páginas HTML
● Alterar elementos HTML.
○ Inclusive remover e adicionar novos elementos.
● Alterar atributos de elementos HTML.
● Alterar a folha de estilos.
● Reagir a eventos HTML.
● Criar novos eventos HTML.
Eventos do HTML, alguns exemplos…
● Uma mudança em um elemento HTML (onchange)
● Um clique do mouse (onclick)
● Passar o mouse sobre um elemento HTML (onmouseover)
● Pressionar uma tecla do teclado (onkeydown)
● Quando a página acabar de carregar (onload)
Exemplo: Calculadora simples
Fonte: Própria
Exemplo: Calculadora simples
Fonte: Própria
Exemplo: Calculadora simples
Campo do tipo Texto
Campo Obrigatório
Identificação do Elemento HTML
Fonte: Própria
Exemplo: Calculadora simples
Fonte: Própria
Exemplo: Calculadora simples
Construção do JavaScript
Fonte: Própria
Exemplo: Calculadora simples
Construção do JavaScript
Fonte: Própria
Exemplo: Calculadora simples
Construção do JavaScript
Fonte: Própria
Exemplo: Calculadora simples
Construção do JavaScript
Fonte: Própria
Exemplo: Calculadora simples
Construção do JavaScript
Fonte: Própria
Fonte: Própria
Exemplo: Calculadora simples
Fonte: Própria
Exemplo: Calculadora simples
Importante
Fonte: Própria
● Marcação ao final da marcação .
○ Código completo disponível na parte de apoio da disciplina.
Exemplo: Calculadora simples
Importante
Fonte: Própria
● Podemos incluir a folha de estilos.
Outros Exemplos
Alterando um elemento HTML
Fonte: Própria
Alterando um elemento HTML
Fonte: Própria
Alterando um elemento HTML
Fonte: Própria
Ao clicar no botão, 
o texto da página é 
alterado!
Alterando um elemento HTML
Fonte: Própria
Alterando um elemento HTML
Fonte: Própria
HTML
JS
Alterando um elemento HTML
Fonte: Própria
HTML
JS
Alterando uma propriedade CSS 
Fonte: Própria
Alterando uma propriedade CSS 
Fonte: Própria
HTML
JS
Alterando uma propriedade CSS 
Fonte: Própria
Alterando uma propriedade CSS 
Fonte: Própria
HTML
JS
Capturando uma informação do sistema
Fonte: Própria
Capturando uma informação do sistema
Fonte: Própria
HTML
JS
Finalizando…
● Neste ponto, temos o conhecimento necessário para a construção 
de páginas e sites web avançados.
○ Importante praticar e manter-se em constante atualização.
■ Fóruns e sites especializados.
● Domínio deste conteúdo é importante para avançarmos no uso de 
ambientes de desenvolvimento baseado sem JavaScript, como, por 
exemplo: Node.js, Angular, Vue, React, dentre outras.
Referências
HOSTINGER. O que é DOM? Descubra o Coração do Desenvolvimento Web. Disponível em: 
https://link.ufms.br/OWFFI . Acesso em junho de 2025.
MAZZA, Lucas. HTML5 e CSS3: domine a web do futuro. São Paulo, SP: Casa do Código, 2014. Recurso 
on-line. ISBN 9788566250909. Capítulo 1 e Capítulo 2. Disponível na Biblioteca Digital da UFMS. 
OLIVEIRA, Cláudio Luís Vieira; ZANETTI, Humberto Augusto Piovesana. JavaScript descomplicado: 
programação para a Web, IoT e dispositivos móveis. São Paulo: Érica, 2020. ISBN 9788536533100. Capítulo 
4. Disponível na Biblioteca Digital da UFMS. 
TERUEL, Evandro Carlos. Html 5: guia prático. 2. ed. São Paulo: Érica, 2014. Recurso on-line. ISBN 
9788536519296. Capítulo 2. Disponível na Biblioteca Digital da UFMS. 
W3 Schools. JAVASCRIPT Tutorial. Disponível em: https://www.w3schools.com/js/ . Acesso em maio de 
2025.
https://link.ufms.br/OWFFI
https://pergamum.ufms.br/
https://pergamum.ufms.br/
https://pergamum.ufms.br/
https://www.w3schools.com/js/
Licenciamento
Respeitadas as formas de citação formal de autores de acordo com as normas 
da ABNT NBR 6023 (2018), a não ser que esteja indicado de outra forma, todo 
material desta apresentação está licenciado sob uma Licença Creative Commons 
- Atribuição 4.0 Internacional. 
https://creativecommons.org/licenses/by/4.0/
https://creativecommons.org/licenses/by/4.0/