Javascript Eventos
Eventos são ações que ocorrem quando o usuário ou o navegador manipula uma
página.
1) Eventos com mouse
a) onClick();
<button onclick="alert('Ola Mundo')"> onClick()</button>
b) onDblClick();
<button ondblclick="alert('Ola Mundo')">
onDBLClick()</button>
c) onMouseDown();
<button onMouseDown="alert('Ola Mundo')">
onMouseDown()</button>
d) onMouseUp();
<button onmouseup="alert('Ola Mundo')">
onMouseUP()</button>
e) onMouseOver();
<button onmouseover="alert('Ola Mundo')">
onMouseOver()</button>
f) onMouseOut();
<button nomouseout="alert('Ola Mundo')">
onMouseOut()</button>
g) onContextMenu();
<button oncontextmenu="alert('Ola Mundo')">
onContextMenu()</button>
2) Evento com teclado
a) onKeyDown (qualquer tecla)
<script>
function apertouTecla(event){
alert("Apertou algo");
}
</script>
<input type="text" onkeydown="apertouTecla(event)" />
b) determinando a Tecla
<script>
function apertouTecla(event){
alert("Apertou a tecla numero" + [Link]);
}
</script>
<input type="text" onkeydown="apertouTecla(event)" />
c) Pressionando a tecla
<script>
function apertouTecla(event){
alert("Pressionou a tecla numero" + [Link]);
}
</script>
<input type="text" onkeypress="apertouTecla(event)" />
d) soltando a Tecla
<script>
function apertouTecla(event){
alert("Soltou a tecla numero" + [Link]);
}
</script>
<input type="text" onkeyup="apertouTecla(event)" />
e) Tecla shift+ comando
<script>
function apertouTecla(event){
if ([Link]) {
alert ("Shift key is pressionada.");
}
}
</script>
<input type="text" onkeyup="apertouTecla(event)" />
f) Tecla control pressionada
<script>
function apertouTecla(event){
if ([Link]) {
alert ("Control key is pressionada.");
}
}
</script>
<input type="text" onkeyup="apertouTecla(event)" />
2) Evento com página
a) No carregar a página
<body onload="alert('Carregando ....')">
</body>
b) Fechado a página
<body onunload="alert('Descarregando ....')">
</body>
3) Eventos com formulários
a) Mudança de opção
<body>
<select name="Santos" onchange="alert('Trocou a opção')">
<option> São Paulo </option>
<option> São José </option>
<option> São Arcanjo </option>
</select>
</body>
b) Mudança de opção e passando a opção
<select name="Santos" onchange="alert([Link])">
<option> São Paulo </option>
<option> São José </option>
<option> São Arcanjo </option>
</select>
</body>
c) Recebendo o focus
<body>
<input type="text" onfocus="alert('Recebeu o focus')">
</body>
d) Perdendo o focus
<body>
<input type="text" onblur="alert('Perdeu o focus')">
</body
e) No envio do formulário
<body>
<form method="post" onsubmit="return false">
<input type="text">
<input type="submit" name="Enviar">
</form>
</body>
Obs: opção de retorno true, o formulário é enviado.
4) Manipular datas
Data no Javascrit é um objeto criado com a opção new Date().
A partir da criação do objeto, diversos métodos são utilizados para resgatar,
configurar datas, veja alguns deles.
a) Mostrando as informações do objeto criado
<script>
var data = new Date();
alert( data);
</script>
b) Mostrando dia, mês e ano
var data = new Date();
alert( [Link]());
alert([Link]());
alert([Link]());
</script>
Tanto o dia da semana quanto o mês começam no dia 0, pois são considerados
um array. Assim, o mês de Janeiro é 0, Fevereiro é até Dezembro 11. Como na
semana, domingo é zero e sábado é 6.
c) Mostrando hora, minuto e segundos
<script>
var data = new Date();
alert( [Link]());
alert([Link]());
alert([Link]());
</script>
5) Temporizadores em Javascript
Na linguagem Javascript, há dois tipos de função que temporizam a execução
de uma ação: o setInterval() e o setTimeout(). Ambos em milissegundos, ou
seja, 1 segundo equivale a 1000.
a) SetInterval()
<p id="demo"></p>
<script>
setInterval(mostre, 3000);
function mostre() {
[Link]("demo").innerHTML += "Tempo após
3 segundos ";
}
</script>
Obs.: O setInterval faz recursividade automática.
b) settimeout
<p id="demo"></p>
<script>
setTimeout(mostre, 3000);
function mostre() {
[Link]("demo").innerHTML += "Tempo após
3 segundos ";
}
</script>
Obs.: O setTimeout não faz recursividade automática.
6) Gerando números aleatórios.
<script>
alert ([Link]([Link]() * 10) + 1);
</script>
No exemplo, Math é o objeto que possui diversos métodos, entre eles random()
que gera números aleatórios entre 0 e 1, e floor() que arredonda para o menor
inteiro. A adição do valor 1, pois ao multiplicar pelo valor 10, os resultados serão
entre 0 d 9.
Desafios:
a) Criar uma script que determine aleatoriamente se a imagem é cara ou coroa.
b) Validar um caixa de formulário para receber somente duas casas decimais.
c) Criar um banner rotativo trocando imagens com o clique.
d) Criar uma script que gera um número aleatório de 1 a 6 e a imagem
correspondente de um dado.
