Ir para o conteúdo

Eventos

Importante: Este artigo contém informações que levam à prática de má programação e contém o que hoje são erros de sintaxe. É também necessário atualizar para acrescentar as outras duas maneiras (sendo uma preferida à outra) de juntar eventos a uma tag.

O JavaScript é uma linguagem orientada principalmente a eventos e objectos. Os eventos podem ser produzidos de duas formas: pelo sistema ou pelo utilizador.

Pelo sistema quando resultam do facto de carregar ou descarregar uma página, pelo utilizador na medida em que pode interagir com as suas acções, através de sobrepor o rato ou carregar num botão, estes são os exemplos mais comuns apesar de existirem muitos mais.

Elementos de HTML onBlur onClick onChange onFocus onLoad onMouseover onSelect onSubmit Unload
Button s
Checkbox s
Document s s
Form s
Link s s
Radio s
Reset s
Selection s s s
Submit s
Text s s s s
Textarea s s s s

s = funcionalidade suportada

Eventos do Sistema

Um exemplo de resposta a eventos do sistema:

<html><head>
<script language="JavaScript">
<!--
function entra(){
  window.alert("Bem vindo, exemplo de uma reaccao a um evento do sistema");
}
function sai(){
  window.alert("Volte sempre");
}
-->
</script></head>
<body onload="entra();" onunload="sai();">
<p>Texto escrito na página, bla bla bla</p>
</body></html>

No head definem-se duas funções, a entra() e a sai().

Na primeira função (function), entra(), faz surgir uma janela de aviso no centro do ecrã quando a página é carregada que mostra uma mensagem, Bem vindo, exemplo de uma reaccao a um evento do sistema.

Na segunda função, sai(), faz surgir uma janela de aviso quando se sai da página com a mensagem Volte sempre.

As funções só são executadas no momento em que estas são invocadas, por isso as funções presentes no exemplo só são executadas no onload do body e no onunload do body respecivamente.

Eventos de utilizador

Os eventos podem ser utilizados para interagir com o utilizador. Desta forma só são invocados por acção deste, e assim é possível tornar a página mais atractiva e modelada para cada utilizador, pois não apresenta tudo, mas só o que o utilizador pretende.

<head>
<script language="Javascript">
function skin1()
{
document.bgColor='red';
}
function skin2()
{
document.bgColor='green';
}
function skin3()
{
document.bgColor='yellow';
}
function skin4()
{
document.bgColor='#FFFFCC';
}

</script> 
 </head> 
 <body>

<form name="cores">
<input type="radio" name="campo" onclick="skin1();">Fundo vermelho<br>
<input type="radio" name="campo" onclick="skin2();">Fundo verde<br>
<input type="radio" name="campo" onclick="skin3();">Fundo amarelo<br>
<input type="radio" name="campo" onclick="skin4();">Fundo amarelo<br>
</form>

</body></html>

Neste exemplo o visitante da página pode escolher que cor quer dar ao background. No entanto se o utilizador sair da página a sua escolha será perdida.

Desta forma é mostrado uma forma de o JavaScript interagir com o visitante.

Variáveis

Variável é uma posição de memória onde é possível armazenar certas informações. As variáveis são representadas por nomes denominados identificadores que têm uma estrutura definida:

  1. Devem iniciar obrigatoriamente por uma letra ou pelo símbolo $;
  2. A partir daí, além de letras e $, pode conter dígitos.

De seguida, vai ser mostrado um exemplo de manipulação de variáveis:

<html>
<body>
<script type="text/javascript">
var mensagem="Aqui escreve uma mensagem que aparecerá na página"; //define a variável mensagem e o seu conteúdo
document.write(mensagem);
document.write("<p>"+mensagem+"</p>");
</script></body></html>