Zdarzenia i formularze
Zdarzenia onLoad i onUnload
Na stronie mogą zachodzić różne zdarzenia, np. użytkownik kliknie myszą lub zacznie wprowadzać dane do formularza. JavaScript pozwala na oprogramowanie tego typu zdarzeń poprzez procedury ich obsługi. Jedną z takich procedur jest onLoad, która zostanie wykonana po załadowaniu strony do przeglądarki. Możemy ją wykorzystać np. do powitania użytkownika.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</HEAD>
<BODY onLoad = "alert ('Cześć! Miło, że odwiedziłeś moją stronę')">
<H1><CENTER>
Moja strona WWW
</H1></CENTER>
</BODY>
</HTML>
Warte uwagi jest, że okienko z powitaniem pojawi się dopiero po pełnym załadowaniu strony. Jeśli zatem w treści umieściliśmy wywołania jakichś innych funkcji, zostaną one wykonane w pierwszej kolejności! Ogólnie składnia definiująca procedurę obsługi zdarzenia wygląda następująco:
<znacznik_HTML parametry_znacznika nazwa_zdarzenia = "instrukcje_Java_Script"
lub
<znacznik_HTML parametry_znacznika nazwa_zdarzenia = "nazwa_funkcji_w_Java_Script"
Ponieważ procedura czy funkcja obsługująca dane zdarzenia może być dosyć skomplikowana, wygodniejsze i bardziej czytelne jest stworzenie oddzielnej funkcji, a następnie przypisanie jej do zdarzenia.
Wyjątkiem są oczywiście sytuacje, kiedy procedura obsługi zdarzenia składa się tylko z jednej prostej instrukcji i śmiało można ją umieścić przy znaczniku.
Zdarzeniem analogicznym do onLoad jest onUnload, z tym że jest ono wykonywane przy opuszczaniu strony przez użytkownika. Można je więc wykorzystać do pożegnania.
Napisz skrypt wyświetlający okno pożegnalne przy opuszczaniu strony WWW.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</HEAD>
<BODY onUnload = "alert ('Do widzenia!\nMamy nadzieję, że niedługo znów nas odwiedzisz!')">
<H1><CENTER>
Moja strona WWW
</H1></CENTER>
</BODY>
</HTML>
Napisz skrypt, który przy ładowaniu strony zapyta użytkownika o imię, powita go, a przy opuszczeniu witryny pożegna, korzystając z podanego imienia.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<SCRIPT LANGUAGE = JavaScript>
<!-- Ukrycie przed przeglądarkami nieobsługującymi JavaScript
function powitanie (imie){
alert ("Cześć! Witamy na naszej stronie " + ((imie=="brak")?"":imie) + "!");
}
function podaj_imie (){
imie = prompt ("Podaj nam swoje imię", "");
document.write ("Miło, że jesteś z nami " + imie + "!<BR>");
document.write ("Mamy nadzieję, że znajdziesz tu coś ciekawego dla siebie.");
return imie;
}
function pozegnanie (imie){
alert ("Do widzenia!\nMamy nadzieję że niedługo znów nas odwiedzisz");
}
// Koniec kodu JavaScript -->
</SCRIPT>
</HEAD>
<BODY onLoad = "powitanie(imie)"; onUnload = "pozegnanie (imie)">
<H2>
<SCRIPT LANGUAGE = JavaScript>
<!-- Ukrycie przed przeglądarkami nieobsługującymi JavaScript
var imie = podaj_imie();
// Koniec kodu JavaScript -->
</SCRIPT>
</H2>
<BODY>
</HTML>