Programmieren mit JavaScriptBewegung auf dem BildschirmBruchrechnung Inhalt HTML - Ausgabe |
|||
Beispiel |
| ||
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 |
|
||
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
Die Funktion "Positionieren" erkundigt sich (if ...) danach, welcher Browser vorliegt, und passt die Syntax entsprechend an. | ||
Javascript- Funktion |
|
||
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. Speziell für Netscape 6 : dynballn6.html | ||
Bruchrechnung Seitenanfang HTML - Ausgabe |