[ Pobierz całość w formacie PDF ]
wykorzystujące
zdarzenie onLoad
Moja strona WWW
Warte uwagi jest, że okienko z powitaniem (rysunek 5.1) 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:
lub
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. Zwykle tak właśnie będziemy
postępować w kolejnych ćwiczeniach. 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.
wiczenie 5.2.
Napisz skrypt wyświetlający okno pożegnalne przy opuszczaniu strony WWW.
Moja strona WWW
wiczenie 5.3.
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.
function powitanie (imie){
alert ("Cześć! Witamy na naszej stronie " + ((imie=="brak")?"":imie) + "!");
}
function podaj_imie (){
imie = prompt ("Podaj nam swoje imię", "");
if (imie == null || imie == ""){
imie = "brak";
document.write ("Miło, że jesteś z nami!");
document.write ("Mamy nadzieję, że znajdziesz tu coś ciekawego dla siebie.");
}
else{
document.write ("Miło, że jesteś z nami " + imie + "!");
document.write ("Mamy nadzieję, że znajdziesz tu coś ciekawego dla siebie.");
}
return imie;
}
function pozegnanie (imie){
if (imie != "brak"){
alert ("Do widzenia " + imie + "\nMamy nadzieję, że niedługo znów nas odwiedzisz");
}
else{
alert ("Do widzenia!\nMamy nadzieję że niedługo znów nas odwiedzisz");
}
}
// Koniec kodu JavaScript -->
var imie = podaj_imie();
// Koniec kodu JavaScript -->
Całość działa w sposób następujący. Najpierw zostanie załadowana treść strony, w tym przypadku jest to sekwencja:
var imie = podaj_imie();
49
Rozdział 5. Zdarzenia i formularze
Zostanie więc wykonana funkcja JavaScript podaj_imie(). Funkcja ta, wykorzystując znane już nam konstrukcje, pyta
się użytkownika o jego imię, a następnie sprawdza, czy podany został jakiś łańcuch znaków. Jeśli tak, to na ekranie
pojawia się część strony z uwzględnieniem podanego imienia i funkcja zwraca wprowadzony przez użytkownika łańcuch
znaków. Ciąg ten staje się wartością zmiennej o nazwie imie. Następnie wykonywana jest procedura onLoad, czyli de
facto funkcja powitanie(). Wyświetla ona dodatkowe okienko z powitaniem, wykorzystując jako parametr podany
łańcuch znaków.
Przy opuszczaniu strony wywoływana jest procedura onUnload (czyli przypisana jej funkcja pozegnanie()). Jako
parametr otrzymuje ona również łańcuch znaków ze zmiennej imie i wykorzystuje go w wyświetlanym oknie
pożegnalnym. W przypadku, gdy nie podamy imienia, wartością zmiennej imie staje się łańcuch znaków brak .
Wykorzystujemy ten fakt w funkcjach powitanie() i pozegnanie() do stwierdzenia, którą wersję strony i okna
dialogowego mamy wyświetlić.
Zdarzenia związane z myszą
Zdarzenia związane z obsługą myszy to onMouseOver, onMouseOut i onClick. Zdarzenie onMouseOver zachodzi, kiedy
kursor myszy znajdzie się nad obiektem, którego ma dotyczyć. Analogicznie onMouseOut zachodzi, kiedy kursor opuści
obiekt, a onClick, kiedy obiekt zostanie kliknięty.
wiczenie 5.4.
Napisz skrypt, który gdy naprowadzimy myszkę na tekst znajdujący się w dokumencie, wyświetli okno dialogowe z
dowolnym napisem (rysunek 5.2).
Rysunek 5.2.
Efekt działania skryptu
z ćwiczenia 5.4
Przykładowy tekst
Niestety przykład ten nie zadziała w przypadku przeglądarki Netscape Navigator, gdyż nie obsługuje ona zdarzenia
onMouseOver przypisanego do paragrafów tekstowych (znacznik ).
wiczenie 5.5.
Napisz skrypt, który po kliknięciu na odnośnik zawarty w dokumencie zamknie okno przeglądarki.
onClick="window.close()";
>
Zamknij okno
50
JavaScript. wiczenia praktyczne
wiczenie 5.6.
Napisz skrypt, który po kliknięciu na przycisk zapyta użytkownika, czy na pewno chce opuścić bieżąca stronę. Jeśli tak,
należy wywołać nową stronę.
function obsluga_zdarzenia(){
if (confirm ('Czy na pewno chcesz przejść na stronę http://helion.pl?'))
window.location.href = "http://helion.pl";
}
// Koniec kodu JavaScript -->
VALUE = "helion.pl"
onClick = "obsluga_zdarzenia()";
>
wiczenie 5.7.
Napisz skrypt, który będzie zmieniał napis na pasku stanu, kiedy użytkownik najedzie kursorem lub kliknie na odnośnik
znajdujący się w dokumencie.
function ObslugaPaskaStanu (){
window.status='Strona Wydawnictwa Helion';
}
function ObslugaKlikniecia (){
window.status="Otwieram nową stronę";
}
// Koniec kodu JavaScript -->
onClick = "ObslugaKlikniecia(); return true;"
onMouseOver = "ObslugaPaskaStanu();return true;"
>
Strona wydawnictwa Helion
window.defaultStatus = "Przykładowa strona z obsługą skryptów";
// Koniec kodu JavaScript -->
Domyślnie na pasku stanu wyświetlany jest tekst Przykładowa strona z obsługą skryptów . Po naprowadzeniu kursora na
[ Pobierz całość w formacie PDF ]
