jquery in der Praxis

Transkript

1 U1+U :57 Seite 1 Lars Schmidt Aus dem Inhalt: Was ist jquery? Was kann jquery? Know-how ist blau. Lars Schmidt Schmidt WebEntwicklung Die Entwicklungsumgebung einrichten jquery in der Praxis jquery einbinden Erste Erfolge an kleinen Beispielen Die Selektoren Das jquery-objekt mittels jquery-methoden Formulare und jquery Ajax und JSON Ereignisse: Events und Event Handling Animationen und Effekte: Sliding, Fading, Easing Das jquery UI Drag and Drop Einen Warenkorb mit Drag and Drop erstellen 씰 Effekte und Animationen mit jquery Mittlerweile werden HTML-Elemente oft per Sliding auf Webseiten ein- und ausgefahren bzw. per Fading ein- und ausgeblendet. Mit dem Easing bietet jquery darüber hinaus einen Parameter, der besondere Einstellmöglichkeiten für einen spektakulären benutzerdefinierten Animationsverlauf bietet. Die besonderen grafischen Darstellungen in diesem Buch zeigen Ihnen, wie sich die jeweiligen Einstellungen auf den Verlauf der Animation auswirken. 씰 Warenkorb mit Drag and Drop Intuitive Bedienung bedeutet bei einem Warenkorb, dass man die Produkte mit einem Mausklick aufnimmt und über dem virtuellen Warenkorb wieder fallen lässt. Wie dies mit jquery realisiert wird und auch das Sortieren von Produktlisten mit Drag and Drop erfolgen kann, zeigen Ihnen die Beispiele in diesem Buch. 씰 Google Maps einbinden mit zusätzlichen Funktionen Eine eingebundene Karte von Google Maps ist auf vielen Webseiten eine Selbstverständlichkeit. Aber diese Karte mit zusätzlichen Funktionen auszustatten, z. B. einer eigenen Entfernungsmessung für die Verbindung, gehört zu den Besonderheiten, die Ihre Webseite auffällig machen. Hier wird gezeigt, wie Sie solche Funktionalitäten mit Hilfe von jquery erzeugen. Mehrstufige Navigationsmenüs Google Maps mit jquery nutzen Eine Live-Suche als jquery-plug-in realisieren Tipps und Tricks Über den Autor: IT-Profi Lars Schmidt ist seit 1995 als Softwareentwickler in unterschiedlichen Unternehmen tätig. Daneben hat er immer wieder auch eigene Software-Produkte entwickelt, z. B. die Audio-Software Sonoscope für die RealTime-Spektrum-Analyse, und Fachbeiträge in Zeitschriften veröffentlicht. Sein Schwerpunkt liegt seit einigen Jahren auf den Themen der Webentwicklung. Auf jquery in der Praxis Manipulieren von Elementeigenschaften Mit jquery wird die Programmierung von Webanwendungen radikal vereinfacht. Diese JavaScript-Klassenbibliothek erleichtert unter anderem die Manipulation von Webseiten-Elementen, die Entwicklung von Ajax-Applikationen sowie das Erzeugen von Animationen. Lars Schmidt zeigt in diesem Buch anhand von Beispielen aus der Praxis, wie das Zusammenspiel mit dem Document Object Model (DOM) und Cascading Style Sheets (CSS) funktioniert, wie jquery für Ajax-Anwendungen eingesetzt wird und wie Sie Ihre Webseiten mit auffälligen Effekten und Funktionen ausstatten. jquery in der Praxis > Das JavaScript-Framework im täglichen Programmiereinsatz > Animation und Effekte, Ajax und JSON > Navigationsmenüs mit jquery realisieren Der komplette Beispielcode aus dem Buch zum Download. Besuchen Sie unsere Website 30, EUR [D] ISBN Erleichtern Sie sich die Webseitenprogrammierung mit dem erfolgreichsten JavaScript-Framework!

2 Lars Schmidt jquery in der Praxis

3 Lars Schmidt jquery Mit 88 Abbildungen

4 Bibliografische Information der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte Daten sind im Internet über abrufbar. Alle Angaben in diesem Buch wurden vom Autor mit größter Sorgfalt erarbeitet bzw. zusammengestellt und unter Einschaltung wirksamer Kontrollmaßnahmen reproduziert. Trotzdem sind Fehler nicht ganz auszuschließen. Der Verlag und der Autor sehen sich deshalb gezwungen, darauf hinzuweisen, dass sie weder eine Garantie noch die juristische Verantwortung oder irgendeine Haftung für Folgen, die auf fehlerhafte Angaben zurückgehen, übernehmen können. Für die Mitteilung etwaiger Fehler sind Verlag und Autor jederzeit dankbar. Internetadressen oder Versionsnummern stellen den bei Redaktionsschluss verfügbaren Informationsstand dar. Verlag und Autor übernehmen keinerlei Verantwortung oder Haftung für Veränderungen, die sich aus nicht von ihnen zu vertretenden Umständen ergeben. Evtl. beigefügte oder zum Download angebotene Dateien und Informationen dienen ausschließlich der nicht gewerblichen Nutzung. Eine gewerbliche Nutzung ist nur mit Zustimmung des Lizenzinhabers möglich Franzis Verlag GmbH, Haar bei München Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Das Erstellen und Verbreiten von Kopien auf Papier, auf Datenträgern oder im Internet, insbesondere als PDF, ist nur mit ausdrücklicher Genehmigung des Verlags gestattet und wird widrigenfalls strafrechtlich verfolgt. Die meisten Produktbezeichnungen von Hard- und Software sowie Firmennamen und Firmenlogos, die in diesem Werk genannt werden, sind in der Regel gleichzeitig auch eingetragene Warenzeichen und sollten als solche betrachtet werden. Der Verlag folgt bei den Produktbezeichnungen im Wesentlichen den Schreibweisen der Hersteller. Lektorat: Anton Schmid Satz: DTP-Satz A. Kugge, München art & design: Druck: GGP Media GmbH, Pößneck Printed in Germany ISBN

5 5 Inhaltsverzeichnis 1 jquery kennenlernen Was ist jquery? Was kann jquery? Warum jquery? Einrichten der Entwicklungsumgebung Betriebssystem(e) Die jquery-library Editoren und IDEs Browser Webserver Tipps zur Arbeit mit XAMPP Aller Anfang ist»leicht«! der Einstieg mit jquery jquery einbinden Erste Erfolge an kleinen Beispielen Alte Bekannte? Die Selektoren Es geht ans Eingemachte! Die Funktionen von jquery Das jquery-objekt Die Funktion $() Manipulieren von Elementeigenschaften mittels jquery- Selektoren und -Methoden Lesen und Ändern von Attributen Elemente positionieren und formatieren die CSS- Eigenschaften Aufheben einer Selektion Zuweisen von Text- und Elementinhalt Formulare und jquery Ajax und JSON... 95

6 6 Inhaltsverzeichnis 5 Ereignisse Events und Event Handling Browser Events verstehen (HTML-DOM-Events) jquery-events Fades, Slides & Co Animationen und Effekte Anzeigen und Verbergen Anzeigestatus per Animation verändern Sliding Bewegtes Ein- und Ausblenden Fading Verändern der Transparenz Benutzerdefinierte Animationen Der Animationsverlauf easing Setzen Sie Ihr gelerntes Wissen ein jquery in der Praxis Drag and Drop Das jquery User Interface (jquery UI) im Überblick Artikel per Drag and Drop in den Warenkorb legen Sortieren per Drag and Drop Navigationsmenüs Mehrstufige Navigationsmenüs Menüs dynamisch verwalten Google Maps mit jquery nutzen Die»Live-Suche«Ein Plug-in mit jquery realisieren Anhang HTML, X[HT]ML & CSS XPath Tipps & Tricks Browser und dessen Fähigkeiten erkennen jquery ohne Konflikte mit anderen Librarys benutzen Das»Ready«-Ereignis von jquery verzögern jquery-kurzreferenz (Version 1.7.2) Nützliche Links Stichwortverzeichnis

7 43 3 Aller Anfang ist»leicht«! der Einstieg mit jquery 3.1 jquery einbinden Um jquery nutzen zu können, muss die Library in Ihr Projekt eingebunden werden. Das können Sie auf verschiedene Arten tun entweder von Ihrem Server bzw. einem lokalen Ordner auf Ihrer Festplatte (falls eine Internetverbindung zunächst nicht nötig ist), oder Sie benutzen zum Beispiel die bei Google CDN (Content Distribution Network, oder auch Content Delivery Network) gehostete Version. Letzteres kann in einigen Fällen von Vorteil sein, da die Library von vielen Internetseiten genutzt wird und sich meistens schon im Browser-Cache befindet. Außerdem entstehen Ihnen keine zusätzlichen Kosten für übertragene Datenvolumen. Die Einbindung von jquery ist denkbar einfach und funktioniert analog zu anderen JavaScript-Datei, wie die folgenden Quellcode-Ausschnitte zeigen: Einbinden über das Google CDN: <script type="text/javascript" src=" t> Einbinden über eine eigene Quelle: <script type="text/javascript" src="pfad/zu/jquery/jquery-1.7.min.js "></script> jquery steht in zwei Varianten zur Verfügung in einer minimierten Version und in einer»unkomprimierten«version. Minimiert bezieht sich hier keinesfalls auf den Umfang oder die Leistung der Library, sondern einzig und allein auf die Dateigröße so wurde hier auf jegliche Art von Whitespace und Kommentaren verzichtet. Das macht natürlich den Quellcode unleserlicher und schwerer nachvollziehbar. Deshalb ist es während der Entwicklung ratsam, die unkomprimierte Version zu benutzen, damit das Debuggen eventueller JavaScript-Fehler leichter fällt. Für das endgültige Projekt empfehle ich Ihnen die minimierte Version von jquery zu nutzen, da diese wesentlich kleiner und somit auch sehr viel schneller geladen ist (zum Vergleich: bei der momentan aktuellen Version 1.7 sind es 31 Kilobyte zu 229 Kilobyte)

8 44 Kapitel 3: Aller Anfang ist»leicht«! 3.2 Erste Erfolge an kleinen Beispielen Zunächst wollen wir unser HTML-Grundgerüst betrachten. Auch wenn jeder sich nach HTML5 sehnt, so wird es momentan von den Browsern doch noch nicht komplett unterstützt (es gibt einige interessante Erweiterungen, aber dazu mehr in Kapitel 8). Um dennoch möglichst zukunftssicher und kompatibel zu bleiben, werden wir in all unseren Beispielen den XHTML-Standard mit dem Zeichensatz UTF-8 verwenden (aufgrund der besseren Überschaubarkeit schreibe ich jedoch in den weiteren Beispiel-Listings hier im Buch nur das <html>-tag!). Wenn wir von Anfang an mit UTF-8 arbeiten, hat das den großen Vorteil, dass Sie später ohne große Probleme die Möglichkeit haben, Mehrsprachigkeit in Ihre Projekte einzubauen und auch die entsprechende Schriftkultur wie zum Beispiel kyrillische, arabische oder chinesische bzw. japanische Schriftzeichen richtig darstellen können. Dabei müssen natürlich noch einige Punkte mehr beachtet werden, aber dies soll ja hier erst einmal eine Vorbereitung, also ein solides Grundgerüst, sein. So muss bei der Datenbank die Kollation der Tabellen und auch die Kollation der Verbindung auf UTF- 8 eingestellt werden. Ein wichtiger Punkt ist allerdings direkt zu berücksichtigen: Wir müssen darauf achten, dass wir unsere Dateien auch im UTF-8 Format abspeichern, was aber mit den zuvor genannten Editoren kein Problem darstellt. Hier ein Beispiel unserer HTML-Vorlage: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="de" lang="de"> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="../jquery/jquery- 1.7.js"></script> <script type="text/javascript" src="../jquery/js/ jquery-ui custom.min.js"></script> <style type="text/css"> <!-- --> </style> <script type="text/javascript"> //<![CDATA[

9 3.2 Erste Erfolge an kleinen Beispielen 45 //]]> </script> </head> <body> </body> </html> Schauen wir uns die einzelnen Punkte noch einmal genauer an: Zunächst die Dokumenttyp-Deklaration für XHTML <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="de" lang="de"> dann folgen die Kopfdaten mit Titel, Meta-Angaben, Styles, JavaScript usw. <head> <title></title> die folgende Anweisung ist nötig für den IE, damit auch dort der richtige Zeichensatz angezeigt wird. <meta http-equiv="content-type" content="text/html;charset=utf-8" /> jquery und jquery UI einbinden <script type="text/javascript" src="../jquery/jquery- 1.7.js"></script> <script type="text/javascript" src="../jquery/js/ jquery-ui custom.min.js"></script> <style type="text/css"> <!-- hier werden unsere Stile per CSS deklariert --> </style>

10 46 Kapitel 3: Aller Anfang ist»leicht«! <script type="text/javascript"> //<![CDATA[ weiterer JavaScript bzw. jquery Code //]]> </script> </head> jetzt kommen die Körper- bzw. Rumpfdaten, also der eigentliche Inhalt der Seite wie Texte, Bilder, Links, usw. <body> hier steht der anzuzeigende Inhalt </body> zum Schluss muss noch unser <html>-tag von der Dokumenttyp-Deklaration wieder geschlossen werden. </html> Tipp: Der Header-Bereich (<head>..</head>) wird auf der Seite selbst nicht angezeigt, er kann (optional) Definitionen und Anweisungen für Web-Server, Web-Browser oder auch Suchmaschinen enthalten, die über die sogenannten Meta-Angaben gemacht werden. Diese können auch Angaben zum Autor und zum Inhalt der Datei enthalten oder HTTP-Befehle absetzen und so zum Beispiel den Web-Browser automatisch zu einer anderen Adresse weiterleiten. Des Weiteren können auch Anweisungen über das Erscheinungsbild in Form von CSS-Angaben, sowie JavaScript-Definitionen im Header-Bereich stehen. Nun gilt es noch zu klären, wo eigentlich der»entry Point«(Eingangspunkt) von jquery ist. Sicherlich ist Ihnen von der Arbeit mit»normalem«javascript Folgendes bekannt: window.onload = function() { alert("das Dokument ist nun vollständig geladen."); } Hier wird window.onload aber erst aufgerufen, wenn ausnahmslos alle Elemente des Dokuments geladen sind also auch alle Bilder, Styles und so weiter, was unter Umständen schon mal ein wenig länger dauern kann. Hier bietet jquery eine Methode, die bereits nach dem Laden des DOM zur Verfügung steht. Das heißt, sobald also das HTML-Dokument geladen und der DOM-Baum fertig aufgebaut ist, sind alle Elemente der Seite ansprechbar beziehungsweise der Quellcode ist ausführbar, auch wenn noch nicht alle Objekte, wie eben die Bilder, geladen sind.

11 3.2 Erste Erfolge an kleinen Beispielen 47 $(document).ready( function() { alert("der DOM-Baum ist nun fertig aufgebaut und alle Elemente können selektiert werden."); } ); Die Funktion $(document).ready() macht es uns auch möglich, die gesamte JavaScript- Programmierung in den Header-Bereich zu verlagern und ausschließlich den Seitenaufbau mit dem eigentlichen Inhalt (HTML) im Body-Bereich zu notieren. Auf diese Weise erhält man eine gewisse Ordnung und auch Übersichtlichkeit, und man hat vor allem Logik und Inhalt klar getrennt. Machen wir uns die kurz klar, indem wir versuchen, das folgende Beispiel mit»normalem«javascript-code auszuführen: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript"> alert(document.getelementbyid("content").innerhtml); </script> </head> <body> <div id="content">hier steht unser Inhalt!</div> </body> </html> Vorhin hatte ich erwähnt, dass es wünschenswert ist, auch die gesamte Logik im Header- Bereich vorzufinden. Aus den oben genannten Gründen funktioniert dies aber in der Praxis leider nicht immer so mit dem»normalen«javascript-part, da HTML-Elemente, auf die man eventuell zugreifen möchte, an dieser Stelle (im Header) noch nicht im Browser-Speicher verfügbar gemacht wurden, d. h., sie existieren zu diesem Zeitpunkt noch nicht für JavaScript. Tipp: Die.ready()-Funktion wird ausgeführt, sobald das DOM fertig aufgebaut ist, unabhängig davon, ob alle Objekte zu diesem Zeitpunkt schon geladen sind. Sie ist allerdings nicht kompatibel mit dem <body onload="">-attribut. Wenn dieses aus irgendeinem Grund genutzt werden muss, sollte.ready() nicht zusätzlich genutzt werden. Hier kann allerdings die.load()-methode zum Einsatz kommen, um Load Event Handler an das window-objekt oder andere Elemente zu binden.

12 48 Kapitel 3: Aller Anfang ist»leicht«! Alte Bekannte? Die Selektoren Und damit sind wir auch schon bei den»selektoren«. Diese spielen beim Programmieren mit jquery eine wichtige Rolle und stellen gleichzeitig auch eine der größten Stärken der Library dar. Wenn Sie Selektoren vielleicht schon von der Arbeit mit CSS kennen, werden Sie sofort mit den jquery-selektoren vertraut sein und auch schnell Ihre Freude daran haben. Die Syntax der jquery-selektoren basiert nämlich zum großen Teil auf den CSS-Selektoren (CSS 1-3) und gerade bei der CSS-3-Kompatibilität hat jquery zum Teil noch einen großen Vorsprung vor mancher Browser-Implementierung. Um ein Element beziehungsweise eine Gruppe von Elementen zu selektieren, benutzen wir folgende Syntax: jquery(selektor) oder kurz $(Selektor) Als Nächstes möchten wir mit unserem selektierten Element noch etwas machen. Dazu hängen wir noch eine entsprechende Funktion an (konkret wird dann das gefundene Element an die folgende Funktion übergeben): jquery(selektor).funktion() oder $(Selektor).Funktion() Tipp das Grundprinzip von jquery ist also denkbar einfach: finde HTML-Elemente im DOM-Baum mach etwas damit Fangen wir mit einem kleinen Beispiel an, indem wir einfach einmal die Formatierung eines Elements mit einer bestimmten ID ändern wollen: jquery("#meineid").css({color: 'Farbwert'}) <html> <head> <style type="text/css"> <!-- Body { text-align: center; } #infotext { width: 200px;

13 3.2 Erste Erfolge an kleinen Beispielen 49 text-align: center; margin: auto auto; } --> </style> <script type="text/javascript"> //<![CDATA[ $(function() { $("#button1").bind('click', function() { $("#infotext").css({color: '#ff0000'}); }); }); //]]> </script> </head> <body> <div id="infotext"> Lorem ipsum dolor sit amet consectetuer sed quis </div> <p><input type="button" id="button1" value="textfarbe ändern..."></p> </body> </html> Bild 3.1: Standard-Formatierung (mit schwarzer Schrift)

14 50 Kapitel 3: Aller Anfang ist»leicht«! Bild 3.2: Formatierung nach Änderung (Die Schrift ist nur rot) In diesem Beispiel haben wir auch gleich einen jquery-event-handler kennengelernt (mehr dazu in Kapitel 5): $("#button1").bind('click', function() { }); Hier»binden«wir ein Ereignis, in unserem Fall das Maus-»click«-Ereignis, an ein Element: Hier ist es unser Button (button1). Was bei dem»click«passieren soll, ist wiederum in einer eigenen Funktion gekapselt, und diese ändert in unserem Beispiel die Farbe des Elements mit der ID»infotext«über eine CSS-Zuweisung: $("#infotext").css({color: '#ff0000'}); Mit einem weiteren Beispiel möchten wir alle Links innerhalb von div-elementen selektieren. Unser Selektor dafür würde dann folgendermaßen aussehen: jquery("div a") <html> <head> <style type="text/css"> <!-- body { text-align: center; }.linksindiv { color: #FF0000; background-color: #FFF;

15 3.2 Erste Erfolge an kleinen Beispielen 51 display: block; border-bottom: 1px dotted #FF0000; text-decoration: none; width: 300px; text-align: center; margin: 10px auto 10px auto; } --> </style> <script type="text/javascript"> //<![CDATA[ $(function() { $("div a").addclass("linksindiv"); }); //]]> </script> </head> <body> <div> <a href="#">dieser Link befindet sich in einem DIV-Element</a> </div> <div> <a href="#">dieser Link ebenfalls</a> </div> <p><a href="#">dieser Link nicht mehr</a></p> </body> </html> Bild 3.3: Spezielle Formatierung für Links innerhalb von div-elementen

16 52 Kapitel 3: Aller Anfang ist»leicht«! Darüber hinaus bietet jquery auch noch einige Pseudo-Selektoren beziehungsweise Filter. Mit diesen lassen sich beispielsweise nur eine bestimmte Gruppe von Elementen auswählen oder auch sehr schnell alle geraden bzw. ungeraden Zeilen einer Tabelle selektieren und einfärben, wie die folgenden kleinen Codeausschnitte zeigen: $(":input") Alle Input-Elemente werden selektiert <html> <head> <title>input-elemente</title> <script type="text/javascript"> //<![CDATA[ $(function() { $("#toggleactive").bind("change", function() { if ($('#toggleactive').is(':checked')) { $("#myinputs :input").attr("disabled", true); } else { $("#myinputs :input").removeattr('disabled'); } }); }); //]]> </script> </head> <body> <div id="myinputs"> <p>name:<br><input name="name" type="text" size="30" maxlength="30" /></p> <p>vorname:<br><input name="vorname" type="text" size="30" maxlength="30" /></p> <p>straße:<br><input name="str" type="text" size="30" maxlength="30" /></p> <p>plz:<br><input name="plz" type="text" size="30" maxlength="30" /></p> <p>ort:<br><input name="ort" type="text" size="30" maxlength="30" /></p> </div> <p>alle Eingabefelder deaktivieren: <input type="checkbox" id="toggleactive" name="toggleactive" /></p> </body> </html>

17 3.2 Erste Erfolge an kleinen Beispielen 53 Bild 3.4: Eingabefelder sind aktiv Bild 3.5: Eingabefelder sind deaktiviert Hier binden wir das»change«-ereignis an eine Checkbox mit der ID»toggleActive«. Wenn diese das Attribut checked aufweist (also gesetzt ist), dann bekommen alle Input- Elemente innerhalb des Blocks myinputs das Attribut disabled mit dem Wert true (deaktiviert). Andernfalls wird bei den entsprechenden Input-Elementen das Attribut disabled entfernt, und diese sind somit wieder aktiv. $("#toggleactive").bind("change", function() { if ($('#toggleactive').is(':checked')) { $("#myinputs :input").attr("disabled", true); } else {

18 54 Kapitel 3: Aller Anfang ist»leicht«! }); } $("#myinputs :input").removeattr('disabled'); Alle geraden Zeilen einer Tabelle werden gefärbt $("tr:even").css("background-color", "Farbwert"); <html> <head> <style type="text/css"> <!-- body { text-align: center; } --> </style> <script type="text/javascript"> //<![CDATA[ $(function() { $("#tabelle_1 tbody tr:even").css("backgroundcolor", "gray"); }); //]]> </script> </head> <body> <table id="tabelle_1" rules="groups" border="0" span="0" style="border-spacing:0px; margin:0; padding:0"> <colgroup> <col width="200"> <col width="200"> <col width="50"> </colgroup> <thead> <tr> <th>titel</th> <th>interpret</th> <th>jahr</th> </tr> </thead> <tbody> <tr> <td>the Wall</td> <td>pink Floyd</td> <td>1979</td> </tr> <tr> <td>some Great Reward</td> <td>depeche Mode</td> <td>1984</td> </tr> <tr> <td>the Anvil</td> <td>visage</td>

19 3.2 Erste Erfolge an kleinen Beispielen 55 <td>1982</td> </tr> <tr> <td>blue Planet</td> <td>moskwa TV</td> <td>1987</td> </tr> <tr> <td>a Secret Wish</td> <td>propaganda</td> <td>1985</td> </tr> </tbody> </table> </body> </html> Bild 3.6: Formatierte Tabelle Hier selektieren wir alle geraden Tabellenzeilen (tr:even der Index beginnt bei 0!) innerhalb des tbody von der Tabelle mit der ID»tabelle_1«und ändern die Hintergrundfarbe mittels CSS-Zuweisung in Grau. $("#tabelle_1 tbody tr:even").css("backgroundcolor", "gray");

20 237 8 Anhang 8.1 HTML, X[HT]ML & CSS HTML (Hypertext Markup Language = Hypertext-Auszeichnungssprache) ist eine auf SGML (Standard Generalized Markup Language) basierende Auszeichnungssprache, die es möglich macht, Dokumente in einer bestimmten Struktur in Bezug auf Inhalt und Formatierung darzustellen. Diese Strukturierung wird durch sogenannte Tags (Markierungen, Kennzeichnungen) erreicht, die in der Regel den zu strukturierenden Inhalt umhüllen (d. h. es gibt ein Start- und ein dazugehöriges End-Tag). Darüber hinaus gibt es auch noch einige spezielle Tags, mit denen erweiterte Zusammenhänge des Dokuments beschrieben werden können (siehe Kapitel 3.2). Die Tags selbst werden von spitzen Klammern umgeben, wobei die End-Tags zusätzlich noch einen Slash (/) vorangestellt bekommen. Nachfolgend einige kurze Beispiele: <h1>eine Überschrift 1. Ordnung</h1> (h heading=überschrift) <h2>eine Überschrift 2. Ordnung</h2> <p>ein Absatz</p> (p paragraph=absatz) <a href=" ">ein Link</a> (a anchor=anker) XML (Extensible Markup Language = erweiterbare Auszeichnungssprache) ist eine Auszeichnungssprache, die Text-Daten in hierarchisch strukturierter Form darstellen kann. XML wird unter anderem auch für den plattformunabhängigen Datenaustausch genutzt. Bei XML-Dokumenten gelten (anders als bei HTML) verschärfte Regeln, die eingehalten werden müssen. So muss ein XML-Dokument stets»wohlgeformt«(wellformed) sein, d. h., es muss zum Beispiel zu jedem Start-Tag auch ein abschließendes End-Tag existieren. Zudem muss am Anfang die Deklaration stehen, die den Bezug zu XML herstellt. Es muss genau ein Wurzelelement existieren (das ist das äußerste Element, das alle weiteren Datenelemente enthält in unserem Beispiel <ADRESSDATENBANK>) und mindestens ein Datenelement (im Beispiel haben wir zwei <ADRESSE>). Ein XML-Kommentar wird genau so geschrieben wie in HTML (genauer gesagt wie in SGML, da HTML ja darauf basiert). Ein Beispiel in Form einer kleinen Adressdatenbank soll dies verdeutlichen: <!-- XML-Deklaration --> <?xml version="1.0"?> <!-- Wurzelelement --> <ADRESSDATENBANK> <!-- 1. Datenelement --> <ADRESSE>

21 238 Kapitel 8: Anhang <VORNAME>Hans</VORNAME> <NACHNAME>Mustermann</NACHNAME> <STRASSE>Musterstraße 1</STRASSE> <PLZ>12345</PLZ> <ORT>Musterstadt</ORT> </ADRESSE> <!-- 2. Datenelement --> <ADRESSE> <VORNAME>Josef</VORNAME> <NACHNAME>Müller</NACHNAME> <STRASSE>Müllerweg 1</STRASSE> <PLZ>54321</PLZ> <ORT>Müllerstadt</ORT> </ADRESSE> </ADRESSDATENBANK> Bei XHTML (Extensible HyperText Markup Language = erweiterbare HTML) handelt es sich um eine auf XML-basierende Neuformulierung von HTML 4.01 (im Gegensatz zu HTML, was ja durch SGML definiert ist). Das heißt, alle Elemente von HTML 4.01 sind auch hier enthalten, aber die Syntax von XHTML orientiert sich eher an der Syntax von XML und natürlich auch deren Regeln im Bezug auf»wohlgeformtheit«und so weiter. Seit einiger Zeit kommt immer wieder die Diskusion auf, welches der bessere Standard für Internetseiten ist: HTML oder XHTML. Ich kann mich noch an Zeiten erinnern, als es hieß, dass HTML 4.01 wohl die letzte (reine) HTML-Version sei und in Zukunft wohl XHTML (also HTML mit XML) der Standard wird. Dies ist aber dann doch nicht so gekommen. Mit XHTML 2.0 gab es wohl nicht den gewünschten Durchbruch, und HTML5 ist ja auch schon da. HTML5 ist eine Weiterentwicklung von HTML 4.01, XHTML 1.0 und DOM Level 2 HTML, in der man jeweils die Vorzüge dieser Technologien zusammengeführt hat. Es gibt auch einige vielversprechende Neuerungen, wie zum Beispiel das Canvas-Element eine Zeichenfläche, die das dynamische Rendern von Bitmap-Grafiken erlaubt. Ebenfalls erwähnenswert ist die einfache Einbindung von SVG (Scalable Vector Graphics) und MathML (Mathematical Markup Language). Auch in Sachen Multimedia gibt es Vereinfachungen, denn hier erlauben die neuen Elemente Audio und Video eine leichte Einbindung dieser Daten. Ebenso gibt es im Bezug auf die Notation einige neue Freiheiten, die aber eher als fragwürdig einzustufen sind (und zum Glück keine zwingende Vorschrift). So kann auf die Einhaltung von wohlgeformten Tags weitgehend verzichtet werden, und auch die umschließenden Anführungszeichen bei Attributwerten darf man weglassen. Meiner Meinung nach ist das ein Schritt in die falsche Richtung und regt eher ein wenig zum»pfusch«an. Aber, na ja spätestens wenn man Inhalte parsen muss, um diese beispielsweise in ein anderes Format zu konvertieren, wird einem wohl schnell bewusst, dass wohlgeformte Dokumente letztendlich einen Vorteil darstellen.

22 8.2 XPath XPath Bei XPath (XML Path Language) handelt es sich um eine Abfragesprache, die dazu dient, die Knoten (oder auch Knotenmengen) eines XML-Dokuments über sogenannte Lokalisierungspfade zu adressieren. Das kann über die ausführliche oder verkürzte Notation erfolgen. Außerdem sind die Knoten eines XML-Dokuments sowohl mit relativen als auch mit absoluten Pfaden adressierbar. 8.3 Tipps & Tricks Browser und dessen Fähigkeiten erkennen jquery kümmert sich bei den meisten Angelegenheiten selbst um die Browser-Unterschiede und gleicht diese aus (Cross-Browser-Fähigkeit). Sollte es aus irgendwelchen Gründen aber doch einmal notwendig sein, den verwendeten Browser explizit zu erkennen, gibt es dafür viele verschiedene Möglichkeiten, von denen ich Ihnen hier einige vorstellen möchte. Am Ende des Kapitels 1.1 haben wir in unserem Ajax-Beispiel (Pures JavaScript) bereits eine dieser Möglichkeiten kennengelernt, nämlich den benutzten Browser anhand der unterschiedlichen Implementierung des XMLHttpRequest-Objektes zu erkennen und entsprechend darauf zu reagieren. 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; } } } if (xmlhttp!= null) {... }

23 240 Kapitel 8: Anhang Eine weitere Möglichkeit ist die Abfrage des JavaScript-Objektes»Navigator«, das unter anderem folgende Informationen über den Browser liefert: appcodename Code-Name des Browsers (z. B. Mozilla; Vorsicht, der IE liefert hier auch Mozilla!) appname Name des Browsers (z. B. Netscape) appversion Version des Browsers (z. B. 5.0 (Windows) ) cookieenabled sind Cookies erlaubt? (true oder false) language Standard-Sprache des Browsers (z. B. de-de) platform das System, auf dem der Browser läuft (z. B. Win32) useragent HTTP-Identifikation des Browsers (z. B. Mozilla/5.0 (Windows NT 5.1; rv:12.0) Ge cko/ Firefox/12.0) javaenabled() ist Java verfügbar? (true oder false) Beispiel: alert(navigator.appcodename); Bild 8.1: Informationen des JavaScript-Objektes»Navigator«(Mozilla Firefox) Speziell für den Internet-Explorer (ab der Version 5.0) bietet Microsoft mit den»conditional Comments«(Bedingte Kommentare) die Möglichkeit, Browser-Typ und Version abzufragen. Von allen anderen Browsern werden diese einfach ignoriert: <!--[if IE 5]> <p>- Internet-Explorer 5</p> <![endif]--> <!--[if IE 5.5]> <p>- Internet-Explorer 5.5</p> <![endif]-->