docJAVAScript –animacja obiektów, tworzenie własnych obiektów
download 
Reklamacja Transkrypt
JAVAScript –animacja obiektów, tworzenie własnych obiektów
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>
<SCRIPT language="JavaScript">
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
}
//=========================================
</SCRIPT>
</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">
<SCRIPT language="JavaScript">
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);
}
</SCRIPT>
<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">
<SCRIPT language="JavaScript">
//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( );
}
//=========================================
function stopuj( ) {
clearTimeout(t);
}
</SCRIPT>
<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>
<SCRIPT language="JavaScript">
function kolor1( ) {
this.document.bgColor = "red";
}
function kolor2(e) {
e.style.color = "yellow";
}
</SCRIPT>
</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>
<SCRIPT language="JavaScript">
//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);
};
};//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.
</SCRIPT>
</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,
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.
