Sie brauchen Javascript (Bitte einschalten !)
aufgeschlossen Programmieren mit JavaScript

Bewegung auf dem Bildschirm

 Bruchrechnung           Inhalt            HTML - Ausgabe
Beispiel

  Java
Script


Auf
und
ab


 Diese Beispiel ohne Lehrtext finden Sie auch unter


dyntest.html
DHTML
Streit
zwischen
Netscape
und
Microsoft 		Bisher habe ich in diesem Kurs Inkompatibilitäten zwischen den verschiedenen Browsern(Internet Explorer, Netscape Communicator/Navigator, Netscape 6, Opera) nicht erwähnt, sondern bei der Wahl der Sprachmittel darauf geachtet, dass die Javascript - Programme unter allen Javascript - fähigen Browsern laufen.
Bei dem Thema "Dynamisches HTML" fiel dies schwer. Erst in letzter Zeit (u. a. durch ein neues Javascript - Buch von Christian Wenz) habe ich Methoden gefunden, die sowohl unter Netscape als auch im Internet - Explorer (ab Version 4.5 bzw. 4) funktionieren (Opera usw. bleiben leider außen vor).
Wie
funktioniert
es ? 		Der Bereich, der sich bewegen soll (kann Text, aber auch Bilder und Links enthalten), wird durch ein "div" - Tag umschlossen und benannt: 
<div id="Name" style="position:relative" >
 Dynamischer Text
</div>
In einer Javasript - Funktion ruft man die (vorgefertigte - bitte aus dem Beispiel in eigene Dateien kopieren) Funktion "Positionieren" auf: 
Positionieren ("Name", x-Koordinate, y-Koordinate);
Der benannte Bereich wird dann so verschoben, dass seine linke obere Ecke die angegebenen Koordinaten hat.
Eine koninuierliche Bewegung erhält man, indem die Funktion "Bewege" sich am Ende mit Zeitverzögerung wieder aufruft: 
function Bewege () {
   Werte ändern und positionieren
setTimeout ("Bewege ()",30);
}
Gestartet wird die Bewegung durch einen Aufruf im "body"-Tag: 
<body  onload="Bewege()">
Quelltext 
<html> <head>
<script language="JavaScript">

</script>
</head>
<body onload="Bewege()" >

<div id="objekt1" style="position:relative">
<font color="#FF9F00" size="+4">
  Java <br> Script </font>
</div>

</body></html>
Kreis bzw.
Ellipse 		Laut Mathematikunterricht (Klasse 10; Trigonometrie) beschreiben die Punkte (x/y) mit x = Radius * cos(Winkel) und y = Radius * sin(Winkel) einen Kreis um den Koordinatenursprung.
Durch leichte Variation
  • Hinzufügen des Mittelpunktes (200/100), bei relativer Positionierung ("position:relative") gemessen von der ursprünglichen Position des zu bewegenden Bereiches aus.
  • Unterschiedliche Maximalausschläge (Amplituden) in x- und y - Richtung: 100 bzw. 50 führen zu einer ellipsenförmigen Bewegung.
  • Umrechnung von Winkel in das von cos und sin in Javascript benötigte Bogenmaß.
entsteht die folgende Javascript - Funktion. Die Funktionen sin und cos und die Konstante PI befinden sich im vordefinierten Math - Objekt; deshalb die Scheibweise: Math.cos usw.
Die Funktion "Positionieren" erkundigt sich (if ...) danach, welcher Browser vorliegt, und passt die Syntax entsprechend an.
Javascript-
Funktion 
var Winkel = 0;
function Bewege () {
Winkel = Winkel + 3;
hierx = 200 + 100* Math.cos(Winkel/180*Math.PI);
hiery = 100 + 50* Math.sin(Winkel/180*Math.PI);
Positionieren ("objekt1", hierx, hiery );
setTimeout ("Bewege ()",30);
}

function Positionieren (objId, xwert, ywert) {
  if (document.documentElement) {
      document.getElementById(objId).style.top  = ywert + "px";
      document.getElementById(objId).style.left = xwert + "px";
      }
  else if (document.layers)  {
      document.layers[objId].top  = ywert;
      document.layers[objId].left = xwert;
      }
  else if (document.all) {
      document.all[objId].style.pixelTop = ywert;
      document.all[objId].style.pixelLeft = xwert;
      }
}
andere
Bewegungen 		Wenn man x- und/oder y-Koordinaten eines Bildes wiederholt um denselben Wert erhöht, bewegt sich das Bild nach unten/rechts aus dem Bildschirmfenster heraus. 
x = 20; Schritt = 3; y = 0;
function Bewege () {
y = y + schritt;
Positionieren ("objekt2", x, y);
setTimeout ("Bewege ()",30);
}
Wenn man dies vermeiden will, muss man eine Anweisung zum "Umkehren" einfügen: Ist ein Maximalwert überschritten, wird "Schritt" durch -"Schritt" ersetzt, aus 3 wird -3, und Addition von "Schritt" führt nun zu einer Verminderung der Y - Koordinate; entsprechend muss man zu kleine Werte abfangen: 
if ((y > Max)||(y < Min)) { schritt = -schritt; }
"||" steht hier für das logische "oder".
Das "Auf und Ab" aus dem Eingangsbeispiel funktioniert nach diesem Muster.
Maus-
Ereignis 		Das dritte Beispiel ist der Text "Hier klicken!", den man nicht klicken kann, weil er wegspringt. Hier wird die Funktion "Weg()", die das Wegspringen ausführt, von dem <div> - Tag selbst aufgerufen, wenn sich der Mauszeiger darüber befindet: 
<div id="objekt3" style="position:relative;" onMouseOver="Weg()">
 Hier klicken!
</div>
Funktioniert in Netscape 4.x leider nicht.
Text verstecken
Anwendung : Um den Bildschirm nicht zu überladen, möchten Sie, dass ein erklärender Text erst "auf Knopfdruck" sichtbar wird.
Vorgehensweise : Sie setzen den betreffenden Text in ein <div> - Tag; der Button ruft über sein Onclick - Ereignis die Funktionen "Sichtbar" bzw. "Unsichtbar" (in eigene Projekte kopieren !) auf, die Browser - übergreifend die entsprechenden Eintragungen vornehmen.
Billard Zum Schluss noch eine Idee für ein kleines Spiel zum Weiterbasteln.

DynBall.html

Speziell für Netscape 6 : dynballn6.html
  Bruchrechnung           Seitenanfang            HTML - Ausgabe