0% acharam este documento útil (0 voto)

19 visualizações45 páginas

09 - CODE START Javascript Manipulação Do DOM e Eventos

O documento aborda a manipulação do DOM e eventos em JavaScript, explicando a estrutura do DOM e como interagir com elementos HTML. Ele detalha métodos para acessar e modificar elementos, além de introduzir o conceito de eventos e suas aplicações práticas. O conteúdo é voltado para o desenvolvimento de páginas web dinâmicas e interativas.

Enviado por

João Fernandes

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

19 visualizações45 páginas

09 - CODE START Javascript Manipulação Do DOM e Eventos

Enviado por

João Fernandes

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 45

< Sessão 09 - Code Start />

JAVASCRIPT:
MANIPULAÇÃO DO
DOM E EVENTOS
14 de Janeiro de 2025

Ready, set, code! 🚀

# #Recap

1 Introdução ao DOM

Métodos para acessar elementos

2
do DOM

3 Modificação de elementos com JS

DIA 11 4 Introdução a eventos

5 Configuração de eventos

6 Aplicações práticas

Persista, pois até as maiores montanhas Final do dia1 1: RESUMO, TASKS &
#
começaram como simples pedras.
TIPS.
Code Start
#recap
Janeiro, 2025

DIA 01 - Apresentação ... DIA 10 -

do Code Start e Presente Introdução ao
de Natal Bootstrap

O que já foi feito?

ENCERRAMENTO!
DIA 11 - Manipulação
... do DOM e Eventos.
Na prática, a teoria ganha vida; mas foi
com a prática que a teoria se construiu!
ANTES DE MAIS,
#REGRAS DA CASA

0. Não ligar o microfone sem a permissão do

formador
1. Participação activa
2. Dúvidas extensas devem ser retiradas a partir das
mentorias
3. Não sabotar as aulas
4. Cumprimento das tarefas

Code Start - by Nzila - X 13/01/2025

Pilares da programação Web

HTML (HyperText Markup Language)

CSS (Cascading Style Sheet)

JS (JavaScript)

Code Start - by Nzila - X 14/01/2025

Objectivos da aula:

Compreender o que é o DOM e

como ele permite a interação com
páginas HTML.

Explorar como o JavaScript

interage com elementos HTML.

Introduzir o conceito de eventos

com JS.

Code Start - by Nzila - X 13/01/2025

INTRODUÇÃO AO DOM: JAVASCRIPT

Code Start - by Nzila - X 13/01/2025

DOCUMENT OBJECT MODEL

O que é o DOM ?

O Document Object Model (DOM) é uma interface de programação que representa

a estrutura de um documento HTML ou XML como uma árvore. Essa estrutura
permite que scripts, como JavaScript, manipulem dinamicamente o conteúdo e a
aparência de uma página web.

Por que é importante?

Transforma páginas estáticas em dinâmicas e interativas.

Facilita a manipulação de conteúdo, aparência e comportamento em tempo

real.
DOCUMENT OBJECT MODEL

O que é o DOM ?

O Document Object Model (DOM) é uma interface de programação que representa

a estrutura de um documento HTML ou XML como uma árvore. Essa estrutura
permite que scripts, como JavaScript, manipulem dinamicamente o conteúdo e a
aparência de uma página web.

Por que é importante?

Transforma páginas estáticas em dinâmicas e interativas.

Facilita a manipulação de conteúdo, aparência e comportamento em tempo

real.
ESTRUTURA DO DOM
Visualização da Árvore DOM
document

Root element:

<html>
Element:

<head>

Element:

DOM Document Object Model Element:

<title>
Text:

"My title"
<body>
Element:

<h1>
Text:

"A heading"
Element: Attribute:

<a> href
Text:

"Link text"
ESTRUTURA DO DOM
Visualização da Árvore DOM
ESTRUTURA DO DOM
Componentes da Árvore DOM:

Nó raiz:<html>: É o elemento principal que engloba todo o conteúdo da página.

Ramos:<head>: Contém metadados da página, como o título, links para arquivos

CSS, scripts, etc.

<body>: Contém o conteúdo visível da página, como texto, imagens, tabelas,

formulários, etc.

Folhas: Elementos individuais: São os elementos HTML que compõem a página,

como <p>, <h1>, <img>, <div>, etc.

ESTRUTURA DO DOM

Exemplo:
ESTRUTURA DO DOM

A importância de entender a estrutura do DOM

Manipulação de elementos: Adicionar, remover ou modificar elementos HTML.

Criação de efeitos dinâmicos: Criar animações, transições e interações com o

usuário.

Construção de aplicações web complexas: Desenvolver interfaces ricas e

responsivas.
COMO USAR O DOM NO JS?

Code Start - by Nzila - X 13/01/2025

IMPLEMENTAÇÃO DO DOM NO JAVASCRIPT

O DOM como a alma da sua página web>

Imagine o DOM como o esqueleto de uma casa. Você pode construir uma casa

muito bonita, mas se você não puder mudar a disposição dos móveis ou a cor

das paredes, ela será sempre a mesma. O DOM oferece a você a capacidade de

transformar sua página web em um ambiente dinâmico e responsivo.

IMPLEMENTAÇÃO DO DOM NO JAVASCRIPT

Imagine a seguinte situação

Temos um botão em uma página HTML e um parágrafo abaixo dele. Quando o

usuário clicar no botão, queremos que o texto do parágrafo mude para "Olá,
mundo!".
IMPLEMENTAÇÃO DO DOM NO JAVASCRIPT

Código html
IMPLEMENTAÇÃO DO DOM NO JAVASCRIPT

Código Javascript
MÉTODOS PARA ACEDER AO DOM

Imagine o DOM como uma grande árvore. Cada galho e folha representa um

elemento da sua página HTML. Para interagir com esses elementos, precisamos de

ferramentas para encontrá-los. Os métodos getElementById(),

getElementsByClassName() e getElementsByTagName() são como bússolas que

nos ajudam a navegar nessa árvore e encontrar exatamente o elemento que

queremos.
MÉTODOS PARA ACEDER AO DOM

getElementById()

Função: Busca um elemento pelo seu ID.

Útil para: Aceder elementos únicos, como um formulário específico ou uma

secção da página.

Exemplo:
MÉTODOS PARA ACESSAR ELEMENTOS
DO DOM
getElementsByClassName()

Função: Busca todos os elementos que possuem uma determinada classe.

Útil para: Aplicar estilos ou eventos a vários elementos com a mesma classe.

Exemplo
MÉTODOS PARA ACESSAR ELEMENTOS
DO DOM
getElementsByTagName()

Função: Busca todos os elementos com uma determinada tag.

Útil para: Manipular todos os elementos de um tipo específico, como todos os

parágrafos (<p>) ou todas as imagens (<img>).

Exemplo:
MÉTODOS AVANÇADOS: ACESSO MAIS FLEXÍVEL

querySelector() e querySelectorAll()

Os métodos querySelector() e querySelectorAll() oferecem uma forma mais

poderosa e flexível de selecionar elementos no DOM, utilizando seletores CSS. Isso

significa que você pode combinar vários critérios para encontrar os elementos

desejados, de forma similar a como você faria em uma folha de estilos.

MÉTODOS AVANÇADOS: ACESSO MAIS FLEXÍVEL

querySelector()
Função: Retorna o primeiro elemento que corresponda ao seletor CSS
fornecido.

Útil para: Selecionar um único elemento com base em vários critérios, como ID,

classe, tag e atributos.

Exemplo:
MÉTODOS AVANÇADOS: ACESSO MAIS FLEXÍVEL

querySelectorAll()

Função: Retorna uma lista de todos os elementos que correspondem ao

seletor CSS fornecido.

Útil para: Selecionar múltiplos elementos com base em critérios complexos e

aplicar ações a todos eles.

Exemplo:
COMPARAÇÃO ENTRE OS MÊTODOS

Método Descrição Retorna

getElementById() Busca por ID Um elemento

getElementsByClassName() Busca por classe Uma lista de elementos

getElementsByTagName() Busca por tag Uma lista de elementos

Busca pelo primeiro elemento que

querySelector() Um elemento
corresponda ao seletor CSS

Busca por todos os elementos que

querySelectorAll() Uma lista de elementos
correspondem ao seletor CSS
COMO ALTERAR ESSES
ELEMENTOS?

Code Start - by Nzila - X

Code Start - by Nzila - X 13/01/2025
MODIFICAÇÃO DE ELEMENTOS

Agora que sabemos como encontrar os elementos no DOM, vamos aprender a

modificá-los! O JavaScript nos oferece diversas ferramentas para alterar o

conteúdo, estilo e atributos dos elementos HTML.

Propriedades:

element.innerHTML:

Função: Altera o conteúdo HTML dentro de um elemento.

MODIFICAÇÃO DE ELEMENTOS

Exemplo:
MODIFICAÇÃO DE ELEMENTOS
element.style:

Função: Altera o estilo CSS de um elemento.

Exemplo:
INTRODUÇÃO A EVENTOS

Code Start - by Nzila - X 13/01/2025

INTRODUÇÃO A EVENTOS

Após explorarmos a estrutura do DOM e como manipular elementos, vamos

agora dar vida às nossas páginas web através dos eventos. Eventos são como

gatilhos que disparam ações em resposta a interações do usuário, como cliques,

movimentos do mouse ou pressionamentos de teclas.

Exemplo:
INTRODUÇÃO A EVENTOS
Tipos Comuns de Eventos

Existem diversos tipos de eventos que podemos capturar e manipular. Alguns dos

mais comuns são:

Eventos de mouse: click, mouseover, mouseout, mousemove

Eventos de teclado: keydown, keyup

Eventos de formulário: submit, change

Eventos de carregamento: load, unload

INTRODUÇÃO A EVENTOS

Exemplo:
CONFIGURAÇÃO DE EVENTOS

Configuração de Eventos
Podemos configurar eventos de duas formas principais:
1. Inline: Diretamente no HTML, utilizando atributos como onclick, onmouseover,
etc.

Html

Com JavaScript: Usando o método addEventListener. Essa é a forma mais flexível

e recomendada.
CONFIGURAÇÃO DE EVENTOS

Prevenir Acções Padrão

Em alguns casos, você pode querer impedir que a ação padrão de um evento
ocorra. Por exemplo, ao clicar em um link, você pode querer executar uma ação
personalizada em vez de navegar para uma nova página.
CONFIGURAÇÃO DE EVENTOS

Delegação de eventos

A delegação de eventos é uma técnica eficiente para lidar com eventos em um

grande número de elementos. Em vez de adicionar ouvintes de eventos a cada
elemento individualmente, você adiciona um único ouvinte a um elemento pai
e verifica o alvo do evento.
APLICAÇÕES PRÁTICAS

Algumas das aplicações práticas dos eventos

Criação de animações: Ao passar o mouse sobre um elemento, ele começa a

animar.

Validação de formulários: Verificando se os campos de um formulário estão

preenchidos corretamente antes de enviá-lo.

Criação de jogos simples: Respondendo a eventos de teclado e mouse para

controlar um personagem em um jogo
Seja Específico com os Selectores

Considere o desempenho ao lidar com

um grande número de eventos
DICAS DE MELHORIA NO
USO DE EVENTOS COM
DOM Considere o uso de bibliotecas de
eventos

Documente os eventos personalizados

Q&A
-time
TASK 09
A página deve conter um título, um campo
de texto para entrada do usuário, um botão
para adicionar tarefas e uma lista dinâmica
para exibir essas tarefas. Quando o botão for
clicado, o texto digitado deve ser adicionado
como um novo item da lista, e cada item deve
ter um botão "Remover" que permita sua
exclusão individual.

Code Start - by Nzila - X 06/01/2025

TASK 09

Caso o campo esteja vazio ao tentar

adicionar, um alerta deve ser exibido.
Adicione estilos básicos, como bordas para a
lista e mudanças visuais nos botões quando o
mouse passar sobre eles. Certifique-se de que
todos os elementos e interações funcionem
corretamente.

Code Start - by Nzila - X 06/01/2025

POR HOJE, É TUDO!
“Os desafios são apenas oportunidades disfarçadas. O que
aprendemos hoje será a base para o que conquistamos amanhã”

13/01/2025