Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Eventos

    Hochgeladen von

    Diego Alberto
    20 Ansichten4 Seiten

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    20 Ansichten4 Seiten

    Eventos

    Hochgeladen von

    Diego Alberto

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 4

    Eventos

    Geral Com os eventos e sobretudo seus procedimentos, abordamos o lado "mgico" do Javascript. Em Html clssico, h um evento que conhecem bem. o clique do mouse sobre um link que vai abrir outra pgina Web. Infelizmente, praticamente o nico. Felizmente, o Javascript vai acrescentar uma boa dezena. Os eventos Javascript, associados as funes, aos mtodos e aos formulrios, abrem uma grande porta para uma verdadeira interatividade das pginas. Eventos Vamos ver os diferentes eventos implementados em Javascript. EVENTOS Clik Load DESCRIO Quando o usurio clica sobre um boto, um link ou outro elementos. Quando a pgina carregada pelo browser. Quando o usurio sai da pgina. Quando o usurio coloca o ponteiro do mouse sobre um link ou outro elemento. Quando o ponteiro do mouse no est sobre um link ou outro elemento. Quando um elemento de formulrio tem o focu, isto , est ativo. Quando um elemento de formulrio perde o focu, isto , quando o deixa de estar ativo. Quando o valor de um campo de formulrio modificado. Quando o usurio seleciona um campo dentro de elemento de formulrio. Quando o usurio clica sobre o boto Submit para enviar um formulrio.

    Unload

    MouseOver MouseOut Focus Blur

    Change Select

    Submit

    Procedimento de eventos

    Para ser eficaz, necessrio que a estes eventos sejam associados as aes previstas por voc. o papel de procedimento de eventos. A sintaxe : onevento="funtion()" Por exemplo, onClick="alert('Bem vindo ao Dicas Javascript')". De maneira literria, no clicar do usurio, abrir uma caixa de aviso com a mensagem indicada. onClick Evento mais clssico em informtica, o clique do mouse. O cdigo deste boto : <FORM> <INPUT TYPE="button" VALUE="Clicar" onClick="alert('Voc clicou no boto')"> </FORM>

    Mais detalhes sobre os formulrios no prximo captulo. onLoad e onUnload O evento Load aparece quando a pgina acaba de se carregar. O inverso, Unload aparece quando o usurio saia da pgina. Os eventos onLoad e onUnload so utilizados sob forma de atributos das tags <BODY> ou <FRAMESET>. Pode-se assim escrever um script para desejar as boas vindas na abertura de uma pgina e uma pequena palavra de despedida ao sair desta. <HTML> <HEAD> <SCRIPT LANGUAGE='Javascript'> funo bemvindo() { alert("Bem vindo a esta pgina"); } function adeus() { alert("Adeus"); } </SCRIPT> </HEAD> <BODY onLoad='bemvindo()' onUnload='adeus()'> Html normal </BODY> </HTML> onmouseOver e onmouseOut O evento onmouseOver executa-se quando o cursor passa por cima (sem clicar) de um link ou de uma imagem. Este evento bastante prtico, por exemplo, para inserir explicaes na barra de satus ou mesmo com uma pequena janela tipo info-objeto. Passar o cursor do mouse sobre a palavra exemplo (sem clicar no link). Exemplo O evento onmouseOut, geralmente associado um onmouseOver, executa-se quando o cursor saia da area sensvel (link ou imagem). onFocus O evento onBlur executado quando, por exemplo, uma text field de um formulrio perde o focus. Isto acontece quando o usurio desativa a text field clicando fora dela ou utilizando a tecla "Tab". Se depois de clicar e/ou escrever na zona do texto, clica-se fora do documento, produza-se o evento Blur.

    O cdigo : <FORM> <INPUT TYPE=text onBlur="alert('Isto um Blur!')"> </FORM>

    Procedimento de eventos

    Para ser eficaz, necessrio que a estes eventos sejam associados as aes previstas por voc. o papel de procedimento de eventos. A sintaxe : onEvento="fonction()" Por exemplo, onClick="alert('Bem vindo ao Dicas Javascript')". De maneira literria, no clicar do usurio, abrir uma caixa de aviso com a mensagem indicada. onchange Este evento bastante semelhante ao do onBlur mas com uma pequena diferena. No s a rea de texto deve ter perdido o focu mas tambm o seu contedo deve ter sido alterado pelo usurio. onSelect Este evento executa-se quando o usurio selecionou toda ou parte de um texto numa text field.
    tente selecionar este texto

    Procedimentos de eventos disponveis em Javascript Agora apresento uma lista de objetos que correspondem a procedimentos de evento bem determinado.
    OBJETO PROCEDIMENTOS DE EVENTOS DISPONVEIS

    Janela Link hypertexto Elemento de texto Elemento de zona de texto Elemento boto Boto Radio Lista de seleco Boto Submit Boto Reset

    onLoad, onUnload onClick, onmouseOver, on mouseOut onBlur, onChange, onFocus, onSelect onBlur, onChange, onFocus, onSelect onClick onClick onBlur, onChange, onFocus onClick onClick

    Sintaxe do onmouseOver Completamente similar ao onmouseOver, s que o evento se executa quando o cursor do do mouse sai do link ou da area sensvel. Pode-se imaginar o cdigo seguinte: <A HREF="#" onmouseOver="alert('Dicas Javascript')" onmouseOut="alert('Obrigado pela visita')">mensagem importante</A>

    Exemplo: Ao passar sobre o link "mensagem importante", uma janela de aviso abra-se. Troca de imagens Com a procedimento de eventos onmouseOver, podemos prever que depois de passado sobre uma imagem pelo usurio, uma outra aparece (ambas as imagem devem ter o mesmo tamanho). O cdigo relativamente simples. <HTML> <HEAD> <SCRIPT LANGUAGE="Javascript1.1"> function lightUp() { document.images["homeButton"].src="button_hot.gif" } function dimDown() { document.images["homeButton"].src="button_dim.gif" } </SCRIPT> </HEAD> <BODY> <A HREF="#" onmouseOver="lightUp();" onmouseOut="dimDown();"> <IMG SRC="button_dim.gif" name="homeButton" width=100 height=50 border=0> </A> </BODY> </HTML> Completem sempre em Javascript os atributos width=x height=y das suas imagens.

    Das könnte Ihnen auch gefallen