Kurs JavaScript - funkcje i obiekty
















































Na stronie:Co to
jest funkcja?Jak
zdefiniować funkcję?Funkcja
zwracająca wartośćZasięg
zmiennychFunkcje
predefiniowane JavaScriptuObiekty





















1. Co to jest funkcja?
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 nazwa_funkcji(argument1, argument2, itd) {kod
wykonywany przez funkcję}
Funkcja bezargumentowa wygląda np tak:
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
zmiennejwynik=sumaliczbreturn wynik // zwraca zmienną wynik}

w programie wywołamy funkcję tak:
a=1;b=2;c=suma(a,b) // funkcja zwraca wartość,
która jest podstawiana do zmiennej cdocument.write("c="+c+" to samo
co: "+ suma(a,b))przykład
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.przykład
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ściNp. 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=1996auto.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
HEADthis.marka=markathis.rok=rokthis.cena=cenathis.wlasciciel=wlasciciel}function
osoba(imie,nazwisko)
{this.nazwisko=nazwiskothis.imie=imie}posiadacz=new
osoba("Jan","Kowalski") // dalej w kodzie HTMLbryka=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=markathis.rok=rokthis.cena=cenathis.wlasciciel=wlascicielthis.pokaz=pokaz_auto
// dodajemy metode pokazujaca dane naszego auta}function
osoba(imie,nazwisko)
{this.nazwisko=nazwiskothis.imie=imiethis.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 obiektuprzykład
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.