
Funkcje i zdarzenia JavaScript …
będą głównym tematem części drugiej artykułów o podstawach języka.
Funkcje w JavaScript
Funkcje są kolejnym, bardzo istotnym elementem języka. Jak już wspomnieliśmy w części 1: funkcje różnią się od metod tym, że metody skojarzone są z obiektami, a funkcje są niezależne.
Po zdefiniowaniu funkcji możemy ją wywołać, lub też przypisać do zdarzeń, które chcemy przechwytywać i obsługiwać. Przechwytywanie jest możliwe poprzez przypisanie obsługi zdarzeń elementom strony. Oba przypadki zademonstrowano poniżej.
Przykład – definicja funkcji i jej wywołanie:
function kwadrat(liczba) { wynik = liczba * liczba; return wynik; } function oblicz() { var k = kwadrat(2); // wywołanie funkcji kwadrat() alert("Kwadrat liczby 2 wynosi " + k); } // wywołanie funkcji oblicz(): oblicz();
Funkcja oblicz(), która nic nie zwraca, przypomina znane z innych języków programowania konstrukcje, zwane procedurami.
Słowo kluczowe return używane jest do zwracania wartości przez funkcję, lub po prostu do wywołania tzw. powrotu z funkcji.
Znakomitą cechą języka jest możliwość przypisywania funkcji, tak samo, jakbyśmy przypisywali wartość.
Przykład – przypisanie funkcji do zdarzenia:
window.onload = function() { alert("Okno mówi cześć po wczytaniu"); }
Tutaj funkcja została przypisana do zdarzenia onload. Zauważmy że funkcja nie posiada nazwy.
Funkcje a argumenty
Argumenty umieszczamy w nawiasie po nazwie funkcji. Wewnątrz funkcji możemy odwołać się do argumentów bezpośrednio, lub poprzez specjalną tablicę arguments w następujący sposób: arguments[indeks];
Przykład – tablica arguments:
function mojaKonkatenacja(separator) { var wynik = ""; // iteracja po argumentach for (var i = 1; i < arguments.length; i++) { wynik += arguments[i] + separator; } return wynik; } // użycie var demo = mojaKonkatenacja(", ", "red", "green", "blue"); alert(demo);
Funkcja zwróci łańcuch „red, green, blue,” – zbudowany z przekazanych słów i podanego separatora, mimo że jawnie funkcja przyjmuje tylko argument „separator”, to dostęp do kolejnych i kolejnych argumentów uzyskujemy łatwo dzięki tablicy „arguments”.
Zdarzenia
W JavaScript możemy przechwycić wiele różnych zdarzeń. W przyszłych publikacjach pokażemy jak różne biblioteki / framework’i JS potrafią to zadanie umilić, zwykle dając przyjazną programiście i łatwą w zapisie notację.
Przykład – obsługa zdarzenia kliknięcia:
<img src="fotka.jpg" onclick="alert('Kliknięto fotkę');" />
Poniżej więcej podstawowych informacji na temat zdarzeń.
Spis procedur obsługi zdarzeń w JavaScript
– onblur – zdarzenie, które zachodzi gdy element traci focus, innymi słowy użytkownik opuszcza / zmienia aktywne pole
– onchange – gdy użytkownik zmienia wartość pola
– onclick – gdy element został kliknięty
– ondblclick – gdy element został dwukrotnie kliknięty
– onfocus – gdy element otrzymuje focus, czyli użytkownik uaktywni dane pole
– onkeydown – gdy wciśnięty zostanie jakiś klawisz klawiatury
– onkeypress – gdy klawisz klawiatury zostanie wciśnięty i puszczony
– onkeyup – gdy klawisz klawiatury zostanie puszczony
– onload – gdy przeglądarka zakończy ładowanie zawartości strony lub ramki
– onmousemove – gdy kiedy kursor myszy zostaje przesuwany nad elementem (następuje ruch kursora)
– onmouseout – gdy kursor myszy opuści obszar elementu, nad którym się znajdował
– onmouseover – gdy kursor myszy znajdzie się w obszarze nad elementem
– onmousedown – gdy przycisk myszy zostanie naciśnięty nad elementem
– onmouseup – gdy przycisk myszy zostanie puszczony
– onreset – gdy formularz zostanie zresetowany (przycisk reset)
– onselect – zdarzenie zachodzące podczas zaznaczania fragmentu tekstu (zawartości pola)
– onsubmit – gdy zawartość formularza zostanie wysłana
– onunload – gdy zmieniana jest aktualnie wyświetlana w przeglądarce strona.
Dodając do formularza atrybut onsubmit=”return checkForm(this)”, zostanie wykonana funkcja checkForm(), w której można np.: sprawdzić poprawność zawartości pól, czyli wykonać walidację (gdy taka funkcja zwróci false, formularz nie zostanie wysłany).
Przykład:
<form action="index.php" name="myForm" id="myForm" onsubmit="return checkForm(this)"> ... tutaj pola formularza </form>
Parametr this określa obiekt aktualny, w tym przypadku formularz (obiekt skojarzony ze znacznikiem form).
Do formularza z poziomu czystego (tzn. bez użycia framework’ów) JavaScript najprościej odwoływać się z poziomu obiektu document.form. W praktyce lepiej jednak odwołać się poprzez document.forms podając nazwę interesującego nas formularza.
Przykład – prosty odnośnik, który po kliknięciu wysyła formularz:
<form action="index.php" name="myForm" id="myForm"> ... tutaj pola formularza </form> <a href="javascript:document.forms.myForm.submit()">Wyślij</a>
Po kliknięciu na „Wyślij” zostanie wywołanie zdarzenie submit, czyli wysłanie formularza.
To wszystko w tej części, w następnej powiemy o operatorach, typach danych, elementach globalnych i sterowaniu przepływem programu.