JavaScript

JavaScript ist eine Skriptsprache (s. Punkt „Skriptsprachen“ aus der 1. Vorlesung) und wurde extra für das Programmieren mit HTML entwickelt (mehr über HTML im entsprechenden Kapitel). Im HTML wird ein JavaScript-Teil mit dem Tag „<script>“ angekündigt und mit „</script>“ wieder geschlossen und ist sozusagen ein „Teilcode“ vom HTML-Code. Zusammen mit dem restlichen HTML-Code wird der JavaScript-Teil über HTTP vom Web-Server in den Web-Browser geladen und erst dort interpretiert. JavaScript ist die Basis vom dynamischen HTML (DHTML) und von Web 2.0.

Um zu verstehen, wie JavaScript in HTML implementiert werden kann, sollte man zunächst verstehen, wie HTML funktioniert. Hierzu sind im Reiter „HTML“ die relevanten Informationen zu finden.

Im Folgenden ist ein Beispiel zu einer einfachen JavaScript-Textausgabe zu finden.

<!DOCTYPE html>
<html>
<head>
      <title>Hallo Welt!</title>
</head>
<body>
      <p>
      Das ist HTML.
      </p>
      <script type="text/javascript"> <!--hier wird der script-Tag JavaScript zugeordnet-->
            alert("Hallo Welt! Das ist JavaScript."); <!--der JavaScript-Teil-->
      </script>
</body>
</html>

Mit JavaScript können aber nicht nur Texte ausgegeben werden, sondern auch Berechnungen ausgeführt werden. Mit alert() kann dann die Lösung ausgegeben werden. Im folgenden ist dazu ein kurzes Beispiel aufgeführt.

<!DOCTYPE html>
<html>
<head>
      <title>Berechnung</title>
</head>
<body>
      <script type="text/javascript">
            alert(17 + 5 * 3); <!--hier ist der Berechne-Befehl-->
      </script>
</body>
</html>

Das alert() sorgt dafür, dass das Ergebnis in einem Ereignisfenster ausgegeben wird. Das Besondere hier ist, dass der Befehl nicht in Anführungszeichen geschrieben wurde. Mit Anführungszeichen würde der Befehl nur die Formel 17 + 5 * 3 ausgeben.

Benutzereingaben

Bisher wurde der JavaScript-Code immer direkt ausgeführt. Allerdings gibt es auch die Möglichkeit, den Code als Reaktion auf eine Benutzereingabe auszuführen.

Eine Möglichkeit der Benutzereingabe ist ein Button. Ein Beispielcode könnte wie folgt aussehen:

<!DOCTYPE html>
<html>
<head>
      <title>Hallo Welt!</title>
</head>
<body>
      <form>
            <input type="button" value="Test" onclick="alert('Hallo!')">
      </form>
</body>
</html>

Dabei ist der JavaScript-Code, der ausgeführt werden soll, erst nach dem onclick zu finden, mit welchem ein sog. Event-Handler definiert wird, mit dem festgelegt wird, was nach der Eingabe passieren soll.

Kommentare

Wie auch im HTML gibt es im JavaScript eine Kommentarfunktion. Kommentare werden allerdings, anders als ein HTML-Kommentar mit zwei Schrägstrichen angekündigt. In der nächsten Zeile ist der Kommentar automatisch beendet. Mehrzeilige Kommentare werden mit „/*“ eingeleitet und mit „*/“ beendet.

Browser ohne JavaScript

Es gibt Internetbrowser, die kein JavaScript verstehen oder bei denen die Ausführung von JavaScript ausgeschaltet wurde. Mit dem sog. <noscript>-Tag im HTML-Code kann man den betroffenen Browsern signalisieren, dass JavaScript gebraucht wird. Dieser Tag wird auch nur von jenen Browsern beachtet, die kein JavaScript unterstützen oder es deaktiviert haben.

<!DOCTYPE html>
<html>
<head>
      <title>noscript-Bespiel/title>
</head>
<body>
      <p>
      Das ist HTML.
      </p>
      <script type="text/javascript">
            alert(17 + 5 * 3); <!--hier ist der Berechne-Befehl-->
      </script>
      <noscript>
            <p>Diese Seite benötigt JavaScript.</p> <!--Ausgabe, falls der Browser kein JavaScript unterstützt.-->
      </noscript>
</body>
</html>

js-Bibliotheksdatei

JavaScript lässt sich auch in einer Bibliothek speichern. Damit wird der JavaScript-Teil aus dem HTML ausgelagert und man verweist nur auf den Pfad, wo die .js-Datei zu finden ist. Man hat damit die Möglichkeit, auch in einer anderen HTML-Datei auf den JavaScript-Code zuzugreifen, ohne ihn hin und her kopieren zu müssen.

Beispiel einer .js-Datei:

alert(17 + 5 * 3);

Der Code, um auf die .js-Datei von oben zugreifen zu können, könnte folgendermaßen aussehen:

<!DOCTYPE html>
<html>
<head>
   <title>Berechnung</title>
</head>
<body>
   <script type="text/javascript" scr="test.js"></script>
</body>
</html>

Dabei muss also die Datei mit der Formel „test.js“ heißen, damit diese eingebunden wird.

Variablen

Variablen sind schon aus der Java-Vorlesung bekannt (Link zum Skript hier).

Eine Variable ist eine Speicherstelle im Computer, die verschiedene Werte festhalten kann. Dafür muss das Computerprogramm im Arbeitsspeicher Speicherplatz reservieren, um den Inhalt der Variablen speichern zu können. Spätestens nachdem das Programm beendet wurde, kann die Variable und ihr Inhalt gelöscht werden und der reservierte wieder Speicherplatz freigegeben werden. Bzgl. der Namensgebung von Variablen ist JavaScript anders als HTML „case-sensitive“. Die Variablen „celsius“ und „Celsius“ sind unterschiedlich. Besteht ein Variablenname aus mehrern Wörtern, benutzt man „Camelcase“ oder Unterstriche.

Variablen werden in JavaScript mit „var“ definiert. Weist man einer Variablen keinen Wert zu, verwendet JavaScript für diese den Wert undefined. Will man explizit festlegen, dass in der Variablen nichts gespeichert ist, initialisiert man sie mit null. Dabei ist hier null unbedingt von der Ziffer „0“ zu unterscheiden.

Anders als in Java muss in JavaScript also nicht eine Variable explizit festgelegt werden.

In JavaScript gibt es drei Möglichkeiten Variablen zu deklarieren:

  • var: deklariert eine Variable unabhängig von ihrem Gültigkeitsbereich (Scope)
  • let: deklariert eine lokale Variable im Block Scope
  • const: deklariert eine unveränderliche Variable

Strong- und loose-typing

Für Variablen müssen in JavaScript auch keine Datentypen festgelegt werden. JavaScript ermöglicht die Speicherung unterschiedlicher Werte in derselben Art von Variable, was dazu führt, dass viel Speicher reserviert wird, da nicht bekannt ist, wie viel tatsächlich benötigt wird. Dadurch leidet die Performanz.

strong-typing beschreibt, dass die verwendeten Datentypen konkret festgelegt werden.

loose-typing beschreibt die Art und Weise, wie JavaScript mit Datentypen umgeht (es muss kein Datentyp definiert werden).

Problem bei JavaScript (loose-typing):

Beispiel:

var x = "5"; //String
var y = 12;  //Integer

z = x+y;     //Was ist das Ergebnis???

Es ist nun nicht bekannt, ob das Ergebnis nun „17“ oder „512“ ist, da zwei unterschiedliche Datentypen zusammengeführt werden. Im Zweifelsfall geht JavaScript immer von Strings aus, weshalb hier das Ergebnis tatsächlich „512“ wäre. Das Problem kann mit einer Umwandlung der Strings in Zahlenwerte gelöst werden. Dafür werden die Funktionen parseInt() und parseFloat() genutzt.

Berechnung und Operatoren

Variablen können auch zusammengeführt werden. Dazu verwendet man verschiedene Operatoren.

Will man bei der Addition von Kommazahlen ein genaues Ergebnis rausbekommen, ohne Ungenauigkeit, wird die Methode Math.round() benutzt.

Die Rechenoperatoren sind ebenfalls wie in Java: +, -, *, /, %
Auch die Zuweisungsoperatoren sind mir bekannt. So kann x = x + 5 auch als x += 5 dargestellt werden.

Inkrement: x++ (x wird um 1 erhöht; x = x + 1)

Dekrement: x– (x wird um 1 verringert)

y = x++ (x wird um 1 erhöht, nachdem y der Wert x zugeordnet wurde)
y= ++x (x wird erst um 1 erhöht und danach y zugewiesen)

typeof-Operator: genutzt um den Typ einer Variablen festzustellen
var x = 17;
var typ = typeof x;

Vergleichsoperatoren

Um zu testen ob zwei Variablen gleich groß sind, benutzt man ein doppeltes Gleichheitszeichen: ==. Das einzelne Gleichheitszeichen wird ja bereits für die Zuweisungen verwendet. Für die Überprüfung ungleicher Werte nutzt man !=.
Die allgemein bekannten Operatoren <, >, <=, >= können ebenfalls in if-Verzweigungen benutzt werden.

Mit === wird die strikte Gleichheit überprüft; es muss neben dem Wert auch der Datentyp übereinstimmen.

x = 7; //number
y = „7“; //string

if (x == y)
//-> ergibt true, da JavaScript die Zahl 7 in den String 7 umwandelt (Text wird bevorzugt)

if (x === y)
//-> ergibt false, da der Datentyp geprüft wird, und dieser ist hier unterschiedlich

Boolsche Operatoren

Möchte man zwei Bedingungen überprüfen, geht das ganz einfach mit den booleschen Operatoren. Sollen z.B. zwei Bedingungen zutreffen, schreibt man die UND-Verknüpfung so:

if ((Bedingung 1) && (Bedingung 2)) {}

Die ODER-Verknüpfung gibt vor, dass zumindest eine der Bedingungn erfüllt sein muss:

if ((Bedingung 1) || (Bedingung 2)) {}

Eine Boolsche Variable ist entweder true oder false. Mit dem Negationsoperator „!“ kann der Wahrheitswert einer Bedingung umgekehrt werden.

Verzweigungen

Verzweigungen sorgen dafür, dass ein Befehl von einer Bedingung abhängig gemacht wird, und nur dann ausgeführt wird, wenn diese erfüllt ist / oder nicht (je nach Programmierung).

Das Prinzip von Verzweigungen ist schon aus der Java-Vorlesung bekannt (hier zum Kapitel). Allerdings werde ich hier nicht weiter auf die Theorie, sondern auf die Syntax eingehen und Beispiele zu den einzelnen Verzweigungstypen aufführen.

if-Verzweigung in JavaScript

if (tim != tom) {
   if (tim > tom) {
      alert("Tim ist älter");
   } else {
      alert("Tom ist älter");
   }
} else {
   alert("Beide sind gleich alt");
}

switch-case Anweisungen

Die Theorie hierzu ist im alten Java-Skript zu finden (oben verlinkt).

var note = 2;

switch (note) {
   case 1: alert("Hervorragend");
           break;
   case 2: alert("Super");
           break;
   case 3: alert("OK";
           break;
   default: alert("Naja");
}

Schleifen

Auch hier ist die Theorie in der Java-Vorlesung zu finden (hier).

Um einen Ausgabebereich für das Ergebnis der Schleife in JavaScript festzulegen, wird das div-Tag verwendet. Das div-Tag steht im Body, kommt aber vor dem Scriptteil. In der Vorlesung hatten wir das folgende Beispiel:

<body>
<div id=“ausgabe“></div>
<script type =“test/javascript“>
var ausgabe = document.getElementById(„ausgabe“);
// Beispielcode
</script>

Mit dem div-Tag wird ein neuer Abschnitt festgelegt. Das Element wird oft als Container für andere HTML Elemente wie Text, Grafiken, Tabellen usw. benutzt, um sie mit CSS zu stylen oder mit JavaScript bestimmte Tätigkeiten für sie auszuführen.

for-Schleife

for (var i = 0; i < 10; i++) {
ausgabe.innerHTML += i + „<br>“;
}

Dieser Code bewirkt die Ausgabe der Zahlen 1 bis 10. Nach jeder Zahl soll ein Zeilensprung stattfinden (br-Tag). Der br-Tag steht in Anführungszeichen, weil er wie ein String behandelt wird.

while-Schleife

Im Folgenden ist das Zahlen-Beispiel von oben nochmals in der while-Schleife abgebildet:

var i = 0
while (i <= 10) {
ausgabe.innerHTML += i + „<br>“;
i++;
}

do-while-Schleife

do {
Anweisungen;
} while (Bedingung);

Die do-while-Schleife hat min. einen Durchlauf und prüft erst nach dem ersten Durchlaufen, ob die Bedingung noch wahr ist.

continue und break

In allen Schleifen kann ein continue und ein break eingebaut werden, was definiert, ob die Schleife fortgeführt, oder abgebrochen werden soll.

Funktionen

Aus der Vorlesung über Java ist schon bekannt, dass Funktionen definiert, und später ausgeführt werden können.

  • Funktionen werden mit dem Schlüsselwort function definiert.
  • I.d.R. hat eine Funktion einen eigenen Namen, welcher nach dem selben Prinzip wie eine Variable vergeben wird.
  • Nach dem Funktionsnamen folgen Klammern (), welche Parameter enthalten können.
  • Auf die Klammern folgt eine geöffnete geschweifte Klammer mit den Befehlen der Funktion und der zuletzt schließenden Klammer (Befehlsblock).
  • Idealerweise wird eine Funktion im <head>-Teil definiert, wodurch es oftmals zu zwei <script>-Blöcken kommt (im head und body).
  • Das Definieren einer Funktion führt diese noch nicht aus. Die Definition gibt der Funktion lediglich einen Namen und beschreibt was geschehen soll, wenn die Funktion aufgerufen wird!
  • Erst der Aufruf ermöglicht es die Aktionen mit den angegebenen Parametern durchzuführen. Die Funktion kann durch Schreiben des Funtkionsnamen und den darauffolgenden Klammern (im body) aufgerufen werden.
  • Eine Funktion kann sich selbst aufrufen.

Als Beispiel hier eine rekursive Berechnung der Fakultät:

function factorial(n){
   if ((n === 0) || (n === 1))
      return 1;
   else
      return (n * factorial(n - 1));
}

Im Gegensatz zu Java ist es in JavaScript möglich, eine Funktion als Reaktion auf eine Benutzereingabe aufzurufen und auszuführen.

Funktionen können auch sog. Übergabewerte enthalten. Zur Veranschaulichung hier wieder ein Beispiel:

function begruessung (name) {
   var text = "Hallo " + name + "!";
   alert(text);
}

Das Beispiel erhält den Übergabewert in Form eines Namens. „name“ steht zudem in den Klammern hinter dem Funktionsnamen, was im Prinzip die Definition einer Variablen „name“ ist, die innerhalb der Funktion Gültigkeit hat. Wird nun die Funktion „begruessung“ aufgerufen, so wird ihr ein Wert übergeben, der dann in der Variable gespeichert wird.

Der Name, der der Funktion übergeben wird, wird auch als Argument oder Parameter bezeichnet. Es handelt sich dabei um eine feste Anzahl von Argumenten (hier ist es „name“). Es können natürlich auch mehrere Argumente an eine Funktion übergeben werden. Die Trennung der einzelnen Argumente erfolgt durch Kommata.

Zudem kann JavaScript, anders als andere Programmiersprachen, auch mit einer variablen Anzahl an Argumenten umgehen.
Im Kontext von Rückgabewerten, verdeutlicht folgendes Beispiel, dass Funktionen nicht nur Werte entgegennehmen, sondern auch zurückliefern können. Mittel dazu ist das Schlüsselwort „return“.

Definition der Funktion mit der Rückgabe mit dem Schlüsselwort „return“:

function quadrieren (p1,p2) {
return p1 * p2;
}

Funktionsaufruf:

var quadrat = quadrieren (2,4);

Vordefinierte Funktionen:

JavaScript bietet schon bereits vordefinierte Funktionen, welche relativ häufig benutzt werden. alert() ist schon bekannt.

parseInt()
Die parseInt() Funktion liest einen String als Argument ein und gibt eine ganze Zahl der spezifizierten Basis zurück (die Basis ist in der Mathematik das Zahlensystem). Besonders hilfreich ist diese Funktion bei Benutzereingaben, da somit Fehler, beispielsweise durch Vertippen, korregiert werden können. Die Funktion durchläuft den String von links nach rechts und unterbricht dann, wenn es sich bei dem vorliegenden Exemplar nicht um eine Ganzzahl handelt. Beginnt der String also nicht mit einer Ganzzahl, sondern mit einem Buchstaben etc. unterbricht die Funktion die Konervertierung und liefert den Wert NaN (Not a Number). Um diesen Fall zu prüfen, verwendet man die Funktion isNaN().

isNan()
Die isNaN() Funktion überprüft, ob ein Wert NaN ist oder nicht. (Alternativ kann auch der Operator typeof verwendet werden, um einen NaN Wert zu erkennen.) Liefert die Funktion false, so ist eine Konvertierug mittels parseInt() gelungen.

parseFloat()
Die Funktion liest analog zu parseInt() einen String als Argument ein und gibt eine Gleitkommazahl zurück. Sie erkennt Kommazahlen jedoch nur durch Trennung mittels >>.<<.

eval()
Die eval() Methode wertet JavaScript Quelltext in Form von Strings aus.
So führt

x = eval („12+5“)

zum selben Ergebnis wie

x = 12+5 .

Objekte

String-Objekt

Ein String bezeichnet eine Zeichenkette. Da dies schon aus der Javavorlesung bekannt ist, werde ich nicht näher darauf eingehen.

Mit verschiedenen Befehlen wie z.b. charAt(), indexOf(), lastIndexOf(), substring(), split(), length kann man verschiedene Sachen über einen String herausfinden und diesen auch aufteilen.

Formulare

Auf Webseiten muss man häufig in ein Texteingabefeld Daten eintragen. Dabei wird das form-Element verwendet.

Der Zugriff auf ein Formular erfolgt entweder über das forms-Array oder über den Namen bzw. die ID des Form-Objektes.
forms-Array:

document.forms[0] // Zugriff auf das erste Formular
document.forms[1] // Zugriff auf das zweite Formular

Name / ID:

document.meinFormular
document.forms[“meinFormular“]
document.getElementbyId(“meinFormular“)

Analog dazu handhabt es sich mit dem Zugriff auf Formularelement, man verwendet lediglich das Unterobjekt elements.

document.meinFormular.elements[1]

Somit können wir auch auf Eigenschaften des Objektes zugreifen und beispielsweise mittels value den Inhalt eines Textfeldes erfahren:

text = document.meinFormular.eingabe1.value

Mit dem input-Tag in Verbundung mit dem type=“text“ können Eingabefelder erzeugt werden.

Zwar gibt es noch weitere solche Objekte, diese sind für die Vorlesung allerdings nicht relevant.

Schaltflächen

Schaltflächen dienen oft als Auslöser für einen JavaScript-Code.

Das Button-Objekt

<input type="button" value="Button 1">

Mit dem Event-Handles onclick kann man angeben, was passieren soll, wenn der Anwender auf die Schaltfläche klickt.

Das Submit-Objekt
Findet Verwendung, wann immer Formulare nach drücken des (speziellen Button-) Objektes abgeschickt werden sollen.

<input type="submit" value="Abschicken">

Bleibt die Angabe des values leer, so verwendet der Browser einen Standardtext für die Beschriftung des Submit-Buttons. Im Bezug auf das Submit-Objekt ist der Event-Handler onsubmit von Bedeutung.

Auswahlfelder

Via Auswahlfeldern kann zwischen verschiedenen Auswahlmöglichkeiten entschieden werden. Wir haben uns hauptsächlich mit dem Radio-Objekt beschäftigt.

Das Radio-Objekt
Findet genau dann Verwendung, wenn nur ein einziges Element innerhalb einer bestimmten Gruppe ausgewählt werden soll. Die Definition einer Gruppe erfolgt über die selben Namensgebung (Name und ID)!

<form id="meinFormular" name="meinFormular>
   <p>
   <input type="radio" id="auswahl" name="auswahl"
      value="opt1" checked="checked">Optioin 1

   <input type="radio" id="auswahl" name="auswahl"
      value="opt2" checked="checked">Optioin 2

   <input type="radio" id="auswahl" name="auswahl"
      value="opt3" checked="checked">Optioin 3
   </p>
</form>

Man kann sie folglich nur noch über eine Array-Adressierung explizit ansprechen. (Beachte auch wieder, dass man bei 0 mit dem Zählen beginnt)!

document.meinFormular.auswahl[0].checked //checked hat in diesem Fall den Wert true

Möchte man nun rausfinden welches der Radiobuttons aktiviert ist, muss das Radio-Objekt mit einer Schleife überprüft werden, bzw. eine allgemeine Funktion zur Abfrage definieren.

function test(radioGruppe) {
   var gewaehlt = null;
   for (i = 0; i < radioGruppe.lenght; i++)
      if (radioGruppe[i].checked)
         gewaehlt = radioGruppe[i];
}

Neue Objekte in JavaScript

Es gibt drei Möglichkeiten, Objekte in JavaScript zu erstellen:

  • Allgemeiner Konstruktor: object ()
  • Allgemeiner Konstruktor über Literale {}
  • Eiener spezialisierter Konstruktor des Programmierers

Bisher kennen wir schon die Möglichkeit durch erstellen eines neuen Strings den String()-Konstruktor aufzurufen:

var str = new String ("JavaScript");

Nun wollen wir auch noch die Länge dieser erzeugten Zeichenkette erfahren.

Da das String-Objekt die Eigenschaft length kennt können wir wie folgt vorgehen:

var laenge = str.length;

Um bestimmte Zeichenfolgen abzufragen können wir die indexOf() Methode benutzen und nach dem gewünschten Teilstring (Bsp. „Script) suchen:

var pos = str.indexOf("Script");

Um die Erzeugung eines allgemeinen Konstruktors object() zu schaffen, ist folgende Ansicht hilfreich:

Allgemeine Konstruktoren über Literale können folgendermaßen erzeugt werden:

Dadurch ist es möglich, ein neues Objekt zu erstellen und diesem direkt auch Eigenschaften zuzuordnen.

Konstruktoren können auch mit der Hilfe von Funktionen erzeugt werden, ein Beispiel könnte so aussehen:

Da hier auch ein alert-Befehl vorkommt, ist dies ein individuell erzeugter Konstruktor.

Prototyping

Mit Hilfe von Prototyping ist es möglich, bestimmte Eigenschaften an andere Objekte und Klassen zu vererben, sodass man sie einfacher erweitern oder verändern kann. Das Prototyping ersetzt die klassenbasierte Vererbung wie aus Java & C++ bekannt. Hier wird ein Objekt wie bei klassenbasierter Vererbung um neue Eigenschaften und Methoden erweitert. Auch bereits existierende Objekte können mit Prototyping erweitert werden.

Dazu folgende Beispiele:

Somit kann man durch den kleinen Zusatz von „.prototype.“ zwischen dem Objekttyp und der Eigenschaft bzw. Methode die gewünschten Objekte und Klassen erweitern oder auch überschreiben.

jQuery-Framework

Eine JavaScript-Bibliothek ist eine Sammlung von JavaScript-Code, die einfache Lösungen für viele verbreitete JavaScript-Aufgaben bietet. Es ist also eine Sammlung vorgefertigter Code-Lösungen, die nur noch auf die jeweilige Aufgabe angepasst werden müssen. Dazu wird die Bibliothek importiert. Das Benutzen dieser Funktionen spart viel Zeit, weil sie häufig wiederkehrende Aufgaben erleichtern und man bei sich wiederholenden Aufgaben immer auf die Bibliothek verlassen kann. Es gibt ganz viele JavaScript-Bibliotheken. Doch wir haben uns mit einem Framework beschäftigt. Ein Framework beinhaltet best-practise-Erfahrungen und auch getesteten Code und unterscheidet sich von einer Bibliothek, da es ein API anbietet und dazu eine Bibliothek beinhaltet. Was dazu kommt sind eine innere Struktur, Logik, Zusammenhänge. Als Beispiel könnte man innere Datenzusammenhänge aufbauen. Eine dieser Frameworks, welches im Folgenden näher thematisiert ist, ist jQuery.

Vorteile von jQuery:

Vorteile jQuery

Um das Framework benutzen zu können, müssen vorher folgende Schritte befolgt werden:

  1. Es muss heruntergeladen werden:
    Die Datei jquery.js ist eine einzelne JavaScript-Datei, die dann in die Webseite eingebunden wird, die man verwenden möchte.
  2. Auswahl der drei Varianten:
    Uncompressed: größte Datei, nicht zu empfehlen für unsere Webseiten
    Packed: kleinste Datei, muss aber jedes Mal beim Ausführen ausgepackt werden -> langsamer als die unkomprimierte Version aber gleiche Funktionalität
    Minified: etwas größer als packed, muss nicht jedes Mal entpackt werden, wird schnell ausgeführt (in den Vorlesungen haben wir mit dieser Version gearbeitet.
  3. Verwenden der Datei – Verknüpfung mit der Webseite.
    Angenommen, die Datei „jquery.js“ ist in dem Verzeichnis „js“ im Wurzelverzeichnis der Webseite abgelegt, dann wird in den Head das Folgende eingefügt:
<script type=“text/javascript“ src=“js/jquery.js“></script>

Sobald diese Datei eingebunden wurde, kann man die Funktionen der Bibliothek nutzen. Natürlich können auch noch andere <script>-Tags in die Webseite eingebunden werden:

Beispiel Einbindung von verschiedenen script-Tags

Auch bei jQuery gibt es verschiedene Methoden. Diese lassen sich in folgende drei Arten unterteilen:

  • Destruktive Methoden:
    Es werden die Objekte zurückgegeben die erweitert oder reduziert wurden.
  • Transparente Methoden:
    Sind in jQuery sind unverändert.
  • Terminierte Methoden:
    Bei der terminierten Methode wird etwas zurückgegeben was kein jQuery-Objekt mehr ist.

jQuery und CSS-Selektoren

jQuery Selektoren basieren auf denne von CSS in Version 1 bis 3. Sie werden für einen einfachen und schnellen Zugriff auf HTML-Elemente verwendet und für die Erstellung eines jQuery-Objekts gebraucht.

HTML-Tags als Suchkriterium
$(“p“);
Dieser Aufruf liefert alle HTML-Elemente vom typ p. Als HTML-Tag wird dabei jede Zeichenkette verstanden, die nicht mit einem Punkt oder Doppelpunkt anfängt und mit einer öffnenden Klammer endet. Sollen verschiedene Tags auf einmal gefunden werden, können diese als kommaseparierte Liste angegeben werden.

Element-ID als Suchkriterium
$(“#content“);
#content ist der CSS-Selektor, mit dem man einen Tag mit der ID content auswählt.
Das # kennzeichnet die angegebene ID und sucht in allen Elementen nach dieser.
$(“div#content“);
Der Aufruf hingegen, sucht nach einem div-Element mit der ID content.

Klassen als Suchkriterium
$(“a.new“);
Dieser Aufruf liefert alle HTML-Elemente vom Typ <a>, deren Klassenattriut die Zeichenkette new enthält. Klassenbezeichnungen werden auch hier durch einen vorangestellten Punkt gekennzeichnet.
$(“a.extern.grau“);
Der Aufruf findet einen Link mit den Klassen extern und grau. Die Reihenfolge hat dabei keinen Einfluss auf das Ergebnis.

Alle Elemente finden
$(“*“);

Um nun selbstständig Inhalte einer Webseite generieren zu können, gibt es folgende Funktionen:

  • .html() und einen String als Argument übergeben um den aktuellen Inhalt zu ändern.
  • .append() fügt ein Element nach dem letztem Kind ein.
  • .prepend() fügt das HTML direkt als erstes Kind ein.
  • .after() und .before() um außerhalb einer Auswahl HTML einzufügen .
  • .remove() um Elemente zu löschen und .replace() um sie zu überschreiben bzw. zu ersetzen.
  • .attr() kennt verschiedene Parameter und ermöglicht Lesen und Setzen von Parametern.

jQuery-Events

JavaScript ist eine ereignisgesteuerte Programmiersprache.
So kann der JavaScript-Code als Reaktion auf Ereignisse durchgeführt werden. Wir kennen bereits die Codefragmente „onclick()“ und „onload()“, welche beispielsweise auf den Mausklick eines Anwenders oder auf das erfolgreiche Laden einer Webseite reagieren.
Folglich ist alles was auf einer Webseite geschieht ein Event.

Der Umgang der Browser mit Ereignissen, wird durch das Ereignismodell festgelegt. Als Standard gilt heute das W3C Standardmodell.

Grundidee

Zu Beginn muss das Seitenelement, auf das ein Event reagieren soll, festgelegt werden. Diesem wird ein Event zugewiesen und eine Funktion definiert, die bei Auftreten des Events ausgeführt werden soll. Das ist schon bekannt. Als Beispiel ein onclick-Event, welches einem Button zugewiesen ist:

<form>
   <p>
   <input type="button" value="Test" onclick="alert("Hallo")">
   </p>
</form>

Der input-Tag erzeugt eine Schaltfläche.
Mit onclick wird der Event-Handler festgelegt und ein Klicken auf die Schaltfläche löst das Ereignis click aus.

Grundlegender Ablauf bei Eintritt eines Events

Es gibt viele verschiedene Arten von Events. Im Folgenden sind die wichtiges aufgeführt:

Mouse-Events
  • onclick ‒ Mausklick (auf ein Element)
  • ondblclick ‒ Doppelklick
  • onmousedown ‒ Mausschalter wird gedrückt
  • onmousemove ‒ Maus wird bewegt
  • onmouseout ‒ Mauszeiger wird aus einem Element herausbewegt
  • onmouseover ‒ Mauszeiger berührt ein Element
  • onmouseup ‒ (der zunächst gedrückte) Mausschalter wird losgelassen
Formular-Events
  • onblur ‒ ein Element verliert den Fokus
  • onchange ‒ der Inhalt eines Formularelements wird verändert
  • onfocus ‒ ein Element gelangt in den Fokus
  • onreset ‒ Formular wird mit reset in den Ausgangszustand zurückgesetzt
  • onselect ‒ ein Element wird ausgewählt/markiert
  • onsubmit ‒ Formular wird mit submit abgeschickt
Tastatur-Events
  • onkeydown ‒ eine Taste wird gedrückt
  • onkeypress ‒ eine Taste wird gedrückt und festgehalten
  • onkeyup ‒ eine (zunächst gedrückte) Taste wird losgelassen
Dokument und Bild Events
  • onabort (Laden eines Bildes wird abgebrochen)
  • onerror (Fehler beim Laden eines Dokuments oder eines Bildes)
  • onload (Dokument wird geladen)
  • onunload (Dokument wird geschlossen)
Fenster und Frame Events
  • onresize ‒ Fenster oder Frame wird in der Größe verändert

Das hover()-Event
… erwartet zwei Argumente die analog zu den Events mouseover und mouseout funktionieren. Nützlich kann dies beispielsweise bei dem automatischen Aufklappen von Untermenüs sein.

Das toggle()-Event
Analog zum hover()-Event reagiert es auf Klicks.
So löst der erste Klick das erste Argument(Funktion1) auf und der nächste Klick die zweite.

Erstellung von neuen Fenstern

  • Das window-Objekt repräsentiert ein Browserfesnter oder einen Frame.
  • Mittels der open()-Methode, unter Angabe von drei Argumenten.
  • open(URL, name, eigenschaft).
  • Browserfenster bestehen aus vielen vers. Teilen: Scrollbalken, Buttons zur Größenänderung, Symbolleiste.

Fenstereigenschaften

height – Höhe des Fensters in Pixeln.
width – Fensterbreite in Pixeln.
left – Entfernung des Fensters in Pixeln vom linken Rand.
top – Entfernung des Fensters in Pixeln vom oberen Rand des Monitors.
resizable – Angabe ob Besucher die Fenstergröße mit der Maus verändern kann.
toolbar – Angabe ob die Symbolleiste sichtbar ist oder nicht.

Verwendung der Fensterrefernz

Mit der Öffnung eines neuen Fensters, kann man dieses über dessen Referenz steuern und Methoden des Browserfesters auf der Variablen anwenden.
close()-schließt das angegebene Fenster.
blur()-Fenster verliert den Fokus.
focus()-bringt das Fenster in den Vordergrund.
moveBy()-Fenster um eine bestimmt Anzahl von Pixeln versetzen.
resizeTo()-ändert die Maße des Fensters auf eine bestimmt Breite und Höhe.

Asynchrones JavaScript und XML (Ajax)

Das sog. Ajax sorgt dafür, dass man sich von Seiteninteraktionen loslösen und einzelne Informationen je nach Bedarf vom Server holen kann, diese in die bestehende Seite integrieren und ohne Unterbrechung die Seite weiter nutzen kann. So rückt das Laden neuer Informationen in den Hintergrund und die Applikation bleibt weiterhin bedienbar.

Synchroner Ablauf

…es werden ganze HTML-Seiten geschickt.
…auf Anwendereingabe folgt HTML als Antwort.
…lange Wartezeit, in der die Applikation nicht zur Verfügung steht.

Asynchroner Ablauf mit Ajax

…zu Beginn wird auch eine HTML-Seite geladen.
…fordert Client zusätzliche Informationen, so werden diese bei Erhalt in das bereits geladene HTML geladen.

Funktionsweise

Die Anfrage wird (meist) über ein HTTP an ein Skript auf dem Server geschickt, welcher die benötigten Informationen identifiziert. Diese liegen (meist) auf einer Datenbank, wodurch der Server eine Datenbankabfrage durchführt und das Ergebnis in geeigneter Form an den Client zurückschickt.

Sobald die Daten empfangen werden, ruft der Browser das JavaScript (die geschriebene Funktion) mittels der Callback-Funktion zurück.
Diese Vorgehensweise ermöglicht dem Client asynchron Daten vom Server in seine angezeigte Webseite (DOM-Dokument) einzubauen.