Keine Angst vor Javascript

Zugriffe: 7637 starstarstarstarstarstarstarstarstarstar Bewertung:3,62 (13 Bewertungen) 13.10.2009

Mit der Entwicklung von Custom Webcontrols sind oft sehr klare Vorstellungen verbunden, was das Control im Einzelnen leisten soll. Oft sind auch Anforderungen allein in der Gestalt gegeben, dass auf allen Seiten, die das Control verwenden (sollen) ein einheitliches Markup verwendet wird. Knifflig wird es oft dann, wenn controlspezifisches Javascript mit eingebunden werden muss.

Nicht dass dies an sich ein Problem wäre - hierzu wird oft eine Javascriptdatei als Ressource im Control eingebettet und mit ausgeliefert.

Nein, die Problematik stellt sich oft in der Funktionalität des Javascripts. Hier steht z.B. jQuery als komplexe Javascript-Bibliothek im Raum - aber kann ich jQuery als Controlentwickler voraussetzen? Die nächste Frage, die sich stellt, ist die nach der richtigen Version? Oder liefer ich über das Control stillheimlich eine Version der jQuery-Bibliothek mit aus - aber was, wenn in der Seite eine andere Version schon eingebunden ist oder gar eine konkurrierende Bibliothek in der Seite schon Anwendung findet?

Diese Fragen haben mich erst kürzlich beschäftigt: ich bin zu dem Schluss gekommen, dass ein Control sich nie auf eine externe Bibliothek verlassen darf - eine derartige Abhängigkeit halte ich in der Controlentwicklung für schädlich. Ein weiteres Argument gegen eine solche Abhängigkeit ist die Tatsache, dass man nie weiß, wo das Custom Control letztendlich eingesetzt werden soll. Aus diesen Gründen plädiere ich dafür, sich stets auf das eigene Javascript zu verlassen.

1. Javascript != AJAX

Auf der diesjährigen BASTA-Konferenz war ich allerdings etwas erschrocken über die Aussage eines namhaften Buchautoren, der den Standpunkt vertrat, dass man es doch lieber lassen sollte mit den Webanwendungen, die Javascript konsumieren. Ich weigere mich in diesem Zusammenhang alles als AJAX-Anwendung zu bezeichnen, nur weil Javascript zum Einsatz kommt. Sein Argument, dass oft das Know-How und das Budget für solche Anwendungen in den Firmen nich ausreichend vorhanden sei, ist allenfalls etwas schwach, wenn man bedenkt, welche Alternative er vorgeschlagen hat - Silverlight. Kurioserweise brachte er aber ein Beispiel (die Zahlen auf Genauigkeit mal dahingestellt), dass im Vergleich zu Silverlight 10 Mal mehr Flash-Entwickler derzeit gesucht werden. Aber über diesen Standpunkt zum Thema Javascript könnte man sicher Bücher schreiben...

Fehlendes Know-How im Bereich Javascript kann man durch die entsprechende Lektüre sicher begegnen. Unschlagbarverzichtbar in diesem Zusammenhang ist für mich die Referenz bei selfHTML.

2. Vorüberlegungen

In diesem Beitrag möchte ich heute einmal aufzeigen, dass es gar nicht so schwer ist, mit dem Javascript.

Nehmen wir z.B. den immer wieder in den Foren nachgefragten Fall, dass ein DIV-Container weitere Elemente enthält und dieser sich durch einen Klick innerhalb eines bestimmten Bereiches zusammenklappen bzw. ausklappen soll. Dabei sollen aber weiche Übergänge möglich sein.

Also das Beispiel sollte dann so aussehen:

Sample1

Das könnte gleichermaßen ein Custom Control sein, deren Erstellung ich aber heute nicht demonstrieren möchte. Bei einem Klick auf den hier grau markierten Kopfbereich sollte der darunter liegende Inhaltsbereich einrollen und weich ausgeblendet werden. Beim erneuten Klick sollte der Inhaltsbereich wieder ausrollen und entsprechend weich eingeblendet werden.

Um dieses Vorhaben zu realisieren, sollte man sich mit den Grundlagen des CSS befassen, damit man weiß, welcher Effekt sich mit welcher Styleeigenschaft umsetzen lässt. Unverzichtbare Quelle in diesem Zusammenhang ist neben selfHTML auch die Seite css4you.

Der Container an sich ist recht einfach, wie das folgende Markup zeigt:

Sample3

Was man in diesem Zusammenhang wissen muss ist, dass die DIV-Elemente sogenannte Block-Elemente und daher immer untereinander angeordnet sind.

Damit das ganze etwas freundlicher aussieht, bekommen die einzelnen DIV-Elemente ein Style über das class-Attribute zugewiesen.

Für den äußeren umschließenden Container kommt folgendes Css zur Anwendung:

Sample4

Hier ist wichtig, dass die Eigenschaft overflow auf hidden gesetzt ist und im Übrigen keine Höhe zugewiesen wird.

Für das innere obere DIV-Element kommt folgendes Css zur Anwendung:

Sample5

Im Gegensatz zum umschließenden DIV-Element ist es hier wichtig, eine feste Höhe zu setzen. Die anderen Angaben dienen der allgemeinen Kosmetik.

Zum Schluss erhält das zweite innere DIV-Element noch einen individuellen Style zugewiesen:

Sample6

Wichtig ist auch hier wieder die overflow-Eigenschaft, welche auf hidden gesetzt werden muss und dass keine feste Höhe zugewiesen wird.

Wenn denn alles richtig umgesetzt wurde, sollte folgendes Bild sich ergeben:

Sample8

Es wird deutlich, dass der Inhaltscontainer in der Höhe von seinem eigentlichen Inhalt bestimmt wird - in diesem Fall ist noch kein Inhalt vorhanden, weshalb das zweite innere DIV-Element faktisch nicht zu sehen ist. Verantwortlich ist hierfür die Eigenschaft overfow, welche auf hidden steht. Lediglich das DIV-Element mit einer festen Höhe ist zu sehen.

3. Das Javascript

Kommen wir nun zu den Überlegungen zum Javascript: was wir wissen ist, dass die DIV-Elemente einen zugewiesenen Wert auf dem class-Attribute haben. Weiterhin ist die Struktur des gesamten Containers bekannt - ein DIV-Element mit zwei DIV-Elementen, wobei der erste das Event zum Verhalten des zweiten auslösen soll.

Orientiert an die Custom-Control-Entwicklung würde ich ein Javascriptobjekt vorziehen, wobei ich im window-onload-Eventhandler keine zusätzliche Instanziierung vornehmen müsste.

Sample9

Die runden Klammern (rot markiert) bewirken, dass Container nicht nur die Definition des Objektes ist, sondern auch zugleich die Instanz dessen, so dass sofort damit gearbeitet werden kann.

Im Rahmen der Controlentwicklung gilt es jedoch den Click-Event zu registrieren. Hierzu kann man das Attribute onclick setzen und den Methodenaufruf direkt angeben. Wichtig ist hierbei, den Parameter event genau so mitzugeben, damit bei den Browsern, welche das window.event-Objekt nicht kennen/unterstützen, dieses zur Verfügung steht. Über das event-Objekt kann man letztlich immer erfahren, über welches DOM-Element das Event ausgelöst wurde.

Sample10

Im Fall der vorgestellten Beispielanwendung, ziehe ich es vor, das Event über das übergeordnete DIV-Element zu binden.

3.1 Die Klick-Methode

Um das Event auch zu verarbeiten, bedarf es der Klick-Methode. Diese wird im öffentlichen Bereich der o.g. Javascriptdefinition definiert. Dies kann in zwei Formen geschehen: zum einen, indem auf eine interne Methode verwiesen wird (was ich vorziehe), zum anderen, indem die Methode direkt definiert wird.

Sample11

Wird im public-Bereich auf eine interne (private) Methode verwiesen, so geschieht dies nur durch Angabe des Methodennamens - ohne die Signatur. Im späteren Aufruf muss dann aber die (public) Methode immer mit der vollständigen Methodensignatur (wie sie die private Methode vorgibt) aufgerufen werden.

Innerhalb der _click-Methode stellen wir als erstes fest, wer das Event eigentlich ausgelöst hat. Hierbei stoßen wir auf eine immer noch bestehende Browserproblematik: der Internet Explorer versteht als einziges das window.event-Objekt, während die übrigen Browser das Eventobjekt über die Argumentenliste der Methode transportieren. Man sollte jedoch wissen, dass das Eventobjekt nur ankommt, wenn im onclick-Attribut event so mit angegeben wurde. Wurde zum Beispiel onclick="Container.Click(evt)" angegeben, dann kann auch Firefox & Co. nichts damit anfangen. Innerhalb des aufgerufenen Eventhandlers gelangt man dann nicht mehr an das Eventobjekt. Der Internet Explorer hingegen kann innerhalb des Eventhandlers das Eventobjekt bestimmen. Daher erfolgt zu Gunsten der Browserkompatibilität als erstes in der Klick-Methode die Prüfung nach dem Eventobjekt.

Sample12

Wie ich weiter oben schon erwähnte, kann man über das Eventobjekt feststellen, welches DOM-Element das Event ausgelöst hat. Auch hier stolpert man wieder über eine Browserbesonderheit: der Internet Explorer kennt die Eigenschaft srcElement, während die anderen Browser die target-Eigenschaft verstehen. Hier sollte man sich in der Prüfung der Browserkompatibilität auf die Abfrage der geforderten Eigenschaft verlassen und nicht auf das navigator-Objekt.  Wenn das DOM-Element  feststeht, versuchen wir als erstes das class-Attribute zu bestimmen. An dieser Stelle kann man ebenso gut das id-Attribut erfragen, doch möchte ich mich hier auf das class-Attribute beschränken. Beachten sollte man hier aber, dass das Attribute zwar class heißt, im Javascript aber über className ermittelt wird. Bisweilen ist im Netz auch zu lesen, dass die einzige richtige Syntax die ist, wo der Eigenschaftsname in eckigen Klammern objekt["eigenschaft"] angegeben wird. Ich bevorzuge hier jedoch die im .NET auch übliche Punktnotation (objekt.eigenschaft) - beides führt zum gleichen Ergebnis.

Von daher erweitert sich die Klick-Methode folgendermaßen:

Sample13

Wenn das class-Attribute den Wert panel hat, dann soll die eigentliche Verarbeitung weiter gehen. Ist dies der Fall, gilt es das nachfolgende DOM-Element mit der css-Klasse content zu ermitteln. Und wie sollte es anders sein, treffen wir hier erneut auf eine Browserbesonderheit, wo sich die Geister scheiden, welcher Browser das richtige Ergebnis liefert. Während der Internet Explorer lediglich die echten DOM-Elemente findet, berücksichtigen die anderen Browser alle Elemente - auch die nicht sichtbaren, wie den Zeilenvorschub \n. Das richtige Element zu ermitteln ist allerdings nicht so schwer: jedes DOM-Element verfügt über eine Eigenschaft nodeType. Ist der Wert gleich 1, so haben wir ein HTML-Tag gefunden - und genau diese Elemente suchen wir ja. Um jetzt alle nachfolgende Elemente auf diese Eigenschaften zu überprüfen, bietet sich eine while-Schleife an. Diese wird so lange durchlaufen, wie das class-Attribute undefined ist (oder ein Element mit dem nodeType vom Wert 1 gefunden wurde). Das jeweils folgende Element erhält man immer über die Eigenschaft nextSibling.

Sample14

Wie ich im Ergebnis später demonstrieren werde, kann man natürlich mehrere Elemente mit dieser Funktionalität endlos in einander verschachteln. Es empfiehlt sich daher an dieser Stelle das durchreichen (bubble) des Events abzubrechen. Alle aktuellen Browser verstehen die Eigenschaft event.cancelBubble, wobei doch empfohlen wird, die Methode stopPropagation aufzurufen, welche der Internet Explorer jedoch nicht kennt.

Der nun folgende Schritt ist etwas trickreich, erinnert aber auch leicht an die Vorgehensweise im jQuery. Im späteren Verlauf ist es wichtig, jedes Objekt eindeutig identifizieren zu können. Hierzu wollen wir aber nicht immer durch den DOM itterieren, zudem uns durch die gewollte DOM-Manipulation wichtige Informationen verloren gehen. Aus diesem Grund verfügt unser Javascriptobjekt Container eine private Eigenschaft elements vom Type Array. Dieses Array werden wir im Folgenden öfter durchsuchen, so dass ich zusätzlich eine prototype-Methode find implementieren werde. Um alle Elemente in diesem Array eindeutig identifizieren zu können, weisen wir dem nextElement die Eigenschaft guid zu. Eine Möglichkeit zum Erzeugen einer solchen GUID habe ich hier gefunden. Weiterhin speichern wir den derzeitigen Offsetwert der Elementhöhe über die Eigenschaft offsetHeight ab. Das Hinzufügen des über die o.g. while-Schleife gefundenen DOM-Elementes erfolgt nur ein einziges Mal - nämlich, wenn das Element noch nicht die Eigenschaft guid zugewiesen bekam.

Sample14a

Die Definition der Prototype-Methode für das Array-Objekt ist ebenfalls recht einfach: hier wird lediglich das Array über eine for-Schleife durchlaufen und wenn die id-Eigenschaft im Array-Element mit der über die find-Methode übergebenen id übereinstimmt, dann gibt die find-Methode genau das Array-Element an den Aufrufer zurück.

Sample14b

Nun sind wir schon fast am Ende der Klick-Methode angekommen. Bleibt nur noch das Eigentliche - nämlich die Implementierung des Ein- bzw. Ausrollen des Inhaltselements. Die Unterscheidung, was beim Klick-Event zu tun ist, kann zum Beispiel über die aktuelle Höhe des Elements erfolgen. Nachteilig ist hierbei, dass man nicht die Werte eines möglichen Rahmens, wenn diese in der css-Klasse gesetzt sind, zweifelsfrei ermitteln kann. Besser erscheint es mir hier, dem Element eine weitere Statuseigenschaft zuzuweisen. Für das eigentliche Ein- bzw. Ausrollen der Elemente habe ich zwei weitere private Methoden implementiert. Innerhalb dieser Methoden wird die Eigenschaft scrollOut gesetzt.

3.2. Die scrollOut-Methode

Für das Ein- bzw. Ausrollen des Inhaltsbereich kommt eigentlich nur eines in Frage -  das dynamische Verändern der Höhe des Elementes. Die Frage, die sich hierbei stellt, ist die Form der Umsetzung.

Da wäre die for-Schleife, die while-Schleife oder der rekursive Aufruf einer Methode. Alle Lösungsansätze haben aber ein Manko gemeinsam - sie können nicht warten. Mir ist kein Befehl im Javascript bekannt, der analog einer PAUSE 20 Anweisung im guten alten BASIC enspricht. Wenn man aber in bestimmten Abständen etwas immer und immer wieder aufrufen bzw. abarbeiten lassen möchte, so kommt dies einem Intervallverhalten nahe. Und genau dafür gibt es im Javascript eine entsprechende Methode im window-Objekt: window.setInterval. (Anmerk.: man könnte aber auch eine Methode rekursiv aufrufen und innerhalb der Methode mit der Anweisung setTimeout arbeiten.). Ein weiterer Vorteil an der Methode setInterval ist, dass man hier einen Zeitwert in Millisekunden mit angeben kann, in welchen Abständen das Intervall aufgerufen werden soll.

Wichtig bei der Verwendung der Methode setInterval ist die Zuweisung der von setInterval zurückgegebenen IntervalID an eine Variable. Ohne diese IntervalID kann sonst der Vorgang nicht abgebrochen werden. Um diesen Intervallabbruch zu erzeugen, benötigen wir eine Abbruchbedingung.

Beim Ausrollen des Inhaltsbereiches ist die Abbruchbedingung eigentlich klar: das Element hat die zulässige maximale Höhe erreicht. Und an dieser Stelle kommen wir zurück auf die Klick-Methode: hier hatte ich die Offsethöhe des Elements in einem separaten Objekt erstmals zwischen gespeichert.

Nach all diesen Vorüberlegungen kann es nun an den Code gehen:

Die Methode _scrollOut bekommt als Parameter das entsprechende DOM-Element mit übergeben. Im ersten Schritt merken wir uns den Status über eine zusätzliche Eigenschaft - scrollOut - indem wir sie auf true setzen. Dies ist vor allem für die Momente interessant, wo der Benutzer während des Ausrollens das Einrollen des Elementes veranlasst (dazu weiter unten mehr). Dann holen wir über die find-Methode das Array-Element, welches der guid-Eigenschaft des übergebenen DOM-Elementes entspricht. Haben wir dieses Element innerhalb des Array elements gefunden, kann die weitere Verarbeitung erfolgen. Der erste Schritt ist hier nun zu prüfen, ob für dieses Element (item) noch aktuell ein anderes Intervall läuft - dieses müsste nämlich dann als erstes beendet werden. Da sich die Aufrufe für die Methode clearInterval an mehreren Stellen wiederholen, spendieren wir hierfür eine kleine interne Methode, welche clearInterval aufruft und die bestehende IntervalID löscht. Um im Fall des Umschaltens während eines laufenden Intervalls immer mit dem jeweils richtigen Wert der Höhe weiter zu arbeiten, speichern wir den aktuellen Wert in einer Eigenschaft auf dem item-Objekt. Auch verfahren wir mit der IntervalID gleichermaßen, indem wir sie über das item-Objekt speichern - dies versetzt uns in die Lage, bei jedem Methodenaufruf festzustellen, ob für dieses Objekt ein (anderes) Intervall läuft.
Innerhalb der Intervallmethode prüfen wir als erstes, ob die Abbruchbedingung für das Intervall eingetreten, die Endhöhe des Elements erreicht ist. Ist die der Fall, beenden wir das Intervall und setzen das Element auf den ursprünglichen Offsetwert der Höhe. Da nun die ganze Zeit mit Pixelwerten in der dynamischen Zuweisung der Höhe gearbeitet wurde, die Höhe aber aufgrund möglicher Verschachtelungen mit anderen Elementen dynamisch bleiben muss (vergleiche hierzu das Ergebnis am Ende), setzen wir zu guter Letzt die Höhe auf 100%.
Ist die Abbruchbedingung nicht erreicht, setzen wir die aktuelle Höhe für diesen Aufruf und zählen den Wert für die Höhe weiter hoch.
Dieser Wert, der hier hinzuaddiert wird, ist neben der Intervallpause maßgeblich dafür verantwortlich, wie schnell das Element ein- bzw. ausrollt. Merke: je kleiner dieser Wert ausfällt, desto langsamer der Prozess. Bei der Intervallpause ist das Verhältnis genau umgekehrt: je größer der Wert, desto langsamer (und abgehackter) ist der Prozess. Tip: der Wert für die Intervallpause sollte den Wert 50 nicht überschreiten.

Im Ergebnis erhalten wir nun folgende Methode:

Sample15

3.3. Die scrollIn-Methode

Die Methode _scrollIn ist analog der Methode _scrollOut aufgebaut, so dass ich im folgenden nur noch auf die Unterschiede zwischen den Methoden eingehen möchte.

Im ersten Schritt setzen wir die scrollOut-Eigenschaft auf false. Den Wert für die Starthöhe holen wir uns aus der Eigenschaft currentHeight des item-Objektes. Statt einen Wert auf die Höhe hinzuzurechnen, ziehe ich den (gleichen) Wert hier von der jeweils aktuellen Höhe ab.

Am Ende sieht die _scrollIn-Methode folgendermaßen aus:

Sample16

Wenn man bis jetzt alles richtig gemacht hat, erhält man folgende Anwendung:

Klick hier zum testen...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

Klickt man auf den grauen Bereich, rollt der darunter liegende Bereich ein bzw. aus.

Aber die oben genannte Aufgabenstellung bestand ja darin ein weiches ein- bzw. ausrollen zu realisieren. Hier kommt also noch hinzu, das Ein- oder Ausblenden in Form eines Fading zu implementieren.

3.4. Fading

Um ein weiches Aus- und Einblenden umzusetzen, kommt nur die Style-Eigenschaft opacity in Betracht.

An dieser Stelle stoßen wir wieder auf eine Browserbesonderheit. Der Internet Explorer kann die opacity-Eigenschaft nicht direkt umsetzen, wie die anderen Browser, das funktioniert hier nur über die filter-Eigenschaft.

Beim Setzen der Eigenschaft muss man weiter beachten, dass der Internet Explorer einen Wertebereich von 0 - 100 kennt, die anderen Browser über die Style-Eigenschaft opacity nur einen Wertebereich von 0 bis 1 verarbeiten können.

In der weiteren Planung können wir uns ganz auf die obere Vorgehensweise zum Setzen der Höhe verlassen - eigentlich hat sich nur die Eigenschaft (und etwas an der Berechnung) geändert.

3.4.1 FadeIn

Die Methode bekommt wieder das DOM-Element übergeben. Was an dieser Stelle nicht benötigt wird, ist eine Statuseigenschaft, die Auskunft darüber gibt, ob gerade ein- oder ausgeblendet wird - dazu später mehr. Somit wird wieder aus dem elements-Array das aktuelle zum DOM-Element korrespondierende item abgerufen. Ist das item-Objekt gefunden, wird auch hier wieder geprüft, ob noch ein Prozess des Ein-/Ausblenden läuft und ggf. abgebrochen. Der aktuelle opacity-Wert wird aus dem item-Objekt ermittelt und der internen Zählvariablen zugewiesen. Die Umrechnung und Zuweisung des opacity-Wertes erfolgt dann in einer internen Hilfsmethode.

Sample17

Wenn die Eigenschaft filter unterstützt wird, dann wird der alpha-Filter gesetzt. Bei der Zuweisung des opacity-Wertes innerhalb des alpha-Filters wird der übergebene Wert einfach mit 100 multipliziert. In allen anderen Fällen wird die opacity-Style-Eigenschaft direkt gesetzt.

Zu guter Letzt wird wieder geprüft, ob die Abbruchbedingung für das Intervall eingetreten ist - der Wert für opacity ist größer gleich 1. In diesem Fall wird clearInterval wieder aufgerufen, andernfalls wird der Wert aufaddiert. Hier gilt das gleiche, wie beim Ein-/Ausrollen: je kleiner der Wert, der hinzuaddiert wird, desto langsamer ist der Prozess des Einblenden.

Am Ende erhält man dann folgende Methode:

Sample18

3.4.2 FadeOut

Die _fadeOut-Methode gestaltet sich analog, nur dass eben kein Wert hinzuaddiert sondern abgezogen wird.

Sample19

Zum Schluss bleibt die Frage, wie das Ganze im Prozess des Ein-/Ausrollens integriert wird. Ganz einfach: die Methode _scrollIn bzw. _scrollOut wird jeweils um die Methode _fadeOut bzw _fadeIn erweitert, und zwar genau an der Stelle, nachdem geprüft wurde, ob die item.scroll-Eigenschaft noch gesetzt ist.

Sample20

bzw.

Sample21

Da wir innerhalb der _scrollIn bzw. _scrollOut Methoden schon mit einer Statuseigenschaft arbeiten, benötigen wir für den Prozess des Fading keine weitere Statuseigenschaft. Dies ist nur erforderlich, wenn das Fading eigenständig aufgerufen werden sollte. Dann kann man hier analog zur Statuseigenschaft scrollOut verfahren.

Hat man alles richtig gemacht, erhält man folgende fertige Lösung:

[1] Klicke hier, um zu testen...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.


[2] Klicke hier, um zu testen...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

Im Ergebnis sollte die Erkenntnis gekommen sein, dass Javascript kein Teufelszeug ist, vor dem man Angst haben muss. Der Einsatz von Javascript in seinen Webanwendungen setzt nur folgendes voraus: Kenntnis vom Aufbau des DOM, Kenntnisse von Css-Eigenschaften und was diese bewirken und letztlich das Wissen, dass man auch mal eine gängige Suchmaschine benutzen sollte, wenn man doch nicht alles sofort parat hat. Auch wenn ich mich erneut wiederhole, doch kann man es nicht oft genug sagen: eine aus meiner Sicht nahezu unverzichtbare Quelle als Nachschlagewerk stellt selfHTML dar. Dessen sollte man sich immer bewusst sein. Und da bedarf es keiner exorbitanten Budgets oder Herrscharen von Javascriptentwicklern. Man muss einfach bereit sein, sich mit diesem Sprachelement auch ernsthaft auseinander zu setzen. Dies gilt aber auch dann, wenn man sich für ein Javascript-Framework wie z.B. jQuery entscheidet.


Neuen Kommentar verfassen

Bestätigungscode