docJAVAScript –definicje własnych obiektów i ich instancje cd. //tu
download 
Reklamacja Transkrypt
JAVAScript –definicje własnych obiektów i ich instancje cd. //tu
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.
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);
}
</SCRIPT>
<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>
<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;
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>
