TECHNOLOGIE INTERNETOWE WYKŁAD 6. JavaScript Funkcje i obiekty

Transkrypt

1 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). 1

2 1. Co to jest funkcja? 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 funkcji. 2

3 function nazwa_funkcji(argument1, argument2, itd) { kod wykonywany przez funkcję Funkcja bezargumentowa wygląda tak: function pomoc() { document.write("<a href=\"pomoc.html\"> <img src=\"help.gif\" width=\"15\" height=\"10\" alt=\"help\" /></a>") 3

4 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: 4

5 function suma(liczba1, liczba2) { sumaliczb=liczba1+liczba2 // dodaje liczby i przypisuje nowej zmiennej wynik=sumaliczb return 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 c document.write("c="+c+" to samo co: "+ suma(a,b)) 5

6 4. Zakres 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. 6

7 5. Funkcje predefiniowane JavaScript. Pisząc 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") 7

8 5. 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. 8

9 5. Obiekty. 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: 9

10 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. 10

11 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: "+ bryka.wlasciciel.imie +" "+ bryka.wlasciciel.nazwisko) 11

12 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) 12

13 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 13

14 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. 14

15 Przykłady funkcji: <html> <head> <script type="text/javascript"> function displaymessage() { alert("hello World!"); </script> </head> <body> <form> <input type="button" value="click me!" onclick="displaymessage()" /> </form> </body> </html> 15

16 Przykłady funkcji: <html> <head> <script type="text/javascript"> function product(a,b) { return a*b; </script> </head> <body> <script type="text/javascript"> document.write(product(4,3)); </script> <p>the script in the body section calls a function with two parameters (4 and 3).</p> <p>the function will return the product of these two parameters.</p> </body> </html> 16

17 Przykłady funkcji: html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt); </script> </head> <body> <form> <input type="button" onclick="myfunction('hello')" value="call function"> </form> <p>by pressing the button above, a function will be called with "Hello" as a parameter. The function will alert the parameter.</p> </body> </html> 17