Fachbericht
TA53A
1. Einleitung. 3
2. JavaScript anwenden.. 4
3. JavaScript mit Webseite verbinden.. 7
4. Externe Bibliothek. 8
5. JavaScript-Versionen.. 9
6. Schlüsselworte. 9
7. Variablen.. 10
8. Datenfelder 17
9. Anweisungen.. 22
10. Kontrollstrukturen.. 25
11. Funktionen.. 30
12. Klassen.. 31
13. verwendete Funktion in meinem Projekt „
Digitaltechnik-Skript “ 33
14. Zusammenfassung. 35
15. Literaturverzeichnis. 36
1. Einleitung
Mit
JavaScript kann man eine Webseite dynamisieren, den Browser steuern und viele interessante
Applikationen entwickeln, die man heutzutage auf modernen Webseiten sieht.
Am besten erkennen wir, was man mit
JavaScript machen kann, wenn man sich einige moderne Webseiten ansieht, beispielsweise
Menüstrukturen und farbliche Veränderungen der Einträge.
Menüstrukturen werden mit Hilfe von
JavaScript erweitert.
Weiteres Beispiel ist eine Karte. Man kann mit
der Maus eine Karte verändern, Einzoomen, Auszoomen, Verschieben und
Satellitenbilder anzeigen lassen.
Nicht alles ist JavaScript; es kommen noch viele
andere Techniken zusammen aber der Kern im Browser ist die Programmierung mit
JavaScript.
Auch bei Webformularen steckt JavaScript
dahinter.
Heutzutage verzichtet kaum eine moderne
Webseite auf JavaScript. Man kann es einfach erkennen, man muss nicht mal auf
dynamische Effekte achten. In jedem Browser kann man über Ansicht à
Seitenquelltext, die Struktur einer Webseite anzeigen lassen.
Bezüglich der Hardware gibt es keine
besonderen Voraussetzungen, wenn man mit JavaScript programmieren möchte.
Jedes Betriebsystem ist geeignet, das mit
einer grafischen Oberfläche arbeitet und unter dem man einen Editor und einen
Browser zur Verfügung hat.
JavaScript kann in jedem Texteditor
geschrieben werden. Wenn man mit JavaScript Webseiten erstellen möchte, braucht
man unbedingt mehrere Webbrowser, empfohlen sind Mozilla Firefox, Safari, Opera
und Internet Explorer zum Überprüfen der Ereignisse.
Mozilla Firefox als Browser bietet zahlreiche
Tools, die extrem nützlich sind und kostenlos als Downloads zur Verfügung stehen.
Man findet sie unter „Extras“ den Menü- Eintrag Add-ons (Plugins). Dann öffnet
sich ein Fenster, in dem man den Link „Erweiterungen herunterladen“ findet.
Nach dem Anklicken wird die offizielle Seite der Mozilla Foundation geöffnet.
Da findet man Development Tools.
Für JavaScript benötigt der Entwickler einen
Debugger. Ein Debugger ist ein Tool, mit dem der Entwickler die Möglichkeit
hat, Fehler beim Programmieren zu finden.
Venkman ist ein sehr guter Debugger und er
installiert sich in Firefox. Anschließend, nach der Installation von Venkman,
befindet sich unter Extras ein neuer Eintrag „JavaScript Debugger“.
Weitere nützliche Tools sind Web Developer
und Firebug. Diese Tools stellen viele Möglichkeiten bereit zur Analyse von
Webseiten aber auch für Stylesheets und JavaScript.
Schließlich muss man Mozilla Firefox neu
installieren und bei der Installation die „benutzerdefinierte“ Art wählen. Nun
muss man den DOM-Inspector aktivieren.
2. JavaScript anwenden
Erste JavaScript- Beispiel:
Eine einfache HTML- Datei dient als Basis für
die folgenden Beispiele.
Zuerst möchte ich ein Beispiel zeigen, welches
nur ein einfaches Mitteilungsfenster im Browser öffnet, wenn ein Anwender die
HTML- Seite in seinem Browser öffnet.
In erstem Schritt muss die HTML- Datei
gespeichert werden. Nun schreibe ich direkt in den Körper der Webseite eine
HTML- Tag, der <script></script> heißt.
Ich gebe die Funktion alert(„Hallo Welt“);
ein.
Wenn man die HTML- Datei im Webbrowser lädt,
wird ein kleines Dialogfenster angezeigt.
Wenn man die Webseite direkt im Browser lädt,
kann es sein, dass die Webseite durch eine Sicherheitsmeldung blockiert wird.
Zum Beispiel beim Internet Explorer sieht man
gelegentlich beim Ausführen von JavaScript eine Meldung.
Zum Ausführen von JavaScript muss man die
Meldung anklicken und geblockte Inhalte zulassen. Solche
Sicherheitseinstellungen muss man auch bei anderen Browsern berücksichtigen. Man
kann in vielen Browsern die Ausführung von JavaScript aktivieren.
Zum Beispiel Anwender von Firefox können
unter Extras Einstellungen in Bereich Inhalt JavaScript aktivieren oder Global
deaktivieren oder aber auch explizit festlegen, was ein JavaScript in dem
Browser tun darf.
Ich möchte nun ein zweites Beispiel
betrachten. Auch hier kommt JavaScript zum Einsatz.
Man sieht eine Webseite, auf der gewisse
Bereiche aus einem Text und HTML- Tags bestehen. Dann folgt ein Bereich, wo
JavaScript angewendet wird. Dann sieht man eine Methode mit Name write, die zu einem Objekt document gehört. Wenn man den englischen
Begriff date übersetzt, kann man
sich vorstellen, dass etwas mit dem Datum gemacht wird.
Nach dem Aufruf der Webseite im Browser,
sieht man, dass das Systemdatum des Rechners dynamisch in die Webseite
geschrieben wurde.
Ganz offensichtlich wurden die statischen
Informationen und dynamisch generierte Informationen vermischt und zu einer
einzigen Webseite zusammengefasst.
Ich betrachte noch ein drittes Beispiel zu
JavaScript. In diesem Beispiel arbeite ich mit einer JavaScript-Funktion.
Funktionen bedeuten die Zusammenfassung
bestimmter Anweisungen zu einer Art Unterprogramm und dieses Unterprogramm
steht über einen Name zur Verfügung.
Die folgende Anweisung ist die so genannte
Deklaration
und datum();
ist der Aufruf der Funktion. In der Funktion selbst frage ich wieder das
Systemdatum des Rechners ab new Date();.
Allerdings wird dieses einem Bereich
zugewiesen, der direkt darüber definiert ist: document.getElementsByTagName(„div“)[0].innerHTML.
Die Anweisung setTimeout(‚datum()’,’1000’); verzögert einen Aufruf und der
Name der Funktion datum(); ist hier
ein Selbstaufruf.
Wenn man sich dieses Beispiel im Browser
anschaut, erkennt man, dass das Systemdatum jede Sekunde neu in die Webseite
geschrieben wird.
Ein weiteres Beispiel zeigt, wie man mit
JavaScript Benutzereingaben entgegen nehmen kann.
Auch hier sieht man wieder eine Webseite,
indem gewisse Bereiche mit Text und HTML- Tags erzeugt werden. In der Mitte
findet man einen kleinen Bereich, der JavaScript zugeordnet ist.
Wenn man dieses Beispiel im Browser ansieht,
wird ein Dialogfenster geöffnet, in dem der Benutzer eine Eingabe vornehmen
könnte. Wenn die Eingabetaste bestätigt wird, wird die eingegebene Information
in die Webseite geschrieben.
3. JavaScript mit Webseite verbinden
Bevor man mit JavaScript einen Browser bzw.
eine Webseite programmieren kann, muss man eine Verbindung zwischen der
Webseite (HTML, XML) und der Skriptfunktionalität schaffen. Diese erfolgt mit
einem Skriptcontainer.
In folgendem Code sieht man ein Tag <script> und im Inneren eine
JavaScript- Anweisung und dann wird dieses Tag geschlossen </script>.
Alles was sich außerhalb befindet, ist HTML-
Code. Man sieht eine einfache Form, wie man ein Script in eine Webseite
bringen kann.
Aber diese Form ist noch nicht vollständig
und es werden noch einige weitere Angaben benötigt um so die Funktionen in einem
Skriptcontainer runterzubringen.
Der Noscript- Bereich wird dazu verwendet,
Informationen anzuzeigen, die ein Besucher angezeigt bekommt, wenn ein Browser
kein JavaScript unterstützt.
Das bedeutet aber nicht, dass der Browser
kein JavaScript kann.
Diese Informationen sind für diejenigen
Browser gedacht, bei denen JavaScript deaktiviert ist.
Der eigentliche Skriptcontainer ist <script language=“JavaScript“ ></script>.
Unter anderem wird eine Sprache angegeben.
Mit dem Parameter language legt
man fest, was für eine Sprache tatsächlich benutzt wird.
Im Inneren des Containers können wir beliebig
JavaScript Anweisungen notieren.
Der Parameter „Language“ ist veraltet. Statt
diesem Parameter sollte man den sogenannten MIME- Type angeben. Dazu verwendet
man das Attribut „type“.
Ein MIME- Type bezeichnet die Art eines
Datenformats. Es ist ein internationaler Standard, mit dem man auch HTML, XML
oder Grafikformate charakterisieren kann.
Er setzt sich aus einer Hauptkategorie - in
diesem Fall „text“ - und einer Unterkategorie - in diesem Fall „javascript“ - zusammen.
4. Externe Bibliothek
Wenn man JavaScript mit einer Webseite
verbinden möchte, kann man JavaScript auch in einer externen Bibliothek
auslagern.
Dadurch werden Projekte viel leichter wartbar
und man kann die Funktionalität mehrfach verwenden.
Beim Auslagern von JavaScript in eine externe
Bibliothek verwendet man das Skript-Tag und man übergibt über den Parameter
„Source“ (src) die URL einer externen Datei. In dieser Datei befinden sich die
Funktionen. In diesem Fall meineFunkionen.js .
Man kann auch in der Datei Variablen
definieren und rein theoretisch direkt das Skript aufrufen.
Der Skriptaufruf selbst erfolgt mit einem
internen Skriptcontainer.
Zum Beispiel für die folgende definierte
Funktion in der Bibliothek,
sieht der Funktionsaufruf so aus:
Man kann JavaScript mit einer Webseite in
Form einer Inline- Referenz verbinden. Bei einem sensitiven Element, z.B.
Hyperlink, notiert man statt der URL das Protokoll JavaScript und ruft danach
eine JavaScript- Anweisung auf.
5. JavaScript-Versionen
JavaScript gibt es in verschiedenen
Versionen. Mit den verschiedenen Versionen von JavaScript werden sukzessive
neue Techniken eingefügt.
Ältere Browser können also bestimmte
Techniken nicht interpretieren. Ein Beispiel einer Angabe von einer JavaScript-
Version:
<script
language=’JavaScript1.5’>
Die Versionsnummer wird ohne Leerzeichen
angehängt. Obwohl „Language“ als überholt („deprecated“) gilt, ist das Type-
Attribut untauglich.
Die Kombination von „language“ und „type“ ist
ebenso falsch, da die Versionen Browser „language“ ignorieren und nur „type“
beachten werden.
6. Schlüsselworte
Hier beschäftige ich mich mit elementaren
Strukturen von JavaScript. Sie sind logische Strukturen, die in fast jedes
Skript- oder Programmiersprache zu finden sind.
Die logischen Strukturen von Javascript umfasst
Variablen, Arrays, Datentypen, Operatoren, Ausdrücke, Anweisungen und
Kommentare sowie Unterprogramme.
Dabei erkennt jeder, der bereits in
C-Programmiersprache gearbeitet hat, sehr viele Ähnlichkeiten zwischen
JavaScript und C oder verwandte Sprachen wie Java, C#, Perl oder PHP. Diese
Programmiersprachen gehen alle auf C zurück.
Jede Programmier- oder Scriptsprache besitzt
bestimmte Zeichenkombinationen, die Bestandteil der Sprachdefinitionen sind.
In folgender Tabelle sieht man die
Schlüsselworte, die in JavaScript vorkommen:
Schlüsselwort
|
Beschreibung
|
break
|
Abbruch in Schleifen
|
case
|
Fallunterscheidungen
|
catch
|
Auffangen von Ausnahmen
|
continue
|
Fortsetzung in Schleifen
|
default
|
Fallunterscheidungen
|
delete
|
Löschen eines Datenfeldelements oder
einer selbst definierten
Objekteigenschaft.
|
do
|
Beginn einer Schleife
|
else
|
Einleitung des alternativen Blocks
in einer if- Entscheidungsstruktur.
|
false
|
Der Wert Falsch
|
finally
|
Ein Schlüsselwort, das im Rahmen des
Ausnahmebehandlungskonzepts von JavaScript eingesetzt wird.
|
for
|
Beginn einer Schleife
|
function
|
Einleitung von Funktionen
|
if
|
Einleitung von if-
Fallunterscheidungen
|
in
|
Bedingte Anweisung in
if-Fallunterscheidungen
|
instanceof
|
Test des Objekttyps
|
new
|
Definition von Objekten
|
return
|
Sprunganweisung mit Übergabe eines
Rückgabewertes in Funktionen
|
switch
|
Fallunterscheidungen
|
this
|
Bezug auf die aktuelle Instanz eines
Objekts
|
throw
|
Auswerfen einer Ausnahme
|
true
|
Der Wert wahr
|
try
|
Beginn des Umschließens einer
kritischen Anweisung im Rahmen des Ausnahmebehandlungskonzepts von
JavaScript.
|
typeof
|
Typ eines Elementes
|
var
|
Definition einer Variable
|
void
|
leere Funktionstype
|
while
|
Einleitung einer Schleife
|
with
|
Erlaubt mehrere Anweisungen mit
einem Objekt durchzuführen.
|
Um die Syntax in JavaScript zu verstehen, ist
es wichtig, diese Schlüsselworte zu kennen.
7. Variablen
Ein weiterer Bestandteil einer
Programmiersprache sind Variablen. Variablen sind bekannte Stellen im
Hauptspeicher eines Computers, denen zur Laufzeit temporär Werte zugeordnet werden.
Eine Werterzeugung erfolgt durch
Gleichheitszeichen und die Variablen werden über den Namen angesprochen, den
man vorher definiert hat.
Wenn man Operationen mit Variablen ausführt,
drückt man es mit Datentypen aus.
JavaScript kümmert sich automatisch um die
Verwaltung von Datentypen.
Für das Anlegen einer Variablen in
JavaScript, notiert man einen Zeichner, dann ein Gleichheitszeichen und dann
wird ein Wert zugewiesen.
Allein diese Anweisung sorgt dafür, dass im
Skript eine Variable mit dem Namen „a“ vorhanden ist. Und diese Wertzuweisung
einer Zahl sorgt dafür, dass die Variable „a“ numerisch ist.
Man kann einer Variablen, die einen
bestimmten Datentyp hat, jeder Zeit einen anderen Datentyp zuweisen.
a = 2;
a =
’’ Text ’’;
Nach dieser Anweisung hat die Variable “a”
ein Textdatentyp. Dieses Verhalten macht den Umgang mit Variablen sehr einfach.
Zum Beispiel meineVariable = 5; .Damit ist meine Variable von einem
numerischen Datentyp. Ich kann diese Variable mit der Funktion alert() ausgeben:
Wenn man sich die Ausgabe im Browser
anschaut, sieht man folgende Meldung:
Im JavaScript erfolgt explizit bei der
Typumwandlung eine automatische Veränderung des Datentyps. Typumwandlung nennt
man auch “Casting”.
Obwohl JavaScript den Programmierer von einer
konkreten Angabe eines Datentyps fernhält, wird im Hintergrund trotzdem damit
gearbeitet.
Es gibt in JavaScript folgende Datentypen:
Datentyp
|
Beschreibung
|
Boolean
|
Werte von Type Boolean sind
Wahrheitswerte, die nur einen der beiden Werte true oder false annehmen.
|
Number
|
Dieser universelle numerische
Datentyp kann in JavaScript sowohl Ganzzahl- als auch Gleitkomma Werte
enthalten.
|
object
|
Der allgemeine Datentyp Object kann
einen Wert eines beliebigen Typs enthalten. Er wird für das Speichern von
Objekten verwendet.
|
String
|
Dieser Datentyp steht für eine Zeichenkette
und kann eine Reihe von alphanumerischen Zeichen enthalten.
|
undefined
|
Der Datentyp beschreibt eine
nichtdefinierte Situation. Eine Variable besitzt so lange diesen Wert, bis ihr
nach dem Anlegen explizit ein Wert zugewiesen worden ist.
|
null
|
Dieser Sonderdatentyp entspricht der
Situation, wenn ein Objekt noch keinen Wert hat und entspricht „keiner
Bedeutung“ oder null.
|
Man findet verschiedene Quellen in so einer
Form Variablen Deklaration:
var a = 12;
Die Bezeichnung „var“ wird vor der Variable
geschrieben. Man kann auch in der Regel auf „var“ verzichten aber es gib dafür
eine vernünftige Bedeutung.
In folgendem Beispiel lege ich eine Variable
Namens „a“ an:
Und nun gebe ich den Wert aus:
Wenn ich var
a = 12; wegnehme, erhalte ich eine Fehlermeldung durch den
Interpreter:
Mit „var“ wird auch eine Variable angelegt,
ohne ihr einen Datentyp oder einen Wert zuzuweisen.
Wenn man die Variable „a“ ohne Initialisierung
„var a;“ angibt, erhält man so
eine Meldung:
Ganz offensichtlich sieht man keine
Fehlermeldung. Die Variable „a“ ist da, aber hat zurzeit den Wert „undefined“.
Man sieht also eine Anwendung, was man mit der Bezeichnung „var“ machen kann.
Man kann eine Variable anlegen ohne ihr ein
Datentyp oder ein Wert zuzuweisen. Der Ansatz von „var“ ist ebenso zu sehen
wenn, man eine Funktion definiert und in der Funktion eine Variable a einfügt
ohne „var“ und ein Wert zuweist.
Wenn man nun diese Funktion aufruft und den
Wert der Variable ausgibt.
Bei „a“ handelt es sich hier um eine globale
Variable, obwohl sie innerhalb einer Funktion eingefügt wurde.
Wenn ich nun das Schlüsselwort „var“ vor der
Variable a schreibe und sie wieder ausgebe sehe ich diese Fehlermeldung:
Die Variable a steht zurzeit nicht zur
Verfügung, da die Variable außerhalb der Funktion aufgerufen wurde.
Wenn man eine Variable innerhalb einer
Funktion definiert, ist sie lokal definiert und lokal bedeutet, dass eine
Variable nur in einer Funktion zur Verfügung steht.
Mit Schlüsselwort „var“ kennzeichnet man eine
Variable innerhalb einer Funktion als Lokal und sie steht außerhalb nicht zur
Verfügung.
Wenn ich die Variable außerhalb der Funktion
definiere und innerhalb der Funktion die Variable „a“ den Wert 1 zuweise, wird
der Wert außerhalb der Funktion auch verändert.
Wenn man nun die Ausgabe anschaut, sieht man,
dass die Variable überall den Wert 1 hat.
Wenn ich in der Funktion vor der Variable „a“
das Schlüsselwort „var“ einfüge, sehe ich in der Ausgabe, dass die Variable „a“
den Wert 42 hat.
So sagt man, dass die Variablen sich in
getrennten Namensräumen befinden.
Man muss beachten, dass der Name einer
Variable- der so genannte „Bezeichner“ nicht mit einem JavaScript- Schlüsselwort
übereinstimmen darf und das erste Zeichen einer Variable ein Buchstabe oder
ein Unterstrich sein muss. Ein Bezeichner darf keine Leerzeichen enthalten.
Nun nenne ich ein weiteres Beispiel, bei dem
man mit Variablen und Datentypen besser umgehen kann.
Ich lege eine Variable an und nenne sie
“meineVar”.
Über eine Wertzuweisung erhält sie einen Wert
und gleichzeitig einen Datentyp.
Als Wert weise ich die Variable „3.14“ zu.
Diese Schreibweise mit Punkt entspricht ein
Gleitzahlwert oder ein Gleitkommawert.
Ich möchte nun diese Variable in einer
Operation benutzen. Ich multipliziere die Variable mit dem Wert 6 durch „alert“ Funktion.
Eine Variable kann zur Laufzeit eines
Skriptes jeder Zeit verändert werden.
Man schreibt den Bezeichner wieder hin und
weist ein neuen Wert zu, als Beispiel 77 durch 13 (77/13).
Ich lege nun eine neue Variable “a” an und
weise einen Text zu und eine andere Variable “b” mit Boolean- Datentyp “true”.
Ein Boolean- Datentyp kann “true” oder
“false” annehmen.
Ich lege noch eine Variable C mit dem
Datentyp “object” an. Nun weise ich dieser Variable ein Objekt “new Date()” zu. Genauer gesagt, hier wird die
sogenannte Referenz auf einem Objekt zugewiesen.
Mit “new
Date()” erzeugt man ein Datumsobjekt, das als Wert, die Systemzeit
des Rechners beinhaltet.
Die Variable C ist nicht das Objekt selbst
sondern eine Referenz darauf. Eine Referenz wird auch ein Pointer oder ein Zeiger
genannt. Diese zwei Begriffe werden in Programmiersprache C mehr verwendet.
8. Datenfelder
Ein Datenfeld ist eine Sammlung von
Variablen, die über einen gemeinsamen Bezeichner angesprochen werden können.
Dazu gibt es einen Index und über diesen
Index kann man auf jeden einzelnen Wert in einem Array bzw. Datenfeld
zugreifen.
Ich möchte nun ein Datenfeld anlegen. Normalerweise
legt man eine Variable so an, indem man ein Bezeichner für die Variable angibt
und dann einen Wert zuweist aber bei Datenfeldern in JavaScript ist die
Wertzuweisung und Definition etwas anders.
Auch bei Datenfeldern erfolgt eine
Wertzuweisung aber die Syntax ist folgendes:
Man schreibt ein Schlüsselwert “new” hin und
dann die Funktion “Array()”.
Ein Datenfeld ist ein Objekt wie Date- Objekt
(new Date();). Das Schlüsselwort
“new” in Verbindung mit dem Bezeichner “Array()” ist der Einsatz des
sogenannten Konstruktors.
Ein Konstruktor erzeugt Objekte und das Schlüsselwort
“new” heißt: Erzeuge ein neues Objekt von Typ eines Arrays also eines
Datenfeld.
Diese Art Objekterzeugung lernt man in vielen
objektorientierten Programmiersprachen und in JavaScript kann man auch sehr
eingeschränkt ein Objekt erzeugen.
Wenn man ein Objekt erzeugt hat, kann man auf
einzelnen Elementen in diesem Datenfeldobjekt über eine besondere Syntax
zugreifen.
a [0] = 1; bedeutet,
dass das erste Element im Datenfeld dem Wert 1 zugeordnet ist.
Das erste Element bei der Indizierung von
Datenfeldern beginnt mit dem Index 0 und das 2. Element mit dem Index 1 und so
weiter.
Ich möchte nun diese Werte ausgeben. Man kann
mit der Funktion “document.write()”
etwas in der Webseite schreiben.
Ich kann das 4. Element ausgeben, wenn ich a
von 3 hinschreibe(a[3]). Man sieht, dass der Wert 5 ausgegeben wird.
Ausgabe:
Ich greife also auf das 4. Element zu.
Man kann mit so genannten Schleifen auf alle
Elemente einem Array zugreifen.
Beispielsweise die while-Schleife wiederholt
Anweisungen solange eine Bedingung erfüllt ist.
Ich definiere eine Zählvariable “i”. Die
Abkürzung i steht für den Index.
An dieser Stelle erhält die while-Schleife
als Bedingung i<4, also solange i kleiner als 4 ist.
Das Ende der Schleife ist die 2. geschweifte
Klammer.
Die Funktion “documen.write” erhält als Parameter a[i].
Da ich bei der Ausgabe nach jedem Feldelement
ein Zeilenumbruch haben möchte, gebe ich noch Plus “<br>” in der
Parameterliste ein. Ein Zeilenumbruch bedeutet ein Tag “<br>”.
Dann muss man den Wert der Variable i
verändern.
„i++“ erhöht den Wert einer numerischen
Variable um eins. Ganz offensichtlich werden alle Elemente des Datenfeldes ausgegeben.
Ausgabe:
Man sieht, dass in Zusammenhang mit
Schleifen, Datenfeldern ein idealer Konstruktor sind.
Wie man es sieht, können in Variablen Werte
verschiedener Datentypen stehen.
In Fall von Arrays habe ich folgendes
Programm als Beispiel zusammengefasst.
In der 5. Zeile lege ich ein Array „ich“ an
und dann bringe Werte verschiedener Datentypen in diesem Array unter.
In der 6. Zeile ordne ich das erste Element
ein „String“ zu. In der 7. Zeile wird das 2. Element einer Zahl zugeordnet.
In der 10. Zeile ist das 5. Element auch ein
„String“ zugeordnet, da die Ziffern in Hochkommas stehen.
Im Beispiel sieht man eine sinnvolle
Anwendung. Man erkennt nämlich, dass die Feldelemente mit Personendaten
initialisiert wurden wie Adresse, Telefonnummer, Vor und- Nachnamen.
Erst in ab der 13. Zeile greife ich auf
einzelne Elemente bzw. Werte zu.
In der Funktion „document.write“ verbinde ich die einzelnen Feldelemente mit
einem Text und gebe sie aus:
Der Umgang mit Datenfeldern in JavaScript hat
einige Besonderheiten zu bieten. Diese Besonderheiten möchte ich anhand eines
Beispiels erklären.
Ich lege ein Datenfeld „a“ an: a = new Array();
Nun kann als Parameter eine Größe für das
Datenfeld angeben als Beispiel 10:
a = new
Array(10);
Damit ist das Datenfeld für 10 Elemente
reserviert. Man kann die Größe des Datenfelds überprüfen. Ich verwende die
Anweisung alert(a.length).
Wenn man sich die Ausgabe anschaut, sieht
man, dass der Wert 10 ausgegeben wird:
Über die Eigenschaft „length“ kann man jeder
Zeit die Anzahl der Elemente im Datenfeld rausbekommen.
Man kann beim Erzeugen von einem Datenfeld
angeben, wie viele Elemente es beinhalten soll.
Ich füge nun eine Zählervariable i ein und
initialisiere sie mit null. Nun lege ich eine while-Schleife an und überprüfe,
ob die Variable „i“ kleiner ist als die Länge des Arrays. Die Zählervariable
muss danach durch „i++“ erhöht werden.
Bei der Ausgabe werden 10 Mal „undefined“
ausgegeben das heißt, ich habe 10 Elemente im Datenfeld aber in Elementen
stehen keine Daten.
9. Anweisungen
Eine Anweisung ist eine Quellcodezeile, die
bestimmte Befehle enthält. Das kann eine Variablendeklaration sein: a = 1, das
kann ein Aufruf einer Methode sein:
alert (“Hallo Welt!”); oder das kann eine
Schleife sein:
for (i = 0; i < 5; i++) { }.
Grundsätzlich werden alle Anweisungen in
JavaScript mit einem Semikolon (;) beendet.
Mehrere Anweisungen können in “Blöcken”
zusammengefasst werden, die von geschweiften Klammern {} begrenzt werden.
Man kann in einer Schleife mehrere
Anweisungen zusammenfassen:
for (i = 0; i < 5; i++) {
document.write(“a”);
document.write(“b”);
}
Ausdrücke sind eine wichtige Form von
Anweisungen. Dabei geht es um die Manipulation von Daten, die in Variablen
abgelegt sind:
a = 1 + 1;.
Es gibt in JavaScript zwei Typen von
Ausdrücken, numerischer Ausdrücke wie obiges Beispiel und boolesche oder
logischer Ausdrücke. Sie bezeichnen im Wesentlichen einen Vergleich.
Solche Vergleiche werden in sämtlichen
Kontrollstrukturen realisiert wie in der Bedingung der Schleifen oder auch in
Entscheidungsstrukturen wie if (a < 2);.
Die Bedingung „if (a < 2)“ ist ein
logischer Ausdruck. Das Ergebnis von so einem Vergleich ist entweder wahr oder
falsch also “true” oder “false”.
Sie sind boolesche Literale.
Wenn man Ausdrücke realisiert, verwendet man
immer die so genannten Operatoren. Operatoren sind bestimmte Zeichen, die eine
definierte Bedeutung in JavaScript haben.
Wenn man ein einfacher Ausdruck wie a = 1 +
2; betrachtet, sieht man mehrere Operatoren: Gleichheitsoperator (Zuweisungsoperator)
und arithmetische Operator Addition.
Die Literale1 und 2 sind Operanten des Plus-Operators.
Man unterscheidet in jeder Programmiersprache zwischen den Typen der
Operatoren.
Eine der wichtigsten arithmetische Operatoren
ist Modolo (%) und das bedeutet Restwertdivision.
Beispielsweise die Anweisung alert (11 % 4);
gibt 3 aus.
Dividiert man 11 durch 4, bleibt ein Rest von
3.
Der Modolo-Operator ist enorm wichtig für
alle periodischen Vorgänge, wie z.B. Datumsberechnungen.
Ein anderer wichtiger Operator ist der
Plus-Plus-Operator (++).
Zum Beispiel i = 0; i ++;.
Die Variable i wird mit null initialisiert
und dann um eins erhöht.
Die ausgeschriebene Schreibweise von i ++ ist
i = i + 1;.
Der “i ++” –Operator wird auch
“Inkrementoperator” genannt.
Bei “i ++” wird die Variable zuerst verwendet
und dann erhöht.
Im Gegensatz dazu steht “++ i”. Hier wird die
Variable zuerst erhöht und dann verwendet.
Beispiel:
Ausgabe:
Der Dekrement-Operator (--) ist das
Gegenstück zum Inkrement-Operator und arbeitet dementsprechend mit
Minus-Zeichen: i --;
Wenn in einem Ausdruck mehrere Operatoren
ausgewertet werden, gelten die Regeln:
- Es wird von recht nach links verarbeitet.
- Punkt- vor Strichrechnung.
Boolesche Operatoren treten beispielsweise in
Bedingungen von Schleifen auf. Mit diesen logischen Operatoren verknüpft man
boolesche Ausdrücke.
In folgender Tabelle sieht man einige
Operatoren:
Zeichen
|
Name
|
==
|
Vergleichsoperator
|
!=
|
Ungleichoperator
|
Weitere Operatoren sind: „<“, „>“,
„<=“ und „>=“.
„===“ überprüft die „Identität“. Somit müssen
auch die Datentypen der zu vergleichenden Variablen gleich sein.
Wenn man in einer Bedingung zwei Ausdrücke
kontrollieren möchte, dann gehört hier ein Topen hin, der das „und“ (&),
das zur Angabe der beiden Bedingungen dient, ausdrückt.
Beispiel:
Die logische „und“ wird mit „&&“
dargestellt, das logische „oder“ mit „||“ (das doppelte Pipe-Symbol) und das
„nicht“ mit „!“.
Wenn man in Zeichenketten bestimmte Steuerzeichen
wie Hochkommas oder Zeilenumbrüche eingeben möchte, muss man diese maskiert
angeben, das bedeutet, man kann nicht direkt hinschreiben, sondern man muss
dafür eine Sequenz benutzen, die einer Art Alias darstellt.
Maskierte Steuerzeichen sind:
Zeilenumbruch: \n
Tabulator: \d
Für die Anzeige von doppelten Hochkommas in
einem String: \“
Wenn ich beispielsweise die Anweisung
“document.write()” verwende und da eine Zeichenkette ausgeben will, kann ich
durch “\ t” (backslash t) ein Tabulator an der Stelle setzen.
Ausgabe:
Wenn man bei der Anweisung “ducument.write()”
einen Zeilenumbruch erzeugen will, muss man HTML-Befehl “<br/>”
verwenden, da die Zeichenkette in der Webseite geschrieben wird.
Bei der Anweisung “alert()” kann man ein
Zeilenumbruch durch “\n” (Backslash n) erzeugen, da die Zeichenkette nicht in
der Webseite geschrieben wird sondern in einem Editor.
Ausgabe:
10.
Kontrollstrukturen
Jede Programmier- oder Skriptsprache benötigt
Kontrollstrukturen.
Solche Kontrollstrukturen sind die klassische
Anwendung von logischen und vergleichenden Operatoren.
Damit kann man die Entscheidungen über den
weiteren Ablauf eines Skripts oder Programms treffen oder Anweisungen
wiederholen.
Es gibt 3 Typen von Kontrollstrukturen:
Entscheidungsanweisungen, Schleifen und Sprunganweisungen.
Ich betrachte zuerst die
Entscheidungsanweisung “if”.
Jeder, der schon einmal programmiert hat,
wird if-Anweisung kennen. Syntax ist folgende:
if (<Bedingung>) und dann kommt die
Anweisung, die ausgeführt werden soll, wenn die Bedingung wahr ist.
Beispiel:
Wenn eine if-Anweisung mehrere Bedingungen hat,
müssen die Bedingungen in Blöcken (geschweifte Klammer {}) zusammengefasst
werden.
Sehr oft folgt einer if-Anweisung eine else-Anweisung.
Das bedeutet, wenn die if-Bedingung nicht erfüllt ist, soll die else-Anweisung
ausgeführt werden.
Es gibt in JavaScript kein Schlüsselwort
else-if-Anweisung aber man kann als Erstanweisung hinter “else” wieder ein “if”
verwenden und ein neue Bedingung angeben und dann ein abschließendes “else”
angeben. Das ist natürlich optional.
Beispiel:
Eine weitere Fallunterscheidung ist
Switch-Case-Anweisung.
Diese Anweisung beginnt mit dem Schlüsselwort
“switch()” und in Klammern wird eine Testvariable angegeben.
Nachfolgend werden mit dem Schlüsselwort
“case” Fälle angegeben und dann Schlüsselwort „default“ für Default-Wert. Beispiel:
In der Ausgabe sieht man, dass der Buchstabe
“c” ausgegeben wird.
Ab dem ersten Treffer werden sämtliche
Anweisungen durchgeführt.
Je nachdem, welcher Wert die überprüfte
Variable a hat (switch), soll eine bestimmte Anweisung(case) ausgeführt werden.
“default” ist der Fall, wenn vorher kein
Treffer zu finden war.
„break“ ist eine Sprunganweisung und sorgt
dafür, dass nach einem Treffer die switch-case-Anweisung verlassen wird.
Nun komme ich zu den Schleifen im JavaScript.
Eine Schleife wiederholt sich so oft, bis eine Bedingung zum Abbruch gegeben
ist. Dann wird die Schleife verlassen.
Ein Beispiel für Schleifen ist die
while-Schleife. Die Syntax ist relativ einfach: “while()” und in Klammern wird
eine Bedingung angegeben. Diese Bedingung kann so formuliert werden, dass man
ein Wahrheitswert bei Vergleich erhält.
Man kann aber auch direkt ein Wahrheitswert
an while-Schleife angeben beispielsweise “while (true)”, das entspricht einer
Endlos-Schleife.
In der Regel legt man eine Variable wie “i =
0;” an und diese Variable kann man prüfen. Man muss beachten, dass in der
while-Schlefe die Zählervariable „i“ erhöht werden muss “i ++”.
Beispiel:
Als Ausgabe werden die Zahlen von 0 bis 9
untereinander ausgegeben.
Die while-Schleife ist eine abweisende oder
kopfgesteuerte Schleife.
Eng mit der while-Schleife verwandt ist die
do-while-Schleife.
Die Ereignisse der while-Schleife und
do-while-schleife sind identisch aber bei der do-while-Schleife wird die
Schleife mindestens einmal durchlaufen, die Überprüfung der Bedingung erfolgt
am Ende. Deshalb wird diese Art auch als annehmende bzw. fußgesteuerte Schleife
bezeichnet.
Beispiel:
Die Ausgabe ist die Zahl 20.
Die while-Schleife hat den Nachteil, dass die
definierte Zählvariable außerhalb der Schleife steht.
Mit der Anweisung „for“ wird die Zählvariable
in der Schleife definiert Bsp:
for (i = 0; i < 10; i++) {
document.write (i + “<br>”); }
Besonders nützlich sind Schleifen in
Verbindung mit Arrays wie in folgendem Beispiel:
Ausgabe:
In der 4. Zeile sieht man ein Array. Von
Zeile 5 bis 8 sind die Array-Elemente mit verschiedenen Werten initialisiert.
In der Zeile 9 befindet sich eine for-Schleife.
Über die Eigenschaft „length“ kann man die Größe des Arrays abfragen.
Diese Schleife durchläuft sämtliche Einträge
des Arrays.
Die for-Schleife ist eine kopfgesteuerte
Schleife und es wird am Anfang überprüft, ob die Bedingung erfüllt ist.
Es gibt eine spezielle Abwandlung der
for-Schleife, die speziell für Arrays gedacht ist. Diese heißt for-in-Schleife.
In obigem Beispiel Zeile 9 sieht man die
for-in-Schleife. Die Variable „a“ ist für Indices der Elemente zuständig und
„ich“ ist Name des Arrays.
Schleifen werden allgemein beendet, wenn eine
Bedingung nicht erfüllt ist.
Man kann eine Schleife auch gezielt mit dem
Schlüsselwort „break“ abbrechen.
„Break“ ist eine Sprunganweisung. Sie
springt aus der Struktur, in der sie gerade notiert wird. Meist wird sie in
Verbindung mit „if“ oder „switch-case“ verwendet.
„Continue“ ist eine weitere Sprunganweisung.
mit dieser bricht man nicht eine Schleife, sondern einen Durchgang ab.
Bsp:
i = 0;
while ( i < 100 ) {
i ++;
if (( i % 2 == 0 ) continue; document.write
( i + “ <br> ” );
Hier wird überprüft, ob “i” eine gerade Zahl
ist. Wenn ja, dann wird „continue“ durchgeführt. Also gibt die Anweisung alle
gerade Zahlen zwischen 0 und 100 aus.
11.
Funktionen
Mit einer Funktion kann man verschiedene
Schritte zusammenfassen.
Eine Funktion ist grundsätzlich ein
Unterprogramm, das verschiedene Applikationen und Anweisungen erzeugt.
An eine Funktion wird ein Name übergeben und
über diesen Namen kann man komplexe Anweisungen der Funktion immer wieder im
Programm aufrufen bzw. anwenden.
Zum Definieren einer Funktion schreibt man
zuerst das Schlüsselwort „ function “ hin.
Nach dem Schlüsselwort wird an die Funktion
ein Bezeichner bzw. Name übergeben gefolgt von Klammern „()“.
Wenn keine Parameter an die Funktion übergeben
werden, bleiben die Klammern hinter „function“ leer.
Die Anweisungen werden in der Funktion mit
einem Block „ { } “ zusammengefasst. Falls die Funktion was zurückliefern soll,
benötigt man das Schlüsselwort „return“ in geschweiften Klammern. Mit „return“
wird der Rückgabewert zurückgegeben.
Beispiel:
In obigem Beispiel sieht man 3 Funktionen. In
der Zeile 14 wird eine Funktion namens „test“ aufgerufen, die nur den Text „
Hallo Welt „ ausgibt.
In der Zeile 15 wird die Funktion „test1“
aufgerufen. Die Funktion „test1“ hat ein Parameter „a“. Nun wird beim Aufruf
der Wert 2 als Parameter angegeben, d.h. der Variable „a“ wird der Wert 2
zugewiesen.
In der Zeile 17 wird die Funktion „test2“
aufgerufen. Diese Funktion hat zwei Parameter „a“ und „b“, welche in der
Funktion miteinander multipliziert werden. Beim Aufruf der Funktion werden den
Variablen „a“ und „b“ die Werte 5 und 9 zugewiesen
12.
Klassen
Eine Klasse wird dafür verwendet, ein Objekt
über einen Konstruktor zu erzeugen.
Es gibt spezielle Methoden und Eigenschaften,
die ohne ein explizites Objekt – eine Instanz – verwendet werden können.
Bei solchen Klassenelementen stellt man den
Namen der Klasse voran und greift dann genau wie bei Objekten mit der
Punktnotation auf eine Methode oder eine Eigenschaft zu.
Man erkennt Klassen daran, dass diese mit
einem Großbuchstaben beginnen.
Objekte, Methoden und Variablen beginnen
immer mit einem Kleinbuchstaben aber Konstanten werden auch groß geschrieben.
Wenn man ein Objekt erzeugen möchte, benötigt
man eine Objektdeklaration (=Klasse).
Darunter kann man sich ein Baumplan für das
zu erzeugende Objekt vorstellen.
Außerdem benötigt man einen Mechanismus (=
Konstruktor), damit aus dem Bauplan ein konkretes Objekt entsteht.
Im folgenden Beispiel erzeuge ich in der
Webseite eine Tabelle. Die Tabellenzeilen werden dynamisch über die
„document.write“ generiert.
In der Zeile 6 befindet sich eine Schleife,
die mit eins beginnt, eine Bedingung i < 10 und die Variable „i“ wird um
eins erhöht.
In der Zeile 7 wird durch „Math.random()“ eine
Zufallszahl zwischen 0 und 1 ermittelt. Dann wird sie mit 100 multipliziert und
ergibt eine Gleitkommazahl zwischen 0 und 100.
Da ich eine Ganzzahl möchte, runde ich die Zahl
mit „Math.round“ ab.
„Math“ ist hier eine Klasse. „round“ und
„random“ sind Methoden und werden zusammen mit einer Klasse Klassenmethoden
oder Instanzen genannt.
Die Ausgabe im Browser sieht wie folgt aus:
JavaScript stellt einige Standardklassen zur
Verfügung, aus denen man Objekte erzeugen kann.
Zum Beispiel mit „ a = new Date () ; „
erzeugt man aus einer Klasse namens „Date()“, ein Datums-Objekt.
Mit „ b = new Array (); „ wird aus der Klasse
Array ein Datenfeld-Objekt erzeugt oder mit „ c = new Image () ; „ wird ein
Image-Objekt erzeugt.
Zum Beispiel betrachte ich folgenden Code:
In der Zeile 7 ist „ setTimeout () ; “ eine
Methode von Objekt „window“.
Sie verzögert einen Aufruf, der als ersten
Parameter angegeben wird um die Zeit in Sekunden, die als zweiter Parameter
angegeben wird.
In der Zeile 5 „b = new Image ();“ wird
ausgedrückt, dass der Variable „b“ eine Referenz auf ein neues Objekt
zugewiesen wird und die Klasse „Image“ erzeugt hier ein Bildobjekt.
„source“ (= src) ist eine Eigenschaft, die
bei einem Bildobjekt der angezeigten Datei entspricht.
„document“ ist ein Objekt, das die Webseite repräsentiert.
In der Zeile 7 ist „images[0]“ ein Datenfeld.
Das erkennt man an den eckigen Klammern und
dem Index „[0]“, der auf das erste Bild in der Webseite zeigt.
Bei der Ausgabe im Browser sieht man, dass
zuerst eine Grafik angezeigt wird, welche nach 5 Sekunden ausgetauscht wird.
Zum Erzeugen eines Objekts können mehrere
Konstruktoren zur Verfügung stehen.
Diese unterscheiden sich durch
unterschiedliche Parameter.
Die einzelnen Parameter im folgenden Beispiel
stehen für Jahr, Monat, Tag, Stunde, Minute und ….
Bsp: a = new Date (2011, 10, 24, 12, 45, 49,
4 );
Die Nummerierung der Monate beginnt bei 0.
Somit steht die 10 nicht für Oktober, sondern November.
13.
verwendete Funktion in meinem Projekt
„ Digitaltechnik-Skript “
Folgende Funktion habe ich zum Einblenden und
Ausblenden der Lösungen von Übungen in meinem Projekt Digitaltechnik-Skript verwendet.
.
Um mit dieser Funktion arbeiten zu können,
wird die jQuery-Bibliothek benötigt.
In jedem Fall muss die Hauptbibliothek von
jQuery im <head>-Bereich der Webseite eingebettet werden. Das
HTML-Konstrukt sieht dann so aus:
In jQuery ist das Dollarzeichen „$“ ein
zentrales Element, da es als Selektor für DOM-Elemente eingesetzt wird. Bei
der Verwendung von Selektoren werden Anführungszeichen benötigt.
In der Zeile 4 sieht man ein Selektor. In der
Klammer wird eine Klasse „exercise“ identifiziert.
Um Elemente nach Klasse auszuwählen, setzt
man einen Punkt vor den Klassennamen.
Nun kann man auf alle Elemente, die Klasse
„exercise“ haben, zugreifen.
Das Wesen der Programmierung im Web mit
JavaScript und jetzt auch jQuery verlangt häufig, mehrere Elemente zu
durchsuchen oder zu durchlaufen.
Zum Beispiel in der Zeile 4: Die Funktion
„.each()“ übernimmt eine Liste von ausgewählten Elementen, geht die Elemente
nacheinander durch und führt beim Schleifendurchlauf auf jedem Element eine
oder keine Aktion aus.
Wenn man Funktionen wie „.each()“ zum
Durchsuchen verwendet, wird man immer auf eine benutzerdefinierte
Wrapperfunktion zusammen mit dem Selektor „$ (this)“ zurückgreifen.
Wie das Schlüsselwort „this“ in der
objektorientierten Programmierung, verweist der Selektor „$ (this)“ auf das
aktuelle Objekt – in diesem Fall auf das momentane Durchsuchen-Element „each“.
Mit anderen Worten dieser Code verwendet
einen Selektor, um alle Elemente zu erfassen, denen die Klasse „excersice“
zugeordnet ist. Dann greift er auf jedes dieser Elemente mithilfe der Funktion
„.each()“ in jQuery zu.
Die „.find()“ Funktion durchsucht alle
Elemente im HTML-Code, die Klasse „solution“ haben. Nun die Funktion „.hid()“ blendet
zuerst alle Elemente aus, die von Funktion „.find()“ gefunden wurden. Durch die
Methode „.click()“ werden all diese Ereignisse mit Mausklick auf den zwischen
<a>-Tag stehendem Text, in dem Fall „Lösung“ erzeugt.
Die Funktion „.toggle()“ toggelt das Element
mit der Klasse „solution“, d.h. beim erstem Mausklick auf den Text „Lösung“
wird die versteckte Grafik oder der Text eingeblendet und beim Wiederanklicken
wird es ausgeblendet und so weiter.
Nun übergebe ich zum Einblenden und
Ausblenden einer Grafik nur die definierten Klassen von obigen Funktionen an
<div>-Tags wie folgt:
wenn man die Seite im Webbrowser startet
sieht man, dass die Grafik zuerst versteckt ist und erst nach dem Anklicken des
Links „Lösung“ eingeblendet wird:
14.
Zusammenfassung
Der
eigentliche Sinn und Zweck von JavaScript ist, Objekte aufzurufen und zu
manipulieren.
Ein Objekt
lässt sich über gewisse Eigenschaften charakterisieren. Man kann bestimmte
Applikationen damit erzeugen. Außerdem verfügt ein Objekt über einen Zustand.
aktive Handlungen,
die man an einem Objekt vollziehen kann, wäre, z.B. das Öffnen oder das Löschen
eines Objektes.
Ein Objekt
wird über folgende Punkte charakterisiert:
à über die
Möglichkeiten, was man damit tun kann. Man spricht auch über die Methoden eines
Objektes.
à über seinen
Zustand: Entsprechend dem Zustand des Objektes werden bestimmte Methoden
bereitgestellt.
à über die
Eigenschaften des Objektes.
JavaScript ist keine objektorientierte, sondern eine
objektbasierende Programmiersprache. Man kann in JavaScript also Objekte
verwenden und erzeugen, aber es fehlen einige wichtige Elemente, die für eine
objektorientierte Sprache notwendig sind.
Unter einem Objekt kann man sich all das vorstellen, was
man eigenständig ansprechen kann. Das kann beispielsweise der Browser sein,
ein Browserfenster oder eine Webseite.
Einer grafischen Oberfläche werden Symbole zur Verfügung
gestellt, die für bestimmte Objekte stehen.
Die innere Struktur von Objekten ist vollkommen unbekannt
und interessiert den Anwender auch zumeist nicht, wenn er dieses verwendet.
Mit einer dot-Notation (Punkt-Notation) kann in
Programmiersprachen auf Objekte zugegriffen werden.
Dabei wird ein Objekt (=Empfänger einer Botschaft)
notiert und dann eine Eigenschaft oder eine Methode von diesem Empfänger
aufgerufen.
window.alert ( „Hallo Welt“ ) ;
„Alert“ ist
hier die Methode eines Objekts ( „window“ ).
15.
Literaturverzeichnis
Internet: