Programowanie webowe | 05. JavaScript potrzebny do egzaminu

Funkcje. Parametry funkcji

Mirosław Zelent

Funkcja to wydzielony, autonomiczny fragment kodu, który nie wykona się automatycznie sam, tylko zostanie zawołany do pracy w konkretnym miejscu kodu, który nazywamy “wywołaniem” funkcji.

Wywołania dokonujemy po nazwie funkcji, koniecznie używając także nawiasów okrągłych (aby było jasne, że chodzi o nazwę funkcji, a nie zmiennej). W języku JavaScript własne funkcje możemy także podpinać do obsługi zdarzeń (ang. event) zachodzących w przeglądarce.

Przykładem może być zdarzenie click (ang. "przy kliknięciu, podczas kliknięcia"). Kiedy zajdzie zdarzenie click elementu HTML, który posiada ustawiony atrybut onclick, to wywołana zostanie funkcja o takiej nazwie, jaką zapisano w cudzysłowie atrybutu (tutaj znajduje się to logiczne połączenie pomiędzy funkcją i obsługą zdarzenia):

HTML

<input type="button" value="DODAWANIE" />

JavaScript

 function suma()
 {
   // instrukcje realizujące dodawanie
 } 

Ponieważ wywołania funkcji przypisujemy do zajścia zdarzeń w przeglądarce, to kod JS wewnątrz funkcji staje się dzięki temu mniej wrażliwy na miejsce podpięcia skryptu (bo dokładnie określiliśmy moment wykonania fragmentu kodu). Kod staje się także bardziej poukładany, gdyż tworząc funkcje realizację zadań dzielimy na poszczególne autonomiczne bloki kodu.

Istnieje także alternatywny, nowszy sposób podpięcia funkcji do obsługi zdarzenia, z użyciem metody addEventListener() – pozwala ona dodać (“przypiąć”) do elementu dowolną ilość “nasłuchiwaczy” danego zdarzenia (w przeciwieństwie do sposobu z atrybutem HTML, w którym jesteśmy ograniczeni do jednej funkcji obsługującej zdarzenie).

Dzięki tej nowej metodzie podpinania obsługi zdarzeń lepiej też oddzielamy kod JavaScript od HTML – następuje lepsza separacja pomiędzy mechaniką a wyglądem strony (gdyż nie trzeba już używać atrybutu onclick). Przykładowy sposób wywołania metody:

HTML

<input id="przycisk" type="button" value="DODAWANIE" />

JavaScript

 var przycisk = document.getElementById('przycisk');
 przycisk.addEventListener("click", function() { suma(); }); 

Dużo więcej na temat właśnie takiej obsługi zdarzeń przez własne funkcje opowiedziano w piątym odcinku kursu JavaScript.

Parametry funkcji

Do własnej funkcji możemy wysłać jakieś wartości jako tzw. parametry – umieszczamy je w nawiasach okrągłych i dowolnie nazywamy (klauzula var nie jest tym razem wymagana), a jeśli parametrów jest więcej niż jeden, to oddzielamy je przecinkiem:

 var a = 3;
 var b = 4;

 alert(suma(a,b)); // wywołanie funkcji suma w alercie

 function suma(x, y)
 {
   return x + y;
 } 

Co ważne – te same wartości 3 i 4 (umieszczone w zmiennych: "a", "b") funkcja na własne potrzeby nazywa: "x", "y", a zatem jak widać przechowuje te liczby w innych szufladkach.

Oznacza to, iż funkcja suma() tak naprawdę działa na kopiach zmiennych a, b. Dzięki temu oryginalne wartości nie ulegną przypadkowej podmianie wartości! Dlatego też domyślnie, parametr funkcji jest jedynie kopią przekazanej do funkcji, oryginalnej wartości (zwiększamy bezpieczeństwo danych, oszczędzamy także wiele czasu przy szukaniu ewentualnych przypadkowych podmian, możemy łatwiej przenosić funkcje do innych źródeł, gdyż jest całkowicie niezależna od nazw zmiennych spoza jej zasięgu).