reading

Inhaltsverzeichnis

Cover

Über den Autor

Einführung

Was Sie benötigen
Wie dieses Buch aufgebaut ist
1. Teil I: Mit JavaScript programmieren
2. Teil II: Seiten mit JavaScript aufwerten
3. Teil III: Zu AJAX aufsteigen
4. Teil IV: Der Top-Ten-Teil
Und dann gibt's noch was im Internet!
Symbole, die in diesem Buch verwendet werden
Wo Sie von hier aus hingehen sollten
Zum Abschluss
Eine Anmerkung zur Übersetzung

Teil I: Mit JavaScript programmieren

Kapitel 1: Das Web auf die nächste Stufe befördern
1. Etwas wirklich Cooles zusammenbauen
2. Erste Schritte
  1. Ein Überblick über zentrale Technologien
  2. Die Auswahl eines Computers
3. Einen Editor auswählen
  1. Vermeiden Sie problematische Werkzeuge
  2. Einen WYSIWYG-Editor verwenden
  3. Die Editoren der Programmierer
  4. Sich mit Editoren vertraut machen
  5. Geany
  6. Aptana
4. Aufbau einer Browser-Sammlung
  1. Einen Standard einrichten
  2. Sich für einen oder zwei Browser entscheiden
5. Firefox zur Entwicklungsmaschine machen
  1. Das Firefox-Add-on »Web Developer«
  2. HTML Validator
  3. Online-Validierung
  4. Firebug und Firefox-Debugger
Kapitel 2: Schreiben Sie Ihr erstes Programm
1. Zum Programmierer werden
  1. Einen JavaScript-Editor auswählen
  2. Einen Browser zum Testen wählen
  3. Einer Seite ein Skript hinzufügen
  4. Den JavaScript-Code einbetten
  5. Kommentare schreiben
  6. Die Methode »alert()« für die Ausgabe verwenden
  7. Das Semikolon hinzufügen
2. Variablen
  1. Eine Variable für die Datenablage erstellen
  2. Vom Benutzer Daten abfragen
  3. Dem Benutzer antworten
3. Mit Variablenwerten Benutzer freundlicher begrüßen
  1. Literale und Variablen im Vergleich
  2. Leerzeichen in verketteten Phrasen verwenden
4. Das String-Objekt
  1. Eine Einführung in objektorientierte Programmierung (und Kühe)
  2. Die Länge eines Strings ermitteln
  3. Text mit String-Methoden ändern
5. Variablentypen
  1. Zahlen addieren
  2. Zahlen aus Benutzereingaben addieren
  3. Das Problem mit dynamischen Daten
  4. Das verflixte Pluszeichen
6. Variablentypen ändern
  1. Werkzeuge zur Umwandlung von Variablen einsetzen
  2. Eingaben korrigieren
Kapitel 3: Programmabläufe über Bedingungen steuern
1. Mit Zufallszahlen arbeiten
  1. Einen Würfel programmieren
  2. Der Würfel ist gefallen
2. Programmabläufe mit »if« steuern
  1. »If« und sonst nichts
  2. Bedingungen verwenden
  3. Vergleichsoperatoren
3. Machen Sie, was ich sage, oder sonst …
4. »else-if« für komplexere Interaktionen verwenden
  1. Das Geheimnis des überflüssigen »else«
5. Es ist Zeit für eine neue Denkweise
  1. Einen Ausdruck erstellen
  2. »Switchen« mit Stil
6. Verschachtelte »if«-Anweisungen
  1. Verschachtelte Bedingungen erstellen
  2. Verschachtelte »if«-Anweisungen sinnvoll einsetzen
Kapitel 4: Schleifen und Fehlersuche
1. Eine Zählschleife mit »for« erstellen
  1. Eine Standardschleife mit »for« anlegen
  2. Eine rückwärts laufende Schleife erstellen
  3. Gleich um fünf weitergehen
2. Eine Zeit lang Schleifen drehen
  1. Eine grundlegende »while«-Schleife erstellen
  2. Vermeiden Sie Schleifenfehler
3. Eine Einführung in bösartige Schleifen
  1. Mit einer zögerlichen Schleife umgehen
  2. Mit einer zwanghaften Schleife umgehen
4. Code debuggen
  1. Hilfe durch Aptana
  2. JavaScript in IE debuggen
  3. Fehler mit Firefox finden
  4. Syntaxfehler aufspüren
5. Debugging mit anderen verbreiteten Browsern
6. Logische Fehler aufspüren
  1. Mit JavaScript-Debuggern und Konsolenmeldungen arbeiten
  2. Die Ausgabe im Konsolen- oder Debugger-Fenster beobachten
7. Interaktive Debugger verwenden
  1. Einen Haltepunkt setzen
Kapitel 5: Funktionen, Arrays und Objekte
1. Aus Code Funktionen machen
  1. Ameisen zum Picknick einladen
  2. Über die Struktur des Liedes (und des Programms) nachdenken
  3. Das Programm »antsFunktion.html« anlegen
2. Daten an Funktionen übergeben und von ihnen übernehmen
  1. Das Hauptprogramm untersuchen
  2. Der Refrain
  3. Vom Umgang mit den Strophen
3. Gültigkeitsbereiche
  1. Eine Einführung in lokale und globale Variablen
  2. Den Gültigkeitsbereich von Variablen untersuchen
4. Ein Basisarray anlegen
  1. Eine Datenliste in einem Array ablegen
  2. Auf Daten im Array zugreifen
  3. Arrays mit »for«-Schleifen verwenden
  4. Besuchen Sie noch einmal die Ameisen
5. Mit zweidimensionalen Arrays arbeiten
  1. Die Arrays einrichten
  2. Eine Stadt erhalten
  3. Die zentrale Funktion »zentral()« erstellen
6. Eigene Objekte erstellen
  1. Ein Basisobjekt anlegen
  2. Einem Objekt Methoden hinzufügen
  3. Ein wiederverwendbares Objekt anlegen
  4. Das schöne neue Objekt verwenden
7. Eine Einführung in JSON
  1. Daten im JSON-Format ablegen
  2. Komplexere JSON-Strukturen anlegen

Teil II: Seiten mit JavaScript aufwerten

Kapitel 6: Mit der Seite kommunizieren
1. Das Document Object Model verstehen
  1. Sich im DOM zurechtfinden
  2. DOM-Eigenschaften mit Firebug ändern
  3. Das Objekt »document« untersuchen
2. Das DOM über JavaScript nutzen
  1. Sich den Blues holen – im JavaScript-Stil
  2. JavaScript-Code schreiben, um Farben zu ändern
3. Schaltflächenereignisse verwalten
  1. Das Spielfeld einrichten
  2. Anführungszeichen in Anführungszeichen unterbringen
  3. Die Funktion »farbeAendern« schreiben
4. Texteingabe und Textausgabe verarbeiten
  1. Eine Einführung in die ereignisgesteuerte Programmierung
  2. Das XHTML-Formular erstellen
  3. »getElementById()« für den Zugriff auf die Seite verwenden
  4. Textfeld verarbeiten
5. Texte in Dokumente hineinschreiben
  1. Den HTML-Rahmen vorbereiten
  2. Den JavaScript-Anteil schreiben
  3. Das innerHTML-Attribut finden
6. Mit weiteren Textelementen arbeiten
  1. Das Formular anlegen
  2. Die Funktion schreiben
  3. Den Quellcode verstehen
Kapitel 7: Gültige Eingaben erzwingen
1. Eingaben über Drop-down-Listen
  1. Das Formular anlegen
  2. Das Listenfeld auslesen
2. Die Mehrfachauswahl
  1. Ein »select«-Objekt für eine Mehrfachauswahl codieren
  2. Den JavaScript-Code schreiben
3. Kontrollkästchen auslesen
  1. Die Seite mit den Kontrollkästchen erstellen
  2. Auf die Kontrollkästchen antworten
4. Mit Optionsfeldern arbeiten
  1. Optionsfelder auswerten
5. Mit regulären Ausdrücken arbeiten
  1. Reguläre Ausdrücke vorstellen
  2. Zeichen in regulären Ausdrücken
  3. Zeilenanfang und Zeilenende markieren
6. Mit besonderen Zeichen arbeiten
  1. Ein Zeichen mit einem Punkt abgleichen
  2. Eine Zeichenklasse verwenden
  3. Nur Ziffern
  4. Satzzeichen markieren
  5. Wörter suchen
7. Wiederholte Operationen
  1. Eines oder mehrere Elemente finden
  2. Null oder mehr Übereinstimmungen
  3. Die Anzahl an Zeichen festlegen
8. Mit dem Musterspeicher arbeiten
  1. Die Erinnerungen zurückholen
  2. Im Arbeitsspeicher abgelegte Muster verwenden
Kapitel 8: Verschieben und bewegen
1. Bewegung ins Spiel bringen
  1. Einen Blick auf den HTML-Code werfen
  2. Ein Überblick über den JavaScript-Teil
  3. Globale Variablen definieren
  4. Initialisierung
  5. Das Sprite bewegen
  6. Die Begrenzungen überprüfen
2. Tastatureingaben auslesen
  1. Die Seite für die Tastatur anlegen
  2. Einen Blick auf »tastatur.js« werfen
  3. Die Funktion »init()« überschreiben
  4. Eine Ereignisbehandlung einrichten
  5. Auf das Drücken von Tasten reagieren
  6. Das Geheimnis der Tastencodes
3. Der Maus folgen
  1. Einen Blick auf den HTML-Code
  2. HTML einrichten
  3. Den Code initialisieren
  4. Den »Lauscher« für die Maus anlegen
4. Automatische Bewegung
5. Animation mit Bildüberlagerung: Trickfilme
  1. Die Bilder vorbereiten
  2. Die Seite anlegen
  3. Die globalen Variablen anlegen
  4. Das Intervall festlegen
  5. Die Animation durch Vorladen verbessern
6. Mit zusammengesetzten Bildern arbeiten
  1. Das Bild vorbereiten
  2. HTML und CSS einrichten
  3. Den JavaScript-Code erstellen
  4. Globale Variablen definieren
  5. Eine init()-Funktion anlegen
  6. Das Sprite animieren
7. Verschieben und überlagern
  1. Den HTML-Rahmen erstellen
  2. Den Code anlegen
  3. Globale Variablen definieren
  4. Die Daten initialisieren
  5. Das Bild animieren
  6. Das Bild aktualisieren
  7. Das Sprite verschieben

Teil III: Der Aufstieg mit AJAX

Kapitel 9: Die Grundlagen von AJAX
1. AJAX: Die Rückkehr nach Troja
2. AJAX ausgeschrieben
  1. A steht für asynchron
  2. J steht für JavaScript
  3. A steht für das englische … and?
  4. Und X steht für …?
3. Grundlegende AJAX-Verbindungen herstellen
  1. Das HTML-Formular anlegen
  2. Ein »XMLHttpRequest«-Objekt erstellen
  3. Eine Verbindung zum Server öffnen
  4. Anfrage und Parameter senden
  5. Den Status überprüfen
4. Alle gleichzeitig in der asynchronen Verbindung
  1. Das Programm einrichten
  2. Die Funktion »getAJAX« erstellen
  3. Die Antwort auslesen
Kapitel 10: JavaScript und AJAX mit jQuery verbinden
1. Eine Einführung in JavaScript-Bibliotheken
2. jQuery kennenlernen
  1. jQuery installieren
  2. jQuery von Google importieren
3. Die erste jQuery-Anwendung schreiben
  1. Die Seite einrichten
  2. Das jQuery-Knotenobjekt
4. Eine Initialisierungsfunktion erstellen
  1. »$(document).ready()« verwenden
  2. Alternativen zu »document.ready« entdecken
5. Das jQuery-Objekt erkunden
  1. Den Stil eines Elements ändern
  2. jQuery-Objekte auswählen
  3. Die Stile modifizieren
6. Objekte um Ereignisse erweitern
  1. Ein »hover«-Ereignis hinzufügen
  2. Klassen auf die Schnelle ändern
7. AJAX-Anfragen mit jQuery erledigen
  1. Eine Textdatei mit AJAX einbinden
8. CMS für Arme mit AJAX
Kapitel 11: jQuery animieren
1. Animationen vorbereiten
  1. Den Grundstein mit HTML und CSS legen
  2. Die Seite mit Startwerten versehen
  3. Mit Rückruffunktionen arbeiten
2. Den Inhalt anzeigen und verbergen
  1. Die Sichtbarkeit aktivieren oder deaktivieren
  2. Ein Element gleiten lassen
  3. Ein Element ein- und ausblenden
3. Die Position von Elementen mit jQuery ändern
  1. Das HTML-Gerüst erstellen
  2. Die Ereignisse einrichten
  3. Verkettungen
  4. Die Funktion »move()« durch Verkettung anlegen
  5. Mit »animate()« eine zeitabhängige Animation anlegen
  6. Nur ein Stückchen verschieben: Relative Bewegung
4. Elemente beiläufig ändern
  1. Die Seitengrundlage erstellen
  2. Den Code mit Startwerten versehen
  3. Text hinzufügen
  4. Kopieren geht über Studieren
  5. Das ist eine Hülle
  6. Alternierende Stile
  7. Die Seite zurücksetzen
  8. Noch mehr Selektoren und Filter
Kapitel 12: Das jQuery User Interface Toolkit
1. Einen Blick auf den ThemeRoller werfen
2. Den Themenpark besuchen
3. Elemente ziehen und ablegen
4. Die Bibliothek jquery-ui herunterladen
5. Die Größe eines Themas ändern
  1. Den HTML-Code und das Standard-CSS untersuchen
  2. Dateien importieren
  3. Ein in seiner Größe änderbares Element erstellen
6. Elementen Themen zuordnen
  1. Ein Symbol hinzufügen
7. Ziehen, ablegen und zurückrufen
  1. Das Seitengerüst erstellen
  2. Die Seite mit Startwerten versehen
  3. Das Ablegen
  4. Ablegen kann Spaß machen
  5. Elemente klonen
Kapitel 13: Die Benutzerfreundlichkeit mit jQuery verbessern
1. Designs mit vielen Elementen
  1. Das Widget »Accordion«
  2. Eine Oberfläche mit Registerkarte anlegen
  3. Registerkarten und AJAX
2. Die Benutzerfreundlichkeit verbessern
  1. Das Datum
  2. Zahlen mit einem Schieberegler auswählen
  3. Auswählbare Elemente
3. Eine sortierbare Liste anlegen
  1. Ein benutzerdefiniertes Dialogfeld anlegen
Kapitel 14: Mit AJAX-Daten arbeiten
1. Ein Überblick über serverseitige Programmierung
  1. Eine Einführung in PHP
2. Ein Formular für eine PHP-Verarbeitung schreiben
  1. Auf die Anfrage antworten
3. Anfragen im AJAX-Stil senden
  1. Die Daten senden
  2. Auf die Ergebnisse reagieren
4. Ein interaktiver Formular erstellen
  1. Ein AJAX-Formular erstellen
  2. Den JavaScript-Code erstellen
  3. Das Ergebnis verarbeiten
  4. PHP für AJAX vereinfachen
5. Mit XML-Daten arbeiten
  1. Eine Bewertung von XML
  2. XML mit jQuery abändern
  3. HTML anlegen
  4. Die Daten übernehmen
  5. Die Ergebnisse verarbeiten
  6. Den Namen des Haustiers ausgeben
6. Mit JSON-Daten arbeiten
  1. JSON verstehen
  2. JSON-Daten mit jQuery auslesen
  3. Das Framework bewältigen
  4. Die JSON-Daten empfangen
  5. Die Ergebnisse verarbeiten

Teil IV: Der Top-Ten-Teil

Kapitel 15: (Nicht ganz) zehn erstaunliche jQuery-Plugins
1. Die Plugins verwenden
2. IPWEditor
  1. Einen einfachen Editor mit editable hinzufügen
  2. Fortgeschrittenere Bearbeitungsmöglichkeiten mit FCKedit
3. jQuery Cookies
4. Flot
5. Tag-Cloud
6. Tablesorter
7. Droppy
8. Galleria
9. Audio und Video
Kapitel 16: (Mehr als) zehn großartige Quellen
1. jQuery PHP Bibliothek
2. JSAN – JavaScript Archive Network
3. W3Schools – Einheiten für ein Selbststudium und Beispiele
4. SelfHTML
5. WikiBooks: JavaScript
6. Google APIs
7. Dojo
8. YUI
9. DZone
10. Dokuwelt.de
11. AJAX-Quellensammlung von DrWeb.de
12. JavaScript-Bibliothekensammlung von DrWeb.de
13. JavaScript-Forum bei jswelt.de
14. GitHub: JavaScript-Einführung
15. Suchmaschinen

Stichwortverzeichnis

Wiley End User License Agreement

Abbildungsverzeichnis

Kapitel 1

Abbildung 1.1: Diese im Internet-Browser angezeigte Seite besitzt einige interessante Funktionen.
Abbildung 1.2: Die Schaltfläche ändert in einem Bereich der Seite den Text.
Abbildung 1.3: Klicken Sie auf die Schaltfläche , damit das Element mit der Textausgabe wieder erscheint.
Abbildung 1.4: Sie können das Erscheinungsbild eines jeden Seitenelements dynamisch ändern.
Abbildung 1.5: Durch die Schaltfläche wird Code aus einer Datei geladen und innerhalb der Seite dargestellt.
Abbildung 1.6: Emacs zeichnet sich nicht durch besondere Schönheit aus, ist aber sehr leistungsfähig.
Abbildung 1.7: Sie werden feststellen, dass Notepad++ eine sehr leistungsfähige Alternative zum Editor von Windows ist.
Abbildung 1.8: Bluefish ist ein guter Editor für HTML und JavaScript.
Abbildung 1.9: Geany zeigt die Datei demo.html an (Linux Mint). Der Dateiname in der Titelleiste verrät eine Menge.
Abbildung 1.10: Aptana zählt zur Oberklasse der kostenlosen Editoren.
Abbildung 1.11: So ähnlich sieht es aus, wenn Sie »Web Developer« als Add-on installiert haben.
Abbildung 1.12: HTML-Validator ergänzt die Quelltextansicht um nützliche Funktionen.
Abbildung 1.13: In den Nu Html Checker können Sie Dateien oder zu prüfenden Code hineinladen.
Abbildung 1.14: Der Firefox-Debugger mit den Entwicklerwerkzeugen in einem eigenen Fenster

Kapitel 2

Abbildung 2.1: Ein JavaScript-Programm hat dieses kleine Dialogfeld auf den Bildschirm gebracht.
Abbildung 2.2: Das Programm fragt nach dem Namen des Benutzers.
Abbildung 2.3: Eine aus zwei Dialogfeldern bestehende Antwort auf eine Benutzereingabe.
Abbildung 2.4: Nun gibt es nur noch ein Dialogfeld, das als Antwort auf eine Benutzereingabe dient.
Abbildung 2.5: Dieses Programm gibt an, wie lang ein String ist.
Abbildung 2.6: String-Methoden können Spaß machen.
Abbildung 2.7: Dieses Programm addiert zwei Zahlen richtig.
Abbildung 2.8: Einen Moment mal, 17 + 4 = 174?
Abbildung 2.9: Das Programm fordert zu Eingaben auf und liefert die richtige Summe.
Abbildung 2.10: Berechnungen mit Fließkommazahlen sind mit Vorsicht zu genießen.

Kapitel 3

Abbildung 3.1: Dieses Programm erzeugt einen Wert zwischen 1 und 6.
Abbildung 3.2: Nichts geschieht, wenn Sie eine 5 würfeln, aber bei einer 2 geschieht etwas Aufregendes.
Abbildung 3.3: Sie erhalten eine Nachricht bei einer 2 und eine Nachricht für alles andere.
Abbildung 3.4: Würfeln – nur für die härtesten Spieler.
Abbildung 3.5: Römische Würfel, die immer dann sehr nützlich sind, wenn wir auf Römer treffen.
Abbildung 3.6: Kopf oder Zahl? Windei oder Vollprofi?

Kapitel 4

Abbildung 4.1: Diese Schleife wird zehnmal wiederholt, bevor sie beendet wird.
Abbildung 4.2: Diese Schleife wird rückwärts durchlaufen.
Abbildung 4.3: Eine -Schleife kann Werte auch überspringen.
Abbildung 4.4: Die Schleife läuft so lange, bis die richtige Antwort gegeben wird.
Abbildung 4.5: Hier werden vermutete Fehler von einem Rechteck umrahmt (wie die rechte geschweifte Klammer) und mit einer Fehlermeldung versehen. Durch Drücken von gelangen Sie auf die Debug-Seite von Aptana.
Abbildung 4.6: Das Dialogfeld erlaubt Ihnen, Fehlermeldungen im Internet Explorer zu erhalten.
Abbildung 4.7: Ich hätte nie geglaubt, dass ich einmal über eine Fehlermeldung glücklich sein könnte.
Abbildung 4.8: Hier hilft Ihnen der Debugger von Mozilla Firefox wirklich weiter.
Abbildung 4.9: Firebug zeigt einen Fehler an.
Abbildung 4.10: Die Web-Konsole zeigt die Meldungen an.
Abbildung 4.11: Die Markierung vor Zeile 11 weist darauf hin, dass dort ein Haltepunkt gesetzt wurde, damit der Debugger eine Pause einlegt.

Kapitel 5

Abbildung 5.1: Wenn ich das Wort »Funktionen« höre, erinnert mich das sofort an ein klassisches Lied am Lagerfeuer.
Abbildung 5.2: Hier ist zwar definiert, nicht aber .
Abbildung 5.3: Siehe da! enthält einen Wert – weil ich in die Funktion schaue.
Abbildung 5.4: Wenn die Funktion endet, hat erneut keine Bedeutung.
Abbildung 5.5: Die hier ausgegebenen Daten stammen aus einem Array.
Abbildung 5.6: Man erhält nun eine Liste mit Spielen. Arrays und Schleifen machen Spaß!
Abbildung 5.7: Das ist Ihre »Geschichte von den zwei Städten«. Und Sie erhalten sogar die Entfernung geliefert!
Abbildung 5.8: Dieses Meldungsfenster verwendet ein Objekt.
Abbildung 5.9: Nun kann das Kind reden und Informationen preisgeben.

Kapitel 6

Abbildung 6.1: Selbst einfache Seiten haben ein komplexes DOM.
Abbildung 6.2: Firebug ermöglicht, das DOM einer Seite zu ändern.
Abbildung 6.3: Diese Seite ist blau (das können Sie mir ruhig glauben). Aber wo ist das CSS?
Abbildung 6.4: Die Seite ist weiß und hat zwei Schaltflächen. Klicken Sie einmal auf .
Abbildung 6.5: Alles wird blau!
Abbildung 6.6: In das obere Textfeld ist ein Name eingegeben.
Abbildung 6.7: Man erhält eine Antwort. Ohne -Feld!
Abbildung 6.8: Hier gibt es kein Textfeld für die Ausgabe von Informationen.
Abbildung 6.9: Die Seite hat sich selbst geändert.
Abbildung 6.10: Zwischen Feldern für Kennwörter, ausgeblendeten Feldern und Textbereichen kennt JavaScript keinen Unterschied.
Abbildung 6.11: Nun können Sie sehen, was in den Feldern steht.
Abbildung 6.12: In der Quelltextanzeige bleibt weiterhin leer, auch wenn die Eingabe im Browser angezeigt wird.
Abbildung 6.13: Firebug zeigt den aktuellen Code auch dann an, wenn er durch JavaScript-Code geändert wurde.

Kapitel 7

Abbildung 7.1: Benutzer wählen aus einer vordefinierten Liste einen gültigen Wert aus.
Abbildung 7.2: Sie können in dieser Liste mehrere Elemente auswählen und übernehmen.
Abbildung 7.3: Hier können Sie den Pizzabelag Ihrer Wahl bestellen – und davon so viel, wie Sie möchten.
Abbildung 7.4: Es kann immer nur ein einziges Element aus der Gruppe der Optionsfelder ausgewählt werden.
Abbildung 7.5: Diese Seite ist eine Katastrophe: kein Name, eine falsche Mailadresse und eine ungültige Telefonnummer.
Abbildung 7.6: Mit diesem Werkzeug können Sie reguläre Ausdrücke testen.

Kapitel 8

Abbildung 8.1: Wenn Sie auf die Schaltflächen klicken, werden der Ball bewegt und seine Koordinaten angezeigt.
Abbildung 8.2: Hier können Sie den Ball mit den Pfeiltasten bewegen.
Abbildung 8.3: liest die Tastatur aus und zeigt die Tastencodes an.
Abbildung 8.4: Nun folgt das Sprite der Mausbewegung.
Abbildung 8.5: Dieses Sprite bewegt sich von selbst. (Ich habe den Pfeil hinzugefügt, um die Bewegungsrichtung anzudeuten.)
Abbildung 8.6: Das Sprite holt zum Schuss aus.
Abbildung 8.7: Zum Anlegen der Animation verwendete Bildfolge.
Abbildung 8.8: Das zusammengesetzte Bild des Helikopters
Abbildung 8.9: Das Bild wird im Bildbereich verschoben, um den Animationseffekt zu bewirken.
Abbildung 8.10: Lauf, Freya, lauf!
Abbildung 8.11: Dies sind die laufenden Bilder von Reiner's Tilesets.

Kapitel 9

Abbildung 9.1: Wenn Sie auf die Schaltfläche klicken, lernen Sie die Magie von AJAX kennen.
Abbildung 9.2: Dieser Text stammt vom Server.
Abbildung 9.3: Darstellung meines lokalen Apache-Webservers namens »dsvideo« beim Starten.

Kapitel 10

Abbildung 1.1: Der Seiteninhalt wird durch jQuery geändert.
Abbildung 1.2: Die Stile werden dynamisch von jQuery-Funktionen zugewiesen.
Abbildung 1.3: Um ein Element der Liste herum wird ein Rand angezeigt, wenn die Maus über dem Element schwebt.
Abbildung 1.4: Klicken Sie auf ein Element der Liste, um seine Umrandung anzeigen oder ausblenden zu lassen.
Abbildung 1.5: Die Textdatei wird über einen AJAX-Aufruf angefordert.
Abbildung 1.6: Diese Seite wird in Wirklichkeit dynamisch mit AJAX und jQuery erstellt.

Kapitel 11

Abbildung 11.1: Am Anfang zeigt die Seite nichts an.
Abbildung 11.2: Das Inhaltselement ist nun sichtbar.
Abbildung 11.3: Wenn Sie auf die Schaltflächen klicken, bewegt sich das Element. (Ich habe den Pfeil hinzugefügt, um Bewegung anzudeuten.)
Abbildung 11.4: Im Grundzustand macht wenig her.
Abbildung 11.5: Über füllt sich der Inhaltsbereich.
Abbildung 11.6: Ich habe den ursprünglichen Inhalt über mehrfach kopiert.
Abbildung 11.7: Nun sind alle kopierten Elemente über die Schaltfläche umrandet worden.
Abbildung 11.8: Alle ungeraden Absätze haben nach Anklicken von einen neuen Stil erhalten.

Kapitel 12

Abbildung 12.1: Mit ThemeRoller können Sie viele der jQuery UI-Elemente betrachten und ausprobieren.
Abbildung 12.2: Nun verwendet ThemeRoller das Thema .
Abbildung 12.3: Der Benutzer kann das Textfeld auf der Seite irgendwohin ziehen.
Abbildung 12.4: Sie können sich jquery-ui individuell zusammenstellen.
Abbildung 12.5: Hier kann das Widget oben links vom Benutzer durch Ziehen an den Rändern in seiner Größe geändert werden. Für das Widget unten wird ein normales verwendet.
Abbildung 12.6: Wenn die Größe des Elements geändert wird, passen sich die übrigen formatierten Teile des Elements dieser Änderung an.
Abbildung 12.7: Diese Seite enthält links eine Gruppe von Elementen, die alle gezogen werden können, und ein Ziel.
Abbildung 12.8: Wenn auf dem Ziel etwas abgelegt wird, ändert es sein Aussehen.

Kapitel 13

Abbildung 13.1: Kapitelüberschriften eines bekannten Buches im Entwurf.
Abbildung 13.2: Das Inhaltsverzeichnis von Kapitel 1 ist minimiert, das von Kapitel 2 wird angezeigt.
Abbildung 13.3: Eine andere Möglichkeit, sich mit dem Inhaltsverzeichnis und seiner Planung zu beschäftigen.
Abbildung 13.4: Das Klicken auf eine Registerkarte ändert den zentralen Inhalt und das Erscheinungsbild der Registerkarte.
Abbildung 13.5: Die Seite nutzt eine Oberfläche mit Registerkarten, um Eingabemöglichkeiten zu zeigen.
Abbildung 13.6: Das Element verwandelt jedes Textfeld in einen Kalender. Wie Sie den Kalender auf Deutsch umschalten, erfahren Sie in der jQuery UI-Dokumentation oder in dem Beispiel-Code zum Buch.
Abbildung 13.7: Einen Schieberegler verwenden, um eine Zahl mit der Maus auszuwählen
Abbildung 13.8: Sie können Elemente mit der Maus auswählen, woraufhin sie anders formatiert werden.
Abbildung 13.9: Benutzer können Elemente der Liste zum Beispiel nach oben ziehen, um die Liste neu zu sortieren.
Abbildung 13.10: Dieses Dialogfeld ist ein jQuery UI-Knoten.

Kapitel 14

Abbildung 14.1: Apache zeigt unter einige wichtige Daten zum lokal unter Ubuntu installierten Webserver an.
Abbildung 14.2: Hier ist PHP lokal installiert und betriebsbereit.
Abbildung 14.3: Diese Webseite liegt auf einem lokalen Server namens und enthält ein Formular in der Datei .
Abbildung 14.4: Das Ergebnis einer serverseitigen Programmierung ist eine vollständig neue Seite.
Abbildung 14.5: Diese Seite übernimmt mit PHP Daten, ohne dass es ein Formular gibt!
Abbildung 14.6: Sobald der Benutzer Daten eingibt, werden sie in die Ausgabe kopiert.
Abbildung 14.7: Die Namen der Haustiere stammen aus einer XML-Datei.
Abbildung 14.8: Dieses Programm erhält seine Daten von einer JSON-Anfrage.

Kapitel 15

Abbildung 15.1: Diese Seite enthält etwas Verborgenes.
Abbildung 15.2: Der Editor wird automatisch angezeigt und lässt den Benutzer die Seite ändern.
Abbildung 15.3: Nun hat die Seite zwei bearbeitbare Bereiche.
Abbildung 15.4: Dieser Editor hat große Ähnlichkeit mit einer Textverarbeitung.
Abbildung 15.5: Dieses Diagramm ist automatisch über ein jQuery-Plugin erstellt worden.
Abbildung 15.6: Die Tag-Cloud enthält die zentralen Punkte dieses Buches.
Abbildung 15.7: Eine einfache Tabelle.
Abbildung 15.8: Das Plugin macht aus einer Liste mit Links ein hübsches Menü.
Abbildung 15.9: Das Plugin macht automatisch aus einer Liste mit Bildern eine Galerie.
Abbildung 15.10: Diese Seite enthält einen attraktiven und funktionierenden MP3-Player

1-4

JavaScript für Dummies

Schummelseite

Code, der in Bearbeitungsfunktionen von JavaScript-Variablen verwendet werden kann

Element	Beschreibung
var meineVar = 0;	Legt eine Variable mit dem angegebenen Startwert an. Ihr Datentyp wird dynamisch bestimmt.
stringVar = prompt("Nachricht")	Sendet einem Benutzer eine Nachricht in Form eines Dialogfeldes; empfängt Texteingaben vom Benutzer, die in stringVar gespeichert werden.
stringVar.length	Gibt die Länge von stringVar (in Zeichen) zurück.
stringVar.toUpperCase(), stringVar.toLowerCase()	Wandeln stringVar in Groß- beziehungsweise Kleinbuchstaben um.
stringVar.substring()	Gibt einen bestimmten Teil eines Strings zurück.
stringVar.indexOf()	Gibt die Position eines Teilstrings in stringVar zurück.
parseInt()	Wandelt string (Zeichenkette) in int (Ganzzahl) um.
parseFloat()	Wandelt string (Zeichenkette) in float (Fließkommazahl) um.
toString()	Wandelt eine beliebige Variable in string um.
eval()	Wertet string als JavaScript-Code aus.
Math.ceil()	Wandelt eine beliebige Zahl durch Aufrunden in eine Ganzzahl um.
Math.floor()	Wandelt eine beliebige Zahl durch Abrunden in eine Ganzzahl um.
Math.round()	Wandelt eine beliebige Zahl durch Rundung in eine Ganzzahl um.
Math.random()	Gibt zufällige Fließkommazahlen zwischen 0 und 1 zurück.

Erstellen von JavaScript-Strukturen und -Objekten

Element	Beschreibung
function fnName(Parameter) {//Code} //Ende Funktion	Erstellt eine Funktion mit dem Namen fnName und übergibt ihr Parameter. Der Code innerhalb der Funktion wird ausgeführt, wenn die Funktion aufgerufen wird.
var meinArray = new Array("a", "b", "c");	Legt ein Array an. Elemente können beliebiger Art (auch gemischt) sein.
var meinJSON = {"Name": "Andy","Titel": "Autor"}	Legt ein JSON-Objekt an. Jedes Element hat ein Name/Wert-Paar und kann beliebige Daten einschließlich eines Arrays (in eckigen Klammern), eines anderen JSON-Objekts oder einer Funktion enthalten.
var person = new Object();person.name = "Andy";	Legt ein Objekt an. Sie können ganz normale Variablen (die dann zu Eigenschaften werden) oder Funktionen (die zu Methoden werden) hinzufügen.

Ändern Ihrer Webseite mit JavaScript-Methoden für das DOM (Document Object Model)

Element	Besonderheit
meinElement = document.getElementById("Name");	Erhält von der Seite ein Element mit der angegebenen ID und kopiert einen Verweis auf dieses Element in die Variable meinElement.
meinElement.innerHTML = "Wert"	Ändert den Wert von meinElement in Wert.
document.onkeydown = tasteLauscher	Wenn eine Taste gedrückt wird, wird eine Funktion mit dem Namen tasteLauscher aufgerufen.
document.onmousemove = mausLauscher	Wenn die Maus über einem Element bewegt wird, wird automatisch eine Funktion namens mausLauscher aufgerufen.
setInterval(Funktion, ms);	Lässt Funktion alle ms Millisekunden laufen.
meinArray = document.getElementsByName("Name")	Gibt ein Array aus Objekten mit dem angegebenen Namen zurück (wird häufig zusammen mit Optionsfeldern verwendet).

Beliebte Methoden auf dem jQuery-Knoten

Methode	Beschreibung
addClass(), removeClass(), toggleClass()	Wendet eine CSS-Klasse auf einen jQuery-Knoten an oder entfernt sie von ihm.
css("Attribut", "Wert")	Wendet eine einzelne CSS-Regel auf den jQuery-Knoten an.
css(JSONObjekt)	Wendet eine JSON-Objektliste mit CSS-Regeln und -Werten auf den jQuery-Knoten an.
html()	Liest oder ändert die HTML-Inhalte des jQuery-Knotens.
Text()	Liest oder ändert die Textinhalte des jQuery-Knotens.
val()	Liest den Wert (Englisch: value) eines Formularelements aus.
bind(Ereignis, Funktion)	Löst Funktion aus, wenn Ereignis eintritt.
show(), hide(), toggle()	Machen Elemente sichtbar oder lassen sie verschwinden.
animate(Parameter, Dauer)	Parameter (können auch mehrere sein) ist ein JSON-Objekt aus CSS-Regeln und -Werten. Werte werden über Dauer (in Millisekunden) gleitend vom aktuellen Wert hin zum Zielwert geändert.

jQuery-Selektoren und -Filter

Selektor/Filter	Sucht nach …
$("Element")	Einem beliebigen HTML-Element.
$("#ElementID")	Jedem Element mit der angegebenen ID.
$(".klassenName")	Jedem Element mit dem angegebenen Klassennamen
:header	Jedem Überschriftenelement (h1, h2, h3 und so weiter).
:animated	Jedem Element, das aktuell animiert ist.
:contains(Text)	Jedem Element, das den angegebenen Text enthält.
:empty	Jedem Element, das leer (Englisch: empty) ist.
:parent	Jedem Element, das andere Elemente enthält.
:attribute=Wert	Einem Element mit einem Attribut mit dem angegebenen Wert.
:input, :text, :radio, :image, :button, etc.	Gleicht einen der angegebenen Elementtypen ab (besonders nützlich bei Formular-Elementen, die Variationen des input-Tags sind).

jQuery-Methoden für das Senden von AJAX-Anfragen

Methode	Beschreibung
get(URL, Parameter)	Sendet eine HTTP GET-Anfrage an die angegebene URL. Bei Parameter (können auch mehrere sein) handelt es sich um ein JSON-Objekt, das Formulardaten (Name/Wert-Paare) kapselt. Das Ergebnis wird als HTML-, XML- oder reine Textdaten zurückgegeben.
post(URL, Parameter)	Wie get(), verwendet aber die Methode post(), die die Parameter ausblendet.
load(URL, Parameter)	Wie get(), aber es wird ein jQuery-Objekt zurückgegeben. Die Inhalte aufrufender jQuery-Objekte werden durch die zurückgegebenen Daten (normalerweise HTML oder XHTML) ersetzt.
getJSON	Wie get(), aber es wird ein JSON-Objekt zurückgegeben, das für eine weitere Verarbeitung geparst werden kann.

5-8

Wiley-logo

WILEY-VCH Verlag GmbH & Co. KGaA

JavaScript für Dummies

Andy Harris

2. Auflage

Übersetzung aus dem Amerikanischen von Gerhard Franken und Jutta Schmidt

Bibliografische Information der Deutschen Nationalbibliothek

Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.

2. Auflage 2017

Original English language edition JavaScript and AJAX For Dummies © 2010 by Wiley Publishing, Inc. All rights reserved including the right of reproduction in whole or in part in any form. This translation published by arrangement with John Wiley and Sons, Inc.

Copyright der englischsprachigen Originalausgabe JavaScript and AJAX for Dummies © 2010 by Wiley Publishing, Inc Alle Rechte vorbehalten inklusive des Rechtes auf Reproduktion im Ganzen oder in Teilen und in jeglicher Form. Diese Übersetzung wird mit Genehmigung von John Wiley and Sons, Inc. publiziert.

Wiley, the Wiley logo, Für Dummies, the Dummies Man logo, and related trademarks and trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries. Used by permission.

Wiley, die Bezeichnung »Für Dummies«, das Dummies-Mann-Logo und darauf bezogene Gestaltungen sind Marken oder eingetragene Marken von John Wiley & Sons, Inc., USA, Deutschland und in anderen Ländern.

Das vorliegende Werk wurde sorgfältig erarbeitet. Dennoch übernehmen Autoren und Verlag für die Richtigkeit von Angaben, Hinweisen und Ratschlägen sowie eventuelle Druckfehler keine Haftung.

Coverfoto Africa Studio- fotolia.com

Korrektur Regine Freudenstein

Satz/ePub Reemers Publishing Services GmbH, Krefeld

Print ISBN: 978-3-527-71444-5

ePub ISBN: 978-3-527-81267-7

mobi ISBN: 978-3-527-81266-0

WILEY END USER LICENSE AGREEMENT