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' );
}