2º Quinzena de Maio - DOM e Eventos

Produção WebSites
Programação WEB 2– Professor Flávio Mota
EVENTOS JavaScript
Evento: é uma ação que dispara/executa uma determinada tarefa, como o
clique de um botão, mudança de um campo de formulário, pressionar uma
tecla ou o movimento do mouse sobre um objeto de página ou formulário, etc.
https://data-flair.training/blogs/javascript-event-types/ Professor Flávio Mota

Produção WebSites
Eventos de Mouse
Professor Flávio Mota

Produção WebSites
Arquivo.js
Arquivo.html
Resultado no navegador
Produção WebSites
Evento onclick
Evento chamador da função myFunction
Função myFuntion atribuindo um novo valor

para o elemento com Id “demo” usando a
propriedade innerHTML
Fonte: https://www.w3schools.com/jsref/event_onclick.asp
Produção WebSites
Evento onclick
registra uma única espera de evento em um
único alvo.
Função myFuntion atribuindo um novo valor

para o elemento com Id “demo” usando a
propriedade innerHTML
Fonte: https://www.w3schools.com/jsref/event_onclick.asp
Produção WebSites
Fixação: Criar uma Div 300x300px centralizada, vamos

criar três botões, cada botão vai alterar a propriedade
background-color desta Div, usando função chamadas
pelo evento click.

Produção WebSites
Resolução aula anterior

<!DOCTYPE html>
<html>
function azul() {
<head>
<meta charset='utf-8'> document.getElementById("principal").style
<title>Page Title</title> .backgroundColor = "blue"
<script src="trocaCores.js"></script>
</head> }
<body> function vermelho() {

<div style="width:300px; height:300px; border:1px solid red; margi
n: auto;" id="principal"> document.getElementById("principal").style
</div> .backgroundColor = "red"
</br>
<div style="width:320px; height:300px; margin: auto;"> }
<input type="button" value=" == Azul == " onclick="azul()"> function verde() {

<input type="button" value=" == Vermelho == " onclick="vermelh
o()"> document.getElementById("principal").style
<input type="button" value=" == Verde == " onclick="verde()"> .backgroundColor = "green"
</div> }
</body>
</html>
JS
HTML
Produção WebSites
Entendendo o DOM (Document Object Model)

Um dos grandes aspectos do Javascript é sua poderosa capacidade de
selecionar os elementos no DOM que serão manipulados de forma
relativamente fácil e direta. Basicamente DOM é uma interface de programação
para documentos HTML, XHTML e XML que são organizadas e lidas pelo
browse.

Produção WebSites
Entendendo o DOM (Document Object Model)

Código HTML
Árvore DOM

Produção WebSites
Métodos : O DOM possui muitos métodos, são eles que fazem a

ligação entre os nodes (elementos) e os eventos.
Fonte: https://tableless.com.br/entendendo-o-dom-document-object-model/
Produção WebSites
Exemplo usando o método getElementById

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to change the color of this paragraph.</p>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.color = "red";
}
</script>
</body>
</html>
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementbyid2
Produção WebSites

ligação entre os nodes (elementos) e os eventos
Produção WebSites
<!DOCTYPE html>
<html> Exemplo usando o método getElementsByClassName
<body>
<div class="example">First div element with class="example".</div>
<div class="example">Second div element with class="example".</div>
<p>Click the button to change the text of the first div element with class="example" (index 0).</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("example");
x[0].innerHTML = "Hello World!";
}
</script>
</body>
</html>
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementsbyclassname
Produção WebSites

Produção WebSites
<!DOCTYPE html>
<html> Exemplo usando o método getElementsByTagName
<body>
<p>An unordered list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p>Click the button to display the innerHTML of the second li element (index 1).</p>
<p id="demo"></p>
Fonte -
<script> https://www.w3schoo
function myFunction() { ls.com/jsref/tryit.asp?
var x = document.getElementsByTagName("LI");
document.getElementById("demo").innerHTML = x[1].innerHTML; filename=tryjsref_doc
} ument_getelementsb
</script> ytagname
</body>
</html>

Produção WebSites

Obtenha o primeiro elemento do documento com class = "example":

document.querySelector(".example");
Obtenha o primeiro elemento <p> no documento:

document.querySelector("p");
Obtenha o primeiro elemento <p> no documento com class = "example":
document.querySelector("p.example");
Mude o texto de um elemento com id = "demo":

document.querySelector("#demo").innerHTML = "Hello World!";
Fonte : https://www.w3schools.com/jsref/met_document_queryselector.asp
Produção WebSites
querySelectorAll()
Muito igual ao querySelector(), mas ele tem apenas uma diferença: retorna
todos elementos que se equiparam ao seletor CSS passado. O seletor também
deve seguir a sintaxe CSS, caso não haja nenhum ele retornará null.
Obtenha todos os elementos do documento com class = "example":

var x = document.querySelectorAll(".example");
Obtenha todos os elementos <p> no documento e defina a cor de fundo do primeiro elemento <p> (índice 0):
var x = document.querySelectorAll("p");
x[0].style.backgroundColor = "red";
Defina a cor de plano de fundo de todos os elementos <p> no documento:
var x = document.querySelectorAll("p");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

Produção WebSites
Eventos onmouseover (passagem do mouse) / onmouseout (movido para fora)
eventos do mouse onmouseover / onmouseout
Funções vão alterar a propriedade color do

elemento com id “demo” para red/black nos
eventos onmouseover / onmouseout
Fonte: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover_html
Produção WebSites
Eventos de Teclado
Eventos de objetos/frames/body

Produção WebSites
Evento onkeypress
myFunction será executada quando qualquer tecla

for pressionada dentro do input text
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeypress
Produção WebSites
Evento onkeyup
Esse código chama o evento onclick através do evento

keyup quando a tecla ENTER for pressionada, essa tecla é
representada pelo número 13 neste evento.
Fonte: https://www.w3schools.com/howto/howto_js_trigger_button_enter.asp
Produção WebSites
Evento onload
Esse evento é executado quando a página
for carregada executando a função
chamando o alert().
Fonte: https://www.w3schools.com/jsref/event_onload.asp
Produção WebSites
Eventos de Formulário

Produção WebSites
Eventos de onfocus
Quando o campo receber o foco a função é

executada e muda o background para yellow
Fonte: https://www.w3schools.com/jsref/event_onfocus.asp
Produção WebSites
Eventos de onblur
Quando o campo perder o foco a função é

executada e coloca todo o texto em caixa alta
(Todas as letras em maiúscula
Fonte: https://www.w3schools.com/jsref/event_onblur.asp
Produção WebSites
Eventos de onsubmit
Esse evento é disparado quando o botão submit for

pressionado, será chamada a função e executado o
alert().
Fonte: https://www.w3schools.com/jsref/event_onsubmit.asp
Produção WebSites
Fixação: criar a seguinte tela em HTML, gerar um script

para fazer a média dos valores inseridos nos inputs
através do click do botão Calcular Média, ainda nesse
exercício, vamos inserir um o evento que pressionando a
tecla ENTER no input 03 também será feito a média e
exibo no input Média.

2º Quinzena de Maio - DOM e Eventos

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

2º Quinzena de Maio - DOM e Eventos

Enviado por

Direitos autorais:

Formatos disponíveis

Produção WebSites

Programação WEB 2– Professor Flávio Mota

https://data-flair.training/blogs/javascript-event-types/ Professor Flávio Mota

Professor Flávio Mota

Função myFuntion atribuindo um novo valor

Função myFuntion atribuindo um novo valor

Fixação: Criar uma Div 300x300px centralizada, vamos

Professor Flávio Mota

Resolução aula anterior

<body> function vermelho() {

<input type="button" value=" == Azul == " onclick="azul()"> function verde() {

Entendendo o DOM (Document Object Model)

Professor Flávio Mota

Entendendo o DOM (Document Object Model)

Professor Flávio Mota

Métodos : O DOM possui muitos métodos, são eles que fazem a

Exemplo usando o método getElementById

<button onclick="myFunction()">Try it</button>

Métodos : O DOM possui muitos métodos, são eles que fazem a

<div class="example">Second div element with class="example".</div>

<button onclick="myFunction()">Try it</button>

Métodos : O DOM possui muitos métodos, são eles que fazem a

<button onclick="myFunction()">Try it</button>

Professor Flávio Mota

Métodos : O DOM possui muitos métodos, são eles que fazem a

Obtenha o primeiro elemento do documento com class = "example":

Obtenha o primeiro elemento <p> no documento:

Mude o texto de um elemento com id = "demo":

Obtenha todos os elementos do documento com class = "example":

Professor Flávio Mota

Eventos onmouseover (passagem do mouse) / onmouseout (movido para fora)

eventos do mouse onmouseover / onmouseout

Funções vão alterar a propriedade color do

Professor Flávio Mota

myFunction será executada quando qualquer tecla

Esse código chama o evento onclick através do evento

Professor Flávio Mota

Quando o campo receber o foco a função é

Quando o campo perder o foco a função é

Esse evento é disparado quando o botão submit for

Fixação: criar a seguinte tela em HTML, gerar um script

Professor Flávio Mota

Você também pode gostar