Technikerschule
Nördlingen
Programmierung dynamischer Internetseiten
Startseite
Termine
Links
Einführung
Netzdiagnose
Webserver
HTML-Unterlagen
HTML-Praxis
Stylesheets
Javascript
WAMP-Installation
PHP-Lektionen
PHP-Übungen
Vorlagen
Kontakt

JavaScript und HTML

Praxis:

Zu den Übungen "Javascript für Alle" von Uwe Brinkmann

Zu den Beispielen aus dem Unterricht

Theorie: Auszug aus SELFhtml von Stefan Münz, Ergänzungen von M. Loy


JavaScript ist kein direkter Bestandteil von HTML, sondern eine eigene Programmiersprache. Diese Sprache wurde jedoch eigens zu dem Zweck geschaffen, HTML-Autoren ein Werkzeug in die Hand zu geben, mit dessen Hilfe sich Web-Seiten optimieren lassen.

Javascript erweitert die reine HTML-Funktionalität um z.B.

  • die Überprüfung von Bedingungen (if ... else) oder des vom Leser dieser Seite verwendete Browsers.
  • das Abarbeiten von Schleifen (for ..., while ...)
  • Reaktion auf Ereignisse, z.B. Mouse-Clicks oder Bewegung der Maus über bestimmte Elemente, ohne dazu mit dem Webserver in Kontakt treten zu müssen.
  • Durchführung von Berechnungen
  • Überprüfung von Formularen vor dem Abschicken
  • Änderung des Inhalts mehrerer Frames mit einem Link
  • dynamisches Ändern von Farben
  • dynamisches Austauschen von eingebundenen Bildern und Buttons.
  • dynamisches Bewegen von Ebenen/Layern

JavaScripts werden wahlweise direkt in der HTML-Datei oder in separaten Dateien notiert. Sie werden zur Laufzeit vom Web-Browser interpretiert. Dazu besitzen moderne Web-Browser entsprechende Interpreter-Software.

Gestartet werden Javascripte durch den direkten Aufruf im HTML-Code oder beim Eintritt eines bestimmten Ereignisses durch so genannte "Eventhandler":

Event-Handler Zugehöhrige Objekte Ausführung
onAbort Image beim vorzeitigen Beenden des Ladevorgangs eines Bildes durch den Benutzer
onBlur button, checkbox, fileUpload, frame, password, radio, reset, select, submit, text, textarea, window bei Entfernung des Focus von dem betreffenden Eingabefeld, d.h. z.B. Beginn der Eingabe in einem anderen Feld
onChange fileUpload, select, text, textarea bei Veränderung des Inhalts eines Eingabefeldes
onClick button, checkbox, radio, link, reset, submit bei einem Mausklick auf das betreffende Element
onError image, window beim Auftreten eines Fehlers während des Ladevorgangs
onFocus button, checkbox, fileUpload, frame, password, radio, reset, select, submit, text, textarea, window zu Beginn der Bearbeitung eines Eingabefeldes
onKeyDown input, textarea u.a. wenn der Anwender, während er ein Element aktiviert hat, eine Taste drückt.
onKeyUp input, textarea u.a. wenn der Anwender eine Taste gedrückt hat und diese wieder loslässt
onLoad image, window bei Beendigung des Ladevorganges des Dokumentes bzw. Bildes
onMouseOut area link wenn der Mauszeiger eine Hyperlink-Area innerhalb eines Client-Side-Imagemaps verlässt
onMouseOver area, link bei einer Mauszeigerberührung
onReset form beim Zurücksetzen eines Formularinhalts
onSelect textarea bei der Auswahl eines Bereiches eines Texteingabefeldes
onSubmit form bei Betätigung der Submit-Schaltfläche eines Formulars
onUnload window beim Löschen des Dokuments z.B. durch das Laden eines anderen Dokuments im selben Fenster

 

JavaScript läuft in einer so genannten "Sandbox". Das ist eine Art Sicherheitskäfig, in dem die Programmiersprache eingesperrt ist. Sie wird dabei um typische Möglichkeiten anderer Programmiersprachen beschnitten, vor allem um die Möglichkeit, beliebig Daten aus Dateien lesen und in Dateien schreiben zu können. So soll verhindert werden, dass JavaScript-Programmierer auf den Rechnern von Anwendern, die eine JavaScript-unterstützte Web-Seite aufrufen, Unfug treiben können. Nach einigen Anfangsproblemen der Vergangenheit funktioniert das mittlerweile auch ganz gut. Wer also JavaScript in seinem Browser deaktiviert aus Angst, dass seine Festplatte damit formatiert werden könnte, sollte sich am besten ganz vom Internet fernhalten, denn schon beim Abruf von E-Mails lauern Gefahren, die wesentlich größer sind als diejenigen, die von JavaScript ausgehen.

JavaScript unterscheidet sich auch noch in weiteren Punkten von klassischen Programmiersprachen. So liegt JavaScript immer im Quelltext vor und wird nich kompliert. Ein direkter Zugriff auf Hardwareschnittstellen ist ebenso wenig möglich wie der Zugriff auf das Dateisystem. Mit Javascript lassen sich auch keine Kommunikationsprozesse zwischen Client und Server realisieren. Alle Daten, die das Javascript verarbeiten soll, müssen komplett an den Client vor dem Programmstart übermittelt werden. Abfragen von Datenbanken sind deshalb zum Beispiel nicht möglich.

Standards, Sprachvarianten und Sprachversionen
JavaScript ist eine Sprache, die 1995 von Netscape eingeführt und lizenziert wurde. Es war also eine firmeneigene, proprietäre Angelegenheit, und Netscape diktierte, woraus das "offizielle" JavaScript bestand.

Microsoft konterte auf seine Weise. Der MS Internet Explorer interpretiert zwar JavaScript, daneben aber auch die Microsoft-eigene Sprachvariante JScript. Diese Sprache implementierte Microsoft nicht zuletzt, um sich aus den Lizenzvorgaben von Netscape herauszuwinden und das, was bei Netscape unter JavaScript lief, selbständig erweitern zu können. JScript umfasst die ganze Palette von JavaScript, doch daneben auch noch etliche spezielle Befehle für den Zugriff auf das Dateisystem und Betriebssystem Windows (das Ganze bezeichnet Microsoft als "Windows Scripting Host").

Das Gerangel zwischen Netscape und Microsoft um die bessere JavaScript-Unterstützung bewirkte auf jeden Fall eine Menge Frustation bei Web-Programmierern und Anwendern. Viele Dinge mussten und müssen immer noch ziemlich umständlich programmiert werden, weil die Fähigkeiten und Eigenheiten der verschiedenen JavaScript-Interpreter der verschiedenen Browser und Browser-Versionen lauter Wenns und Abers erfordern, was sich im Quellcode von JavaScript niederschlägt. Vor allem bei komplexeren JavaScript-Anwendungen, etwa bei dynamischem HTML, wurde das "Doppeltprogrammieren" zur lästigen Pflicht.

Um diesem Missstand auf Dauer abzuhelfen, wurde das W3-Konsortium eingeschaltet, damit eine allgemeine Sprachnorm entsteht. Das W3-Konsortium erarbeitete dabei jedoch keinen konkreten JavaScript-Standard, sondern ein allgemeines Modell für Objekte eines Dokuments. Dieses Modell sollte eine Scriptsprache, die sich als Ergänzungssprache zu Auszeichnungssprachen wie HTML versteht, vollständig umsetzen. Vom W3-Konsortium erhielt das Modell die Bezeichnung Document Object Model (DOM).

Ein wichtiger Aspekt des DOM ist, dass es nicht nur für HTML ergänzende Scriptsprachen konzipiert ist, sondern auch für Scriptsprachen, die jegliche XML-gerechte Auszeichnungssprache erweitern sollen. Das DOM orientiert sich daher in seinem Kern nicht mehr an bestimmten HTML-Elementen. Stattdessen geht es in abstrakter Weise von einem "Dokument" aus (das in XHTML geschrieben sein kann, aber auch in einer anderen XML-basierten Sprache). Es definiert, wie sich auf die einzelnen Elemente dieses Dokuments zugreifen lässt und welche Manipulationsmöglichkeiten es gibt. Da man aber bei der Entwicklung des DOM auch auf die Gegebenheiten und die Verbreitung von HTML und JavaScript Rücksicht nehmen wollte, wurde dem so genannten "Kern-DOM" ein "HTML-Anwendungs-DOM" zur Seite gestellt. Letzteres versucht, Teile des "gewachsenen" JavaScript und MS-JScript zu sanktionieren und Bestandteile des "Kern-DOM" darin zu integrieren.

Seit das DOM vorliegt, überbieten sich die Browser-Anbieter gegenseitig mit Versprechungen, die Vorgaben des DOM in JavaScript umzusetzen. Abgesehen davon, dass es noch immer Uneinheitlichkeiten bei der Umsetzung gibt, ähnlich wie in HTML und CSS, haben JavaScript-Programmierer nun ein zusätzliches Problem: wo sie zunächst häufig eine Doppellösung für die beiden verbreitetsten Browsertypen benötigten, müssen sie nun manchmal sogar drei Lösungen programmieren, wenn sie nämlich Rücksicht auf die 4er-Versionen von Netscape und Internet Explorer Rücksicht nehmen und gleichzeitig DOM-gerecht programmieren wollen.

Den kompletten Text finden Sie hier

Zur Einführung dynamisches HTML

Zur Einführung DOM

 

 
Zurück   Home   Nächste