Informática Numaboa - Tutoriais e Programação
Tutorial Javascript I
|
Seg 9 Out 2006 17:54 |
- Detalhes
- Categoria: Javascript
- Atualização: Sexta, 17 Abril 2009 21:12
- Autor: vovó Vicki
- Acessos: 26721
Eventos
Declarações javascript aninhadas numa página HTML podem responder a eventos como cliques de mouse, dados de formulários ou navegação.
Por exemplo, é possível escrever funções javascript que verifiquem a validade da informação solicitada através de um formulário, que rastreiem os movimentos feitos pelo usuário com o mouse (ótimo para joguinhos on line), que disparem um cronômetro assim que a página for carregada e por aí afora. São um monte de possibilidades que animam qualquer programador (iniciante ou não), com um porém - já percebeu que sempre tem um porém? Seria um mar de rosas se todos os navegadores interpretassem o código da mesma forma. Apesar de existir um órgão regulador (o W3C, World Wide Web Consortium), os criadores dos navegadores nem sempre respeitam as normas, ou seja, por melhor que seja o seu código, prepare-se para algumas surpresas desagradáveis 
A JavaScript pode executar código quando um determinado evento acontece. Sem dúvida nenhuma, um dos mais comuns é o clique num link, num trecho de texto ou numa imagem. Vamos explorar os eventos usando a função alert() da javascript,mas antes disto algumas palavrinhas sobre esta função.
A função alert() faz parte do arsenal de funções da javascript. Não é preciso programar janela, botão ou coisa do gênero. Basta enviar o texto que deve ser mostrado como parâmetro que a função se encarrega do resto. Quer ver só? Inserindo este trecho de código numa página HTML, criamos um link "javascriptizado"
que produz o seguinte resultado: Clique aqui
Observe que o texto precisa estar entre aspas, mas, como o marcador href também exige aspas, fazemos com que um tenha aspas duplas e o outro aspas simples. Repetir o tipo de aspas é um erro muito comum feito pelos principiantes - o script não funciona de jeito nenhum e o programador não consegue encontrar o erro :thumbdown: Mas nem sempre é preciso usar o href. Podemos usar um evento associado ao <a>.
Observe o resultado: Clique aqui
A diferença é que o href está preparado para ser clicado (já está esperando o evento onClick), muda o cursor e a cor do texto - só precisa ser informado de que a linguagem é javascript. Quando o <a> está pelado a coisa é um pouco diferente. Precisamos vesti-lo com um evento, neste caso o onClick. Em compensação, ele é esperto o suficiente para descobrir sozinho que a linguagem é javascript.
Se quisermos que a janela de alerta seja mostrada assim que o cursor do mouse estiver sobre um texto, é fácil, fácil... basta indicar o evento correspondente, o onMouseOver.
e a coisa fica assim: Aponte o mouse aqui
Para conseguir a mesma coisa com o href é preciso dar uma enganada nele porque ele já está preparado para o evento onClick. Então damos ao href um endereço vazio (#) e atrelamos o <a> ao evento onMouseOver:
ou seja, a coisa fica assim: Aponte o mouse aqui
Já deu para ter uma idéia? Então vai aqui uma lista dos eventos mais comuns.
Para usar em links, imagens e outros
- onBlur (ocorre quando um campo texto de um formulário perde o foco)
- onFocus (ocorre quando um elemento recebe o foco)
- onDblClick (ocorre com um duplo clique)
- onClick (ocorre com um clique)
- onMouseDown (ocorre quando um botão do mouse é pressionado)
- onMouseMove (ocorre quando o cursor do mouse é movimentado)
- onMouseOut (ocorre quando o cursor do mouse deixa o ponto)
- onMouseOver (ocorre quando o cursor do mouse atinge o ponto)
- onMouseUp (ocorre quando um botão do mouse é liberado)
Para usar dentro da área <body>
- onKeyDown (ao pressionar uma tecla)
- onKeyPress (ao pressionar uma tecla e, logo em seguida, liberá-la)
- onKeyUp (ao liberar uma tecla)
Para usar no marcador <body>
- onLoad (ao carregar a página)
- onUnLoad (ao abandonar a página)