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
}
Musisz wiedzieć, że gdy deklarujesz nową funkcję, to tak naprawdę deklarujesz nową metodę dla głównego obiektu czyli okna window.
nazwa_funkcji = function() {
...kod funkcji anonimowej
}
//jest równoznaczne z
window.nazwa_funkcji = function() {
...kod funkcji anonimowej
}
Przykładowo w poniższym skrypcie deklarujemy funkcję o nazwie pisz:
function pisz() {
alert("To jest tekst zawarty w funkcji.");
}
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.
Przykładowo stwórzmy funkcję która będzie pokazywała na ekranie okienko dialogowe typu alert z tekstem "Czemu to zrobiłeś!":
<input type="button" id="guzik" value="Nie klikaj mnie" />
<script type="text/javascript">
function pokaz() {
alert("Czemu to zrobiłeś!");
}
document.getElementById('guzik').onclick = function() { pokaz() }
</script>
Częstokroć konieczne będzie przekazanie do funkcji określonych danych, które następnie zostaną przez nią przetworzone. Atrybuty przekazuje się wypisując je między nawiasami występującymi po nazwie funkcji:
function nazwa_funkcji(atrybut1,atrybut2,atrybut3...) {
...
}
Stwórzmy przykładowo pole funkcję która będzie wypisywała na ekran korzystając z okna dialogowego typu alert tekst w zależności od tego na który guzik kliknął użytkownik. Na początku tworzymy formę z guzikami:
<form name="formularz">
<fieldset>
<input type="button" id="guzik_1" value="Guzik 1" />
<input type="button" id="guzik_2" value="Guzik 2" />;
<input type="button" id="guzik_3" value="Guzik 3" />
</fieldset>
</form>
<script type="text/javascript">
function wypisz(tekst) {
alert(tekst)
}
document.getElementById('guzik_1').onclick = function() { wypisz('Ja jestem pierwszym guzikiem') }
document.getElementById('guzik_2').onclick = function() { pokaz('Ja jestem drugim guzikiem') }
document.getElementById('guzik_3').onclick = function() { pokaz('A ja nie chce być ostatnim guzikiem :(') }
</script>
Javascript nie wymaga od nas, abyśmy przekazywali do funkcji odpowiednią ilość argumentów. Możemy więc przy wywoływaniu takiej funkcji przekazać do niej o wiele więcej argumentów, albo nie przekazywać nic. Oczywiście musimy mieć na uwadze, że "majstrując" przy argumentach prawdopodobnie sprawimy, że dana funkcja nie będzie prawidłowo działać.
Aby odczytać przekazane argumenty musimy odwołać się do tablicy arguments:
//wypisz ilość przekazanych argumentów
function jakas() {
alert('Do funkcji przekazano ' + arguments.length);
}
//jeżeli do funkcji podano 3 argumenty to je wypisz, inaczej pokaż błąd
function NazwaFunkcji(x, y, z) {
if (arguments.length > 3) {
alert('Przekazane argumenty to: ' +x+ '; ' +y+ '; ' +arguments[2]);
} else {
alert('Nie podałeś argumentów');
}
}
//jeżeli pierwszy argument jest tablicą, to wstaw do niej pozostałe argumenty pisane dużymi literami
function dodajDoTablicy() {
if (arguments[0].constructor.toLowerCase == 'array') {
for (x=1; x<arguments.length; x++) {
arguments[0].push(arguments[x].toUpperCase())
}
}
}
Każda funkcja po zakończeniu działania zwraca wartość true lub false. Możemy narzucić zwracaną wartość przy pomocy instrukcji return. Instrukcja return kończy wykonywanie kodu funkcji i przesyła wartość z powrotem do kodu skryptu. Poniższy przykład demonstruje zastosowanie tej instrukcji:
<script type="text/javascript">
function licz(liczba1, liczba2) {
var wynik = liczba1 + liczba2
return wynik
}
document.write(licz(10,4))
</script>
Utworzyliśmy funkcję która wymaga podania dwóch liczb a zwraca nową zmienną (wynik), która jest sumą tych liczb. Następnie korzystając z metody document.write wypisujemy wynik zwrócony przez funkcję na ekran.
Naszą funkcję możemy zapisać w nieco bardziej zwięzły sposób:
function licz(liczba1, liczba2) {
return liczba1 + liczba2
}
Dzięki temu, że każda funkcja zwraca prawdę lub fałsz, możemy ją wykorzystać do sprawdzania jakiś warunków.
W poniższym przykładzie za pomocą funkcji wTablicy sprawdzamy, czy dana wartość znajduje się w tablicy. W zależności od wyniku funkcja zwraca prawdę lub fałsz.
function wTablicy(tablica, liczba) {
for (var x=0; x<tablica.length; x++) {
if (tablica[x]==liczba) return true //jeżeli liczba będzie w tablicy, wówczas funkcja zwróci prawdę (i tym samym zakończy działanie)
}
return false
}
var tab = new Array(1, 3, 5, 7);
if (wTablicy(tab, 55)) {
alert('Liczba 55 jest w tablicy');
}
Instrukcja return może też zwracać kilka wartości, które grupujemy w tablicę:
function jakas(L1,L2,L3) {
return [1,2,3] //zwracamy tablicę
}
var pierwsza = jakas()[0]; //pod zmienną podstawiamy pierwszą wartość zwracaną przez funkcję
var druga = jakas()[1]; //...analogicznie...
var trzecia = jakas()[2];
alert(pierwsza + '|' + druga + '|' + trzecia); //wypisze 1|2|3
Na koniec tego rozdziału zajmiemy się dodatkową metodą deklaracji funkcji. Każda funkcja może być także deklarowana w taki sam sposób jak tworzone nowe obiekty:
new function(.....)
//lub
Function('.....') //kod funkcji w postaci stringa
Ma to szczególne zastosowanie przy przypisywaniu fnkcji do zdarzeń. Rozpatrzmy poniższy przykład:
<script type="text/javascript">
function pisz(x) {
alert('Liczba to ' + x);
}
function liczba() {
var obiekt = document.getElementById('przykladowy_guzik');
var jakas = 10;
obiekt.onclick = new function() {
var jakas2 = jakas + 10;
pisz(jakas2)
}
}
</script>
<input type="button" onclick="liczba()" value="kliknij" id="przykladowy_guzik" />
Dzięki konstruktorowi przypisaliśmy do zdarzenia click przycisku przykladowy_guzik przypisaliśmy gotową funkcję. Gdybyśmy pominęli w powyższym kodzie słowo "new", wówczas przypisalibyśmy do zdarzenia konstruktor funkcji. Oznacza to, że przy pierwszym kliknięciu na guzik, przypisany byłby konstruktor funkcji (czyli został by utworzony kod funkcji), ale sama funkcja nie została by wykonana! Dopiero po drugim kliknięciu została by odpalona funkcja.