Inhaltsverzeichnis der Beispielprogramme

 
Kapitel:
1 1.1  1.2
1.3  1.4
1.5  1.6
2 2.1  2.2
2.3  2.4
2.5
3. 3.1  3.2
3.3  3.4
3.5  3.6
4. 4.1  4.2
4.3  4.4
4.5  4.6
5. 5.1  5.2
5.3  5.4
5.5  5.6
5.7
6. 6.1  6.2
6.3  6.4
6.5  6.6
6.7  6.8
7. 7.1  7.2
7.3  7.4
7.5  7.6
7.7
8 8.1  8.2
8.3  8.4
8.5  8.6
9. 9.1  9.2
9.3  9.4
9.5  9.6
10. 10.1  10.2
10.3  10.4
11. 11.1  11.2
11.3  11.4
11.5  11.6
 
 

1. Das erste Script - begrüßen Sie die Besucher Ihrer Seite

1.1. Ausgabe eines kleinen Begrüßungstextes

Hier platzieren Sie die Scriptbereiche

Notizen - kommentieren Sie ihren Programmtext

Messageboxen, alert

Programmabläufe und Anweisungen

Anweisungen

1.2. Arbeiten mit Texten

document.write
Unterschiede von document.write und document.writeln
Zeichenkettenbegrenzer
Maskierung
Maskierung umgehen
Prompt, Informationen erfragen

1.3. Bedingte Anweisungen und Operatoren einsetzen

bedingte Anweisungen
Anweisungsblöcke
Zeichenkettenverknüpfung
UND-Operator
ODER-Operator
Nicht-Operator
Komplexe Ausdrücke

1.4 Variablen verwenden

Casesensitivität
Variablen Werte zuweisen

1.5. Kontrollstrukturen verstehen und umsetzen

if-else-Anweisung
verschachtelte Anweisungen
Switch

1.6. Training und Referenz

Lösungen

Passwortabfrage
nach oben

2. Rund um die Browser - wer kann was und meldet sich wie?

2.1 Der Browser ganz offiziell - das Navigatorobjekt

Navigatorobjekt

2.2. Wichtige Browserdaten extrahieren - mit Stringmethoden zum Ziel

Zeichenketten durchsuchen

indexOf
lastIndexOf

Browser erkennen - Geben Sie eine vom Browser abhängige Meldung aus

Funktion Drucken

2.3 Browsereigene Objekte

2.4. Browser auf eine andere Art erkennen

Ein Programm zur Browserunterscheidung

Browsererkennung

Der Weg zum Objekt, wie erfährt man Objekteigenschaften

Sind Cookies erlaubt

2.5. Training und Referenz

Lösungen

Weiterleitung nach Spracheinstellung
Weiterleitung nach Browser
nach oben

3. Seiteninformationen verarbeiten

3.1. Externe JavaScriptdateien

Externe JavaScriptdatei

3.2. Location - die Bestandteile einer URL

URL auslesen

Anker der URL abfragen

Anker

3.3. Funktionen einsetzen

Aufbau und Aufruf einer Funktion

Funktion Zielaufrufen

Funktionen mit Rückgabewerten

Funktion Browsertyp

Verschachtelte Funktionsaufrufe

verschachtelte Funktionsaufrufe

3.4. Teile der URL extrahieren

Die Länge einer Zeichenkette bestimmen

Länge einer Zeichenkette

Zeichenketten zerlegen

Zeichenketten zerlegen

So lesen Sie den Dateinamen aus einer URL aus

URL auslesen, Funktion Adresse()

3.5. Seiten im Griff haben - die History

Methoden des History-Objektes

History - Funktion springe()

Vorherige Seite im Verlauf mit Location.replace() löschen

Location.replace() anwenden

Ein Neuaufbau der Seite wird gebraucht?

Funktion neuladen()

3.6. Training und Referenz

Lösungen

Erweiterte Funktion Adresse()
Brückenseite
Vor- und Zurückbutton
nach oben

4. Browserfenster und ihr Inhalt

4.1. Die Fenstereigenschaften kennenlernen

Fenstereigenschaften anzeigen

Wann ist das Laden einer Seite beendet?

onLoad

Wann wird eine Seite verlassen?

onUnload

Die Statuszeile im Fenster

Standardstatuszeile setzen
Statuszeile setzen - Funktion parameteranzeige()

Der Fenstername

Ausgabe von Text mit alert in Abhängigkeit vom Fensternamen

4.2. Variablen sind wichtig

Variablen deklarieren - der var-Operator

Variablen deklarieren

Globale und lokale Variablen

Funktion Adresse mit_lokalen Variablen

Variablentypen

Variablentypen bestimmen - Funktion Typ()

4.3 Verschiedene und variable Fenstergrößen im Browser

Wie groß ist das Fenster?

Fensterbreite im Netscape Navigator
Fensterhöhe im Netscape Navigator
Fenstergröße im Internet Explorer
Funktion fenster_hoehe()
Funktion fenster_breite()

Die Fenstergröße verändern

Fenstergröße auf feste Werte verändern
Fenstergröße um feste Werte verändern

Ein neues Fenster mit festgelegter Größe öffnen

Fenster mit festgelegter Größe öffnen

Ein Fenster bewegen

Fenster zu einer festen Position bewegen
Fenster relativ bewegen

4.4 Das Screenobjekt und seine Eigenschaften

Eine Seite in Abhängigkeit von der Bildschirmauflösung laden

Bildschirmbreite
Bildschirmhöhe
Seite je nach Auflösung laden

Verschiedene StyleSheetsdateien je nach Bildschirmauflösung laden

CSS-Datei in Abhängigkeit von der Auflösung laden

4.5 Der Event Resize

Initialisieren des Eventhandlers onresize

Eventhandlers onresize

Eine Seite nach Änderung der Fenstergröße neu aufbauen

Seite neu aufbauen - Funktion neuAufbauen()

4.6 Training und Referenz

Lösungen

Script erst nach dem Laden ausführen
Domainnamen in der Statuszeile anzeigen
Funktion fenster_groessen()
Fenster nur im Netscape Navigator 4 neu aufbauen
nach oben

5. Link-Variationen und Effekte

5.1. Events... oder was passiert auf der Seite und im Browser?

5.2. Auf Mouse-Events reagieren

Ein Mausklick mit Folgen

Messagebox mit Buttons zum Abbrechen und Bestätigen
Verweis nicht ausführen
Verweis wahlweise ausführen

Weitere Click-Events

Doppelter Klick
Mousetaste herunterdrücken
Mousetaste loslassen

Ohne Klick ein Script starten

onMouseOver und onMouseOut

5.3. Verschiedene Arraybegriffe erklärt

Ein Produktkatalog im Array

Arrayelemente abfragen
Einem Arrayelement einen neuen Inhalt zuweisen
Arraygröße bestimmen
Element anfügen
letztes Element löschen
alle Elemente anzeigen

5.4. Link- und Anchorobjekt

Verweise einer Seite
Die Anker einer Seite

Eine Liste aller Verweis einer Seite erstellen

alle Verweise einer Seite ausgeben
alle Verweistexte einer Seite auflisten
Verweise anklickbar gestalten
Funktion Verweise()

5.5. Dynamische Links einsetzen

Dynamische Links - Beispiel

dynamische Links - Funktion spiel_holen()

Verweise nur bestimmten Browsern sichtbar machen

dynamische Links schreiben

Verweise vor neuen Browsern verstecken

Verweise verstecken

5.6. Wartende Seiten (setTimeout)

Ein Funktion zeitverzögert starten

Hintergrundfarbe ändern Hintergrundfarbe zeitverzögert ändern
intergrundfarbe ständig wechseln

setTimeout und Funktionsparameter

setTimeout und Parameter

Warten vorzeitig beenden(clearTimeout)

clearTimeout

5.7. Training und Referenz

Lösungen

10 Farben zweimal wechseln lassen
Hintergrundfarbe aussuchen
Hintergrundfarbe nur in neuen Browsern aussuchen
nach oben

6. Formulare - Kundenservice erleichtern

6.1. Wiederholung des Formbegriffes (HTML)

Beispielformular

6.2. Arrays der Formulare

Mehrere Formuale auf einer Seite
auf Listenelemente zugreifen

Assoziative Arrays - Text statt Zahlen als Schlüssel

assoziative Arrays

this - sich auf ein Objekt beziehen

this

6.3. Schleifen immer wieder Schleifen

Wie beenden Sie eine Schleife?

Schleifen beenden
Schleife und Funktion beenden
aktuellen Durchlauf abbrechen

while - Schleifen

while-Schleife
do-while-Schleife

6.4. Auslesen und Überprüfen von Formularwerten

Kontaktformular mit Eventhandler onSubmit
Formularelemente durchlaufen
Formularelemente auf Inhalt prüfen
Gültigkeit der Postleitzahl prüfen
Emailadresse prüfen
Formular überprüfen

6.5. Werte mit JavaScript setzen

Geheimnisvolles Fehlerformular

Fehlermeldungen

Abschicken eines Formulars mit JavaScript

Formular abschicken

6.6. Umgang mit den Events

OnFocus und onBlur - Ein Formularelement wird aktiviert und deaktiviert

Formularelemente auf readonly setzen
Formularelemente aktivieren
Formularelemente deaktivieren

onClick - ein Element wird angeklickt

Summe von Formularwerten bestimmen - Funktion setze()
Checkboxen ausgrauen
Formularelemente automatisch anklicken

Der Elementinhalt wechselt - onChange

Der Elementinhalt wechselt

Eine Taste gedrückt - onKeyPress

Anzahl der Zeichen ermitteln

6.7. Das Geheimnis der Listen

Listenelemente ansprechen und auslesen

ausgewähltes Optionelement
Value und Text einer ausgewählten Option

Listenelemente anfügen und löschen

neues Optionelement
Optionelement löschen

6.8. Training und Referenz

Lösungen

Onlinetest
neue Auswahllisten
nach oben

7. Bilder und JavaScript - Produktgallerien ganz einfach

7.1. Bilder und wie man sie dynamisch einbindet

Bildeigenschaften anzeigen

Schreiben Sie Grafiken dynamisch in die Seite

Dynamische Bilder

7.2. Ändern Sie die Bildquelle

Ein wechselhafter Grafikbutton

einzelner Rollover

Eine Funktion für viele Rollover

mehrfacher Rollover

7.3. Das Imageobjekt und seine Eigenschaften

Eventhandler im Image-Tag

Ein Fehler ist aufgetreten - onError
Das Bild wurde geladen - onLoad
onClick im Image
onMouseUp und onMouseDown im Image

Eine Diashow mit JavaScript

Diashow
Klickgesteuerte Diashow

7. 4. Bilder vorladen mit einem neuen Imageobjekt

mehrfacher Rollover mit Vorladen der Bilder

7.5. Mit Zeitfunktionen Bildausgabe steuern

Datum und Zeitinformationen aus dem Dateobjekt ermitteln

aktuelle Stunde anzeigen
Welcher Tag ist heute
Welcher Monat ist heute

Bilder entsprechend der Tageszeit laden

Bilder entsprechend der Tageszeit laden

Ein Bild nach der Jahreszeiten laden

Ein Bild nach der Jahreszeiten laden

7.6. Math.random - Mit Mathematik zur Grafik

Die Erzeugung einer ganzen Zufallszahl

Zufallszahl
auf ganze Zahlen runden Zufallszahlen vergrößern und runden
begrenzte Zufallszahl

Eine Zufallszahl ermitteln, die zwischen 2 beliebigen natürlichen Zahlen liegt

Funktion Zufallszahl(Min,Max)

Eine Zufallsgrafik anzeigen

Zufallsbild einbinden

7.7. Training und Referenz

Lösungen

Ein Bild taggenau nach der Jahreszeiten laden
Bild in Abhängigkeit von der Auflösung laden
Rollover mit beliebigen Quellangaben
Zufallsgrafiken
nach oben

8. Fenster und Frames steuern - Informationen noch besser hervorheben

8.1. Ein neues Fenster mit JavaScript erzeugen?

neues Fenster - Zieladresse
neue Fenster - Fenstername
neue Fenster - Menubar
neue Fenster - Scrollbars
neue Fenster - Status
neue Fenster - Resizable
neue Fenster - Directories
neue Fenster - Toolbar
neue Fenster - Grösse
neue Fenster - Position
neue Fenster - mehrere Feature

Ein Fenster nutzt die gesamte Bildschirmfläche

neue Fenster - Channelmode

Die Kommunikation zwischen den Fenstern

Ein Fenster in den Vordergrund holen
Ein Fenster schließen
Funktion in Opener ansprechen
Funktion ansprechen

8.2. Die Sitemap im Popup

zur Sitemap
Sitemap Variante 1
Sitemap Variante 2

8.3. Frame - Fenster im Fenster

Beispielframe
verschachtelter Frame
Anzahl von Frame

Kommunikation zwischen Frame

Frame ansprechen

8.4. Frame ändern

Eine Seite aus einem Frame befreien

klassisches Beispiel
Variation der Befreiung aus dem Frame

Ein fehlendes Frameset nachladen

Frameset nachladen

Mehrere Frame gleichzeitig ändern

mehrere Frame ändern

8.5. Ein Fenster mit document.writeln() beschreiben

Eine Seite in ein neues Fenster schreiben

Fenster beschreiben

Ein Dokument im gleichen Fenster beschreiben

Ein Dokument beschreiben

8.6 Training und Referenz

Lösungen

Funktion popup()
Navigationskorrektur
nach oben

9. DHTML

9.1. Verschiedene Browser - unterschiedliche Konzepte

Der flexible Internet Explorer

Wie viele HTML-Elemente hat eine Seite
Welche Tags wurden verwendet?
Welcher Text steht im 2. Absatz?
Identifizierer erleichtern den Zugriff

Mit Layer Dynamik im Netscape Navigator 4

Einen Layer mit dem Layertag erzeugen
Einen Layer simulieren
Anzahl der Layer im Dokument
Einen Layer mit dem Namen ansprechen
Bilder in Layern austauschen

Mozilla - das neue standardisierte Konzept

Ein Objekt mit dem Namen ansprechen
Ein Objekt über den Tagnamen ansprechen
Den Inhalt eines Elementes neu zuweisen

9.2. Cascading Style Sheets

Einem Element CSS-Angaben zuweisen

Die Eigenschaft dem Element direkt zuweisen
Die Eigenschaft zentral über Identifizierer festlegen
Eine CSS-Klasse festlegen

Positionsangaben mit CSS

Angaben zur Position und Größe

Anzeige eines Elementes

Das Elementes ohne Platzhalter anzeigen
Element mit Platzhalter anzeigen
Überlappungen (z-Index) festlegen
Anzeigebereich eingrenzen

Äquivalente Angaben im Layertag

Layerangaben

9.3. Positionierung von DHTML Elementen - eine Mouseverfolgung

Mouseverfolgung

9.4. Den Inhalt eines Bereiches austauschen

Inhalte austauschen - ein Newsticker

9.5. Tooltipps - Eine DHTML-Anwendung

Tooltipp

9.6 Training und Referenz

Lösungen

Bewegung des Logos
Layer austauschen
verbesserter Tooltipp
nach oben

10. Das Dateobjekt für eigene Zwecke nutzen

10.1. Das Dateobjekt - der Zugriff auf Datum und Zeit

Erzeugen Sie ein neues Dateobjekt

ein neues Dateobjekt
Funktion dasDatum()

Den Monatsnamen ermitteln

Funktion Monatname

Wie viel Tage hat ein Monat?

Monatsdauer ermitteln

Welcher Wochentag ist heute?

Wochentag ermitteln

Wie viel Tage liegen zwischen 2 Zeitpunkten?

Zeitdifferenz

10.2. Dynamische Kalenderblätter

Kalender

10.3. Details aus der Zahlenwelt von JavaScript

Rund um die Zahl

Zahlen

Runden mit JavaScript

Runden

10.4 Training und Referenz

Lösungen

Zeitpunkt beberechnen
Zeitdifferenzen in verschiedenen Einheiten ermitteln
erweitertes Kalenderblatt
nach oben

11. Was Sie sonst noch wissen sollten

Eigene Objekte in JavaScript

Objekte definieren und erzeugen

Objekte erzeugen

Objekteigenschaften

Eigenschaften

Objektmethoden

Funktion Prozentrechnung Methoden

Objekteigenschaften mit der for in Schleife anzeigen

For in Schleife

Ein verkürzter Zugriff mit with

with

11.2. Vordefinierte Objekte erweitern

Objekte erweitern
vordefinierte Objekte erweitern

11.3. Fehlersuche

Scripts zum täglichen Gebrauch

Opera
Rollover
Framefenster schließen
Scripttag schreiben
3 Zufallszahlen

11.4. Schlußbemerkungen und weiterführende Links

11.5 Training und Referenz

Lösungen

Kleinste Zahl
Diashow als Objekt
nach oben