JAVAScript animacja obiektów, tworzenie własnych obiektów

Transkrypt

1 Programowanie obiektowe ćw.5 JAVAScript animacja obiektów, tworzenie własnych obiektów Tworzenie i usuwanie obiektów (Uzupełnienie) Przykład zawiera kod dodawania i usuwania komórek tabeli: <HTML><HEAD> </HEAD> <BODY style="font-size:30px"> <TABLE name="xxx" id="t1" style="margin-left:30px;border:1px solid black"> <TR id="w"></tr> </TABLE> <DIV style="text-align:center;padding-top:30px"> <INPUT type="submit" value="dodaj" onclick="dodaj( )" /> <INPUT type="submit" value="usuń" onclick="usun( )" /> </DIV> function dodaj() { var wiersz = document.getelementbyid("w");//referencja do elementu o id="w" var kom=document.createelement("td") //ustalamy styl komórki kom.style.border="2px solid red"; kom.style.textalign="center"; kom.style.fontsize="22px"; //tworzymy węzeł tekstowy, tekst jest numerem komórki o 1 większy niż aktualna ich liczba var t3=document.createtextnode(wiersz.childnodes.length+1); //dołączamy do wiersza tabeli kom.appendchild(t3); wiersz.appendchild(kom);// function usun( ) { var wiersz = document.getelementbyid("w"); //pobranie ostatniej komórki jej indeks o 1 mniejszy od liczby komórek ostatni=wiersz.childnodes[wiersz.childnodes.length-1] //usunięcie jej wiersz.removechild(ostatni);//usuwamy ostatni </BODY></HTML> Sprawdzić i zrozumieć działanie powyższego kodu. Animacja obiektów Wykorzystamy tu poznaną wcześniej funkcję (metodę obiektu window) settimeout() opóźniającą wykonanie czynności o określony czas. settimeout("funkcja", czas w milisekundach) Uruchamianie i zatrzymywanie <HTML><HEAD></HEAD><BODY style="font-size:30px">

2 licznik=0;//początkowy licznik function stoper( ) { //wstaw aktualny licznik jako tekst elementu T1 document.getelementbyid('t1').innerhtml=licznik; //zwiększ licznik o 1 licznik++; // po 1 sekundzie jeszcze raz wykonaj funkcję stoper( ) t=settimeout("stoper()",1000); function startuj( ) { //uruchom stoper stoper(); function stopuj( ){ //wyczyść zmienną powtarzania metoda obiektu window cleartimeout(t); <P id="t1"></p> <INPUT type="button" value="start" onclick="startuj( )" /> <INPUT type="button" value="stop" onclick="stopuj( )" /><br> </BODY> </HTML> Animacja elementu Teraz już stosunkowo łatwo możemy wykonać animację obiektu na bazie powyższego przykładu. Umieszczamy na stronie element <DIV> z odpowiednim stylem i z opóźnieniem 50ms wykonujemy zmianę jej cechy stylu left (Uwaga: konieczne ustawienie dla stylu cechy position:absolute). Wykonajmy poniższy przykład: <HTML><HEAD></HEAD><BODY style="font-size:30px"> //zmienne pomocnicze licznik=0; function stoper( ) { el=document.getelementbyid("t1"); el.style.left = licznik; licznik++; t=settimeout("stoper( )",op); function jazda( ) { //ustalenie opóźnienia (szybkości) op=50; //zmienna globalna //uruchom stoper stoper( );

3 function stopuj( ) { cleartimeout(t); <INPUT type="button" value="start" onclick="jazda( )" /> <INPUT type="button" value="stop" onclick="stopuj( )" /> <DIV id="t1" style="position: absolute; left: 0px; top: 60px; width:100px; height:100px; background-color:red"> </DIV> </BODY></HTML> Sprawdzić działanie powyższego przykładu. Zadanie Dodać dodatkową funkcję szybciej( ) uruchamianą trzecim przyciskiem, z inną wartością op (mniejsza wartość to szybszy ruch). Zauważyć, że da się przyspieszać tylko po uprzednim zatrzymaniu ruchu. Czy można sobie poradzić z tym problemem? Tak... można uruchamiać funkcję stopuj() tuż przed uruchomieniem stopera w obu funkcjach: jazda() i szybciej() konieczna jest jednak inicjacja zmiennej t przed definicjami funkcji: var t; ponieważ przed pierwszym wykorzystaniem funkcji settimeout() zmienna ta byłaby nieznana. Tworzenie własnych obiektów Dotychczas wykorzystywaliśmy obiekty wizualne w dokumencie HTML. Przy pomocy skryptów JavaScript wykonywaliśmy na nich pewne operacje, ustalając i zmieniając ich właściwości oraz korzystaliśmy ze zdefiniowanych dla nich metod, które wspomagały wykorzystanie obiektów reprezentowanych przez znaczniki HTML (i innych, jak np. obiekt typu Date) w hierarchii DOM, ustalanie i zmianę ich właściwości, wykorzystywanie metod dla tworzenia nowych obiektów, ich usuwania itp. W dalszej części poznamy sposoby tworzenia własnych obiektów, definiowania ich właściwości i metod oraz ich korzystania z nich w skryptach JavaScript. Spróbujemy również poznać pewne charakterystyczne cechy programowania obiektowego, jak dziedziczenie obiektów czy polimorfizm. Słowo kluczowe this Nadając i wykorzystując identyfikatory właściwości i metod obiektów korzystamy ze słowa kluczowego this. Rozumiane jest ono jako odniesienie do obiektu bieżącego, właściciela metody lub właściwości. Poniżej prosty przykład wyjaśniający znaczenie słowa kluczowego this: <HTML> <HEAD> </HEAD> <BODY style="font-size:18px"> <PRE> function kolor1( ) { this.document.bgcolor = "red"; function kolor2(e) { e.style.color = "yellow";

4 </PRE> <INPUT type="button" value="kolor dla tła okna" onclick="kolor1( )"> <INPUT type="button" value="kolor dla napisu na przycisku" onclick="kolor2(this)"> </BODY> </HTML> W powyższym przykładzie mamy dwie własne funkcje. W pierwszej o nazwie kolor1 ustalamy kolor tła dla dokumentu, którego właścicielem (this) - jest domyślnie obiekt window (okno przeglądarki). Druga funkcja o nazwie kolor2 zmienia kolor czcionki przekazanego do funkcji jako argument obiektu e - wywoływana jest kliknięciem przycisku z przekazaniem odniesienia do tego właśnie przycisku (this), a więc zmienia się kolor napisu na przycisku. Definicja obiektu i tworzenie instancji obiektu W definicji obiektu tworzymy: właściwości obiektu (zmienne proste lub obiektowe), metody obiektu (funkcje wewnętrzne). W JavaScript można tworzyć własne definicje obiektów (tzw. konstruktor obiektu) z wykorzystaniem funkcji. Potem można tworzyć ich egzemplarze (instancje). Przykładowo funkcja definiująca obiekt składający się z samych właściwości: function Nazwa(argument1, argument2) { this.właściwość1 = argument1; //nadanie wartości przez argument this.właściwość2 = argument2; //nadanie wartości przez argument this.właściwość3 = 5; //nadanie stałej wartości liczbowej this.właściwość4 = true; //nadanie stałej wartości logicznej //itd. Jak widzimy właściwości obiektu (z wykorzystaniem słowa kluczowego this) są nadawane przy pomocy argumentów funkcji, mogą też mieć nadane stałe wartości. Teraz możemy wygenerować wiele "egzemplarzy" (instancji) obiektu o definicji Nazwa() i przypisać je do zmiennych referencji p1 i p2. Wykorzystujemy tu zapis ze słowem kluczowym new: var p1 = new Nazwa( argumenty aktualne); //zmienna lokalna p2 = new Nazwa( inne argumenty aktualne); //zmienna globalna Poniżej dodamy już na konkretnym przykładzie - oprócz właściwości także metody (funkcje) w definicji obiektu: <PRE> //funkcja konstruktor (definicja) function Pies(imie, rasa, kolor, plec) { //własciwości this. imie = imie; this. rasa = rasa; this. kolor = kolor; this. plec = plec; this.glos ="HAUUUU"; //dla wszystkich psów ten sam //metoda this.dajglos = function () { document.writeln ("robię ", this.glos); ;

5 ;//koniec definicji //teraz utworzymy dwie instancje (dwa obiekty klasy Pies) var piesek1 = new Pies( "Misia", "Labrador", "czekoladowa", "suka" ); var piesek2 = new Pies( "Misiek", "Seter", "rudy", "pies" ); //możemy mieć dostęp do właściwości i metod document.writeln("mam na imię:", piesek1.imie); // ->Misia piesek1.dajglos ( ); //-> HAUUUU //itd. </PRE> Zwróćmy uwagę, że zmienne argumentów mają tu takie same nazwy jak właściwości obiektu (rozróżnienie dzięki słowu this), choć mogą też się różnić. Zwróćmy uwagę na sposób operowania na właściwościach można je wyświetlić na ekranie, zmienić wartości itp. Metody też mogą wpływać na właściwości. Metody (funkcje obiektu) wykonujemy jako: osobne instrukcje, można funkcję użyć w kontekście zmiennej rezultatu - jeśli metoda zwraca jakieś dodatkowe rezultaty (tu wykorzystujemy słowo kluczowe return). Przykład Zdefiniujmy obiektowi dodatkową właściwość waga: this.waga=waga; Uwaga: Trzeba też dopisać wagę do listy argumentów funkcji Pies( ) Utworzymy też definicję metody jedz( ) jako: this.jedz= function(x){ this.waga+=x/10; return this.waga Jako argument x przekazywany do funkcji jedz rozumiemy ilość jedzenia. Teraz możemy metodę wykorzystać, np. document.writeln("waga początkowa:",piesek1.waga); piesek1.jedz(5); document.writeln("waga po zjedzeniu +5:",piesek1.waga); //albo document.writeln("waga po zjedzeniu +10:",piesek1.jedz(10)); Ćwiczenie 1. Sprawdzić powyższy przykład, dopisać metodę jedz() i wykorzystać w skrypcie. 2. Dopisać definicję metody biegaj(), która powoduje odpowiednie zmniejszanie wagi. Wykorzystać tę metodę. Zadania 1. Wykonać powyższe skrypty i zrozumieć ich działanie. 2. Utworzyć skrypt, w którym: a. utworzona jest definicja obiektu Prostokat z właściwościami: szerokosc i wysokosc oraz metodą obliczpole(). b. tworzone są dwie instancje obiektu Prostokat, c. dla obu wypisywane są długości oby wymiarów oraz wykorzystana jest metoda obliczania pola powierzchni zwracająca obliczone pole,

6 Spróbować wykonać zadanie wykorzystując obie metody definiowania obiektów. 3. Utworzyć skrypt, w którym: utworzona jest definicja obiektu Auto z zaprojektowanymi właściwościami, np. marka, pojemnosc, moc, predkosc itp. Wszystkie wartości właściwości inicjować przez argumenty funkcji definiującej, z wyjątkiem prędkości, którą dla wszystkich nowotworzonych obiektów ustawić na 0. zdefiniować metody: wypiszdane(), której zadaniem jest wypisanie danych auta, start(s) gdzie s będzie prędkością początkową, stop(), której zadaniem jest zatrzymanie pojazdu, przyspiesz(p), gdzie p będzie wartością, o którą należy zwiększyć prędkość. tworzona jest instancja (lub kilka) obiektu Auto, po utworzeniu instancji wypisywane są wszystkie właściwości z wykorzystaniem metody wypiszdane(), a. następnie wykorzystujemy metody: start() przyspiesz() stop() (przyspieszać można wielokrotnie), każdorazowo wypisywać na ekranie dane (szczególnie interesuje nas prędkość początkowa, po starcie, po przyspieszeniu itd. można utworzyć dodatkowo metodę wypiszpredkosc() i ją wykorzystać. Spróbować wykonać zadanie wykorzystując obie metody definiowania obiektów.