JAVAScript –definicje własnych obiektów i ich instancje cd. //tu

Transkrypt

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;
this.predkosc=0;
//metody
this.podajNazwe = function(){
return this.nazwa;
}
this.ruch = function(dp){
this.predkosc=dp;
}
this.zatrzymaj = function(){
this.predkosc=0;
}
this.pokazPredkosc = function(){
return this.predkosc;
}
}
//tu samodzielnie dopisać kod działań z wykorzystaniem definicji klasy
</SCRIPT>
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;
//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);
</SCRIPT>
</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
for (k=0;k<m1.dzwignie.length;k++)
{
document.writeln("Nr dzwigni:", m1.dzwignie[k].nrD," długość
dźwigni:",m1.dzwignie[k].dlD);
}
</SCRIPT></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">
//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);
}
</SCRIPT>
<INPUT type="button" value="Start 50" onclick="jazda(50)" />
<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>
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;
this.predkosc=0;
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.predkosc=0;
}
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";
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);
}
//-----------------------------------------------------</SCRIPT>
<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.

JAVAScript –definicje własnych obiektów i ich instancje cd. //tu

Transkrypt

Podobne dokumenty

JAVAScript –definicje własnych obiektów i ich instancje cd. //tu

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

8 000 108 m2

JAVAScript – hermetyzacja, oddziaływanie obiektów

Programowanie obiektowe– ćw.7

JAVAScript – własne klasy i obiekty

tutaj

function