|
Multimediakurs Leinfelder: Inhalt/Modul 7 "JavaScript in Handarbeit"/Modul 7-Anhang: Skriptverzeichnis |
| (© copyright) Letzte Änderungen: |
Hier finden Sie Links und kurze Inhaltsangabe zu allen im Multimediakurs vorgestellten JavaScripten (mit teilweiser Ausnahme der im Kursmodul 6 verwendeten, von Adobe GoLive generierten Skripte). Eine Garantie für die Lauffähigkeit der Skripte kann nicht übernommen werden.
Da die Kurssite weiter ausgebaut ist und verändert wird, empfiehlt es sich, immer wieder auf diesem Anhang vorbeizusehen.
In Kursmodul 7.2 (JavaScript-Level 1) vorgestellte JavaScripte:
Diese Skripte wurden nicht hinsichtlich Ihrer Syntax analysiert, sondern nur hinsichtlich Ihrer Weiterverwendbarkeit und Anpassungsfähigkeit kommentiert.
|
JS-Link/'Titel
|
Kurze Beschreibung
|
Kursteil
|
kommentiert?
|
| JavaScript fehlt | Gibt eine OK-Meldung aus, wenn JavaScript aktiviert wird sowie einen Hinweis, wenn es nicht aktiviert ist. Alternativ auch nur Hinweis bei deaktiviertem JavaScript | js-level 1 | Einbau ja, Sytax teilweise |
| Alert/neues Fenster | Öffnen einer Hinweisbox sowie eines neuen Fensters mit definierter Größe etc. in einem Skript | js-level 1 | nicht zur Syntax |
| Seebi-Jump | Öffnet neues Fensterchen, welches auf Bildschirm hin- und herspringt. Beispiel für Aufruf einer function durch andere function. Beispiel von www.seebi.de | js-level 1 | nicht zur Syntax |
| Alert | Öffnen einer Hinweisbox mit Skriptanweisung direkt im Eventhandler | js-level 1 | nicht zur Syntax |
| Alert beim Laden | Öffnen einer Hinweisbo beim Laden einer Seite | js-level 1 | bzgl. Anpassung |
| Ihr Browser |
Auslesen des Browsertyps (navigator.user.agent) und direkte Angabe auf der html-Seite. Beispiel für inline-Skripts | js-level 1 | nicht zur Syntax |
| neues Fenster | Öffnen eines Fensters mit bestimmten Eigenschaften | js-level 1 | bzgl. Anpassung |
| Fenster schließen | Schließen des eigenen Fensters | js-level 1 | nicht zur Syntax |
| Linkinfo in Statusleiste | Ausgabe von Textstrings in Statusleiste, welche bei mouseover, oder mouseout angezeigt werden. | js-level 1 | bzgl. Anpassung |
| zwei Frames pro Klick | zwei html-Seiten mit einem Linkklick in zwei unterschiedliche Frames laden | js-level 1 | bzgl. Anpassung |
| zwei Frames pro Klick; Anwendung |
wie oben; geobiologischer Frage/Antwort-Test. Zusätzlich mit Gesamtauswertung (Punktzahl). | js-level 1 (auswert. s. Level 3) |
bzgl. Anpassung |
| zurück | zurück zur letzten oder vorletzen aufgerufenen Seite | js-level 1 | bzgl. Anpassung |
| window-shaker | lässt Fenster beim Aufruf eine Zeitlang erbeben. Skript von Michael Mailer | js-level 1 | nein |
In Kursmodul 7.3 (JavaScript-Level 2) vorgestellte JavaScripte:
Diese Skripte wurden detailliert hinsichtlich Ihrer Syntax analysiert und kommentiert
|
JS-Link/'Titel
|
Kurze Beschreibung
|
Kursteil
|
kommentiert?
|
| window.open/document.open | Unterschiede der Methode open | js-level 2 | ja |
| neues Fenster öffnen | hier nun mit Syntaxdiskussion sowie mit (fast) allen möglichen Eigenschaften | js-level 2 | ja |
| neues Fenster mit JS-Textausgabe | zwei Dokumente in zwei Fensters durch ein html-Dokument mit JS definieren | js-level 2 | ja |
| Eingabe ausgeben | Eingabe in Dialog-Box wird via Variable als Text auf html-Seite ausgegeben. Beispiel für Methoden prompt und writeln sowie Variablen | js-level 2 | ja |
| einfache Passwortabfrage | Einfache Passwortabfrage als Beispiel für while- und if-Schleife. Alternative 1 einfach, Alternative 2 mit Abbruchmöglichkeit | js-level 2 | ja |
| countdown | Rückwärtszählen durch JavaScript mit entsprechender Ausgabe. Beispiel für for-Schleife und variablen-Dekrementierung. | js-level 2 | ja |
| Sprachversionsweiche | Je nach Sprachversion des verwendeten Browsers wird man auf spezielle html-Seiten umgeleitet. Beispiel für switch-case-Schleife. Basierend auf einem Beispiel von M. Seeboerger (nur für Netscape) | js-level 2 | ja |
| Automatische Bilderschau | Bilder werden automatisch nach bestimmter Zeit ausgetauscht. Selbstablaufende Bilderschau. Beispiel für Verwendung von arrays und Definition neuer Objekte (hier des Bildobjektes) | js-level 2 | ja |
| Farbwähler-Beispiel 1 | Ändern der Hintergrundfarbe durch Linkberührung. Beispiel für Änderung und Textausgabe der bgColor-Eigenschaft | js-level 2 | ja |
| Farbwähler-Beispiel 2 | Ändern der Hintergrundfarbe durch Benutzereingabe. Beispiel für Methoden prompt, alert sowie Variablen | js-level 2 | ja |
| Farbkonverter- und -anzeiger-Utility | Test von vordefinierten html-Farbnahmen sowie Farbanzeige von hexadezimalen Farbcodes. Beispiel für Methoden prompt, alert sowie Variablen. Aufruf mehrerer Funktionen durch einen Link | js-level 2 | ja |
| Farbkonverter- und -anzeiger-Utility, version 2 | wie oben, aber mit verbesserter Abbruchmöglichkeit. Zusätzlich Beispiel für if-Abfrage, Beispiel für automatischen Aufruf einer function durch eine andere, Beispiel für zeitbedingte Scriptabarbeitung mit der setTimeout();-Methode. | js-level 2 | ja |
In Kursmodul 7.4 (JavaScript-Level 3) vorgestellte JavaScripte sowie weitere "Level 4-Skripte" des Multimediakurses
Diese Skripte sind oft kurz und sehr einfach, da sie v.a. zur Erläuterung der Programmierweisen mit JavaScript dienen. Sie wurden detailliert hinsichtlich Ihrer Syntax analysiert und kommentiert. Komplexere Skripte für direktere Anwendungen sind ebenfalls kommentiert. Die Kommentare setzen das Verständnis von JS- Level 2-Wissen voraus, d.h. der Programmcode wurde nur kommentiert, sofern er das Wissen von Level 2 übersteigt. Hier aufgeführt sind nur direkt ausführbare Skripte. Weitere nicht direkt ausführbare Syntaxbeispiele finden sich zusätzlichin den Level-3-Modulen. Level 4-Skripte verteilen sich auch auf weitere Module, werden aber ebenfalls hier aufgeführt.
|
JS-Link/'Titel
|
Kurze Beschreibung
|
Kursteil
|
kommentiert?
|
| Rechenbeispiel mit object Function | Erläuterung des Objekt Function (im Unterschied zu benutzerdefinierten functions) | level 3 (7.4.2) |
ja |
| Ausgabe der Bildschirm-Auflösung | Beispiel zur Benutzung des Objects Screen | level 3 (7.4.2) |
ja |
| Ausgabe Stringlänge | Beispiel zum Objekt String | level 3 (7.4.2) |
ja |
| Brechen eines oder aller Frames mit JS | mehrere Beispiele zum Unterschied der document-Eigenschaften parent und top | level 3 (7.4.2) |
ja |
| Direktklick- und Eventhandler-Click | Zwei alert-Beispiele zur Erläuterung der unterschiedlichen Klickaufrufmöglichkeiten einer Funktion sowie zum direkten Methodenabruf im <a> Tag | level 3 (7.4.3) |
ja |
| <a>-tag functions | nur IE: Abarbeitung ganzer Funktionen im <a>-Tag | level 3 (7.4.3) |
ja |
| Umlaute in alerts etc | Beispiel für unescape-Codierung zur Ausgabe von Textstrings in alert, prompt und confirm-Boxen | level 3 (7.4.3) |
ja |
| Umlaute in write-Methoden | Beispiel für Sonderzeichenkodierung zur Ausgabe mit write(); bzw. writeln();-Methode | level 3 (7.4.3) |
ja |
| Weitere Escape-Sequenzen in Textstrings | Beispiel für Darstellung von Umbrüchen, Anführungszeichen, etc. mit escape-Methoden | level 3 (7.4.3) |
ja |
| Hinweisausgabe via Funktionsvariablen | 3 Beispiele für Definition von Variablen als Parameter einer Funktion | level 3 (7.4.3) |
ja |
| Eingaben erst später abrufen | Prompt-Alert-Beispiel für die benutzerdefinierte Eingabe und benutzerdefinierten Abruf von Variablen (return-Methode). | level 3 (7.4.3) |
ja |
| Frage/Antwort mit Gesamtpunktzahl | Dieses Skript wurde schon in Level 1 vorgestellt; hier wird es umfassend erläutert. Verwendet u.a. setTimeOut, window.open()-Methoden, sowie mit document.write geschriebene Zusatzskripte. Außerdem werden globale Variablen hochgezählt und benutzerdefiniert als Alert ausgegeben. | level 3 (7.4.3) |
ja |
| Antwortskontrolle | Kontrolle einer benutzerdefinierten Antwort als Beispiel für Bedingungs-Kurzabfragensyntax | level 3 (7.4.3) |
ja |
| Antwortskontrolle mit Korrekturmöglichkeit | Kontrolle einer benutzerdefinierten Antwort als Beispiel für do-while-Schleife | level 3 (7.4.3) |
ja |
| automatische Bilderschau | Automatischer Austausch von Bildern nach vorgegebener Zeit. Alternative zu anim.gifs, auch für jpg geeignet. Verwendet u.a. arrays, new Image() objeke, setTimeOut-Methode | level 3 (7.4.5) |
ja |
| Rollover-Buttons | Bildaustausch bei Mausberührung und Mausklick. Verwendet u.a. arrays, new Image()-Objekte src-Eigenschaften | level 3 (7.4.5) |
ja |
| Farbwähler und Konvertierer | Lässt aus allen vordefinierten Farbnamen wählen, diese anzeigen und in HexDez.-Code umwandeln. Auch HexDez direkt eingebbar. Zusätzliche Eingabekontrolle Verwendet u.a. arrays und verschiedene String-Methoden sowie if-Abfrage |
level 3 (7.4.5) |
ja |
| sichere Passwortabfrage | Passwortabfrage bei der das Passwort nicht im Code angegeben ist. Verwendet document-eigenschaften, darunter href | level 3 (7.4.5) |
ja |
| Einfacher JavaScript-Rechner | Umfassende Rechenfunktion mit minimalem JS-Code. Jedoch keine Fehlerkontrolle. Verwendet eval()-Methode und ein input-Text Formularelement. | level 3 (7.4.5) |
ja |
| Kopfrechnen-Tester
derzeit wegen Überarbeitung deaktiviert und nicht auf Seite angezeigt |
Rechner für alle Grundrechenarten (auch für komplexere Berechnungen), mit benutzerdefinierter Ausgabe und diversen Kontrollfunktionen. Verwendet u.a. elements-Array, indexOf(); eval(); alert(); mit return; Aufruf einer selbstdefinierten Funktion als Methode. Verwendete Formularelemente: input text, input select, button, reset. Siehe auch die beiden Vorbereitungsscripte hierzu |
level 3 (7.4.5) |
ja |
| JavaScript-Rechner mit Eingabekontrolle | Rechner für beliebige Kombination von Grundrechenarten, mit umfassender Eingabekontrolle bei evtl. falscher Eingabe. Verwendet u.a. elements.value, forms.reset(), array, string.indexOf(), string.charAt(), alert(), eval(), for- und if-Abfragen, sowie verschiedene Eventhandler |
level 3 (7.4.5) |
ja (direkt im Scriptcode) |
| Formulartester 1 | Test auf korrekte Eingabe von Name, PLZ, Tel.Nr und email-Adresse, mit umfassenden Fehlermeldungen bei falscher Eingabe. Es wird jeweils nur ein aktueller Fehler pro Eingabezeile angezeigt Verwendet Elemente ähnlich oben. |
level 3 (7.4.5) |
ja, umfassend |
| Formulartester 2 | Alternative zu oben. Alle auftretenden Fehler werden gleichzeitig vor Abschicken angezeigt. Mit Hinweismöglichkeit während der Eingabe sowie confirm--Box vor dem Abschicken. | level 3 (7.4.5) |
ja |
| Formulartester 3 | Alternative zu oben. Nach jeder vorgenommenen Eingabe wird direkt auf Korrektheit getestet. | level 3 (7.4.5) |
ja |
| Fragebogenbasierte Auswahl von html-Seiten | Verwendet für fragebasierte Quereinstieg zum Kurs. Kann für Selbsttests und vieles mehr verwendet werden. | level 3 (7.4.5) |
ja |
| Einfache Browserweiche für IE 5 | Falls IE 5 verwendet wird, wird auf eine alternative Seite umgeleitet. Soll das Prinzip von Browserweichen verdeutlichen. | level 3 (7.4.5) |
ja |
| Browserweiche für IE5 und NN6 | Falls IE 5 oder NN6 verwendet wird, wird auf eine alternative Seite umgeleitet. Beispiel zur Erläuterung des Aufbaus komplexerer Browserweichen | level 3 (7.4.5) |
ja |
| Ausleseskript für alle navigator-Eigenschaften | Skript zum Auslesen aller Eigenschaften des Objekts navigator. Dient zum Erstellen eigener Browser. Zusätzlich werden Screenshots des Scripts für IE5, NN4 und NN6 dargestellt | level 3 (7.4.5) |
teilweise |
| Auslesen von Netscape-Browsern gegen den Rest der Welt | Nur wenn Nescape verwendet wird, bleibt man auf der Seite, bei allen anderen wird auf eine alternative Seite umgeleitet | level 3 (7.4.5) |
ja |
| Opera 5 auslesen | Bei Verwendung ab Netscape 4 oder IE 5 bleibt man auf der Seite, bei Verwendung von Opera (oder auch anderen Browsern) wird umgeleitet. Wichtig für dhtml-Seiten. Opera verkauft sich als Netscape 4 oder 5 und kann ohne dieses Skript nicht berücksichtigt werden. Opera (auch 5) kann nämlich kein dhtml darstellen. | level 3 (7.4.5) |
ja |
| No-Frames-Skript | Verhindert Webnapping, also das Einbinden von Einzelseiten in Framesets durch andere. (seit 3.5.02) | level 3 (Anlage 13) |
ja |
| Force-Frames-Skript | Basierend auf einem Skript von M. Wernecke, mit weiteren Ergänzungen und Adaptierung für Frames-in-Frames-Szenarien, sowie Troubleshooting-Angaben. Kann auch ohne größere JS-Kenntnisse angewendet werden. (seit 3.5.02)
benutzerdefinierte Version mit Hinweisausgabe in Anlage 13c. |
level 4 (Anlage 13, 13b, 13c) |
ja |
| Skripte zur Übergabe von Daten zwischen unterschiedlichen Webseiten | Zwei Beispiele, die auf obigem Skript aufbauen und ohne Cookies auskommen. Zur Übergabe werden die Daten in Suchstrings gepackt und an URLs angehängt. Verwendet u.a. diverse string-Methoden. (seit 4.5.02) | level 4 (Anlage 14) | ja |
| diverse Skripte und Beispiele zum Anlegen und Auslesen von Cookies (klassische Methode) | Zwei vorgefertigte Lösungen von GoLive und Pagespinner sowie umfassende Erläuterungen zum Anlegen, Löschen, Auslesen und Verwenden von Cookies, basierend auf adaptierten und teilweise ergänzten Skripten von M. Seeboerger-Weichselbaum. (seit 4.5.02) | level 4 (Anlage 14) |
Editorgenerierte Skripte nein; Rest umfassend erläutert |
| Cookieskript zur Verhinderung der Öffnung eines Newsfensters bei wiederholtem Seitenbesuch. (split-Methode) | Der Aufruf einer Eingangsseite öffnet ein Popup-Newsfenster. Gleichzeitig wird ein Cookie gesetzt. Wird am selben Tag die Eingangsseite nochmals besucht, bleibt das Newsfenster geschlossen. Cookie wird nach 24 Std. ungültig. Verwendet insb. die split()-Methode zum Auslesen (ab JavaScript vers. 1.1). Deutlich kürzerer Code als oben. Mit Hinweis zum Setzen lokaler Cookies. |
level 4 (Anlage 14b) |
Umfassende Erläuterung |
| Setzen und Auslesen mehrerer Cookies gleichzeitig | Skript von M. Seeboerger-Weichselbaum (mit Genehmigung verwendet); Verwendet die split()-Methode. | level 4 (Anlage 14b) |
durch obige Erläuterung überwiegend abgedeckt. |
>> weiter zu Modul 8: Animationen