Aula 04 Eventos

Eventos
JavaScript
Professor Jolvani
Aula 04
Eventos - JavaScript
 Olá programadores JavaScript
 Na aula passada vcs aprenderam um pouco
sobre conceitos de orientação a objetos, o que
são objetos, viram que eles são compostos de
atributos (propriedades) e funções
(métodos)...
 E agora nesta aula vamos ver um conceito
fundamental para trabalhar com JavaScript
que são os manipuladores de eventos
 Um dos grandes motivos do JavaScript, que
vimos, é trazer interatividade para nossas
páginas Web. E essa interatividade se dá
quando o documento é capaz de responder a
uma ação do usuário...
 Por Ex: se vc clicar no botão ao lado
 A janela se expande... Ocultar e aparecer...
 Passar o mouse sobre a caixa Mapa outro
 JavaScriprt abre um caixa com detalhes...
 Experimente clicar e arrastar a imagem do
google maps. (drag and drop)
 Então o JavaScript está reconhecendo cada
uma dessas ações que estamos efetuando
nessa página
 Essas ações (de passar o mouse em cima de um
elemento, arrastar ou clicar em um elemento)
são acionadas através dos manipuladores de
eventos...
 E como utilizamos esse manipuladores de
eventos?
 Para isso faremos a seguinte página que
contem apenas uma imagem ...
 Define uma cor para o corpo Body = preto e
uma atributo “imge” apresentando a imagem
como um bloco e alinhando ela ao centro...
 Como eu posso adicionar eventos a essa
imagem e acionar uma acão (evento)
javascript a nossa página?
 Eu possuo vários atributos que posso usar nos
elementos html, um deles é o onclick() então
vejamos ao código....
 Percebam que o evento é o click o on significa que
é quando ele é clicado = onclick.
 Uso o onclick() e executo um alert() veja que uso
aspas simples dentro do alert, pois já utilizei aspas
duplas no onclick.
 O resultado ocorre quando eu clicar sobre a
imagem...
 Vamos ver outros eventos...
 Onmouseover – disparado quando eu passo o mouse
no objeto (imagem)
 Os dois eventos usados até agora são disparados
pelo internauta, mas nos temos eventos que são
disparados sem ação do internauta.
 Podemos disparar o evento na hora que o
documento for carregado... Então ele concluiu o
carregamento da tag <body> e no final ele acionou
o evento onload().
 Dessa forma nos atrelamos uma ação JavaScript aos
elementos html de nossas páginas.
 Vamos aproveitar pra construir um script que liga
essa lâmpada quando clicarmos sobre ela....
 Criamos uma função Ligar. Uma função é um bloco (de código JavaScript) que pode ser
chamada pelos eventos onclick, onmouseover entre outros...
 Uma das maneiras de fazer isso é alterar o elemento src para outra imagem....
 Então já sabemos que o elemento imagem esta dentro do elemento document e do
elemento window, acessaríamos da seguinte maneira window.document.xxx (xxx onde esta
minha imagem?)
 Nos temos uma serie de funções dentro do elemento document então vamos procurar em
Dom e no elemento document e encontramos a função getElementById() – recupera um
elemento com um ID (aidi) especifico – get atributos....
 Como a lâmpada possui um id eu posso recuperar esse elemento pelo id... (se tivesse
nome seria getElementByName(), nesse caso getElementById().
 Qual id? Image o id informado no css e na tag img
 Como o elemento document está dentro do
elemento window eu posso suprimir somente:
document.getElementById().
 Recuperei o elemento imagem,
(document.getElementById("image");) agora
quero alterar minha src então...
 document.getElementById("image").src =
src="xlamp_on.png";
 Quando eu clico na imagem é alterado o src

por outro valor...
 Uma breve introdução a eventos
JavaScript....
 Até a próxima Aula!
Próxima Aula: Bla bla bla

Aula 04 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

Aula 04 Eventos

Enviado por

Direitos autorais:

Formatos disponíveis

Eventos

 Quando eu clico na imagem é alterado o src

Você também pode gostar