JAVAScript definicje własnych obiektów i ich instancje cd. //tu samodzielnie dopisać kod działań z wykorzystaniem definicji klasy

Wielkość: px

Rozpocząć pokaz od strony:

Download "JAVAScript definicje własnych obiektów i ich instancje cd. //tu samodzielnie dopisać kod działań z wykorzystaniem definicji klasy"

Magda Żurek
7 lat temu
Przeglądów:

1 Programowanie obiektowe ćw.6 JAVAScript definicje własnych obiektów i ich instancje cd. Mamy poniższą definicję klasy (konstruktor): <SCRIPT language="javascript"> function Auto (nr,nazwa) //właściwości this.nr=nr; this.nazwa = nazwa; //metody this.podajnazwe = function() return this.nazwa; this.ruch = function(dp) this.predkosc=dp; this.zatrzymaj = function() this.pokazpredkosc = function() return this.predkosc; //tu samodzielnie dopisać kod działań z wykorzystaniem definicji klasy Zadanie 1. Bazując na poprzednim ćwiczeniu: dopisać kod utworzenia instancji obiektu Auto(), wykorzystać metod do inicjacji ruchu i wyświetlania aktualnej prędkości, dodać właściwość stanbaku, dodać metodę pokazstanbaku, zmodyfikować metodę ruch() tak, aby oprócz prędkości jako argument podawany był również dystans do przejechania, w treści metody ruch() zmniejszać stanbaku o ilość zależną od przejechanego dystansu, wykonać w kodzie dla egzemplarza auta kilka jazd i każdorazowo wyświetlać stan baku, dopisać warunek, żeby niemożliwy był ujemny stan baku, dopisać w metodzie ruch() warunek uruchomienia auta jeżeli bak jest pusty nie da się jechać, dopisać metodę tankuj() i wykorzystać w kodzie. Oddziaływanie wzajemne obiektów <HTML> <HEAD> </HEAD><BODY style="font-size:18px"> Oddziaływanie obiektów koty gryzą wzajemnie ogony <PRE> <SCRIPT language="javascript"> var Kot=function(imie, ogon) this.imie=imie; this.ogon=ogon;

2 //argumentem metody będzie inny obiekt this.ugryz=function(ob) ob.ogon-=5; kot1= new Kot ("Maciuś",20); kot2= new Kot ("Misiek", 20); document.writeln(kot1.imie," ma ogon ",kot1.ogon); document.writeln(kot2.imie," ma ogon ",kot2.ogon); document.writeln(kot2.imie," gryzie ", kot1.imie); kot2.ugryz(kot1);//kot2 gryzie kota1 document.writeln(kot1.imie," ma teraz ogon ",kot1.ogon); document.writeln(kot1.imie," gryzie ", kot2.imie); kot1.ugryz(kot2); //kot1 gryzie kota2 document.writeln(kot2.imie," ma teraz ogon ",kot2.ogon); </PRE> </BODY></HTML> Obiekty wewnętrzne W przypadku konieczności uwzględnienia pewnej liczby elementów o identycznym zestawie właściwości, wchodzących w skład definiowanego obiektu, możemy jedną z właściwości obiektu głównego zdefiniować jako pustą tablicę, a następnie wykorzystać odpowiednią metodę do wypełniania tablicy. Elementami takiej tablicy mogą także być obiekty (mamy wówczas możliwość zróżnicowania typów składowych obiektu). Tablica elementów może być dynamicznie wypełniana w programie (dowolna liczba jej składowych). <PRE><SCRIPT language="javascript"> var Mechanizm= function(nr, typ) this.nrr=nr; this.typr= typ; //pusta tablica this.dzwignie=[ ]; this.tworzdzwignie=function(nrdz, dldz) //umieść obiekt wewnętrzny w podanej komórce tablicy this.dzwignie[nrdz-1]= nrd: nrdz, dld: dldz, //koniec definicji konstruktora //tworzymy egzemplarz obiektu m1=new Mechanizm (1,'x25'); //tworzymy składowe obiektu m1.tworzdzwignie (1, 500); m1.tworzdzwignie (2,600); m1.tworzdzwignie (3,400); //wypisujemy nadane właściwości document.writeln("robot nr ",m1.nrr, " Typ:",m1.typR); document.writeln("ręce"); //elementy tablicy dzwignie

3 for (k=0;k<m1.dzwignie.length;k++) document.writeln("nr dzwigni:", m1.dzwignie[k].nrd," długość dźwigni:",m1.dzwignie[k].dld); </PRE> Przykład aplikacji z wizualizacją Utworzyć obrazek auta (plik o nazwie 1.jpg), zapisać w folderze z poniższym plikiem HTML: <HTML><HEAD></HEAD><BODY style="font-size:30px"> <SCRIPT language="javascript"> //zmienne pomocnicze licznik=0; var t; //========================================= function stoper( ) el=document.getelementbyid("t1"); el.style.left = licznik; licznik++; t=settimeout("stoper( )",op); //========================================= function jazda(p) //ustalenie opóźnienia (szybkości) op=2000/p; //zmienna globalna stopuj( ) //uruchom stoper stoper(); //========================================= function stopuj( ) cleartimeout(t); <INPUT type="button" value="start 50" onclick="jazda(50)" /> <INPUT type="button" value="start 100" onclick="jazda(100)" /> <INPUT type="button" value="start 200" onclick="jazda(200)" /> <INPUT type="button" value="stop" onclick="stopuj( )" /> <IMG id="t1" style="position: absolute; left: 0px; top: 60px; background-color:red" src="1.jpg"/> </BODY></HTML> Przykład 2 Wyścig dwóch aut (potrzebny też drugi obrazek auta 2.jpg) <HTML> <HEAD> </HEAD> <BODY STYLE="FONT-SIZE:18PX"> <DIV id="ed1">maclaren ma prędkość:0</div> <DIV id="ed2">porsche ma prędkość:0</div>

4 <SCRIPT language="javascript"> licznik1=0; licznik2=0; var t1; var t2;//konieczna inicjacja zmiennych t1 t2 //definiujemy funkcję jako konstruktor obiektu Auto(nazwa) function Auto (nr,nazwa) this.nr=nr; this.nazwa = nazwa; var d=document.getelementbyid('ed'+this.nr); d.style.visible='true'; //metody this.podajnazwe = function( ) return this.nazwa; this.przyspiesz = function(dp) this.predkosc=dp; this.zatrzymaj = function( ) this.pokazpredkosc = function( ) return this.predkosc; this.wyswietl = function( ) var d=document.getelementbyid('ed'+this.nr); d.innerhtml=this.podajnazwe()+' ma prędkość:'+this.pokazpredkosc(); //pomocnicza funkcja porównująca prędkości dwóch obiektów function porownaj(a,b) if (a.predkosc>b.predkosc) return 'Prędkość auta '+ a.nazwa+ ' jest większa'; else if (a.predkosc==b.predkosc) return 'Prędkości aut są jednakowe'; else return 'Prędkość auta '+ b.nazwa+ ' jest większa'; function zrobauta() a1 = new Auto(1,"MacLaren"); a2 = new Auto(2,"Porsche"); o1=document.createelement("img"); o2=document.createelement("img"); o1.setattribute("src", "1.jpg"); o1.setattribute("id", "o1"); o1.style.position="absolute"; o1.style.left="0px"; o1.style.top="200px";

5 o2.setattribute("src", "2.jpg"); o2.setattribute("id", "o2"); o2.style.position="absolute"; o2.style.left="0px"; o2.style.top="300px"; var d=document.getelementbyid('ed1'); document.body.insertbefore(o1,d); document.body.insertbefore(o2,d); zlam=document.createelement("br"); var e=document.getelementbyid('o2'); document.body.insertbefore(zlam,e); - function stoper1() o1.style.border="10px solid green"; o1.style.left = licznik1; licznik1++; t1=settimeout("stoper1()",op1); function stoper2() o2.style.border="10px solid blue"; o2.style.left = licznik2; licznik2++; t2=settimeout("stoper2()",op2); function jazda1(p) op1=2000/p; stopuj1(); stoper1(); function jazda2(p) op2=2000/p; stopuj2(); stoper2(); function stopuj1( ) cleartimeout(t1); function stopuj2( ) cleartimeout(t2);

6 <INPUT type="button" value=" Utwórz dwa auta" onclick="zrobauta()" /><BR/> <INPUT type="button" value=" Wolno a1" onclick="a1.przyspiesz(10);a1.wyswietl( );jazda1(50)" /> <INPUT type="button" value=" Szybko a1" onclick="a1.przyspiesz(30);a1.wyswietl( );jazda1(100)" /> <INPUT type="button" value=" Zatrzymaj a1" onclick="a1.zatrzymaj();a1.wyswietl( );stopuj1()" /><BR/> <INPUT type="button" value=" Wolno a2" onclick="a2.przyspiesz(10);a2.wyswietl( );jazda2(50)"/> <INPUT type="button" value=" Szybko a2" onclick="a2.przyspiesz(30);a2.wyswietl( );jazda2(100)"/> <INPUT type="button" value=" Zatrzymaj a1" onclick="a2.zatrzymaj( );a2.wyswietl( );stopuj2()"/><br/> <INPUT type="button" value="które auto jest szybsze?" onclick="alert(porownaj(a1,a2)+ "\n"+a1.podajnazwe( )+" "+a1.pokazpredkosc( )+"\n"+a2.podajnazwe( )+" "+ a2.pokazpredkosc( ));" /><br /> </BODY></HTML> Na bazie tej aplikacji dokonać własnych zmian: 1. Uwzględnienie i wizualizacja stanu benzyny w baku w czasie jazdy. 2. Wyścig trzech aut. 3. Wyścig dwóch aut z losowo zmienianą w czasie prędkością. 4. Inne według własnego pomysłu. Temat: Robot z 4-ma kończynami, opisanymi jako tablica obiektów wewnętrznych wizualizacja ruchu kończyn. Temat: Klasa Narzędzie i klasy potomne Młotek i Piła Temat: Klasa Zegar_mechaniczny z obiektami wewnętrznymi (wskazówki, koła zębate jako tablice obiektów.

Podobne dokumenty

Programowanie obiektowe. Wykład 4

Programowanie obiektowe. Wykład 4 Programowanie obiektowe Wykład 4 Tworzenie własnych obiektów Słowo kluczowe this W JavaScriptmożna tworzyć własne obiekty. Wykorzystuje się tu zapis utworzonej funkcji o nazwie takiej samej jak klasa,