Kurs JavaScript (5)

Zdarzenia

Zdarzenia są funkcjami powodującymi wykonywanie procedur. Najczęściej są wyzwalane przez użytkownika oglądającego strony [kilka przykładów zdarzeń znajdziesz tu].I są to pojawiające się okienka typu Alert czy inne, albo procedury wykonywane poprzez uruchamianie poszczególnych elementów strony WWW.

Zdarzenia	Opisy zdarzeń
Cicik	Cicik ( kliknięcie ) występuje wtedy gdy użytkownik kliknie myszką na jakiś element strony.
Focus	Focus ( zogniskowanie ) występuje wtedy gdy, użytkownik użyje klawisza Tab lub kliknie myszką w celu wskazania jakiegoś elementu formularza
Blur	Blur ( rozmycie ) to przeciwieństwo zdarzenia Focus
Change	Change ( zmiana ) występuje wtedy gdy, użytkownik zmodyfikuje dane w formularzu.
MouseOver	MouseOver ( myszka nad ) występuje wtedy gdy wskaźnik myski znajdzie się nad elementem strony WWW.
MouseOut	MouseOut występuje wtedy gdy, wskaźnik myszki zostanie przemieszczony znad obiektu strony WWW. Jest to przeciwieństwo MouseOver.
Select	Select (wybór ) występuje wtedy gdy, użytkownik wybierze lub zaznaczy jakiś element strony WWW.
Submit	Submit ( wysyłka ) inicjowana jest wtedy gdy, zostanie naciśnięty przycisk Submit.
Abort	Abort ( przerwanie ) występuje wtedy gdy naciśniemy przycisk "Zatrzymaj" - w MISIE lub "STOP" w Netscape

Aby wywołać jakieś zdarzenie musimy dodać do niego przedrostek "on" i tak otrzymujemy np.:

OnMouseOver
OnClick
OnSubmit
Itd.

Aby przypisać jakieś dane do zdarzenia postępujemy według poniższego schematu:

OnZdarzenie = "polecenie"

Ważne jest to, iż polecenia jakie ma wykonać zdarzenie musi być umieszczone wewnątrz cudzysłowiu "".

Przykładowo chcemy aby strona zawierała przycisk, który jak naciśniemy wyświetlał komunikat w okienku typu Alert.

<script language="JavaScript">
function test()
{
alert=("Nacisnąłeś przycisk");
}
</script>

<form>
<input type="button" value="Naciśnij na mnie" onClick="test()">
</form>

Obiekty w oknie
Obiekt window (okno) składa się z pasku statusu oraz metod obiektów z którymi zapoznasz się w dalszej części kursu.
Wiersz stanu definiowany jest według poniższego wzoru:
window.status = "tekst komunikatu"
Przykład skryptu z wykorzystaniem obiektu window.status.
Chcemy stworzyć link do strony np. http://wp.pl ,który na wskutek nakierowania na niego kursora myszki wyświetla komunikat w pasku stanu [patrz]
Na początek napiszmy definicję linku w HTMLu:

<A HREF="http://wp.pl">Wirtualna Polska</a>

Teraz stwórzmy kod JavaScript

<script language="JavaScript">
function zmieniacz()
{
window.status = "Wirtualna Polska";
}
function puste()
{
window.status = " ";
}
</script>

Teraz w kodzie linku dopisujemy poniższy fragment :

<A HREF="http://wp.pl" onMouseOver="zmieniacz()" onMouseOut="puste()">

Jak widać funkcja puste() powoduje wyczyszczenie okienka statusu.

Metody obiektu window

Alert()

Metoda alert tworzy okienko dialogowe w którym możemy umieścić jakąś informację tekstową.

Ogólny wzór komendy alert przedstawia poniższy wzór:

window.alert("tekst komentarza")

Rozważmy teraz poniższy przykład:
Otóż chcemy stworzyć przycisk formularza który na wskutek naciśnięcia powiadamiał nas komunikatem "Witaj"
Najpierw zdeklarujmy kod przycisku formularza:

<form>
<input type="button" value="Naciśnij mnie">
</form>
Teraz napiszmy odpowiedni kod JavaScript:
<script language="JavaScript">
function powitanie()
{
window.alert("Witaj")
}
</script>
Teraz dodajmy do kodu przycisku poniższy kod:
<form>
<input type="button" value="Naciśnij mnie" onClick="powitanie()">
</form>

No i gotowe :)
W okienkach dialogowych tekst można formatować np.:

\n - oznacza nową linię
\t - oznacza tabulację

Confirm()

Confirm jest podobna do metody alert z tą różnicą iż okienko dialogowe posiada dwa przyciski "OK." oraz "CANCEL".

Ogólna deklaracja confirm ma postać :

window.confirm("tekst komunikatu")

Przykład:

Chcemy stworzyć skrypt sprawdzający czy w podany email jest wpisany poprawnie.W tym celu piszemy poniższy kod:

<script language="JavaScript">
function sprawdzaj()
{
znaczek = document.formularz.pole.value.indexOf ("@");
if (znaczek == -1)
{
window.alert("To nie jest adres email!!\nTy wstrętny kłamco!!!\n");
return false
}
else
{
var adres = "Wpisałeś " + document.formularz.pole.value + "\n" + "Czy email się zgadza?";
return window.confirm(adres)
};
}</script>

Teraz w kodzie HTML piszemy:

<form name="formularz">
<Input type="text" name="pole">
<Input type="button" value="Sprawdź adres email" onClick="sprawdzaj()">
</form>

Większość poleceń powinieneś znać, gdyż została wyjaśniona w poprzednich lekcjach kursu.Jedyna obca ci komenda to indexOf ("@") - polecenie to poszukuje znaku zawartego w cudzysłowiu "".

Prompt()

Wyświetla okno dialogowe do którego użytkownik może coś wpisać. Ogólny schemat metody wygląda następująco :

Jakaśzmienna = window.prompt("wyświetlony komunikat","wartość_domyślna")

Wyświetlony komunikat to tekst z którym pojawia się okienko, natomiast wartość domyślna to wartość zwracana przez metodę przy braku danych ze strony użytkownika.

Przykład:
Chcemy stworzyć skrypt który przy podaniu wieku dopuszczałby do strony niespodzianki.

<script language="JavaScript">

function wiek()
{
var wiek = window.prompt ("Ile masz lat?","");
if ( wiek <18 )
{
window.alert("Jesteś za młody aby oglądać tę stronę !!!");
}
else
window.location.herf="http://www.whitehouse.com" ;
}
</script>

Jedyną komendą jaką nie znasz jest window.location.href="link". Komenda ta powoduje wczytanie się strony o podanym linku.

Aby kod zadziałał w sekcji <BODY> musisz dopisać:

<BODY onLoad="wiek()">

To spowoduje iż przy wczytywaniu strony okienko prompt() pojawi się.