11 Java Script - Exemplos com eventos
marlenesmo
1,820 views
17 slides
Oct 16, 2015
Slide 1 of 17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
About This Presentation
11 Java Script - Exemplos com eventos
Slide Content
Páginas Web com: HTML, CSS e JavaScript Profª . Marlene da Silva Maximiano de Oliveira & Profª . Alessandra Aparecida da Silva
Java Script - Eventos Conceitos e alguns exemplos
Eventos Eventos são os disparos que chamam as funções dentro de seus scripts. Podemos citar como um exemplo de evento, o clique que o usuário dá em um botão. Este evento é chamado de onclick . Outro tipo de evento é onload , que dispara quando a página acaba de ser carregada.
onClick < html > < head > < title > onclick </ title > <script > function mensagem(){ window.alert ("Você clicou no botão!"); } </script> </ head > < form > <input type =" button " value ="Clique Aqui" onclick ="mensagem()"> </ form > </ body > </ html >
onClick < html > < head > < title > onclick </ title > <script> function mensagem(){ window.alert ("Você clicou no documento!"); } </ script> </ head > < body onclick ="mensagem()"> </ body > </ html >
onSubmit < html > < head > < title > onsubmit </ title > <script> function obrigado(){ window.alert ("dados enviados com sucesso!"); } </script> </ head > < body > < form name ="dados" onsubmit ="obrigado()"> Digite o seu nome: <input type =" text " name ="nome"> <input type =" submit " value ="Enviar"> </ form > </ body > </ html >
onmouseover <html> <head> <title> onmouseover </title> <script > function mensagem (){ window.alert (' Você passou o mouse aqui !'); } </script> </head> <body> <a href ="http://www.site.com" onmouseover =" mensagem ()"> Passe o mouse aqui </a> </body> </html>
onmouseout < html > < head > < title > onmouseout </ title > < script type =" text / javascript "> function mensagem(){ window.alert ('Você retirou o mouse do link!'); } </script> </ head > < body > <a href ="http://www.site.com" onmouseout ="mensagem()">Passe o mouse aqui</a> </ body > </ html >
onfocus < html > < head > < title > onfocus </ title > <script> function alerta(){ window.alert ('Cuidado com o que vai digitar!'); } </script> </ head > < body > < form > Digite um palavrão aqui: <input type =" text " onfocus ="alerta()"> </ form > </ body > </ html >
onchange < html > < head > < title > onchange </ title > <script> var alterado = false; function avisar(){ alterado = true ; } function verificar(){ if (alterado == true ){ window.alert ('O texto da caixa de texto foi alterado !'); } else { window.alert ('O texto da caixa de texto NÃO foi alterado !'); } } </script> </ head > < body > < form > Digite o seu e-mail: <input type =" text " value ="Marlene" onchange ="avisar()"> <input type =" button " value ="Enviar" onclick ="verificar()"> </ form > </ body > </ html >
onchange < html > < head > < title > onchange </ title > < script> function avisar(){ if ( document.cadastro.email.value == ''){ window.alert ('Este campo não pode ficar vazio.'); document.cadastro.email.focus (); } else { window.alert ('Os dados estão OK .'); } } </script> </ head > < body > < form name ="cadastro"> Digite o seu e-mail: <input type =" text " name =" email " onchange ="avisar()"> <input type =" text " name ="email1" > <input type =" button " value ="Enviar"> </ form > </ body > </ html >
onunload < html > < head > < title > onunload </ title > <script> function mensagem(){ window.alert ('Obrigado por visitar o meu site!'); } </script> </ head > < body onunload ="mensagem()"> teste123 </ body > </ html >
onload < html > < head > < title > onload - abrindo janela</ title > < script type =" text / javascript "> function abrir(){ window.open ("http://uol.com.br", "janela", " height =300, width =400,scrollbars= yes "); } </ script> </ head > < body onload ="abrir()"> </ body > </ html >
onclick < html > < head > < title > onclick </ title > < script> function exibir(){ var nome = document.form1.text1.value; window.alert ("Bem-vindo ao meu site, " + nome); } </script> </ head > < body > < form name ="form1"> Digite o seu nome e clique o botão< br > <input type =" text " name ="text1"> <input type =" button " value ="Clique" onclick ="exibir()"> </ form > </ body > </ html >
onclick < html > < head > < title > onclick </ title > <script> function fechar(){ if ( window.confirm ("Deseja mesmo fechar a página?")){ window.alert ('a página sera fechada'); window.close (); } } </script> </ head > < body > < form name ="form1"> <input type =" button " value ="Fechar esta janela" onclick ="fechar()"> </ form > </ body > </ html >
onclick < html > < head > < title > onclick </ title > <script> function enviar(){ var nome = document.form1.text1.value; window.alert ("Você digitou: " + nome); } </script> </ head > < body > < form name ="form1"> Digite o seu nome e clique o botão< br > <input type =" text " name ="text1"> <input type =" button " value ="Enviar" onclick ="enviar()"> < form > </ body > </ html >
onclick < html > < head > < title > onclick </ title > <script> function alterar(){ document.form1.btn1.value = "Você me clicou!!!!"; } </script> </ head > < body > < form name ="form1"> <input type =" button " name ="btn1" value ="Clique Aqui" onclick ="alterar()"> </ form > </ body > </ html >
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 1,820
- Slides 17
- Age 3702 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
32 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
35 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
32 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
29 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
30 views