Scribd
Carregar
42 visualizações19 páginas

Desenvolvimento Web Aula 6

O documento discute eventos em JavaScript, incluindo exemplos de eventos como onclick, onmouseover e onmouseout. Ele também explica como manipular estilos CSS e selecionar elementos usando métodos como getElementById, getElementsByClassName e getElementsByTagName. Além disso, aborda laços como for e while, condicionais if/else e como definir funções para tratar eventos.

Enviado por

Prof. Patrícia Noll
Direitos autorais
© © All Rights Reserved
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
42 visualizações19 páginas

Desenvolvimento Web Aula 6

O documento discute eventos em JavaScript, incluindo exemplos de eventos como onclick, onmouseover e onmouseout. Ele também explica como manipular estilos CSS e selecionar elementos usando métodos como getElementById, getElementsByClassName e getElementsByTagName. Além disso, aborda laços como for e while, condicionais if/else e como definir funções para tratar eventos.

Enviado por

Prof. Patrícia Noll
Direitos autorais
© © All Rights Reserved
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/ 19

Desenvolvimento para a Web

Prof. Ms. Patrícia Noll de Mattos


Aula 6
Eventos em Javascript
• Eventos em Javascript, correspondem a determinados
acontecimentos dentro do navegador.
• Vejamos alguns exemplos comuns de eventos em
Javascript:
Eventos em Javascript

• É possível definir funções para serem invocadas


sempre que um desses eventos forem registrados
pelo navegador.

• Elementos que iniciam escondidos e aparecem


apenas após um clique (exemplo, menus de
navegação).
Eventos em Javascript
• Eventos: onclick, onmouseover e onmouseout
• Com base no código a seguir:

HTML:
<button id="click-me">Clique aqui</button>
<button id="hover-me">Passe o cursor aqui</button>
<button id="leave-me">Passe o cursor e depois saia</button>
Eventos em Javascript
Javascript:
document.getElementById("click-me").onclick = function() {
alert('Você clicou no botão’);
};

document.getElementById("hover-me").onmouseover = function()
{ alert('Você passou o cursor por cima do botão’);
};

document.getElementById("leave-me").onmouseout = function() {
alert('Você passou o cursor por cima do botão e depois saiu’);
};
Eventos em Javascript

• Os objetos DOM têm propriedades que levam o


mesmo nome dos eventos.
• Estas propriedades inicialmente estão vazias (null).
• Quando definimos uma função para estas
propriedades, elas se comportam como métodos
deste objeto.
• Neste momento o navegador passa a monitorar o
evento e invoca a função quando o evento ocorre.
Eventos em Javascript
onkeydown
• O evento onkeydown pode ser aplicado a um elemento
específico.
• Faria sentido, por exemplo, aplicá-lo a um campo de formulário,
desta maneira quando o usuário digitasse alguma coisa dentro
deste campo, o evento seria registrado.
• Mas este evento pode ser aplicado também ao objeto document
(aquele que fica no topo da árvore do DOM).
• Desta maneira, em qualquer lugar da página que estivermos, o
evento será monitorado.
Eventos em Javascript

• Escreva o código abaixo em uma página, recarregue a página e


experimente apertar qualquer tecla.

document.onkeydown = function() {
alert('Você apertou alguma tecla’);
};
Eventos em Javascript
• É possível também monitorar alguma tecla específica.
• Primeiro temos que saber como o Javascript reconhece
que tecla foi pressionada.
document.onkeydown = function() {
alert('Você apertou a tecla: ' + event.keyCode);
};
• podemos usar o objeto event, que nos dá informações
adicionais sobre o evento em questão.
• a propriedade keyCode, que nos retorna o código
Unicode do caractere pressionado no teclado
Manipulação de evento via atributo html

• É possível manipular eventos diretamente via atributos html.


<button onclick="show_alert()">Clique Aqui</button>
• Estamos associando a função show_alert à propriedade
onclick do objeto do DOM correspondente a este elemento.
• Agora o que falta é criar esta função no código Javascript:

function show_alert() {
alert('Você clicou no botão’);
}
Manipulação do CSS
• Podemos manipular o CSS de qualquer elemento da página via
javascript.
• Para fazer isso usamos a propriedade style do objeto em questão.
• A propriedade style é um objeto cujas propriedades são as
propriedades CSS.

Para o código html:


• <button id="botao_cor">Clique para mudar de cor e mover para a
direita</button>
Manipulação do CSS
document.getElementById("botao_cor").onclick = function() {
document.getElementById("botao_cor").style['background-color'] = "purple";
document.getElementById("botao_cor").style.transform =
"translateX(100px)";
};

• Atribui ao atributo do objeto “style”.


• No caso do atributo background-color, por não seguir as
normas de construção dos identificadores, deve ser acessado
dentro de colchetes, já o transform, pode ser acessado por
um “.”.
Manipulação do CSS
Definindo uma função para o evento onclick do elemento "botao_cor“:

document.getElementById("botao_cor").onclick = function() {
this.style['background-color'] = "purple";
this.style.transform = "translateX(100px)";
};
Outra maneira de simplificar usando uma variável:

var botao = document.getElementById("botao_cor");


botao.onclick = function() {
botao.style['background-color'] = "purple";
botao.style.transform = "translateX(100px)";
};
Outros métodos getElement
• Até este momento utilizamos apenas o método getElementById
para selecionar elementos html da página.
• Vamos agora conhecer os métodos getElementsByClassName e
getElementsByTagName.

<div class="exemplo">Elemento 1</div>


<div class="exemplo">Elemento 2</div>
<div class="exemplo">Elemento 3</div>
var elementos = document.getElementsByClassName("exemplo");
console.log(elementos);
// O console retornará um array: [ {...}, {...}, {...} ]
// Cada um destes objetos é um dos elementos que possuem a classe
"exemplo".
Outros métodos getElement
• Os objetos deste array podem ser acessados por meio do índice, neste caso [0],
[1] e [2].
• Para alterar as suas propriedades, como a innerHTML, ou as propriedades css,
é preciso definir o índice:
elementos[0].innerHTML = "Texto do elemento 1";

getElementsByTagName
• Esse método, ao invés de selecionar classes, ele seleciona elementos com uma
tag específica (como div, h1, p, img, etc).
<p>Parágrafo 1</p>
<p>Parágrafo 2</p>
<p>Parágrafo 3</p>
var paragrafos = document.getElementsByTagName("p");
console.log(paragrafos);
// O console retornará um array: [ {...}, {...}, {...} ]
Loops For
for (var a = 0; a < 5 ; a++) {
console.log(a);
}
// assim como as funções, não é preciso ponto e vírgula ao final dos loops

var alunos = ['Pedro', 'Maria', 'José', 'João', 'Carlos’];


for (var a = 0; a < alunos.length ; a++) {
console.log(alunos[a]);
}
/* O console mostrará: Pedro
Maria
José
João
Carlos */
For/In
• O loop for/in serve para facilmente percorrermos elementos de um objeto.
• Este tipo de dados não possui índices.
• O loop então vai percorrer todos os elementos do objeto e a cada passagem a
variável vai ser igual a chave do elemento.
• O valor é obtido acessando o objeto na posição da variável.
var carro = { ‘
Ano': 2018,
'Modelo’: 'Fox’,
'Cilindradas': '1.8’,
'Combustível': 'Gasolina’ }
for (var prop in carro) {
console.log( prop + ': ' + carro[prop] );
}
• O console mostrará:
Ano: 2018
Modelo: Fox
Cilindradas: 1.8
Combustível: Gasolina
Loops while e do/while
• while, testa condição no início.

var count = 0;
while (count < 5) {
console.log(count);
count++;
} // O console mostrará: 0, 1, 2, 3, 4

• do/while, executa pelo menos uma vez.

var count = 10;


do {
console.log(count);
count++;
} while (count < 5);
// O console mostrará: 10
Condicionais
Exemplo:
nota = 7; faltas = 4;
// Resolução com and:
if (nota >= 7 && faltas <= 4) {
console.log( 'O aluno foi aprovado' );
} else {
console.log( 'O aluno foi reprovado' );
}
// Resolução com or:
if (nota < 7 || faltas > 4) {
console.log( 'O aluno foi reprovado' );
} else {
console.log( 'O aluno foi aprovado' );
}

Você também pode gostar

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy