Funkcje - lomilowka.pl

Funkcje
Gdy mąż słyszy od żony idź do sklepu, kup ziemniaki, wówczas zaczyna wykonywać pewien zbiór
czynności. Za każdym razem, gdy usłyszy idź do sklepu, kup ziemniaki, wykona ten sam zbiór
czynności (heh - do czasu...). W javascript takie czynności ujęte w grupę to właśnie funkcje.
Funkcja jest wywoływana przez inną część skryptu (w realnym życiu przez żonę), a w momencie
jej wywołania zostaje wykonywany kod w niej zawarty. Ogólny wygląd funkcji ma następującą
postać:
function nazwa_funkcji() {
...kod funkcji
}
//lub
nazwa_funkcji = function() {
...kod funkcji anonimowej
}
Powyższy przykład wcale nie jest taki błachy. O różnicach w powyższych deklaracjach możesz
przeczytać tutaj. Póki co nie zawracaj sobie tym głowy.
W poniższym skrypcie deklarujemy funkcję o nazwie pisz:
function pisz() {
alert("To jest tekst zawarty w funkcji.");
}
pisz(); //odpalamy powyższą funkcję
Zadeklarowana funkcja może być wywoływana w dowolnym momencie skryptu. Możemy ją
wywoływać np. poprzez obsługę zdarzenia (np. onclick), poprzez sprawdzenie jakiegoś warunku, z
wnętrza innej funkcji itp.:
if (pokazacTekst == true) {
pisz();
}
</script>
Funkcje możemy także podpinać pod zdarzenia (które poznamy nieco później):
function pokaz() {
alert("Czemu to zrobiłeś!");
}
document.getElementById('guzik').onclick = function() {
pokaz()
}
Parametry (argumenty) funkcji
Częstokroć konieczne będzie przekazanie do funkcji określonych danych, które następnie zostaną
przez nią przetworzone.
Parametry przekazuje się wypisując je między nawiasami występującymi po nazwie funkcji:
function nazwa_funkcji(parametr_1, parametr_2, parametr_3...) {
parametr_1 + parametr_2 + parametr_3
}
Stwórzmy przykładową funkcję, która będzie sobie coś liczyła:
function licz(liczbaA, liczbaB) {
alert(liczbaA * liczbaB)
}
licz(3, 4); //wypisze 12
licz(7, 7); //wypisze 49
licz(100, 100); //wypisze 1000
</script>
Javascript nie wymaga od nas, abyśmy przekazywali do funkcji odpowiednią ilość argumentów.
Jeżeli nie zakładamy konkretnej liczby argumentów dla funkcji, wtedy możemy skorzystać z tablicy
arguments, dzięki której możliwe jest pobieranie poszczególnych parametrów:
//wypisz ilość przekazanych argumentów
function jakas() {
if (arguments.length) {
alert('Pierwszy przekazany argument to ' + arguments[0]);
alert('Liczba przekazanych argumentów to ' +
arguments.length);
}
}
Jeżeli powyższy kod wydaje ci się dziwny, nie martw się. Tablice poznasz w pużniej
Instrukcja return
Każda funkcja po zakończeniu działania zwraca jakąś wartość. Może to być jakiś tekst, liczba czy
wartość logiczna (prawda / fałsz).
Dzięki zastosowaniu instrukcji return możemy nakazać funkcji zwracanie określonej wartości.
Instrukcja ta równocześnie przerywa dalesz działanie funkcji:
function licz(liczba1, liczba2) {
var wynik = liczba1 + liczba2;
return wynik;
}
alert( licz(10,4) );
function sprawdz(tekst) {
if (tekst.length < 10) { //jeżeli długość tekstu jest mniejsza
od 10...
return false;
} else {
return true;
}
}
if (sprawdz('Przykładowy tekst')) {
alert('Tekst jest za krótki')
} else {
alert('Tekst jest wystarczająco długi');
}
Zauważyłeś jak w powyższym przykładzie zastosowaliśmy funkcję wraz z instrukcją "if"?
Jeżeli daną funkcję zastosujemy w instrukcji warunkowej if, wtedy zwracana wartość przez tą
funkcję zostanie automatycznie przekonwertowana do typu logicznego (true/false). Wszystkie
"pełne" wartości zamienią się na true, a puste (0, pusty string itp) zamienią się na false:
function sprawdz(tekst) {
return tekst;
}
if (sprawdz('testujemy')) alert('Funkcja zwróciła true')
if (sprawdz('')) alert('Funkcja zwróciła true')
Instrukcja return może też zwracać kilka wartości, które grupujemy w tablicę...
function zwrocTablice(L1,L2,L3) {
return [1,2,3] //zwracamy tablicę
}
var pierwsza = zwrocTablice()[0]; //pod zmienną podstawiamy
pierwszą wartość zwracaną przez funkcję
var druga = zwrocTablice()[1]; //...analogicznie...
var trzecia = zwrocTablice()[2];
alert(pierwsza + '|' + druga + '|' + trzecia); //wypisze 1|2|3
lub obiekt:
function zwrocObiekt(L1,L2,L3) {
return {
pierwsza: 1,
druga: 2,
trzecia: 3
}
}
var zwrotka = zwrocObiekt();
var pierwsza = zwrotka.pierwsza;
var druga = zwrotka.druga;
var trzecia = zwrotka.trzecia;
alert(pierwsza + '|' + druga + '|' + trzecia); //wypisze 1|2|3
Czekaj, czekaj. Nie tak prędko!
Do tego wszystkiego jeszcze dojdziemy.
Na chwilę obecną najważniejsze jest byś zapamiętał, że funkcja to zamknięty fragment kodu, który
możesz wywołać z "każdego miejsca". Ten fragment kodu może zwracać jakiś wynik, który bardzo
łatwo można wykorzystywać przy instrukcjach sprawdzających. I tyle.
Różnice w deklaracji funkcji
Na samym początku podałem dwie metody deklaracji funkcji.
function nazwa_funkcji() {
...kod funkcji
}
//lub
nazwa_funkcji = function() {
...kod funkcji anonimowej
}
Różnią się one nie tylko sposobem zapisu. Zadeklarowana w sposób pierwszy funkcja jest od razu
dostępna dla całego skryptu. Zadeklarowana w sposób drugi jest dostępna dopiero po całkowitym
przetworzeniu skryptu. Najlepiej pokazuje to poniższy przykład:
<script>
//Błąd
functionOne();
var functionOne = function() {
}
</script>
<script>
//Tutaj jest ok
functionTwo();
function functionTwo() {
}
</script>