JavaScript
JavaScript ist eine Skriptsprache und wurde speziell für HTML entwickelt. Es ermöglicht die Programmierung von dynamischen Elementen, welche über Links oder eine direkte Programmierung in HTML eingebaut werden können.
Der Code von JavaScript Anwendungen kann mithilfe einen <skript> Tags direkt im HTML enthalten sein. Das HTML Dokument wird über eine Internetverbindung direkt in den Internetbrowser geladen, wo es zusammen interpretiert und ausgeführt wird.
Das folgende Bild zeigt eine einfache JavaScript Anwendung (das helle Fenster).
1. Funktionen von JavaScript
Mit JavaScript können einfache mathematische Berechnungen ausgeführt werden, deren Ergebnis mithilfe eines alert() – Befehls in einem Hinweisfenster ausgegeben wird.
Ein weiteres Grundprinzip stellt die Reaktion auf Ereignisse dar. So kann mit JavaScript Anwendungen auf benutzerinduzierte Ereignisse reagiert werden. Es muss sowohl das Ereignis, auf welches reagiert werden soll, als auch die Reaktion darauf definiert werden. Mit der Kommentarfunktion können Anmerkungen im Quellcode gemacht werden, die zum besseren Verständnis des Quellcodes beitragen sollen. Sie werden später ignoriert und weder übersetzt noch ausgeführt. Es wird in einzeilige Kommentare // und mehrzeilige Kommentare /* …..*/ unterschieden.
<noscript> Tag
Dieses wird vom Browser nur beachtet, falls die Ausführung von JavaScript-Code ausgeschaltet wurde. Es empfiehlt sich einen Hinweis für den Benutzer in ein solches Tag zu schreiben.
<noscript>
<p> Bitte erlauben Sie die Ausführung von JavaScript-Code. </p>
</noscript>
2. JavaScript Dateien
JavaScript-Bibliotheksdatei – src=“bibdatei.js“
JavaScript Code kann man nicht nur direkt in eine HTML Datei schreiben, sondern auch in eine js-Bibliotheksdatei. In dem HTML Dokument wird nach dem <script> Tag auf die entsprechende Datei in der Bibliothek verwiesen. Die JavaScript Datei muss sich allerdings im selben Ordner wie das HTML Dokument befinden. Ein mehrfaches Verwenden ist dadurch sehr einfach, dass lediglich der Verweis auf die Datei erfolgen muss und die HTML Datei übersichtlich bleibt.
<script type=“text/javascript“ src=”bibdatei.js”> </script/
2.1 Variablen
“Eine Variable ist eine Speicherstelle im Computer, in der Sie unterschiedliche Werte festhalten können.“
Variablendeklaration
Variablen können per Schlüsselwörter definiert werden, müssen es aber nicht. JavaScript fordert keine explizite Variablendeklaration durch Schlüsselwörter. Es erfolgt eine automatische Reservierung des Speicherplatzes.
Variablennamen
JavaScript ist bezüglich Variablennamen sind case-sensitiv bezüglich Groß- und Kleinschreibung.
Nicht verwendet werden dürfen: Satzzeichen, Sonderzeichen, Leerzeichen, Befehle, Schlüsselwörter
Darüber hinaus darf ein Variablennamen nicht mit einer Zahl anfangen.
2.2 Variablentypen
Variablentypen sind Zahlen, Strings “…“ d.h. Zeichenketten und boolsche Werte, d.h. Wahr oder Falsch. Dieser muss bei der Deklaration nicht mit angegeben werden, sondern wird durch die Semantik erkannt. Auch ist die Verwendung für Variablen durchlässig, also es können verschiedene Datentypen in derselben Variablen gespeichert werden.
2.3 Wertzuweisung
Eine Wertzuweisung erfolgt über ein Gleichheitszeichen. Mit Variablen kann wie in der Mathematik auch gerechnet werden. Für die Variable wird dann der entsprechende Wert eingesetzt. Das Ergebnis kann man sich dann bspw. Wieder in einem Fenster mittels der alert() Funktion ausgeben lassen.
Falls einer Variablen kein Anfangswert zugewiesen wird, gilt diese als undefined.
Falls man eine Variable explizit als leer deklarieren möchte, kann dies mit dem Schlüsselwort null erfolgen.
var x = null;
- Mit der Funktion typeof kann man den Typ einer Variablen feststellen.
Antwortmöglichkeiten sind undefined, boolean, function, number, object, string - Globale und lokale Variablen
Globale Variablen: Definition einer Variablen außerhalb der Funktion mit dem Schlüsselwort var. Sie können von jeder folgenden Funktion verwendet werden. Lässt man innerhalb einer Funktion das Schlüsselwort var weg; so definiert man automatisch eine globale Variable.
Lokale Variablen: Definition einer Variablen innerhalb eines Anweisungsblocks einer Funktion. Die Variable existiert nur solange die Funktion ausgeführt wird. Man kann nicht außerhalb der Funktion auf die Variable zugreifen.
Die Verwendung von lokalen Variablen reduziert die Komplexität des Codes.
2.4 Umgang mit Datentypen
Beim Umgang mit Datentypen von JavaScript wird loose typing genannt. Andere Programmiersprachen wie bspw. 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 erfordert keine explizite Festlegung des Datentyps einer Variablen.
Strong Typing fordert die explizite Festlegung des Datentyps einer Variablen.
2.5 Reservierte Schlüsselwörter
3. Mathematische Berechnungen
Berechnungen erfolgen nach den allgemeinen Regeln der Mathematik. Allerdings steht das Gleichheitszeichen “=“ auch für eine Zuweisung. Es wird erst die Berechnung durchgeführt und dann die Speicherung des Ergebnis in einer Variablen auf der anderen Seite des Zuweisungsoperators.
Kommazahlen sind prinzipiell problematisch, da diese meist ein ungenaues Ergebnis produzieren. Das Problem kann man mit Funktionen wie Math.round() umgehen.
Als Rechenoperationen stehen die vier Grundrechenarten sowie Modulo zur Verfügung.
Inkement- und Dekremet-Operatoren erhöhen oder verringern eine Variable um eins.
Verzweigungen
If- Bedingung Mit der if-Abfrage wird eine Bedingung definiert, unter der weitere Anweisungen ausgeführt werden. If- Bedingungen können auch in einander geschachtelt werden.
if (bedingung) {anweisung1}
else {anweisung2 falls bedingung nicht erfüllt}
Alternativ kann auch ein Konditionaloperator verwendet werden.
(bedingung) ? anweisung1 : anweisung2 falls bedingung nicht erfüllt
Mithilfe folgender Operatoren kann die Bedingung formuliert werden. Diese heißen Vergleichsoperatoren.
Switch-Anweisung
Switch-Anweisungen können benutzt werden, falls es mehrere Optionen gibt. Es können mehrere Möglichkeiten angegeben werden, welche ausgeführt wird hängt von dem Wert der Variablen ab. Die default Anweisung wird ausgeführt, falls keine der case-Anweisungen ausgeführt werden kann. Das Schlüsselwort break kann verwendet werden, um die switch-Anweisung vorzeitig zu verlassen, falls ein case zutrifft und die Anweisung bereits ausgeführt wurde.
Schleifen
Schleifen bestehen aus einem Schleifenkopf, in dem mindestens die Bedingung formuliert ist, unter welcher die Schleife ausgeführt wird. Im Schleifenrumpf stehen Anweisungen, die ausgeführt werden sollen, falls die Bedingung erfüllt ist. Nach Durchlaufen der Anweisungen im Schleifenrumpf wird abermals die Bedingung im Schleifenkopf geprüft. Ist diese immer noch erfüllt, wird die gleiche Anweisung wiederholt ausgeführt.
For-Schleife
In dem Schleifenkopf wird die Variable initialisiert, die Bedingung formuliert und ein Inkrement festgelegt.
for (initialisierung und deklaration der variablen; prüfbedingung; inkrement oder dekrement)
{anweisung}
While-Schleife
Die while-Schleife definiert im Schleifenkopf nur eine Bedingung, unter der die Schleife ausgeführt wird und im Schleifenrumpf die Anweisung.
while (prüfbedingung)
{anweisung}
Do-While-Schleife
Die do-while-Schleife wird immer mindestens einmal ausgeführt, da die Bedingung immer erst am Ende geprüft wird. Der Aufbau von Schleifenkopf und Schleifenrumpf ist umgekehrt verglichen zur while-Schleife.
do {anweisung}
while(prüfbedingung);
4. Funktionen – function
Funktionen bestehen aus einer Befehlsfolge bzw. Anweisungen und ermöglichen eine wiederholte Ausführung derselben Befehlsfolge durch Aufrufen des Funktionsnamens. Funktionen sollten möglichst im Header der HTML Datei definiert werden. Anschließend können sie im Body verwendet werden.
4.1 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.
4.2 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. Es erfolgt ein Aufruf der Referenz.
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.
4.3 Suchfunktionen
| Befehl | Wirkung |
| text.charAt() | Positionsbestimmung eines Buchstabens an einer Stelle |
| text.IndexOf() | Positionsbestimmung eines bestimmten Wortes, ab bestimmter Stelle |
| text.lastIndexOf() | Positionsbestimmung eines Wortes, von hinten beginnend |
| text.substring() | Auslesen eines Teiles der Zeichenkette (Anfangsposition, Endposition) |
| text.split() | Aufteilen einer Zeichenkette in mehrere, Ergebnis ist ein Array mit Teilstrings |
| text.length | Ausgabe der Länge der Zeichenkette |
5. String-Objekt
Das String-Objekt kann mit Text bzw. Zeichenketten umgehen. Die Erzeugung eines solchen Objekts erfolgt so:
var t = new String(“Das ist ein Text“);
var t = “Das ist ein Text“ ;
6. Formulare im Objektmodell
Formulare bestehen aus Objekten, die untereinander eine Beziehung zu sich haben.
6.1 Adressierung von Formularelementen
Jedes Formularelement erhält mit id = “id1“ einen eindeutigen Namen.
6.2 Form-Objekt
Ein Formular wird mit einem <form> Tag erzeugt und kann beliebig viele Formularelemente beinhalten.
6.3 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:
document.forms[0]
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
document.nameFormular oder
document.forms[“nameFormular“] oder
document.getElementById(“id2”)
6.4 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
document.nameFormular.element[0]
Der Zugriff kann aber auch über den Namen oder die ID des Formularelements erfolgen.
document.nameFormular.eingabe1 oder
document.nameFormular.elements[“eingabe1“] oder
document.getElementById(“eingabe1”)
Zugriff auf Eigenschaften der Formularelemente
document.nameFormular.eingabe1.value
Wenn sich Formularelemente im gleichen Form-Object befinden, kann auch eine relative Adressierung mit dem Schlüsselwort this verwendet werden.
this.value
Das Schlüsselwort form ist eine Refernez auf das übergeordnete Form-Object.
Objekte
| Objektname | JavaScript Code | Beschreibung |
| Text-Object | <input type=”text”> | Erzeugung von einzeiligen Textfeldern, kein Zeilenumbruch möglich |
| Textarea-Object | <textarea> | Erzeugung von einzeiligen Textfeldern, Angabe von Zeilen und Reihen, wrap legt fest wie Zeilenumbrüche gehandhabt werden sollen: off, virtual, physical |
| Password-Object | <input type=”password”> | Sämtliche Zeichen werden durch Sternchen o.ä. dargestellt, es findet keine Verschlüsselung des Passworts statt (nur optisch nicht lesbar) |
| Hidden-Object | <input type=”hidden”> | Objekt wird nicht angezeigt und dient zur Zwischenspeicherung bei der Übergabe von Daten |
| Button-Object | < input type=”button”> | Stellt eine Schaltfläche dar |
| Submit-Object | <input type=”submit”> | Spezielles Button Objekt, ermöglicht das Verschicken eines Formulars über das Internet. |
| Reset-Object | <input type=”reset”> | Formulareingaben lassen sich auf ihre Standardwerte zurücksetzten |
| Checkbox-Object | <input type=”checkbox”> | Auswahlfeld, Optionen können aktiviert oder deaktiviert werden, Attribut checked=”checked“ für prechecked Boxen bei Aufruf der HTML Seite |
| Radio-Object | <input type=”radio”> | Radio Buttons können zu Gruppen zusammengefasst werden, innerhalb einer gruppe kann nur ein einziges Element ausgewählt werden |
| Select-Object | <select id, name> <option selected =”selected”> Option1 </option><option>Option2 </option> | Einfachauswahl au seiner Liste, Option mit selected Tag ist vorausgewählt, mit einem size Attribut können auch mehrere Einträge gleichzeitig angezeigt werden; mit multiple=”multiple” kann eine Mehrfachauswahl getätigt werden; Hinzufügen neuer Einträge in die Liste durch new Option()Löschen von Einträgen durch Setzten des null Wertes |
Onchange – Event Handler
Bei Textobjekten ist der Befehl onchange zuständig für das Feststellen einer Veränderung des Textes durch den Anwender. Das Ereignis change tritt allerdings erst ein, wenn das Textobjekt den Fokus verliert. Die Reaktion auf Veränderungen kann auch auf andere Objekte übertragen werden.
Onclick – Event Handler
Der Befehl legt die Reaktion auf das Ereignis eines Mausklicks beispielsweise auf eine Schaltfläche fest.
7. Arrays
Arrays (Felder) gruppieren zusammengehörige Elemente, die unter einem gemeinsamen Namen gespeichert werden.
Arrays werden in JavaScript durch das Array-Objekt repräsentiert. Mit einem Array-Objekt können viele Variablen erzeugt werden, dadurch sparrt sich gerade bei größeren Gruppierungen viel Zeit, da man sie nicht einzeln anlegen muss.
Ein Array wird so erzeugt:
var Test = new Array(100);
Der Befehl erzeugt ein Feld Test mit 100 Elementen. Die Elemente werden alle automatisch auf undefined (kein Wert enthalten) gesetzt. Die Elemente des Arrays können über ihren Index angesprochen werden, mit [0] beginnend.
Arrays sind dynamisch, das bedeutet, dass ich ihnen jederzeit neue Werte zuweisen kann und sich dadurch ihre Größe verändert.
Mit einer for-Schleife kann man alle Elemente eines Arrays durchlaufen. Hierbei ist die Länge des Arrays nicht wichtig, es werden alle Elemente nacheinander durchlaufen.
Es können alle möglichen Datentypen (Zahlen, Strings, gemischte Datentypen) in einem Array gespeichert werden.
8. Objekte
Objekte sind fest umgrenzte Datenelemente mit Eigenschaften und mit Methoden (Funktionen).
Objekte sind wie Gegenstände der realen Welt. Sie enthalten Daten (Eigenschaften bzw. Attribute) und Werkzeuge (Fähigkeiten bzw. Methoden). Beispiele für Objekte in JavaScript sind Browserfenster, Eingabefelder und Bilder. Ein Browserfenster hat beispielsweise eine bestimmte Größe (Eigenschaft) und kann auf dem Bildschirm verschoben werden (Fähigkeit). Eigenschaften und Methoden haben immer einen Bezug zum Objekt.
Abhängigkeit von Objekten
Beispielsweise wird ein Eingabefeld in einem Browserfenster dargestellt und somit ist das Eingabefeld von diesem abhängig. Diese Abhängigkeiten sind für das Programmieren essenziell.
In JavaScript gibt es bereits vorgefertigte Objekte, wie beispielsweise das Browserfenster. Ebenfalls kann der Programmierer neue Objekte erzeugen:
- mit dem Konstruktor: object( )
- Konstruktor über Literale { }
- Eigener Konstruktor des Programmierers
Erzeugung eines Objektes mit dem Konstruktor:
var str = new String(„JavaScript“);
Über Konstruktoren lassen sich schnell und einfach viele neue Objekte erzeugen. Ein Konstruktor ist also eine Funktion zum Erstellen von Instanzen. Man kann also sagen, dass ein Konstruktor den Bauplan zum Erstellen eines Objektes liefert. Das String-Objekt kennt die Eigenschaft length, mit der man die Länge der Zeichenkette auslesen kann.
Objekt definieren und Werte zuweisen
Objekte definieren sich über ihre Eigenschaften. Den Eigenschaften können Werte zugewiesen werden. Objekte können mit dem Konstrukt über Literale erzeugt werden , dann werden die Eigenschaften und Methoden des Objektes in den geschweiften Klammern aufgeführt.
Objekte können auch mit einem spezialisierten Konstruktor erzeugt werden.
with
um auf ein Objekt zuzugreifen, dass man mehrere Male verwendet, kann man mit with (ojc) drauf zugreifen. Mit with sagt man dem Programm, dass die nachfolgenden Befehle im Zusammenhang mit einem bestimmten Objekt stehen.
ePortfolio 