Kurs 4 DHTML - Projekt Schiff


Kurs 4  DHTML 
BEWEGUNG auf dem Bildschirm, zeitgesteuerte Programmierung


-Segeln Nonstop-


Der Auftrag: Ein Schiff (Grafik) soll vom linken Rand zum rechten sich bewegen und anschliessend wenden und 
automatisch wieder sich zum linken Rand bewegen und erneut wenden und wieder zurück. -In einer Endlosschlaufe. 
Als kleine Zugabe fährt das Schiff hinter einem Schriftzug hin und her.


Wie programmiert man nun sowas? Mit einer Zeitmaschine vielleicht?


Zuerst müssen wir verstehen lernen wie man etwas in Bewegung bringen kann auf dem Bildschirm, es ist mit einer 
Uhr-Funktion (setTimeout) in Form von Programmiercode. Und so sieht das aus:



setTimeout ('animation()', 1);


setTimeout()     =  der JavaScript-Grundbefehl

animation()       =  die Funktion die erneut aufgerufen werden soll nach:

1                     =  Zeiteinheit/ hier 1 Millisekunde

SetTimeout() durchläuft die definierte Funktion (animation()) nun im ebenfalls definierten 
Zeitintervall. Immer und immer wieder bis eine [Abfrage/ Bedingung] den Auftrag der Zeit-Funktion
beendet.





Eine kleine Zusammenfassung der neuen Funktionen und Befehle:





<body onload="init()">            Mit der Funktion Init() via Onload-Befehl wird zuerst das Schiff-Objekt angemeldet.
                                            Das heisst, wenn die Seite geladen ist, wird noch über den ONLOAD-Befehl - init() ausgeführt, 

function init()                          diese Funktion, die sich im HEAD-Bereich der Webseite befindet.          

{

obj=document.getElementById ("schiff");
}






Mit diesem Befehl kommt das Schiff (Id) in den Berechnungs-Speicher und kann so zum Bewegen gebracht werden. 
Mit der Variable [obj] kann dann (stellvertretend) weiter programmiert werden. 
GetElementById() ist ein sehr praktischer Befehl, verlangt hier aber eine Berechnungs-Initialisierung, eine einfache
Variablen-Anmeldung zu Beginn des Scripts genügt da leider nicht, da der Funktionsaufruf keine Positions-Werte enthält.
Der Computer muss wissen, was und wo er bewegen muss.






var a= 0;                                 ! Nicht vergessen die Variable GANZ zu Beginn des Scripts anzumelden.
  

animation()                             Nun die Animation starten durch klicken auf den Link [Starten Schiff].

if (a < 725)                              Eine IF-Abfrage, Bedingung, was so viel heisst wie: Solange a kleiner ist als 
{                                            als [725], dann starte den folgenden Befehl (in den Klammern).


a++   (gleich a+1)                   a ist eine Variable die sich beim ständigen Neuaufrufen 
                                             der Funktion animation() durch die Zeit-Funktion, -jedesmal um 1 erhöht.
                                                           

obj.style.left= a;                      Hier wird nun a (mit laufend addiertem Wert fortlaufend übergeben an die Id [schiff], 
                                             die ja zuvor angemeldet wurde. (..fortlaufend, was die Grafik eben zum bewegen bringt)
                    
setTimeout ('animation()', 1);     Programmierabschnitt der Zeit-Funktion, das ja schon vorgestellt wurde.             

}

else{ }                                     Else Folgebedingung/ Abfrage kann nach einer erfüllten/ nicht erfüllten oder abgelaufenen
                                              IF- Abfrage nun einen neuen Befehl/ Funktion in Gang bringen. In unserem Fall ist es das 
                                              zurück segeln. Ebenfalls auch wieder mit einer Klammer. (Zum loslegen, wenn es soweit ist)  


document.segeln.src= 'dhtml/schiff2.gif';    

 Hier noch der Befehl, der zur gewünschten Zeit das Bild austauscht, damit das Schiff nicht rückwärts
 segeln muss und auch etwas doof ausieht. Der Rest der Programmierung sollte jetzt zu verstehen sein.

 

         

Hier nun der gesamte Programmiercode:

IM HEAD-BEREICH:


<style type="text/css">
<!--

.eins    {position: absolute; top: 2730px; left: 0px; index: 3;}
.zwei    {position: absolute; top: 2780px; left: 150px; font-size: 50pt; index: 5;} 
.drei    {position: absolute; top: 2880px; left: 156px; font-size: 12pt;} 
a        {text-decoration: none;}
body     {font-family: arial,sans serif; font-size: 10pt;}

-->
</style>

<SCRIPT LANGUAGE="JavaScript">
<!--

var a= 0; 

function init()

{
obj=document.getElementById ("schiff");
}

function animation()

{
a++;
if (a < 725) 
{
obj.style.left= a;
setTimeout ('animation()', 1);
}
else 
   {
   document.segeln.src= 'dhtml/schiff2.gif';
   zurueck();
   }
}

function zurueck()
{
a--;
if (a>=10)
{
obj.style.left=a;
setTimeout ('zurueck()',1);
}
else 
   
{
 document.segeln.src= 'dhtml/schiff1.gif'; 
 animation();
}


}
//-->
</SCRIPT>
 



IM  BODY-BEREICH:

<body onload="init();">

<div class="eins" id="schiff"><img src="dhtml/schiff1.gif" name="segeln" border="0"></div>

<div class="zwei">Segeln Nonstop<p> <p></div>

<div class="drei">
<a href="javascript: animation();">Starten Schiff</a><p>
<a href="dhtml4.html">Restart</a>
</div>

 

Praxis Beispiel Kurs 4 - Segelschiff segelt hin und her hinter einem Text



Segeln Nonstop 



Starten Schiff
Restart

 
LINKS zu DHTML

Text Manipulationen (seebi.de)

UFO auf dem Bildschirm (home.pages.at)

 

© Elerning Gemeindenblick Bern Switzerland