1  jQuery kennenlernen

1.1  Was ist jQuery?

Web 2.0 ist Ihnen sicherlich kein Fremdwort mehr. Statische HTML-Seiten, welche für längere Zeiträume unverändert im Netz blieben und wenn überhaupt nur sehr selten einmal geändert wurden (meistens nur durch die Person, die sie vorher auch programmiert hat), gehören mittlerweile (bis auf wenige Ausnahmen vielleicht) der Vergangenheit an. Heutzutage ist Dynamik das Schlagwort und das gerade auch im Internet. Überall stößt man auf dynamische Internetseiten, die eine Fülle von Interaktionen durch den Benutzer erlauben. Des Weiteren gibt es kaum noch Internetseiten beziehungsweise Internetanwendungen, die ohne ein Content-Management-System (CMS) auskommen, das die Inhalte aus einer Datenbank bezieht. Mit solchen Systemen können dann die Seiteninhalte direkt bearbeitet und aktualisiert werden und das auch von mehreren Benutzern. Denken Sie nur einmal an die unzähligen Foren, die es mittlerweile im Internet gibt!

Viele dieser Funktionalitäten werden in irgendeiner Form mit JavaScript realisiert.

Der Titel des Kapitels lautet aber »Was ist jQuery?«. Nun, um diese Frage beantworten zu können, müssen wir etwas weiter ausholen und zunächst einmal in einem kleinen Crashkurs klären, was es mit CSS auf sich hat, was JavaScript und DOM bedeutet und wie diese Technologien zusammenspielen. Sollten Sie schon mit dieser Thematik vertraut sein, so können Sie die beiden folgenden Abschnitte natürlich überspringen.

CSS

CSS ist die Abkürzung für Cascading Style Sheets , was auf Deutsch so viel heißt wie »hintereinander geschachtelte Stilvorlagen«, und bildet eine sogenannte deklarative Sprache (manchmal auch als Formatsprache bezeichnet), die es uns erlaubt, beliebige Formatvorlagen für HTML-Elemente zu erstellen. Die erste CSS-Version (Level 1) wurde im Jahr 1996 veröffentlicht. Mit HTML sollten wir also jetzt möglichst nur noch den Inhalt und die Strukturierung der Dokumente beschreiben, während wir uns mit CSS dann um die entsprechende Darstellung (Formatierung) kümmern. Auf diese Weise gelingt uns außerdem eine saubere Trennung zwischen Inhalt und Design. Das macht es dann auch leicht möglich, das Erscheinungsbild der gesamten Internetseite sehr schnell durch den Einsatz von Seiten-Templates zu ändern, beziehungsweise an bestimmte Gegebenheiten anzupassen, ohne dabei Einfluss auf den Inhalt zu nehmen.

Tipp: Es gibt auch in HTML einige Tags (wie zum Beispiel das <font>-Tag), die eine gewisse Formatierung erlauben, diese stammen aber noch aus der Zeit bevor es CSS überhaupt gegeben hat und sind auch mittlerweile weitgehend vom World Wide Web Consortium (W3C) für nachfolgende HTML-Spezifikationen als unerwünscht (deprecated) gekennzeichnet. Daher sollten sie in modernen Internet-Anwendungen möglichst keine Verwendung mehr finden und durch entsprechende CSS-Deklarationen ersetzt werden.

CSS-Deklarationen können wir direkt im Header-Bereich des jeweiligen HTML-Dokumentes vornehmen oder in externe Dateien auslagern, was natürlich gerade bei größeren Projekten die Übersichtlichkeit enorm steigern kann.

Generell können wir zwischen drei verschiedenen Notationsmöglichkeiten unterscheiden, um CSS-Angaben zu definieren:

1. Inline:

Die CSS-Angaben werden direkt innerhalb der entsprechenden HTML-Tags in das style-Attribut geschrieben und sind somit auch nur jeweils für genau diese gültig. Ein weiterer großer Nachteil dieser Technik ist, dass man bei mehreren Dokumenten schnell den Überblick verlieren kann und eventuelle Änderungen somit sehr zeitaufwendig werden.

<span style="color: #ff0000;">dieser Text ist rot</span>

2. Intern:

Hier werden die Format-Definitionen im Header-Bereich <head> der aktuellen HTML-Datei notiert. Diese haben dann natürlich auch nur in dieser einen Datei ihre Gültigkeit. Im Gegensatz zu Inline-CSS (wo die CSS-Angaben ja direkt im betreffenden Element notiert werden), müssen wir jetzt eine Verbindung zu den Elementen im Dokument (über das DOM – im nachfolgenden Abschnitt erklärt) herstellen, für die unsere Format-Angaben gültig sein sollen. Diese Verbindung geschieht über Filter mit speziellen Suchmustern, den sogenannten »Selektoren«. Diese Selektoren können wie folgt aufgeteilt werden:

Der Universal-Selektor (* ), der sich auf alle Elemente des HTML-Dokumentes bezieht

(Bsp. alle Elemente der HTML-Seite werden blau gefärbt)

* {
	color: #0000ff;
}

Einfache Element- beziehungsweise Typ-Selektoren , die sich auf alle Elemente des angegebenen Typs (Tag-Name) beziehen.

(Bsp. gilt für alle table Elemente)

table {
	float: none;
	clear: both;
	border-style: none;
	border-spacing:0px;
	padding: 0px;
	margin: 0px;
}
…
<table id="table1">…</table>
<table id="table2">…</table>
<table id="tableN">…</table>
…

Klassen-Selektoren , die sich auf alle Elemente beziehen, bei denen sie im class-Attribut des HTML-Tags übergeben werden.

(Bsp. gilt für alle Elemente mit dem Attribut class="mittig")

.mittig {
	float: none;
	clear: both;
	text-align: center;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
}
…
<div id="block1" class="mittig">…</div>
<div id="block2" class="mittig">…</div>
<div id="block3" class="mittig">…</div>
…

ID-Selektoren , die sich auf genau ein Element mit der entsprechenden id beziehen.

(Bsp. gilt nur für das Element mit der id="ajaxresponse")

#ajaxresponse {
	width: 500px;
	min-width: 500px;
	float: left;
}
…
<div id="ajaxresponse">…</div>
…

Da sich die grundlegenden Selektoren auch noch miteinander kombinieren lassen, können auf diese Weise sehr komplexe Suchmuster entstehen.

(Bsp. alle Elemente mit dem Attribut class="activelink" und zusätzlich noch <a>-Elemente mit hover-Status innerhalb von <li>-Elementen, aber nur diese, innerhalb des Elementes mit der id="ajaxresponse"

.activelink, #ajaxresponse li a:hover {
	color: #FFF !important;
	border-bottom: 1px dotted #c00;
	background-color: #000066;
}

3. Extern:

CSS in externen Dateien sollte (und wird wahrscheinlich auch) die häufigste Art der Verwendung darstellen, da sich so, wie schon angedeutet, die Format-Angaben in mehreren Dokumenten wiederverwenden lassen und darüber hinaus noch eine bessere Ordnung für die Pflege beziehungsweise Erweiterung geschaffen wird.

Der Aufbau der Format-Definitionen ist der gleiche wie bei den internen CSS, nur dass diese jetzt in eine separate .css-Datei ausgelagert werden und nicht mehr im Header-Bereich der aktuellen HTML-Datei stehen. Diese externe .css-Datei wird dann entweder als Link-Element (HTML-Syntax) oder mittels @import-Anweisung (CSS-Syntax) in das entsprechende HTML-Dokument eingebunden.

HTML-Syntax

<head>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>

CSS-Syntax

<head>
	<style type="text/css">
		@import url("styles.css");
	</style>
</head>

Dies sind natürlich nur einige grundlegende Möglichkeiten von CSS, die als kleine Einführung zum Verständnis der Thematik beitragen sollen. Aber auch für dieses Thema finden Sie im Anhang einige »nützliche Links« mit interessanten Informationsquellen im Internet, die auch eine weitergehende Einarbeitung ermöglichen.

JavaScript & DOM

Auch unter den Programmiersprachen gibt es verschiedene Arten, zwischen denen es große Unterschiede bestehen. Zum einen verschiedene Hochsprachen, die den Quellcode in Textform vor dem eigentlichen Gebrauch von einem entsprechenden Compiler (Kompilierer) kompilieren – d. h., er wird in eine ausführbare Datei in Maschinensprache (maschinennaher Binärcode) übersetzt, die dann vom Prozessor des Systems direkt verstanden und ausgeführt werden kann.

Des Weiteren gibt es die sogenannten Scriptsprachen, zu denen, wie der Name bereits vermuten lässt, auch JavaScript gehört. Bei diesen Scriptsprachen wird der Quelltext nicht vorher kompiliert, sondern durch einen Interpreter zur Laufzeit eingelesen, analysiert und ausgeführt (interpretiert). Programme, die einen Interpreter durchlaufen müssen, haben im Vergleich zu vorher kompilierten Programmen eine wesentlich langsamere Ausführungsgeschwindigkeit, da dieser Vorgang natürlich zusätzliche Zeit benötigt. Der große Vorteil besteht aber darin, dass reine Interpreter auf jede Rechnerarchitektur angepasst werden können und somit die zu interpretierenden Programme plattformunabhängig lauffähig sind. Ein kurzes Beispiel für die Verwendung von JavaScript:

<head>
…
<!-- Einbinden einer externen JavaScript Datei -->
<script type="text/javascript" src="../jquery/jquery-1.7.js"></script>
…
<!-- JavaScript Code -->
<script type="text/javascript">
	alert("Ich bin eine JavaScript Nachricht!");
</script>
…
</head>

Mit JavaScript haben wir die Möglichkeit, Internetseiten um Interaktivität zu ergänzen, denn mit HTML allein können wir nichts programmieren (auch in HTML5 steckt letztendlich die Kombination mit JavaScript). Egal ob wir »nur« Element-Werte auslesen oder verändern oder aufwendige Effekte damit realisieren möchten – wir müssen auf die Elemente unseres Dokuments zugreifen können.

Genau diesen Zweck erfüllt das Document Object Model (DOM ). Dieses Modell wurde vom W3C (World Wide Web Consortium – Gremium zur Standardisierung der Techniken, die das World Wide Web betreffen) mit der Absicht definiert, eine einheitliche Schnittstelle für diesen Datenzugriff zu bilden. Dafür bietet das DOM einige vordefinierte JavaScript-Objekte, welche jeweils auch wieder ihre eigenen Eigenschaften und Methoden besitzen und zur Verfügung stellen.

Ein kleines Beispiel mit dem document-Objekt, das den Inhalt des aktuellen Browserfensters repräsentiert, und dessen Methode write(), mit der wir in dieses Dokumentfenster schreiben können:

<script type="text/javascript">
	document.write("<p>ein neuer Textabsatz!</p>");
</script>

Für einige Problemstellungen ist die Verwendung von »purem« JavaScript allerdings nicht so trivial, wie es zunächst den Anschein hat. Zum einen ist es teilweise mit sehr viel Programmieraufwand verbunden, scheinbar simple Aufgaben zu lösen, und zum anderen sollte ja auch sichergestellt sein, dass die Anwendungen in allen gängigen Browser-Modellen lauffähig sind (Cross-Browser-Kompatibilität), da es zwischen diesen leider immer noch teilweise sehr gravierende Unterschiede gibt, die eine Vielzahl spezieller »Workarounds« in unseren Programmen erfordern würden.

Hier kommen die sogenannten JavaScript-Libraries zum Tragen, denn sonst müssten wir diese Funktionalitäten alle selbst, quasi »zu Fuß«, programmieren. Das wiederum würde einiges an Zeit in Anspruch nehmen, und außerdem muss man ja das Rad nicht immer neu erfinden. Darüber hinaus werden häufig genutzte Funktionen zentral verwaltet (bessere Pflege bzw. Erweiterbarkeit), und der benötigte JavaScript-Code wird somit meist erheblich vereinfacht.

Wenn man also »moderne« Internetanwendungen effizient und vor allem auch noch browserübergreifend programmieren möchte, dann ist der Einsatz einer JavaScript-Library unverzichtbar.

jQuery ist eine solche, zudem noch freie, JavaScript-Library (entwickelt von John Resig und erstmals veröffentlicht im Januar 2006), die viele nützliche Funktionen zur Navigation und DOM-Manipulation bereitstellt. Oft wird jQuery auch als JavaScript-Framework bezeichnet – ein Framework (was, bezogen auf den Computer, übersetzt so viel heißt wie »Programmiergerüst«) ist aber meist noch an gewisse vorgegebene Strukturen gebunden, die vom Programmierer entsprechend eingehalten werden müssen. Aus diesem Grund ist die Bezeichnung »Library« (was übersetzt »Bibliothek« bzw. »Sammlung« bedeutet) meiner Meinung nach hier treffender, denn genau das ist jQuery – eine Sammlung von Funktionen, Methoden und Klassen, die Ihnen das Leben in der JavaScript-Welt wesentlich einfacher macht und vor allem die Entwicklungszeit für Ihre Web-Anwendungen erheblich verkürzt. Ein Zitat der Internetseite: »jQuery is designed to change the way that you write JavaScript«. Wie das zu verstehen ist, werden wir im Verlauf der nächsten Kapitel noch verdeutlichen.

Bild 1.1   Bild 1.1: jQuery-Homepage

Schauen wir uns aber schon ein paar kurze Beispiele an, die den Vergleich von jQuery zu »purem« JavaScript zeigen:

Soll nur ein einzelnes Element mit bekannter ID geändert werden, dann ist der Unterschied augenscheinlich noch nicht sehr groß …

Pures JavaScript

<script type="text/javascript">
	function change_color() {
		var element = document.getElementById("infotext");
		element.style.color = '#ff0000';
	}
</script>
…
<input type="button" id="button1" onclick="change_color();" value="Textfarbe ändern ..." />
…

jQuery

<script type="text/javascript">
	$(function() {
		$("#button1").bind('click', function() {
			$("#infotext").css({color: '#ff0000'});
		});
	});
</script>
…
<input type="button" id="button1" value="Textfarbe ändern ..." />
…

<div id="infotext">...</div>

… bei den folgenden Beispielen sieht das jedoch schon etwas anders aus. Jetzt möchten wir einmal alle Elemente einer bestimmten Klasse ändern:

Pures JavaScript

<script type="text/javascript">
	function change_colors() {
		var i,
		elemente = document.getElementsByClassName("mehrfach");
		for (i=0; i<elemente.length; i++) {
			elemente[i].style.color = '#ff0000';
		}
	}
</script>
…
<input type="button" id="button2" onclick="change_colors();" value="Textfarben ändern" />
…

jQuery

<script type="text/javascript">
	$(function() {
		$("#button2").bind('click', function() {
			$(".mehrfach").css({color: '#ff0000'});
		});
	});
</script>
…
<input type="button" id="button2" value="Textfarben ändern ..." />
…

<div id="text1" class="mehrfach">...</div>
<div id="text2" class="mehrfach">...</div>
<div id="text3" class="mehrfach">...</div>

Wie wir sehen, ist das mit jQuery genau so einfach wie im ersten Beispiel, wo nur ein Element geändert wurde.

Betrachten wir uns jetzt noch ein Ajax-Beispiel. Hier wird der Unterschied sehr schnell deutlich, da man sich bei reinem JavaScript zunächst auch wieder selbst um die Unterschiede der verschiedenen Browser kümmern muss, um nur eine Instanz des »XMLHttpRequest-Objektes« erfolgreich erzeugen zu können. Außerdem muss man bei einem asynchronen Request auf Statusänderungen der Anfrage reagieren, indem man das Ereignis »onreadystatechange« auswertet und dann bei Erfolg entsprechende weitere Aktionen durchführt (im einfachsten Fall, wie hier im Beispiel, wird dann schon HTML-Code zurückgeliefert [in »responseText«] und einem Element zugewiesen):

Pures JavaScript:

// Instanz eines Ajax-Objektes (abhängig vom benutzten
// Browser) erzeugen ...

var xmlHttp = null;

// Mozilla, Opera, Safari sowie Internet Explorer 7
if (typeof XMLHttpRequest != 'undefined') {
	xmlHttp = new XMLHttpRequest();
}
// Internet Explorer 6 und älter
if (!xmlHttp) {
	try {
		xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
	} catch(e) {
		try {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch(e) {
			xmlHttp  = null;
		}
	}
}

... und bei Erfolg Request absetzen und auswerten

if (xmlHttp != null) {
	xmlHttp.onreadystatechange = function() {
		if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
			document.getElementById("ajaxresponse").innerHTML
			= xmlHttp.responseText;
		}
	}
	xmlHttp.open('GET', 'getCDList.php', true);
	xmlHttp.send();
}

jQuery:

$("#ajaxresponse").load("getCDList.php");

Tipp: jQuery stellt uns außerdem noch ein paar nützliche Methoden zur Verfügung, die wir vielleicht schon von der Programmierung mit anderen Programmiersprachen kennen, aber in JavaScript bisher leider vergeblich suchen mussten. Zu diesen zählen beispielsweise die Funktionen each, extend, grep, map, merge und trim.

1.2  Was kann jQuery?

»write less, do more« ist das Motto von jQuery – und das mit Recht, denn mit jQuery können Sie sehr elegant, das heißt mit minimalem Code-Aufwand, maximale Ergebnisse erzielen. Egal ob Sie HTML-Elemente finden, verändern, hinzufügen oder löschen möchten – all dies lässt sich in jQuery mit nur einer Funktion bewältigen: jQuery() oder abgekürzt $() (in Kapitel 4 näher erläutert).

Ebenso einfach lassen sich mit jQuery komplexe Animationen erstellen, und auch das Event-Handling und die Ajax-Möglichkeiten sollten nicht außer Acht gelassen werden.

Kurz gesagt: Mit jQuery wird es zum Kinderspiel, Ihrem Webauftritt Interaktion und Professionalität zu verleihen.

1.3  Warum jQuery?

JavaScript-Libraries gibt es einige, wie MooTools, Prototype, Script.aculo.us oder auch Dojo, und ich möchte hier keinen direkten Vergleich mit anderen JavaScript-Libraries vornehmen. Vor allem liegt es mir fern, diese als schlecht bzw. schlechter darzustellen. Für den einen oder anderen wird es immer einige spezielle Gründe bzw. Vorlieben geben, warum er sich für eine bestimmte JavaScript-Library entscheidet. Für mich ist die Wahl jedoch auf jQuery gefallen, da es sehr durchdacht aufgebaut, einfach zu erlernen und dazu auch noch standardkonform ist. Nachfolgend noch einige entscheidende Punkte, die für jQuery sprechen:

Es ist trotz seiner Leistungsfähigkeit sehr kompakt – die gesamte Bibliothek belegt gerade einmal rund 30 Kilobyte.

Jede Funktion von jQuery ist sehr gut dokumentiert (mit Beispielen) [http://api.jquery.com/].

Es ist cross-browser-fähig, das heißt, Sie müssen sich nicht mehr um die leidigen Browser-Unterschiede und -Inkompatibilitäten kümmern, denn diese werden von jQuery behandelt und ausgeglichen.

Es erlaubt eine saubere Trennung zwischen HTML und JavaScript (also zwischen Inhalt und Logik beziehungsweise Funktionalität).

Es hat sich mittlerweile an die Spitze der verwendeten JavaScript-Bibliotheken katapultiert, und aufgrund dieser Beliebtheit existieren auch entsprechend viele Tutorials und Beispiele.

Es bietet die Möglichkeit, relativ einfach eigene Plug-ins zu programmieren und ist somit individuell erweiterbar – es gibt aber auch schon eine Fülle von fertigen Plug-ins, die meist auch kostenlos genutzt werden können.

Es wird ständig weiterentwickelt bzw. gepflegt.

Und natürlich ist noch zu erwähnen, dass jQuery Open Source ist und unter der MIT-Lizenz, oder wahlweise auch unter der GNU-Lizenz, steht – und somit kostenfrei ist ;)

Man könnte die Liste mit Sicherheit noch um einige Punkte erweitern, aber Sie sehen jetzt schon, dass es letztendlich einige gute Gründe dafür gibt, die den Einsatz dieser JavaScript-Library nahelegen und auch lohnenswert machen.

2  Einrichten der Entwicklungsumgebung

2.1  Betriebssystem(e)

Mit jQuery programmieren wir nicht systemabhängig (wie es bei Desktop-Applikationen oft der Fall ist), sondern bewegen uns ausschließlich im Browserkontext. Da Webbrowser unter allen Betriebssystemen die gleiche Funktionalität bieten (zumindest theoretisch ;), sind wir nicht auf ein bestimmtes Betriebssystem begrenzt. Es spielt also zunächst keine große Rolle, ob Sie mit Microsoft Windows, Linux oder Mac OS X arbeiten. Hier kommt dann nur die Auswahl des entsprechenden Editors beziehungsweise der entsprechenden IDE zum Tragen. Ich arbeite auf einem Windows-basierten System, es sollte Ihnen jedoch keine großen Probleme bereiten, die Beispiele auch auf jedem anderen System nachzuvollziehen.

2.2  Die jQuery-Library

Zunächst benötigen Sie natürlich die jQuery-Library selbst. Diese finden Sie auf der offiziellen jQuery-Homepage. Hier kann man auch sehen, dass bereits viele große Unternehmen wie Google, Dell und Mozilla (um nur einige zu nennen) jQuery im Einsatz haben.

Für ein wenig Benutzerinteraktion, sowie das Design der Internetseite, wollen wir das jQuery User Interface (jQuery UI) benutzen, welches wir uns auch gleich mit herunterladen. Hier ist zu beachten, mit welcher Version von jQuery Sie arbeiten, da für die aktuelle Version (1.8.17) des jQuery UI mindestens jQuery 1.3.2 benötigt wird. Für unsere Beispiele habe ich zunächst alle Komponenten des jQuery UI heruntergeladen, im späteren Online-Betrieb sollten Sie jedoch aus Gründen der Performance nur die Komponenten auswählen, die Sie auch benötigen (aber auch hier gilt es, eventuelle Abhängigkeiten zwischen diesen zu überprüfen!). Um die Einrichtung kümmern wir uns dann in Kapitel 3.

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!