|
Javascript - Tips und Tricks, Tuning
Auf dieser Seite finden Sie einige Javascripte, die ich auch auf meiner Homepage benutzte.
Normalerweise begnügen sie sich mit JavaScript 1.1, sollten also auch mit älteren Browsern laufen.
Ich habe alle Skripte objektorientiert entworfen (oder zumindest dafür auslelegt).
Übersicht
Tips: Kompatibilität & Tuning
Kompatibilität
- Benutzen Sie einen HTML-Validator, um Ihre Seiten zu überprüfen!
- Programmieren Sie defensiv, d.h. fragen Sie ab, ob Attribute globaler Objekte existieren, ob Fenster geöffnet sind, ....
- Vermeiden Sie proprietäre Elemente, z.B. 'document.all' vom Internet Explorer, 'document.layers', von Netscape 4.x, 'Array.push(), ...', x[-1] (letztes Element im Array) bei Netscape.
- Benutzen Sie document.getElementById(), um die ID eines Elements zu ermitteln (Netscape 6.x, Internet Explorer 5.x)
- Benutzen Sie 'var' für jede Variablendeklaration oder -definition! Dann sind Sie sicher, daß lokale Variablen auch wirklich lokal sind. Denken Sie daran, daß Variablen im Gegensatz zu C (block-level scope) in der gesamten Funktion gültig sind (function-level scope), also evtl. auch vor der Definition!
- Schließen Sie jeden Befehl durch ein Semikolon ab! (Natürlich nicht nach Blöcken aus geschweiften Klammern.)
- Vermeiden Sie Elemente aus neueren Javascript-Versionen, wenn es mit älteren Mitteln auch ohne Aufwand möglich ist (z.B. new Array() anstatt Array-Konstruktor [...]). Dann ist die Chance größer, daß der Code auch noch mit älteren Browsern läuft.
Tuning
- Falls Sie öfter auf 'tief verschachtelte' Attribute zugreifen, weisen Sie den gemeinsamen Teil einer Variablen zu. Dann braucht nicht jedes mal die Objekthierarchie durchsucht zu werden.
- Vermeiden Sie with(), um auf Attribute zuzugreifen. Das macht den Code eher unleserlich und verhindert Optimierungen.
- Vermeiden Sie Function('<text>') zum Anlegen von Funktionen, insbesondere in Schleifen.
- Anstatt mehrerer document.write() setzen Sie die Strings erst zusammen, bevor Sie sie ausgeben. Übrigens können Sie bei document.write() auch mehrere Parameter durch Komma getrennt angeben.
- Benutzen Sie das 'prototype'-Attribut, um Klassenvariablen, -methoden zu definieren. Das spart Speicherplatz, da die Methoden nur einmal in der Prototyp-Hierarchie vorhanden sein müssen und nicht in jedem Objekt.
Pflege, Wiederverwendbarkeit
- Denken Sie objektorientiert!
- Vermeiden Sie globale Variablen!
- Halten Sie sich an Konventionen, seien Sie konsistent bei der Syntax, der Variablenvergabe, allgemein im Programmierstil!
- Dokumentieren und Kommentieren Sie Ihren Code! Zum Veröffentlichen können Sie ja immer noch einen 'Javascript-Scrambler' benutzen, um den Code kürzer und unleserlicher zu machen. Erwarten Sie dann aber nicht, daß jemand Sie auf Fehler aufmerksam macht.
Zurück zum Anfang.
Beispiele
Es folgen ein paar Beispiel-Skripte...
Slideshow, Diashow (sshow1.js)
Version: 0.12
Datum: 05.12.2003
System: beliebig
Programmiersprache: JavaScript (1.1)
Autor: Marco Vieth
Benötigt: timer1.js, debug1.js (optional)
Download.
Die Slideshow oder Diashow erlaubt es, eine Liste von Dias anzulegen und als Bilder auf der HTML-Seite anzuzeigen. Das ist auch timergesteuert möglich.
Damit das nächste Bild schneller erscheint, wird es im Hintergrund automatisch in einen Cache geladen (precaching).
Initialisierung am Beispiel
- Zuerst zwei Arrays mit Bildnamen und zugehörigen Beschreibungen erzeugen:
var images = new Array('bild1.jpg', 'bild2.gif', ...);
var descrs = new Array('Beschreibung 1', 'Beschreibung 2', ...);
- Dann mit dem Konstruktor die Diashow initialisieren:
var sshow = new Sshow(images, descrs);
(sshow ist eine Variable, über die auf das Objekt zugegriffen werden kann.)
- Wahlweise können Sie auch jetzt noch Bilder hinzufügen:
sshow.add_image('bildx.jpg' [,'Beschreibung x']);
sshow.add_images(images [,descrs]);
- Anschließend das 0. Bild der Diashow laden (z.B. in <body onload="..."):
sshow.change_image(0)
(Standardmäßig wird das letzte Bild auf der HTML-Seite ausgetauscht. Wie Sie andere Bilder austauschen, erfahren Sie weiter unten...)
- Jetzt ist die Initialisierung abgeschlossen und das Bild kann je nach Ereignis ausgetauscht werden. Dazu dienen die Methoden sshow.change_image_abs(), sshow.change_image_rel(), sshow.change_image_random() und sshow.change_image_auto().
Methoden
var obj = new Sshow([images] [,descrs] [,<Callback-Funktion>] [,<preload_sec>] (Konstruktor)
erzeugt ein neues Diashow-Object.
Sie können hier Arrays mit Bildern und Beschreibungen angeben.
Außerdem können Sie eine Callback-Funktion angeben, die beim Setzen eines Bildes aufgerufen wird.
Standardmäßig wird Sshow_set_image_func() genommen (s.u.).
,<preload_sec> ist ein Timeout zum vorausschauenden Laden des nachsten Bildes (Default: 2 Sekunden).
sshow.add_image('bild_x.jpg' [,'Beschreibung x']);
fügt ein Bild zur Liste hinzu. Die Beschreibung ist optional.
sshow.add_images(images [,descrs]);
fügt ein Bilderliste zur Liste hinzu. Die Beschreibungen sind optional.
sshow.set_options([,<Callback-Funktion>] [,<preload_sec>])
ändert <Callback-Funktion> und <preload_sec>.
sshow.prepare_image(index) [intern]
bereitet Bild 'index' zum Anzeigen vor und läd es in den Cache. Diese Methode wird intern verwendet und sollte nicht aufgerufen werden.
sshow.prepare_all_images()
läd alle Bilder in den Cache. Diese Methode sollte nur bei Bedarf aufgerufen werden, d.h. wenn Sie wirklich alle Bilder anzeigen wollen.
sshow.change_image_abs(<idx> [,<Callback-Argument>])
läd das Bild mit index 'idx' in den Cache und zeigt es an (d.h. ruft die Callback-Funktion mit optinalem Callback-Argument auf). Ein ungültiger Index außerhalb des Bilder-Arrays wird ignoriert. Automatisch wird nach etwa 2 Sekunden das nächste Bild in den Cache geladen und ist dann sofort verfügbar.
sshow.change_image_rel(<offset> [,<Callback-Argument>])
addiert <offset> zum internen Index, und ruft dann sshow.change_image_abs() auf.
sshow.change_image_random([<Callback Argument>])
Ruft sshow.change_image_abs() mit einem zufälligen Bildindex auf.
sshow.change_image_auto(<Delay> [,<Objekt>] [,<Methode>] [,<arg0>])
plant einen Intervall-Timer für alle <Delay> Sekunden ein, der "change_image_rel()" aufruft, um das nächste Bild anzuzeigen.
Wenn der Benutzer zuvor rückwärts geblättert hat, werden Bilder absteigend angezeigt, ansonsten aufsteigend.
Bei <Delay>=0 wird der Intervall-Timer wieder gelöscht.
Falls Sie ein <Objekt> und eine <Methode> angegeben haben, wird diese stattdessen aufgerufen.
Es können beliebig viele Timer benutzt werden (siehe timer1.js).
Die Standard-Callback-Funktion
Diese Funktion erhält das aktuelle Bild, einen Index, eine Beschreibung und einen optionalen Parameter, falls er bei change_image angegeben wurde. Zuerst wird das Bild gesetzt.
Falls das Formular 'Navigate' existiert und dort ein Feld 'Index', wird der aktuelle Index hineingeschrieben. Falls ein Feld 'description' existiert, bekommt es die Beschreibung zu dem Bild.
function Sshow_set_image_func(img, idx, descr, arg) {
var windoc = window.document;
if (windoc.images) {
if (arg || (arg == 0)) { // if defined
} else {
arg = windoc.images.length - 1; // last image
}
windoc.images[arg].src = img;
}
if (windoc.Navigate) {
if (windoc.Navigate.Index) {
windoc.Navigate.Index.value = idx;
}
if (windoc.Navigate.description) {
windoc.Navigate.description.value = descr;
}
}
}
Bemerkungen
- Die Bilder der Diashow sollten die gleiche Größe haben, sonst werden sie skaliert, was den Seitenaufbau verzögern kann.
- Es gibt nur einen Bildindex pro Objekt. Das müssen Sie berücksichtigen, falls Sie zwischendurch ein anderes Bild der HTML-Seite ändern.
- Für jeden Aufruf von sshow.change_image_auto() wird ein neuer intervall-Timer erzeugt. Es können also beliebig viele benutzt werden.
- Anstatt mit dem Array-Konstruktor Array() können Sie Arrays auch mit [...] anlegen, das funktioniert aber erst mit JavaScript 1.2.
- Intern werden die Methoden über "prototype" in die Objekte eingebunden. Das spart Speicherplatz, da die Methoden nur einmal in der Prototyp-Hierarchie vorhanden sein müssen und nicht in jedem Objekt. Falls das Attribut "prototype" nicht exisitiert (vor JS 1.2), werden die Methoden allerdings direkt in das Objekt aufgenommen.
Zurück zum Anfang.
Timer (timer1.js)
Version: 0.021
Datum: 30.11.2003
System: beliebig
Programmiersprache: JavaScript (1.1)
Autor: Marco Vieth
Benötigt: debug1.js (optional)
Download.
Das Timer-Javascript erlaubt es, mehrere verschiedene Timer objektorientiert zu verwalten.
Gegenüber CCallWrapper.js von Netscape bietet timer1.js einige Vorteile: Es läuft auch mit Javascript 1.1,
es werden auch Intervalltimer unterstützt (bei Javascript 1.1 mit normalen Timern simuliert) und Timer-Objekte können wiederverwendet werden (d.h. nach dem Anhalten neu gestartet werden).
Methoden
Timer(obj, method [, arg0])
Timer_exec() [intern]
Timer_setTimeout(delay_ms)
startet einen neuen Timer, falls delay_ms > 0.
Falls der Timer aktiv ist, wird er zuvor gestoppt.
Timer_clearTimeout()
Stoppt einen normalen Timer (clearTimeout).
Der Timer kann später wieder gestartet werden, auch als Intervall-Timer.
Timer_setInterval(delay_ms)
wie Timer_setTimeout(), nur als Intervall-Timer.
Timer_clearInterval()
Stoppt einen Intervall-Timer (clearInterval).
Der Timer kann später wieder gestartet werden, auch als normaler Timer.
Timer_close()
Löscht einen Timer. Falls er läuft, wird er zuvor gestoppt.
Zurück zum Anfang.
Debug (debug1.js)
Version: 0.11
Datum: 30.11.2003
System: beliebig
Programmiersprache: JavaScript (1.1)
Autor: Marco Vieth
Download.
Dieses Javascript-Modul wird zum Debuggen von anderen Modulen verwendet.
Falls es geladen wird, gibt es Debug-Meldungen in einem separaten Debug-Fenster aus.
Ansonsten werden solche Meldungen ignoriert.
Nach Laden diese Moduls steht das Objekt g_debug mit Debug-Level 1 zur Verfügung, an das man Debug-Ausgaben schicken kann.
Methoden
var g_debug = Debug(debug_level) [intern]
g_debug.open() [intern]
g_debug.set_level(level)
Bei Bedarf implementieren.
g_debug.writeln(str [, level])
Gibt die Debug-Meldung 'str' in einem Debug-Fenster aus.
Falls das Fenster nicht existiert, wird es zuvor geöffnet.
Es werden nur Meldungen ausgegeben, deren Debug-Level kleiner oder gleich dem maximalen Debug-Level (1) ist.
Ein nicht angegebener Level wird als 0 angenommen.
Beispiel/Benutzung:
- Am Anfang jedes Javascript-Moduls schreiben:
var g_debug = null; // maybe changed later...
- Für jede DEBUG-Ausgabe im Modul einfügen:
if (g_debug) { g_debug.writeln(<message>); }
- Als letztes geladenes Javascript das Debugging aktivieren:
<script language="JavaScript" src="debug1.js" type="text/javascript">
// </script>
Zurück zum Anfang.
Cookie-Handling (cookie1.js)
Version: 0.11
Datum: 31.12.2003
System: beliebig
Programmiersprache: JavaScript (1.1)
Autor: Marco Vieth
Benötigt: debug1.js (optional)
Download.
Funktionen
Cookie_get(name)
Cookie_set(name, value, expiredays)
Cookie_delete(name)
Zurück zum Anfang.
URL Kodieren (encode1.js)
Version: 0.021
Datum: 30.11.2003
System: beliebig
Programmiersprache: JavaScript (1.1)
Autor: Marco Vieth
Benötigt: debug1.js (optional)
Download.
Funktionen
encode_init_codes() [intern]
encode_charCodeAt(this1, idx) [intern]
encode_fromCharCode(code1) [intern]
encode_url(str)
Zurück zum Anfang.
Geheimer Seitenaufruf (secret_jump1.js)
Version: 0.10
Datum: 23.11.2003
System: beliebig
Programmiersprache: JavaScript (1.1)
Autor: Marco Vieth
Benötigt: encode1.js, debug1.js (optional)
Download.
Funktionen
Zurück zum Anfang.
Seitenbooster (boost1.js)
Version: 0.061
Datum: 23.11.2003
System: beliebig, am besten Netscape 6.x oder Internet Explorer 5.x
Programmiersprache: JavaScript (1.1)
Autor: Marco Vieth
Benötigt: sshow1.js, timer1.js, debug1.js (optional)
Download.
Der Seitenbooster soll einige Javascript-Effekte auf einer HTML-Seite demonstrieren, wie (zeitgesteuert) Bilder austauschen, Text austauschen und Text- oder Hintergrundfarbe beim Überfahren ändern.
Dabei werden nur die Effekte benutzt, die der jeweilige Browser ohne größeren Aufwand unterstützt. Bei Netscape 4.x wird z.B. die Textfarbe nicht geändert. Beim Internet Explorer werden die Bilder mit zufälligem Überblend-Effekt ausgetauscht.
Methoden
var boost = new Boost(images)
Boost_set_image_func(img, idx, descr, arg)
boost.change_it1()
boost.page()
boost.page_forid(idx)
Boost_rndhex_local() [intern]
boost.mover1(p1)
boost.mout1(p1)
...
Zurück zum Anfang.
Situationen (situ1.js)
Version: 0.062
Datum: 08.12.2003
System: beliebig
Programmiersprache: JavaScript (1.1)
Autor: Marco Vieth
Benötigt: timer1.js, debug1.js (optional)
Download.
Dieses Skript wählt zufällig eine Umgebung, ein Ereignis und eine Begegnung und zeigt sie mit zufälligen Adjektiven an.
Methoden
var situ = Situ(surroundings, events, meetings, adjectives, separator)
situ.get_rnd_index1(list) [intern]
situ.select_rnd_adjnoun(adj_l, noun_l) [intern]
situ.change_text(txtval)
situ.auto_change_text(delay_sec)
...
Zurück zum Anfang.
Abenteuer-Interpreter (advent1.js)
Version: 1.34
Datum: 18.01.2004
System: beliebig
Programmiersprache: JavaScript (1.1)
Autor: Marco Vieth
Benötigt: sshow1.js, debug1.js (optional)
Download.
Klassen
AdvMaps(maps_str)
...
...
...
...
Methoden
AdvMaps_getlevel()
AdvMaps_getx()
AdvMaps_gety()
AdvMaps_getflag()
AdvMaps_setflag(flag)
AdvMaps_dump()
AdvMsg(messages)
AdvMsg_get(idx, msg_arg)
AdvMsg_print(str)
AdvMsg_len()
AdvMsg_dump(idx)
AdvPlayer(player_str)
AdvPlayer_setroom(room)
AdvPlayer_getroom()
AdvPlayer_setstep(step)
AdvPlayer_getstep()
AdvPlayer_setsteplist(steplist)
AdvPlayer_addsteplist(steplist)
AdvPlayer_getsteplist()
AdvPlayer_setname(name)
AdvPlayer_getname()
AdvPlayer_dump()
AdvRoom(room_str)
AdvRoom_setname(name)
AdvRoom_getname()
AdvRoom_setimage(image)
AdvRoom_getimage()
AdvRoom_setdirection(dir_num, room_num)
AdvRoom_getdirection(dir_num)
AdvRoom_getdirections()
AdvRoom_dump()
AdvObject(object_str, max_action)
AdvObject_setname(name)
AdvObject_getname()
AdvObject_getfullname()
AdvObject_setimage(image)
AdvObject_getimage()
AdvObject_setflag(value)
AdvObject_getflag()
AdvObject_setsex(value)
AdvObject_getsex()
AdvObject_setroom(room)
AdvObject_getroom()
AdvObject_getisa()
AdvObject_getaction(action)
AdvObject_dump()
Adv(verbs, messages, rooms, objects, images, players, maps)
Adv_dump_data()
Adv_set_option1_priv(frm_sel, idx, name, value)
Adv_set_options_priv(frm_sel, first_idx, objects, list, last_selected_o)
Adv_init_frm(frm, img_idx, delay_sec)
Adv_get_objects(room)
Adv_get_direction_txt(room)
Adv_show_room(player, msg_txt)
Adv_go_direction(dir)
parse_number(str, start_pos)
Adv_do_action2(v1, curr_obj, actstr)
Adv_do_action(v1, o1)
Adv_play_event(event)
Adv_play_events(eventstr)
Adv_play_events_auto(eventstr, delay_sec)
Adv_getsteplist()
Adv_set_player(idx)
Adv_refresh_view(txt)
Adv_show_maps()
Funktionen
mynumformat1(num, clen)
myparseint(str)
Zurück zum Anfang.
Marco Vieth, 19.04.2008 14:53:11
|