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.

Dominik Wlazłowski

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

     

Podaj dalej: 11001