--> home Seitenstatus 3

 JavaScript


Einführung in JavaScript Primer

Variablen und Objekte in JavaScript. Variablen

Schleifen, Bedingungen und Funktionen in JavaScript Strukturen

Grundsätzliches zu Objekten in JavaScript Objekte

Objekte, die der Client/Browser zur Verfügung stellt Browser

Das klassische Objektmodell für Elemente einer HTML-Seite HTML

Multimedia-Objekte Multimedia

DHTML »

DOM ermöglicht den Zugriff auf HTML- oder XML-Objekte DOM

Bibliothek, Sites mit fertigen Skripten oder Beispielen Skripte

Software

Das layer-Objekt von Netscape
layer
Das all-Objekt von Microsoft
all
Stylesheets werden im Navigator über JavaScript erledigt.
NN: Stilklassen
Ereignis-Objekt
Ereignis
CrossBrowser-Programmierung
Crossbrowser

Objektorientierte Lösung für DHTML
OO-Lösung
Übersicht zufälliger Teil
Zufall
Lineare Bewegung
Linear
Links zu DHTML
Links

PageMap 
(Umfang 188 Seiten)



Sponsoring  




JavaScript-Objekte

spez. Seiten zu JavaScript  





 


Auswahl dBooks:

Suche und verwandte Themen  





Verschiedenes  


Netonstage - webprojekte - webconsulting - softwareentwicklung
back


     OO-Lösung

Ein objektorientierter Lösungsansatz für crossbrowser-DHTL.

Der Vorteil objektbasierter Ansätze für DHTML: Man kann die Objekte mit neuen, komplexen Methoden erweitern. Ziel der hier besprochenen Lösung ist es, ein browserunabhängiges DHTML-Objekt aufzubauen, mit dem die meisten Probleme mit einigen Zeilen JavaScript gelöst werden können.

Viele der folgenden Beispiele haben "relativ" viel Quellcode, der sich aber meist auf Standard-HTML für die übergebenen Werte beschränkt. Der eigentliche Funktionsaufruf hat in der Regel nur eine, zwei oder drei Zeilen. Die einfache Anwendung wird vielleicht bei den Beispielen zum DHTML-Scroller oder DHTML-Ticker deutlich.

Das Objekt DhtmlObject kapselt die Unterschiede der Brower und erlaubt neben den einfachen Standardfunktionen auch Animationen. Es ist eine allererste Version, die bei Bedarf weiter ausgebaut wird.

Die einzelnen komplexeren Methoden werden schrittweise hier besprochen. Den Anfang bilden die randomPath-Methode und linePath-Methode.

 Designüberlegungen

 Beim Design wurden Animationen bewußt auf die extern verfügbare animationStart-Methode reduziert. Es gibt so viele mögliche Kurvenverläufe, daß es ineffizient wäre, für jeden eine extern verfügbare Methode zu definieren.

Mit dem Hash als Übergabeparameter für animationProperties erreicht man aber nicht nur eine "Zentralisierung" aller möglichen Animationen und einfache Erweiterbarkeit: Änderungen von Schnittstellen der Animationsfunktionen ziehen in der Regel lediglich einen geringen Änderungsbedarf nach sich.

Es gibt noch eine Reihe von Dingen im Skript, die noch verfeinert werden sollten, die aber die Programmierschnittstelle nicht berühren. Einzig die Übergabe von zwei Parametern zur Erzeugung eines neuen Objekts ist nicht "schön".

    Anwendung von DhtmlObject


Hier wird DhtmlObject über src eingebunden und
   Ergebnis
Anzeige
direkte Animation
Zufällig
Schritte: Zeit (sek):
   Quellcode

            
<script language="javascript" type="text/javascript" src="/javascript/javascriptExamples/DhtmlObject.js"></script>

<!-- Objekt -->
<div id="nashorn" style="position:absolute;visibility:hidden;"><a href="#example"
   onmouseover="myNashorn.visibility('visible');"
   onmouseout="myNashorn.visibility('hidden');"><img
      src="/pic/example/nashorn.jpg"
      width=320 height=170" name="bild"  border="1"></a></div>

<!-- Aktionen -->
<a href="#example" onclick="myNashorn.visibility('visible');">Anzeige</a><br>
<a href="#example" onclick="
   myNashorn.visibility('visible');
   myNashorn.animationStart({'animationType':'direct', 'totalLoops':10},[[400,600,100],[200,500,100],[100,100,100]]);
">direkte Animation</a><br>
<a href="#example" onclick="
   myNashorn.visibility('visible');
   myNashorn.animationStart({'animationType':'randomPath', 'totalLoops':1, 'pathLength':40, 'pathTime':0.1, 'steps':100});
">Zufällig</a><br>
<form>
Schritte: <input type="text" size="5" value="100" onchange="generalSteps=parseInt(this.value);">
Zeit (sek):<input type="text" size="5" value="10" onchange="generalTime=parseInt(this.value);">
<input type="button" value="starte Kreis" onclick="
   myNashorn.visibility('visible');
   myNashorn.animationStart({'animationType':'circle', 'totalTime':generalTime, 'steps':generalSteps, 'totalLoops':2, 'valueX':400, 'valueY':400, 'radius':200, 'startDegree':0});
">

</form>


<script language="javascript"><!--
// create DhtmlObject Nashorn
var myNashorn = new DhtmlObject('nashorn', 'myNashorn');


// Values of Form
generalTime=10;
generalSteps=100;
//-->
</script>







   Animationsobjekt

  Beispiel
NN
MSIE
Opera

2 3 4 4.5 6
3 4 5 5.5
3.6 4 5

  DhtmlObject.js




  Hier eine mögliche Lösung für Browserunabhängiges DHTML mit Objekten

wird unterstützt
wird größtenteils unterstützt
wird teilweise unterstützt
wird nicht unterstützt
a keine direkte Funktion
a gefährlich



  Links



Unkommentierte Links:

Bewertung: mts.net: CrossbrowserSolution
Bewertung: google.de: DHTML Solution Object Universal JavaScript
Bewertung: dansteinman.com: Introduction to Object Oriented DHTML

Link empfehlen



 forward


(München, 2001-04-07 09:45:03 / )
Der Betreiber von www.dBooks.de übernimmt keine Verantwortung für den Inhalt und die Richtigkeit der Angaben auf den verlinkten Websites. Zu den üblichen NoNos gibt es keine direkten Verweise.

(Umfang dBook JavaScript: 188 Themenseiten )
letzte Generierung Mon, 30 Apr 2001 12:15:07 GMT 44
© Werner Diwischek