Modul 7.0: Zusammenfassung des Moduls "JavaScript in Handarbeit"
Hier finden Sie die Kurzzusammenfassung bzw. "Schnellbleiche" zu diesem Kursmodul. Es dient zum einen zum schnellen Einstieg in JavaScript, zum anderen zum Selbsttest Ihrer vorhandenen JavaScript-Kenntnisse.
JavaScript ist eine kleine Programmiersprache für Webseiten, mit der man unter anderem folgendes erreichen kann:
- Beeinflussung von Objekten auf einer html-Seite: z.B. Austausch von Bildern ("Dia-Show", "Rollover-Buttons"), Reaktion von Benutzereingaben in Formulare (z.B. Berechnungen, Kontrolle von bzw. Reaktion auf Eingaben), Beinflussung von Text-, Link- und Hintergrundfarben, Bewegung von Text und Bildern über das Browserfenster (via dhtml-JavaSkriping)
- Aufruf von Browserfenstern in definierten Größen, Positionen und weiteren Parametern, Bewegung von Browserfenstern über den Bildschirm.
- Generierung weiterer Objekte wie Hinweis und Eingabeboxen zur benutzerdefinierten Änderung von Inhalten von Webseiten bzw. zur Informationsausgabe an den Benutzer
- Vielfältige weitere Anwendungen wie Berechnungen, interaktive Lernabfragen und viele weitere Utilities, Browserweichen, Aufruf verschiedener Seiten in Abhängigkeit von Benutzerbildschirm, Speicherung von Benutzerangaben etc.
JavaScript-Code kann direkt mit Texteditoren erstellt werden und wird meist direkt in die html-Seite, in aller Regel in den Head-Teil eingegeben. Die Programmierung besteht aus Anweisungen, die direkt beim Laden der Seite ausgeführt werden oder aus in sog. functions abgekapselte Anweisungen, die beim Aufruf der html-Seite vorgeladen, aber nicht ausgeführt werden. Derartige functions werden durch sog. Ereignisse via event-handlern aufgerufen, die im Body des html-Dokumentes definiert werden, z.B. onClick, onMouseOver oder onSubmit (z.B. <a href="test.html" onMouseover="funktionsname()">klicken</a>
JavaScript-Programme können damit (unter Beachtung evtl. Copyright-Regelungen) direkt von Webseiten oder entsprechenden Verzeichnissen im Web in eigene Webseiten kopiert und verwendet werden.
Der JavaScript-Programmcode (die Anweisungen) innerhalb oder außerhalb von functions bestehen aus objektorientierten Methoden bzw. Änderungen von Objekteigenschaften. Methoden verwenden definierte Begriffe, wie z.B. write(); sind häufig objektspezifisch (oder je nach Objekt jeweils unterschiedlich in ihrer Auswirkung), und werden an den Objektnamen (welche definierte Namen haben), bei hierarchisch untergeordneten Objekten, an den "Objektpfad" angehängt und enden mit (). Am Ende der Methodenanweisung steht ein Semikolon (Ausnahme: verschachtelte Objekte). Beispiel1: window.close(); bzw. window.close (); Beispiel 2: window.document.write(); letzteres ist die write-Methode, angewandt auf das Objekt document, welches ein Unterobjekt des Objekts window ist.
Methoden ändern in der Regel Objekteigenschaften.
Objekteeigenschaften haben ebenfalls definierte Namen (z.B. bgColor) und werden ebenfalls an den Objektnamen bzw. Objektpfad gehängt, häufig werden mit = Eigenschaftswerte zugeordnet, z.B. window.document.bgColor=("#ff0000"); Eine Eigenschaftsanweisung schließt ebenfalls mit Semikolon ab.
Funktionen definieren die abgekapselten Bereiche von Skripten, die via Eventhandler (s.o.) aufgerufen werden. Die Definition beginnt mit dem Schlüsselwort function, gefolgt von einem beliebigen Namen (ohne Umlaute, Sonderzeichen, Leerzeichen und Klammern bzw. Slashes) sowie einer Doppelklammer. Es folgt kein Semikolon nach einer Funktionsdefinition. Beispiel: function uhrzeit() oder auch function uhrzeit ()
Innerhalb einer Funktion können mehrere Anweisungen (Methoden, Eigenschaftszuweisungen, Variablenänderungen (s.u.), Schleifenabfragen (s.u.) ausgeführt werden. Der Programmcode innerhalb einer Funktion steht zwischen den geschweiften Klammern { und }
Sehr häufig werden in JavaScript, wie in anderen objektorientierten Programmiersprachen auch Variablen verwendet. Deren Definition sollte (muss aber nicht) mit dem Schlüsselwort var beginnen, gefolgt vom beliebigen Variablennamen, evtl. gefolgt von der Wertezuweisung und abgeschlossen von Semikolon. Also z.B. var eingabe; oder var text="hallo"; Diese Variablen können u.a. zur Zuweisung von Objekteigenschaften, als Parameter für Methoden, zur Speicherung von Methodenwerten oder für Schleifen (s.u.) verwendet werden. Beispiele:
window.alert(text); oder auch direkte Werte Verwendung: window.alert("hallo");
eingabe = window.prompt("Ihre Eingabe", "");
Ebenso wichtig sind Programmschleifen, die je nach Typ und Bedingung einfach oder mehrfach ausgeführt werden. Auch deren Definition wird ohne Semikolon beendet. Die jeweiligen bedingungsbedingten Anweisungen stehen ähnlich wie bei functions wieder zwischen { und }
Beispiel:
if (eingabe=="ammonit")
{anweisungsreihe a-x);}
else
{anweisungsreihe b-y;}
Zur besseren Übersichtlichkeit sollte jede einzelne Programmanweisung in einer extra Zeile stehen, auch { bzw. } sollte man am besten jeweils alleine in einer Zeile stehen lassen. Dies ist jedoch fakultativ.
Kommentare können in einem JavaScript ebenfalls vorhanden sein. Diese stehen zwischen <!-- und --> bzw. /* und */. Einzeilige Kommentare beginnen mit //. Diese Kommentare werden vom Skript nicht mit abgearbeitet.
JavaScript ist eine Entwicklung von Netscape. Sie stellt den deFacto-Standard für Webskriptsprachen dar. Allerdings gibt es viele Zusatzfunktionen, die von unterschiedlichen Browserversionen und unterschiedlichen Browsertypen unterschiedlich bzw. z.T. fehlerhaft ausgeführt werden. Ein umfassender Test mit verschiedenen Browertypen (v.a. Netscape Navigator und Internet Explorer) ist deshalb unabdingbar, bevor Sie Seiten mit komplexeren JavaScripten online bringen.
War Ihnen dies alles neu? Oder wussten Sie bereits einiges davon?
Vielleicht hilft Folgendes zur Selbsteinordnung:
Ihr Vorwissen
Empfohlener Einstieg
Obenstehendes war fast alles neu für mich
JS-Basics
Ich habe schon JavaScripte verwendet, aber mal hat's geklappt, mal nicht. Ich wusste nicht, was functions, Methoden und Eigenschaften sind.
Level 1 oder 2
Ich kannte den Unterschied von functions, methoden und eigenschaften in etwa und hab auch schon viele JavaScripte anderer erfolgreich verwenden können. Darüberhinaus weiss ich aber wenig.
Level 2
Ich kannte den Unterschied von functions, methoden und eigenschaften sowie die generelle Syntax mit semikolons, geschweiften Klammern und Eventhandler-Aufruf. Ich habe aber keinen Überbrlick über die Gesamtheit von Objekten, Methoden, Eigenschaften und Parametern und kann auch mit Begriffen wie return nichts anfangen
Level 3
ich bin erfolgreicher JavaScript-Programmierer
Gratulation, dieser Kurs ist nichts für Sie
Alternativ können Sie auch das Verzeichnis aller hier verwendeten, kommentierten Skripte aufrufen und daran Ihr Vorwissen einstufen.