Blue Flower

 

1.
Sprung ins kalte Wasser

In diesem Kapitel werden wir ohne weitere Vorbereitungen
Kontakt zu jQuery schaffen und erste Beispiele mit jQuery erstellen. Wir
springen also direkt ins kalte Wasser. Sie sollen bereits in dieser frühen
Phase Ihres Einstiegs in dieses faszinierende Thema ein Gefühl für das
bekommen, was man mit jQuery anstellen kann und was Ihnen dieses Framework
bringt. Dabei wird bewusst in Kauf genommen, dass zu diesem Zeitpunkt bei den
Quelltexten Fragen offen bleiben. Diese Fragen werden aber im Laufe der
folgenden Kapitel geklärt. Die Erläuterungen zu den Listings werden auch in
dieser Phase nur oberflächlich[1] sein, um nicht
vom Stock zum Stöckchen zu kommen. Wir wollen möglichst schnell zur Praxis mit
jQuery kommen und erst einmal spielen. Und das bedeutet Beispiele erstellen.

1.1
Zugriff auf Elemente und Schutz des DOMs

Wenn Sie sich bereits etwas mit der Programmierung im WWW
auskennen wissen Sie, dass man auf die Bestandteile einer Webseite per
JavaScript oder einer anderen Skriptsprache im Browser über ein Objektmodell
mit Namen DOM (Document Object Model) zugreifen kann. Es gibt für so einen Zugriff verschiedene Standardtechniken, die aber alle ihre spezifischen Schwächen haben. Insbesondere müssen Sie beim Zugriff auf ein einziges Element der Webseite
(oder eine Gruppe) in der Regel ziemlich viele Zeichen eingeben. Das ist
mühselig und fehleranfällig. Die meisten Frameworks stellen deshalb eine
Notation zu Verfügung, über die so ein Zugriff mit einer verkürzten,
vereinheitlichte Schreibweise erfolgen kann. Und zudem kompensieren die
dahinter liegenden Mechanismen der Frameworks diverse Schwächen der
Standardzugriffsverfahren, indem Sie vor allen Dingen browserabhängige
Besonderheiten kompensieren sowie diverse fehlende Funktionalitäten des reinen
DOM-Konzepts ergänzen. Besonders wichtig - diese Kompensation ist in der Regel
auf allen offiziell unterstützten Browsern getestet und funktioniert deshalb
sehr zuverlässig.

Das folgende Beispiel zeigt weiterhin eine andere wichtige
Funktionalität von jQuery - den Schutz des DOMs. Was es damit auf sich hat,
wird natürlich noch viel genauer erläutert. Nur soweit vorab - beim Laden
(Parsen) der Webseite verarbeiten verschiedene Browser die Webseite
unterschiedlich und es kann beim Zugriff auf die Elemente der Webseite zu einer
Vielzahl von Problemen kommen. Vor allen Dingen dann, wenn man in einem Skript zu früh
auf Elemente einer Webseite zugreifen will - also bevor der Browser den DOM
korrekt aufgebaut hat. Hier bietet jQuery ein zuverlässiges Verfahren, um
diesem Problemen Herr zu werden. Und was Ihnen das Beispiel quasi nebenbei noch
zeigt ist, wie Sie auf per jQuery standardisiert auf Inhalte von Elementen mit
Text zugreifen und auf Ereignisse reagieren können. Doch genug der Vorbemerkung
- hier ist unser erstes Listing (kap2_1.html):

Listing 1.1       Das erste jQuery-Beispiel

<!DOCTYPE html>

<html
xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8"/>

  <title>Schutz des
DOM</title>

  <link href="/lib/css/kap2_1.css"
rel="stylesheet" type="text/css" />

  <script
src="http://code.jquery.com/jquery-1.10.1.min.js"

   type="text/javascript"></script>

  <script
type="text/javascript">

    $(document).ready(function () {

      $("#a").click(function
() {

        $("#ausgabe").html("Muss
das sein?");

      });

      $("#b").click(function () {

        $("#ausgabe").html("Ein nettes
Spiel.");

      });

      $("#c").click(function () {

        $("#ausgabe").html("Ein
seltsames Spiel. " +

          "Der einzig gewinnbringende Zug ist
" + "nicht zu spielen!");

      });

    });

  </script>

</head>

<body>

  <h1>Willkommen bei WOPR</h1><h3>Wie
wäre es mit einem kleinen Spiel?</h3>

  <button id="a">Tic
Tac Toe</button><button id="b">Schach</button>

  <button id="c">Weltweiter
Thermonuklearer Krieg</button>

  <div id="ausgabe"></div>

</body>

</html>

Erstellen Sie die HTML-Datei einfach in einem eigenen
Arbeitsverzeichnis und speichern Sie sie unter dem genannten Namen.

In der Praxis fasst man alle eigenen Ressourcen eines
Projekts meist innerhalb von einem eigenen Verzeichnis zusammen. Für ein
Webprojekt ist es das Sinnvollste, diese Verzeichnisse im freigegebenen Ordner
Ihres Webservers anzulegen. Im Fall von Apache/XAMPP wäre das in der Regel das
Verzeichnis htdocs. Das hat den Vorteil, dass
Sie – wenn der Webserver läuft - zum Test unmittelbar über HTTP und einen
richtigen Webaufruf gehen können und nicht nur die Datei über das
FILE-Protokoll in den Browser laden müssen (also das klassische Öffnen als
Datei oder das einfache Reinziehen der Datei in den Browser). Letztes ist ja
nicht praxisorientiert, da später die Seiten natürlich auch vom Besucher über
einen Webserver angefordert werden.

Wenn Sie mit einer IDE wie Aptana oder dem Visual Studio
arbeiten, kann man meist direkt aus der IDE eine Webseite über einen
integrierten Webserver ausführen. In Aptana erfolgt das etwa über den Befehl
Run und im Visual Studio können Sie die Ausführung über die Funktionstaste (Strg) + F5
aufrufen.

Im Head der Webseite sehen Sie einen Verweis auf eine
CSS-Datei kap2_1.css, die wir der
Vollständigkeit hier kurz angeben wollen (sie spielt aber im Grunde keine
Rolle):

Listing 1.2       Die referenzierte CSS-Datei

body {

  background:black; color:white;
font-size:20px;

}

#ausgabe {

  background:white; color:red;
font-size:20px; padding:10px; margin:10px;

  border-width:1pt;
border-style:solid; width:350px; min-height:75px;

}

CHV_BOX_ID_01

icn001

Praxistipp

Die
CSS-Datei befindet sich in einem Unterverzeichnis lib
des Projektverzeichnisses, in dem die Webseite gespeichert wurde. Wobei
dieses noch ein weiteres Unterverzeichnis css
enth
ält,
worin dann konkret die Datei gespeichert ist. Wenn wir mit externen
JavaScript-Dateien arbeiten werden, werden diese dann in einem
Unterverzeichnis js von dem
Unterverzeichnis lib des
Projektverzeichnisses gespeichert. Diese Strukturierung hat sich in der
Praxis auf breiter Front durchgesetzt. Das bedeutet, dass sich die jQuery-Bibliothek
auch genau da befinden wird, wenn Sie statt eines CDN eine heruntergeladene
Version verwenden, die Sie dann selbst bereitstellen. Aber selbstverst
ändlich können Sie auch eine ganz
andere Pfadstruktur w
ählen.
Nur sollten Sie grunds
ätzlich
strukturieren und das konsequent durchziehen.

 

Bild 1.1            Die Projektstruktur - hier im Projektmappen-Explorer vom Visual Studio gut zu
sehen

In den Zeilen hinter der Referenz auf die externe
CSS-Datei sehen Sie die Referenz auf eine externe JavaScript-Datei – die
jQuery-Bibilothek, die in dem konkreten Fall von einem CDN geladen wird. In den
folgenden Zeilen steht ein gewöhnlicher JavaScript-Container. In diesem wird
mit $(document)
die Webseite angesprochen. Die Funktion $() steht in jQuery für eine
Kurzschreibweise, um ein Element der Webseite zu referenzieren. Sie ist der
zentrale Dreh-und-Angelpunkt des gesamten Frameworks und Sie finden diese
verkürzten Zugriffsschreibweisen auch in den folgenden Zeilen immer wieder. Nur
wird dort als Parameter eine so genannte ID eines Elements verwendet.

CHV_BOX_ID_02

icn002

Hinweis

Beachten
Sie, dass ein Element (im Sinn von jQuery) als Parameter von
$() nicht in Hochkommata
eingeschlossen wird, eine ID (oder ein anderer Selektor) hingegen schon.

 

Widmen wir uns kurz der Methode ready(). Diese stellt sicher, dass die
enthaltenen Aufrufe erst dann ausgeführt werden, wenn die Webseite vollständig
geladen und der DOM korrekt aufgebaut wurde. Wie schon angedeutet und ohne
richtig in die Tiefe zu gehen – das ist bereits ein Feature, dessen Wert man
hoch einschätzen muss.

CHV_BOX_ID_02

icn002

Hinweis

Für die Leser mit
entsprechenden Vorkenntnissen ein kleiner Vorgriff - die Methode
ready() ist eine Alternative für den Eventhandler onload. Dieser Eventhandler gilt
jedoch als unzuverl
ässig,
weil er fehlerhaft in verschiedenen
älteren
Browser implementiert ist.

 

Im Inneren der ready()-Methode werden drei
Ereignisbehandlungsroutinen notiert, die jeweils die Reaktion bei einem Klick
auf die angegebenen Elemente spezifizieren. In unserem Beispiel sind das drei
Schaltflächen, die jeweils mit einer eindeutigen ID gekennzeichnet sind.

CHV_BOX_ID_02

icn002

Hinweis

Die
Methode
click() kapselt naheliegender
Weise den Funktionsaufruf des Eventhandlers
onclick.

 

Die Zuordnung zur richtigen Funktion erfolgt über die ID
und das Auslösen der Funktion innerhalb der Methode click(). Beachten Sie, dass wir hier
eine so genannte anonyme Funktion (also ohne
Bezeichner) verwenden.

Interessant wird es wenn ein Anwender nun auf eine
Schaltfläche klickt. Dabei wird in einem Bereich der Webseite eine spezifische
Textausgabe angezeigt. Dazu verwenden wir wieder $() und eine ID für die Selektion des
Bereichs (ein div-Block)
und die Methode html() für den Zugriff auf den Inhalt.

CHV_BOX_ID_02

icn002

Hinweis

Die
Methode

html()
ist
in jQuery die Alternative zur Verwendung von
innerHTML. Das Interessante ist
dabei, dass
innerHTML schon in der Praxis seit
vielen Jahren verwendet, aber erst mit HTML5 offiziell standardisiert wird.

 

Bild 1.2            Die Webseite mit den drei Button – der Anwender hat die dritte Schaltfläche
angeklickt

CHV_BOX_ID_02

icn002

Hinweis

Wir
werden in allen folgenden Beispielen darauf verzichten den gesamten Head der
Webseite abzudrucken. Die Notation w
ürde
nur Platz im Buch verschwenden, da sie immer (fast) gleich ist. Nur bei
interessanten
Änderungen
wird der Code abgedruckt.