Wirtuals.pl - Funkcje i obiekty

Funkcja jest oddzielnym blokiem kodu, który może być wielokrotnie wykonywany w danym programie, poprzez jej wielokrotne wywoływanie. Do funkcji przekazujemy przeważnie jakieś argumenty, a funkcja może nam zwracać jakąś wartość. Dobrze jest tworzyć funkcję tak, aby wykonywała jedno określone zadanie - czyli większe operacje w programie rozdzielamy na kilka wywoływanych kolejno funkcji. Dzięki temu tworzymy cegiełki, z których budujemy potem cały skrypt, a które możemy wykorzystać w innych skryptach (gdy zapiszemy je w oddzielnych plikach - o czym była mowa już wcześniej).

Funkcję definiujemy na początku kodu strony - czyli w sekcji HEAD, a wywołujemy ją w dowolnym miejscu poniżej, jeżeli zajdzie taka potrzeba. Dzięki temu możemy być pewni, że funkcja jest załadowana, zanim następuje jej wywołanie.

2. Jak zdefiniować funkcję?

Po słowie function piszemy jej nazwę i w nawiasach argumenty, jakie chcemy jej przekazać. Kod wykonywany przez funkcję umieszczamy pomiędzy klamrą otwierającą { i zamykającą } która jest równoznaczna z końcem fukncji.

function pomoc() {
document.write("<a href=\"pomoc.html\"><img src=\"help.gif\" width=\"15\" height=\"10\" alt=\"help\" /></a>")
}

Dzięki takiej funkcji nie musimy wstawiać za każdym razem w treści strony żmudnie document.write, kiedy chcemy odesłać użytkownika do strony z pomocą. Wywołujemy naszą funkcję pomoc:

document.write("Jeżeli nie wiesz co zrobić dalej, zobacz pomoc: ")
pomoc() // to jest wywołanie funkcji w programie

3. Funkcja zwracająca wartość.

Znaczna część funkcji jakie stworzysz, będzie otrzymywała jakieś dane, przetwarzała je i zwracała wynik z powrotem do programu. Napiszmy funkcję dodającą dwie liczby:

function suma(liczba1, liczba2) {
sumaliczb=liczba1+liczba2 // dodaje liczby i przypisuje nowej zmiennej
wynik=sumaliczb
return wynik // zwraca zmienną wynik
}

a=1;
b=2;
c=suma(a,b) // funkcja zwraca wartość, która jest podstawiana do zmiennej c
document.write("c="+c+" to samo co: "+ suma(a,b))

4. Zasięg zmiennych.

Zasięg zmiennej jest to inaczej czas jej życia - czyli w jakich miejscach kodu JavaScript ją widzi i można z niej korzystać. Pod tym względem dzielimy je na lokalne i globalne. Zmienne lokalne to takie, które są deklarowane wewnątrz funkcji i które giną wraz z zakończeniem działania tej funkcji. Zatem zmiennej sumaliczb utworzonej w powyższym przykładzie nie możemy użyć nigdzie poza funkcją suma. Zmienne globalne natomiast, deklarowane poza funkcją - są dostępne od momentu ich pierwszego użycia aż do końca kodu HTML. W niektórych przeglądarkach - jak Internet Explorer - nie musimy się martwić o zasięg - zmienna jest dostępna od momentu jej pierwszego użycia, do końca kodu strony.

5. Funkcje predefiniowane JavaScript.

Pisząc nasze skrypty mamy zawsze dostęp do zestawu funkcji standardowych dla JavaScript. Należy do nich przykładowo funkcja alert - wyświetlająca okienko dialogowe z informacją i przyciskiem OK, albo prompt - wyświetlającej okienko, w którym użytkownik może wpisać wartość zwracaną potem do programu.

alert("Witam na mojej stronie")
document.write("Miło mi Cię gościć "+ prompt("Podaj imię:") +" na mojej stronie")

Z innymi dostępnymi funkcjami zapoznasz się w miarę potrzeby w przyszłości.

6. Obiekty.

Czasami zachodzi sytuacja, w której potrzeba nam "zmiennej" bardziej szczegółowo opisującej rzecz, stan, osobę czy zjawisko której dotyczy. Jeżeli opisujemy np. samochód, to nie wystarczy nam, gdy podamy tylko rok produkcji, tylko jego markę, lub maksymalną prędkość, czy pojemność silnika. Chcielibyśmy mieć możliwość opisania wszystkich właściwości samochodu, jakie nam będą potrzebne i jednocześnie przy tym nie robić bałaganu w kodzie, poprzez wiele niepotrzebnych zmiennych, lub innych zastępczych rozwiązań, typu tablice. Do tego właśnie służą obiekty. Odzwierciedlają one "coś" ze świata rzeczywistego w świat komputera.

Obiekty są konstrukcjami programistycznymi posiadającymi tzw. właściwości, którymi mogą być zmienne lub inne obiekty. Z obiektami powiązane są funkcje wykonujące operacje na jego właściwościach, a nazywamy je metodami. Do właściwości danego obiektu możemy się dostać używając zapisu:
nazwa_obiektu.nazwa_właściwości
Np. jeśli mamy obiekt "auto", może on mieć właściwości: marka, rok, cena. Aby określić właściwości naszego obiektu będziemy musieli wykonać instrukcje:

auto.marka="Opel Omega"
auto.rok=1996
auto.cena=25000

Można również skorzystać z innej notacji w zależności od upodobań:
nazwa_obiektu[nazwa_właściwości]
np. auto[cena]

Aby korzystać z obiektów w naszych skryptach, musimy go zdefiniować, tworząc funkcję zwaną konstruktorem, a następnie powołać do życia za pomocą operatora new.

function auto(marka,rok,cena,wlasciciel) { // w sekcji HEAD
this.marka=marka
this.rok=rok
this.cena=cena
this.wlasciciel=wlasciciel
}

function osoba(imie,nazwisko) {
this.nazwisko=nazwisko
this.imie=imie
}

posiadacz=new osoba("Jan","Kowalski") // dalej w kodzie HTML
bryka=new auto("Ferrari",2003,200000,posiadacz)
document.write("Marka: "+ bryka.marka +" rocznik: "+ bryka.rok +" cena: "+ bryka.cena)
document.write("<br>Wlasciciel: "+ auto.wlasciciel.imie +" "+ auto wlasciciel.nazwisko)

Jednak takie wyciąganie danych z obiektów wcale nie czyni ich wygodnymi w użyciu - właśnie dlatego mamy dodatkowo możliwość zdefiniowania metod. Do naszego przykładu dodamy metody wyświetlające właściwości naszych obiektów. Modyfikujemy kod tak jak poniżej:

function pokaz_auto() {
dane="Marka: "+ this.marka +" Rocznik: "+ this.rok +" Cena: "+ this.cena +"<br>"
document.write(dane)
this.wlasciciel.pokaz() // metoda pokaz obiektu osoba
}

function pokaz_osoba() {
dane="imie: "+ this.imie +" nazwisko: "+ this.nazwisko +"<br>"
document.write(dane)
}

function auto(marka,rok,cena,wlasciciel) {
this.marka=marka
this.rok=rok
this.cena=cena
this.wlasciciel=wlasciciel
this.pokaz=pokaz_auto // dodajemy metode pokazujaca dane naszego auta
}

function osoba(imie,nazwisko) {
this.nazwisko=nazwisko
this.imie=imie
this.pokaz=pokaz_osoba // dodajemy metode pokazujaca nasza osobe
}
// tu koniec funkcji pisanych w sekcji HEAD
// potem gdzieś gdzie nam potrzeba:

posiadacz=new osoba("Jan","Kowalski")
bryka=new auto("Ferrari",2003,200000,posiadacz)
bryka.pokaz() // pokazuje nam wszystkie wlasciwosci naszego obiektu

Jak widać powyżej, stworzenie metod wyświetlających dane samochodów, procentuje w wypadku, gdy piszemy skrypty na stronę wielokrotnie wyświetlającą wiele różnych samochodów - np. z prywatnej kolekcji ;) Wtedy już martwimy się tylko o odpowiednie stworzenie obiektów, a całe wyświetlanie robi za nas jego metoda.

1. Co to jest funkcja?

2. Jak zdefiniować funkcję?

3. Funkcja zwracająca wartość.

4. Zasięg zmiennych.

5. Funkcje predefiniowane JavaScript.

6. Obiekty.