Variablen
Variablen sind eine Speicherstelle im Computer, der wir verschiedene Werte zuweisen können und später wiederverwenden.
Definition einer Variable: ‘var x = y;’
Also der Variablen x wird der Wert y zugewiesen. Als Beispiel könnte man ihr einen Namen als String, also einer Zeichenkette, zuweisen:
var name = “Kathi”;
alert(“Hallo ” + name + “!”)
Beim Öffnen der Datei wird als Popup ‘Hallo Kathi!’ angezeigt. Ebenso kann ich Zahlen, Kommazahlen (mit Punkt) und Boolesche Werte (true/false) speichern. Das Schlüsselwort var muss bei JavaScript nicht zwingend genannt werden. Es kann auch weggelassen werden.
Für die Variablen muss das Computerprogramm Speicherplatz im Arbeitsspeicher reservieren. Nach der Beendigung des Programms kann der Speicher wieder freigegeben werden.
Beim Umgang mit Datentypen von JavaScript wird loose typing genannt. Andere Programmiersprachen wie beispielsweise Java verwenden das Konzept des strong typing. JavaScript wandelt im Zweifelsfall alles in einen Text um, es sei denn es ist eine Funktion, die nicht auf Text anwendbar ist, dann wird der Ausdruck in eine Zahl umgewandelt.
Loose Typing fordert nicht die explizite Festlegung des Datentyps einer Variablen.
Strong Typing fordert die explizite Festlegung des Datentyps einer Variablen
Bei JavaScript müssen die Variablen jedoch nicht immer direkt deklariert werden. Man kann sie auch “on-the-fly” lokal erstellen, wenn sie benötigt werden.
Verzweigungen
Das Programm muss nicht stur von oben nach unten durchlaufen. Man kann die Ausführung eines Befehls auch von einer Bedingung abhängig machen. Dazu werden beispielsweise zwei Variablen mittels einer if-Abfrage miteinander verglichen und auf eine Bedingung überprüft. Die beiden Variablen werden mittels verschiedener Operatoren verglichen, die aus der Java Programmierungsvorlesung schon bekannt sind (z.B. ==, !=). Tritt die Bedingung ein, fährt das Programm mit einer Aktion fort (z.B. mit einem alert).
Falls sie nicht eintritt, kann entweder eine weitere Verzweigung aufgestellt werden oder die Funktion kann mit einem else abgerundet werden. Das else gibt an, was passieren soll, wenn die if-Bedingung nicht erfolgt (beispielsweise wird ein anderer Text ausgegeben). Folgendes Flussdiagramm veranschaulicht dies an einem Beispiel:
Ebenfalls können die Variablen in Verbindung mit true oder false in if-Abfrage verglichen werden. Ebenfalls können mehrere if-Abfragen, wie bereits im 1. Semester gelernt, ineinander geschachtelt werden.
Mit dem Konditional-Operator kann ich eine “gekürzte” if-else-Abfrage erstellen. Andernfalls kann auch ein Switch-Operator benutzt werden.
Schleifen
Schleifen sind uns aus dem 1. und 2. Semester in der Java Programmierung schon bekannt. Schleifen werden verwendet, wenn ein Computerprogramm eine Aktion mehrmals durchführen soll.
Drei bekannte Schleifen sind die for-, die while-, und die do-while-Schleife.
For-Schleife
In dem Schleifenkopf wird die Variable initialisiert, die Bedingung formuliert und ein Inkrement festgelegt. Die For-Schleife wird mit folgendem Code erzeugt:
Die Variable i wird mit dem Startwert 0 festgesetzt und nach jedem Durchlauf der Anweisung um 1 erhöht, bis i < 10 ist.
Folgendes Flussdiagramm beschreibt den Durchlauf der for-Schleife:
While-Schleife
Die for- und while-Schleife sind ähnlich, jedoch besitzt die while-Schleife keinen Initalisierungs- und Aktualisierungsteil. Sie führt ihre Anweisung fort, solange eine Bedingung noch nicht erfüllt ist, sprich sie wird mindestens einmal ausgeführt. Sie wird folgendermaßen erzeugt:
Folgendes Flussdiagramm beschreibt den Ablauf der while-Schleife:
Do-While-Schleife
Diese do-while-Schleife führt im Unterschied zur while-Schleife erst die Anweisung aus und prüft dann, ob die Bedingung noch erfüllt wird. Die Erzeugung erfolgt so:
Folgendes Flussdiagramm beschreibt den Ablauf der do-while-Schleife:
Funktionen
Funktionen sind in JavaScript ähnlich wie Methoden bei Java. Sie dienen dazu, Programmabläufe zu definieren und zu “verpacken”, sodass diese nur noch aufgerufen werden müssen, um die sich wiederholende Aufgabe zu erledigen. Das hat den Vorteil, dass man denselben Code nicht immer wieder aufs Neue schreiben muss. Sie werden mit dem Schlüsselwort function definiert. Die Funktion hat außerdem einen eigenen Namen, mit dessen man meist darauf schließen kann, was die Funktion bewirkt.
Aufbau einer Funktion
Schlüsselwort function, gefolgt von dem Funktionsnamen. In den Klammern können auch Argumente übergeben werden, welche von den Anweisungen verwendet werden kann.
Im Befehlsblock werden die Anweisungen beschrieben.
Alternativ können Funktionen auch mit einem Konstruktor namens Function erzeugt werden.
Es können auch mehrere Argumente einer Funktion übergeben werden. Falls eine variable Anzahl an Argumenten übergeben werden können soll, können diese innerhalb der Anweisung wie folgt aufgerufen werden:
funktionsname.arguments[index]
Die Gesamtanzahl der Argumente kann über die Anweisung funktionsname.arguments.length abgerufen werden. Mit dem Schlüsselwort return kann ein Rückgabewert definiert werden.
Definition einer Funktion
function funktionsname(argument1, argument2) {anweisung1; anweisung 2; return}
funktionsname = new Function(“x“,“y“, “return x+y“);
Call by Value
Die Übergabe des Wertes selbst erfolgt und nicht nur eine Übergabe der Referenz auf den Speicherplatz. Bei Daten wird der Wert an sich übergeben. Der Wert der Variablen wird aber nur innerhalb der Funktion verändert, außerhalb der Funktion ändert sich der Wert nicht.
Dieses Prinzip wird hauptsächlich für einfache Datentypen verwendet.
Call by Reference
Die Referenz wird übergeben und nicht der Wert. Objekte werden immer mit Referenz übergeben.
à Aufruf der Referenz
Globale und lokale Variablen
Globale Variablen erzeugt man, indem man eine Variable außerhalb einer Funktion oder Schleife mit dem Schlüsselwort var definiert.
Lokale Variablen erzeugt man innerhalb einer Funktion. Außerhalb dieser Funktion ist die Variable nicht bekannt. Nach Beendigung der Funktion kann demnach nicht auf eine lokale Variable dieser Funktion zugriffen werden.
Vordefinierte Funktionen – parseInt(), parseFloat(), eval(), …
Vordefinierte Funktionen zählen zum Global-Object.
parseInt() ermöglicht eine Konvertierung in Ganzzahlen, parseFloat() eine Konvertierung in eine Kommazahl. Es ermöglicht eine Bereinigung von Buchstaben und ähnlichem. Der Wert muss dabei in “…“ angegeben werden. Falls eine Konvertierung in ein anderes Zahlensystem (Binär, Oktal, Dezimal, Hexadezimal) erfolgen soll kann dies auch erfolgen. Eval() kann Strings interpretieren und einfache Operationen durchführen.
Anonyme Funktionen besitzen keinen Funktionsnamen. Eine Anwendung erfolgt oft bei Reaktionen auf ein Event.
Innere Funktionen sind Funktionen, die im Kontext einer anderen Funktion definiert wird und auch nur innerhalb dieser äußeren Funktion verfügbar ist.
Rekursive Funktionen sind Funktionen, die sich selbst immer wieder aufrufen, meistens bis eine bestimmte Bedingung erfüllt ist, daher oft im Zusammenhang mit if-Bedingungen.
Strings
Strings werden dazu benutzt, Zeichenketten darzustellen und mit ihnen zu arbeiten. Dabei unterscheidet man zwischen einem einfachen String und dem String-Objekt.
Ein einfacher Datentyp String ist für simple Zeichenketten und/oder auch Zahlen gedacht, während man mit dem String-Objekt ein globales Objekt erstellt, das dann anschließend handgehabt werden kann.
Strings sind somit Folgen von Zeichen aller Art, die in einfache oder doppelte Hochkommas gefasst werden. In der Webprogrammierung sind sie essentiell, auf allen Seiten werden sie beispielsweise in Kontaktformularen oder Einkaufswägen benutzt. So werden ausgefüllte Eingabefelder als Strings gelesen, weiterhin sind Nachrichten an den Benutzer ebenfalls Strings.
Suche von Argumenten
Auf Strings lassen sich verschiedenste Methoden anwenden, von denen viele in JavaScript bereits vorgebaut sind. Auf einige möchte ich nun eingehen.
charAt(): Positionsbestimmung eines Buchstabens an einer Stelle
indexOf(): Positionsbestimmung eines bestimmten Wortes. Es kann angegeben werden, ab welcher Stelle gesucht werden soll.
lastIndexOf(): Positionsbestimmung eines Wortes von hinten beginnend.
substring(): Ermöglicht das Auslesen eines Teils im String. In den Klammern werden als Parameter Anfangs- und Endposition angegeben.
split(): Aufteilen einer Zeichenkette in mehrere, Ergebnis ist ein Array mit Teilstrings
.length: Ausgabe der Länge der Zeichenkette. Eingerechnet werden auch alle Leerzeichen und Sonderzeichen.
Formulare im Objektmodell
Formulare bestehen aus Objekten, die untereinander eine Beziehung zu sich haben.
Adressierung von Formularelementen: jedes Formularelement erhält mit id = “id1“ einen eindeutigen Namen.
Form-Objekt: ein Formular wird mit einem <form> Tag erzeugt und kann beliebig viele Formularelemente beinhalten
Zugriff auf das Formular: der Zugriff kann entweder über das forms-Array erfolgen, das erste Formular, welches in der HTML Datei steht kann wie folgt aufgerufen werden:
Nachteil ist, dass Dritten nicht direkt ersichtlich ist, welches Formular verwendet wird und bei Änderung der Reihenfolge der Formate auch jede Adressierung angepasst werden muss.
Der Zugriff kann auch über den Namen bzw. die ID des Form-Objects erfolgen
Formularelemente
Ein Formularelement wird durch ein Objekt dargestellt, welches einem Form-Objekt untergeordnet ist.
Zugriff Formularelement: der Zugriff auf Formularelemente kann entweder über das elements-Array erfolgen
Der Zugriff kann aber auch über den Namen oder die ID des Formularelements erfolgen.
Zugriff auf Eigenschaften der Formularelemente
Wenn sich Formularelemente im gleichen Form-Object befinden, kann auch eine relative Adressierung mit dem Schlüsselwort this verwendet werden.
Das Schlüsselwort form ist eine Referenz auf das übergeordnete Form-Object.
Objekte
Text-Objekt
Durch das Text-Objekt kann eine Textzeile erstellt werden, in denen Benutzer etwas reinschreiben können. Sie werden durch das <input>-Tag erzeugt. Dahinter wird der type “text” angegeben, sodass für uns, als auch für den Computer klar wird, was für eine Art Formularobjekt angegeben ist.
Möchte man stattdessen ein ganzes Textfeld erzeugen, so wird der <textarea>-Tag genutzt. Im Befehl kann angegeben werden, wie viele Reihen und Spalten das Textfeld haben soll.
Password-Objekt
Eine Variante des Text-Objekts ist das Passwort-Objekt. Hier werden für den Benutzer bei der Eingabe Sternchen oder Punkte statt der eigentlichen Zeichen eingegeben. Der JavaScript Code lautet hier: <input type=”password”>.
Hidden-Objekt
Texte als Hidden-Objekte werden nicht angezeigt. Dies eignet sich bei der Übergabe von Daten zwischen verschiedenen HTML-Seiten oder beim Zwischenspeichern von Texten.
Button-Objekt
Das Button-Objekt stellt eine Schaltfläche dar und wird folgendermaßen implementiert: < input type=”button”>.
Submit-Objekt
Das Submit-Objekt ist wie eine Ausprägung des Buttons. Er wird, wie der Name verrät, dazu benutzt, ein Formular zu verschicken. Beim input type wird “submit” benutzt (<input type=”submit”>).
Reset-Objekt
Dieses Objekt wird dazu benutzt, Benutzereingaben in einem Formular zu löschen bzw. die Standardwerte einzusetzen. Der input type heißt hier “reset” (<input type=”reset”>).
Checkbox-Objekt
Hier werden Auswahlfelder erzeugt, bei denen durch Anklicken ein Haken gesetzt werden kann. Dadurch lassen sich zum Beispiel Aussagen Bejahen oder Verneinen oder es können Optionen ausgewählt werden. Der input type heißt hier “checkbox” (<input type=”checkbox”>). Des Weiteren gibt es hier die Eigenschaft “checked”. Diese gibt über die Boolean-Werte true und false an, ob die Box angekreuzt ist oder nicht.
Radio-Objekt
Bei diesem Objekt besteht eine Ähnlichkeit zum Checkbox-Objekt. Allerdings ist hier der Unterschied, dass Gruppierungen an mehreren Radio-Objekten erstellt werden können, unter denen dann immer nur eins ausgewählt werden kann (<input type=”radio”>).
Select-Objekt
Beim Select-Objekt kann eine Reihe verschiedener Optionen in einem Drop-Down Menü ausgewählt werden. Sollen mehrere Optionen auf einmal angezeigt werden, sozusagen als Gegenstück zum Drop-Down Menü, kann hinter name noch die Eigenschaft size angegeben werden. Zuletzt kann über selectedIndex ausgegeben werden, welches Element ausgewählt ist. So kann beispielsweise ein Hinweisfenster erzeugt werden, das unsere Auswahl auswirft. Dass mehrere Optionen selektierbar sind, kann über die Eigenschaft multiple ermöglicht werden.
Wenn du noch tiefer einsteigen möchtest, dann gehe jetzt noch einen letzten Schritt weiter.
Entwicklung verteilter Systeme 