2. Wo stehen JavaScript(e)?Im Head: Variable und Funktionen definieren
JavaScript-Bereiche sollten im Programmkopf eingerichtet werden, wenn in ihnen Variable deklariert werden sollen, die innerhalb der Seite gebraucht werden, oder wenn Funktionen definiert werden sollen, die später durch irgendwelche Ereignisse (ausgelöst durch Maus, Tastatur oder einen Timer) abgearbeitet werden sollen. Der Aufruf hat immer die gleiche Struktur: Es wird im öffnenden <script>-Tag mit language="JavaScript" die Scriptsprache angegeben (weil es noch andere gibt!). Die Schreibung von javascript darf variieren. Es dürfen auch JavaScript-Versionsnummern angegeben werden, worauf ich hier generell verzichte. Eigentlich soll diese Angabe in HTML 4.0 anders lauten, nämlich <script type="text/javascript">, und das darf man gerne schreiben. Bloß ältere Browser flippen dann evtl. aus. Eine Kommentarklammer um den eigentlichen Scriptinhalt soll diejenigen Browser von Fehlermeldungen abhalten, die JavaScript nicht können. Da deren Zahl laufend abnimmt, kann diese Kommentarklammer zunehmend entfallen. Dann folgt der Inhalt des Scripts mit seinen Deklarationen, Funktionsdefinitionen und ggf. auch Aufrufen. Hier ist ein Deklarationsbeispiel und eine Funktionsdefinition als Beispiel aufgeführt:
<head> ... <title>Test</title> <script language="JavaScript"> <!-- var wo = "in Wildau!"; function ausruf(wo) { alert("Ich studiere " + wo); } //--> </script></head>
Im Body: Alles ist möglich
Der gleiche Aufruf, der oben im head erfolgte, könnte auch im body-Teil erfolgen. Einziger Nachteil: Er wird später gelesen. Definitionen sind natürlich erst dann wirksam, wenn sie gelesen worden sind. Aus Gründen der Übersichtlichkeit bevorzugt man gewöhnlich den Kopf-Teil. Wenn allerdings im Script direkte Aktionen vorgesehen sind, wie z.B. Schreiben ins Dokument, dann muß es dort stehen, wo die Aktion stattfinden soll.
<script language="JavaScript"> jetzt=new Date(); ausgabe="Heute ist "+ jetzt.toLocaleString(); document.write(ausgabe.bold());</script>
Hier passiert's:Heute ist Thu Jan 31 17:23:10 2013
In HTML-Tags: Im Head definierte Funktion aufrufen
Der Aufruf von JavaScript kann auch innerhalb von HTML-Tags erfolgen. Dies geschieht meistens, um vordefiniert JavaScript-Funktionen aufzurufen. Die Aufrufe werden gewöhnlich durch Ereignisse (auf gut deutsch also "Events") ausgelöst. Ereignisse werden durch JavaScript-Attribute im HTML-Tag aufgefangen. Hier ist es das Klicken eines Buttons.
<form> <input type=button value="Wo studierst Du?" onClick="ausruf(wo);"></form>
JavaScript – Seite 1 von 27
In HTML-Tags: Vordefinierte Funktion aufrufenDer Aufruf von JavaScript kann innerhalb von HTML-Tags erfolgen. Wenn es dabei um vordefinierte JavaScript-Funktionen geht, genügt eine einfache Angabe über den Script-Typ. Die Aufrufe werden auch hier durch Ereignisse ausgelöst. Diese werden durch die speziellen JavaScript-Attribute im Tag aufgefangen. Hier ist es die Anwahl eines Links.
<a href="javascript:alert('Ihre History-Liste enthält ' + history.length + ' Einträge');"> Sündenregister</a>
Als Beispiel: Wie lang ist mein Sündenregister?
Es hat nicht funktioniert? Dann nutzen Sie wahrscheinliche Netscape 6! Es liegt am history-Aufruf, der in dieser Form von Netscape 6 nicht unterstützt wird. Die reine Textanzeige funktioniert dagegen: Test it
Separate Datei: JavaScript-Code laden
Umfangreiche Javascript-Dateien lassen sich beim Seitenstart laden. Vorteil ist, daß sie mehrfach verwendbar sind. Die übliche Kennung ist .js, der Aufruf erfolgt wie unten angegeben im head, wo sonst die JavaScript-Definitionen stünden. Der Aufruf ist an sich klar. Unter "type" ist der Mime-Typ zu verstehen, der dem Server wie dem Zielbrowser bekannt sein muß:
<script language="JavaScript" src="/meinscript.js" type="text/javascript"></script>
Ein Vorteil zu ladender JavaScript-Dateien ist, daß sie nur schwer für den Nutzer einzusehen sind. Das direkte Laden zur Einsichtnahme wird vom Navigator und vom IExplorer ab Nummer 5 verweigert.
Kommentare helfen verstehen, was geschehen soll
Es gibt im Zusammenhang mit JavaScript drei Sorten von Kommentaren.
Wie schon erwähnt, gibt es HTML-Kommentare, die dabei helfen, JavaScripte zu verstecken, wenn der Browser einfach zu ungebildet ist. Schreibung ist:
<!-- Alle Texte, die HTML überlesen soll//-->
Einzeilige Kommentare in Javascript, also innerhalb des <script>-Tags schreiben sich so
// dies ist eine Zeile, die von Javascript überlesen wird!
Mehrzeilige Kommentare in Javascript werden wie in C geklammert:
/* ein mehrzeiliger Kommentar kann so lang sein, wie er will, Javascript überliest ihn auch*/
JavaScript – Seite 2 von 27
3. Datentypen und VariablendeklarationWohin mit den Informationen?
Wenn Informationen aller Art gesammelt und verarbeitet werden sollen, müssen sie irgendwo im Rechner gespeichert werden und ggf. wiederholt abfragbar sein, also eine Adresse oder einen Namen haben. Letztere nennt man -etwas grob ausgedrückt- eine Variable. Davon gibt es Typen, nämlich z.B. ganz sparsame (Ja/Nein) oder ganz aufwendige (Goethes gesammelte Werke). Welche Typen es gibt und wie man mit ihnen umgeht, wird auf dieser Seite beschrieben.
Datentypen
Es gibt vier "normale" Datentypen. JavaScript gilt als "untypisiert", man kann alle Daten ohne Deklaration und Zuordnung zu einem Typ verwenden. JavaScript wandelt je nach Notwendigkeit Daten in den jeweils erforderlichen Typ um.
Datentyp Bedeutung Wertebereich
boolean Boolscher Wert, Wahrheitswert
False und True
number Zahl, 8 Byte lange Fließkommazahl nach IEEE-Standard
von +/-2.2250738585072014*10-308 bis +/-1.7976931348623157*10308;dezimal: Natürliche und rationale Zahlen, Exponentialschreibweise -> 3 4.66 3.6E-21
oktal: Ganzzahlen, Kennzeichen ist führende Null -> 023 hexadezimal: Ganzzahlen mit führendem 0X bzw. 0x -> 0xFF
Zum Typ number gibt es einige spezielle Werte
Infinity, -Infinity
"unendlich", "unendlich kleine", Zahl > als größte darstellbare bzw. < als kleinste darstellbare Zahl
NaN"Not a Number", undefiniertes Ergebnis einer Rechnung
string Zeichenkette
undefined Variable ohne Wertzuweisung
null
Zu den Datentypen gehören ungewohnterweise aber auch:
JavaScript – Seite 3 von 27
function können wie normale Variable in arrays gespeichert, als Parameter anderer Funktionen aufgerufen, als Eigenschaften beliebigen Objekten zugewiesen werden.
Beispiel:funktionsname(variable1,variable2,..);lies(eintrag,ergebnis);
object Ansammlung benannter Daten (= Eigenschaften) zu denen auch Funktionen gehören, die dann Methoden genannt werden. Zugriff erfolgt durch Nennung des Objektnamens, gefolgt von Punkt und Eigenschafts- oder Methodennamen
oderin der Form "assoziativer Arrays"
Eigenschaft:picture.height, picture.width;picture["height"], picture["width"];
Methode:document.write("*");
array
sind Datenfelder, die über natürliche Zahlen (den Index) indiziert werden
forms[0], forms[1];
Variable erzeugen
Variable sollten -aber müssen nicht- vor ihrer Verwendung deklariert werden. Die Deklaration reserviert Speicherplatz.
JavaScript – Seite 4 von 27
Es ist bei der Deklaration nicht nötig, den Datentyp festzulegen. Letzteres geschieht allein durch Zuweisung eines Wertes. Auch alleinige Zuweisung reicht zur Deklaration aus.
Gleichzeitige Deklaration und Zuweisung heißt Initialisierung
Variablendeklaration: var Variablenname1[, Variablenname2[, ...]];
var a, x_wert, y_wert, name;
Wertzuweisung: Variablenname = Wert;
a = false; ODER x_wert = 3.654; ODER name = "Meyer"; ODER name = 'Meyer';
Initialisierung: var Variablenname = Wert;
var Kohle = 1E6; ODER var Licht = true; ODER var stadt = "Plauen";
Wo gelten Variable? Variable gelten auf einer ganzen Seite, global. Wird innerhalb einer Funktionsdefinition ein Variablenname erneut verwendet, dann
kann durch Deklaration mit var innerhalb der Funktion erreicht werden, daß die zweite Variable lokal, d.h. von der globalen unabhängig gilt.
Variablennamen können beliebig lang werden, dürfen aber kein Leerzeichen enthalten bei Variablennamen wird zwischen Groß- und Kleinbuchstaben unterschieden! Variablennamen dürfen keine Schlüsselwörter von JavaScript sein
Arrays anlegen
Arrays oder Felder von Variablen werden wie folgt gehandhabt:
Deklaration: var ArrayName = new Array (Größe);
var person = new Array(100);
Wertzuweisung: ArrayName[Nummer] = Wert;
person[0] = "Peter"; person[1]= "Manfred"; person[2]="Karl"; .....
Initialisierung: var Variablenname = new Array (Wert1, Wert2, .. );
var name = new Array
("Müller","Lehmann","Schulze",..); Ergebnis: name[1] hat den Wert Lehmann.
Erweiterung: var berg = new Array (5); berg[27] = "Mount Everest"
Arrays zählen immer ab 0. Sie müssen nicht lückenlos belegt sein. Arrays können nachträglich erweitert, aber nicht verkleinert werden. Arrays können nur eine Dimension besitzen. Allerdings kann für einzelne oder alle
Arraykomponenten ein jeweils neues Array angelegt werden. Die Schachtelungstiefe ist nicht beschränkt.
Der Zugriff auf erfolgt dann mit: ArrayName[Dim1_Nummer],[Dim2_Nummer]
JavaScript – Seite 5 von 27
Arrays können, anders als in "klassischen" Programmiersprachen Daten unterschiedlicher Typen enthalten. Deshalb kann JavaScript komplette Datenbankdateien innerhalb eines Arrays handhaben.
Achtung Falle!Wenn ausdrücklich JavaScript 1.2 deklariert ist, hat die einfache Deklaration name = new Array(zahl); eine andere Bedeutung als bei JavaScript. Hier wird ein Array angelegt, dessen erstes Element die Nummer zahl erhält.
4. Bildschirm- und Fensterdaten ermittelnJavaScript ist dazu bestimmt, die Seitengestaltung zu unterstützen. HTML als Beschreibungssprache wurde geschaffen, weil die fertige Präsentation unabhängig von der Bildschirmauflösung funktionieren soll. Mit HTML allein kann man das Wort Gestaltung getrost vergessen. JavaScript schafft insofern Abhilfe, als es die Bildschirmdaten des Nutzers ermitteln und innerhalb der Präsentation Anpassungsmaßnahmen organisieren kann. Dafür gibt es zunächst einige Eigenschaften des Objektes "screen", die man zwar nicht setzen, wohl aber lesen und berücksichtigen kann. Weitere Möglichkeiten bietet das Objekt "window", dessen Möglichkeiten zur Bestimmung des Darstellungsbereiches auf dieser Seite ebenfalls beschrieben werden.
Bildschirmdaten ermitteln, das Objekt screen
Hier die Übersicht der Eigenschaften von screen. Die rechte Spalte zeigt die aktuellen Werte Ihres Bildschirms an:
availHeight verfügbare Höhe, also Vollbild minus Taskbar966 Pixel
availLeft Abstand der linken Kante des verfügbaren Schirmbereiches vom Rand in Pixeln, also Breite einer links angeordneten Taskbar
0 Pixel
availTop Abstand der oberen Kante des verfügbaren Schirmbereiches vom Rand in Pixeln, also Breite einer oben liegenden Taskbar
22 Pixel
availWidth verfügbare Breite, also Vollbild minus Taskbar1680 Pixel
colorDepthFarbtiefenzahl in Bits, die zur Darstellung der Farbe eines Pixels verwendet wird. Kann auch als undefined (Netscape) oder null (MS Internet Explorer) wiedergegeben werden.
24 Bit
height Höhe des kompletten Anzeigebereiches also z.B. 480, 600 oder 768 Pixel
1050 Pixel
pixelDepth Farbauflösung 24 Bit
width Breite des kompletten Anzeigebereiches also z.B. 640, 800 oder 1024 Pixel
1680 Pixel
Wie und wann ermittelt man diese Daten? Es gibt mehrere Möglichkeiten und es hängt davon ab, wozu man sie nutzen möchte.
Da sich die Daten während einer Sitzung kaum ändern werden, kann man diejenigen, die man benötigt, bei Laden der Startseite ermitteln und, soweit sie nicht sogleich zu Konsequenzen führen, einer Variablen zuweisen.
JavaScript – Seite 6 von 27
<script language="JavaScript"> var aufloes = screen.width + "*" + screen.height; var farbtiefe = screen.pixelDepth; ...</script>
Will man sie einfach nur anzeigen, wie ich es in der Tabelle oben getan habe, dann lautet der Code innerhalb jeder Tabellenzelle ähnlich, wie der der letzten Zelle der ersten Zeile:
<td> <script language="JavaScript"> document.write(screen.availHeight); </script> Pixel </td>
Die Daten können aber auch zu Konsequenzen führen. Etwa zu freundlichen Hinweisen, wenn die Seitendarstellung behindert oder die Farbtiefe zu gering ist:
<script language="JavaScript"> var verschwendung = Math.round(1000-(screen.availHeight*screen.availWidth)/(screen.height*screen.width)*1000)/10; if (verschwendung>1)alert("Sie verschwenden " + verschwendung + "% des kostbaren Platzes auf dem Bildschirm!");
if (screen.pixelDepth<32)alert("Sie werden von meinen Bildern enttäuscht sein,\nwenn sie nicht mindestens 256 Farben eingestellt haben!");</script>
oder schließlich die wichtige Reaktion auf die Fenstergröße. Sie erzeugen etwa einen Satz durchgestylter Startseiten für drei verschiedene Bildbreiten mit den Namen welcome.htm (für 640 Pixel), st_800.htm und st_1024.htm. In den Kopf der Seite welcome.htm schreiben Sie nun:
<script language="JavaScript"> if(screen.width > 800) window.location.href = "st_1024.htm"; if (screen.width > 640) window.location.href = "st_800.htm"; </script>
Fensterdaten ermitteln mit dem Objekt window
Das Objekt window ist in der Objekthierarchie von JavaScript das oberste Objekt, denn es ist bildet den Container für alle Anzeigen.Über das Objekt window, das auch mit self anzusprechen ist, können Daten des Dokumentenfensters erfragt werden. Im Zusammenhang mit visible funktioniert das alles nicht beim IExplorer. Deshalb sind in der Tabelle nur solche Abfragen enthalten, die der IExplorer wenigstens ohne Fehlermeldung ignoriert. Dabei fallen eine Reihe an sich interessanter Möglichkeiten weg: menubar, personalbar, scrollbars, statusbar, toolbar. Hier die Tabelle der Daten. Alle werden beim Seitenstart ermittelt und in die rechte Spalte eingetragen. Das ist bei den window-Daten nicht unbedingt sachgemäß. Wenn auf solche bedienabhängigen Daten reagiert werden soll, müssen sie unmittelbar vor ihrer Verwendung bestimmt werden.
defaultStatus Text der Statuszeile
innerHeight Höhe des tatsächlichen Browserfensters 849 Pixel
JavaScript – Seite 7 von 27
innerWidth Breite des tatsächlichen Browserfensters1680 Pixel
name Name des Fensters
outerHeight Höhe des gesamten Fensters 966 Pixel
outerWidth Breite des gesamten Fensters1680 Pixel
pageXOffset Fensterstartposition von links, scrollabhängig, hier wird Position beim Seitenstart angezeigt
Pixel 0
pageYOffset Fensterstartposition von oben, scrollabhängig, hier wird Position beim Seitenstart angezeigt
Pixel 0
status zeigt oder setzt den Inhalt der Statuszeile
5. DatumsfunktionenDas Objekt Date aufrufen
Anders als z.B. das Objekt Math muß das Objekt Date aufgerufen ("eine Instanz erzeugt") werden, bevor Datumsberechnungen mit aktuellen Daten stattfinden können. Beim Aufruf wird das aktuelle Datum mit der Uhrzeit zusammen einer Variablen zugewiesen, deren Name frei wählbar ist, deren Inhalt aber mit dem erfolgten Aufruf festliegt, die Zeit läuft also im Variablenwert nicht weiter. Wenn Datums- bzw. Zeitrechnungen beabsichtigt sind, beginne man das JavaScript mit dem folgenden Eintrag. 'datum' ist hier der Variablenname, er könnte auch 'Xanthippe' heißen:
datum = new Date();
Danach kann auf das Datum zugegriffen werden. Im Kopf dieser Seite ist das aktuelle Datum zu sehen. Die erste Anzeige wurde erreicht, indem nach der Überschrift mit dem <script>-Tag die folgende Codezeile eingefügt wurde:
document.write(datum);
Interessant ist die Schreibweise des Datums, wie sie durch new Date() erzeugt wird. Hier tut jeder Browser im Verein mit dem Betriebssystem, was er will. Die Zeitzonenangabe erinnert daran, daß JavaScript für das Internet erfunden wurde. Die zweite Zeile zeigt das sogenannte lokale Datum. Zu deren Erzeugung wurde eingetragen:
document.write(datum.toLocaleString());
Was da auf Ihrem Browser angezeigt wird, soll von der Ländereinstellung Ihres Rechners abhängen. Aber von welcher?
Methoden zur Datums- und Zeitbestimmung
Datum und Berechnungswerte
getDate() Tag ermitteln 31
JavaScript – Seite 8 von 27
getYear() Jahr ermitteln, ggf. Jahr-1900 113
getFullYear() Jahreszahl komplett ermitteln 2013
getMonth() Monatsnummer ermitteln, 0..11 0
getDay() Wochentagsnummer ermitteln 4
setDate() Tag setzen, 1... 31 5 / 5
setYear() Jahr setzen, 0..99 oder 19xx etc. 2005 / 105
setMonth() Monat setzen, 0...11 6 / 6
Date.parse(datum)
direkt von Date abzuleiten, Millisekunden zwischen dem 1.1.1970 und datum, als Zeichenkette angegeben, hier 1.1.2000
bis: 1 Jan 2000 00:00:00 GMT / 946684800000
toGMTString() Zeitpunkt in GMT-Format konvertierenThu, 31 Jan 2013 16:31:05 GMT
toLocaleString() Zeitpunkt in lokales Format konvertierenThu Jan 31 17:31:05 2013
Date.UTC(y,m,d,h,min,s)
direkt von Date abzuleiten, GMT-Zeit seit dem 1.1.1970 ermittelt , einzugeben Zahlwerte für year, etc., Eingabe des Monats abweichend mit 0... 11! gleiches Datum wie bei parse!
bis: 2000,1,1,0,0,0 / 946684800000
Uhrzeit
getTime() Zeitpunkt ermitteln, ms seit dem 1.1.1970 1359649865737
getHours() Stundenteil der Uhrzeit ermitteln 17
getMinutes() Minutenteil der Uhrzeit ermitteln 31
getSeconds() Sekundenteil der Uhrzeit ermitteln 5
getTimezoneOffset()
Zeitzonenabweichung der Lokalzeit gegen GMT (Greenwich Mean Time) in Minuten ermitteln
-60
setTime() Uhrzeit setzen123456 / 123456
setHours() Stunden der Uhrzeit setzen 11 / 11
setMinutes() Minuten der Uhrzeit setzen 11 / 11
setSeconds() Sekunden der Uhrzeit setzen 11 / 11
Die Aufrufe, die in beiden Tabellen die rechte Spalte mit aktuellen Werten füllen, sollen kurz erläutert werden. Die get-Methoden gelten alle für den Aufrufzeitpunkt der Seite. Diese Aufrufe lauten (am Beispiel des ersten gezeigt):
JavaScript – Seite 9 von 27
<script>document.writeln(datum.getDate())</script>
Die set-Methoden werden auf eine Instanz des Date-Objektes angewandt, die nicht etwa die Systemzeit des Rechners verstellt, sondern dazu dient, Zeitdifferenzen berechnen zu können. Damit löst man so wichtige Fragen, wie z. B. die nach dem Zeitabstand zwischen Seitenaufruf und dem Jahrtausendwechsel. Um die Eingabebedingungen zu testen, sind Eingaben und Ergebniswerte gegeneinander gestellt. Die Aufrufe sind entsprechend modifiziert:
<script>neudat.setDate(5);document.write("5 / " + neudat.getDate());</script>
Datumsberechnungen
Wie lange schon?
Wie lange leben wir nun im 3. Jahrtausend? Eine gültige Anzeige müßte dauernd erneuert werden. Deshalb bestimmen wir die Zeit beim Tastendruck:
Was, Sie wundern sich? Demnach gehören Sie auch zu den Leuten, die beim Zählen ihrer Finger mit "0" anfangen und erstaunt sind, wenn ihnen einer fehlt.Die Funktion für die letzte Berechnung will ich ihnen ruhig hier zeigen:
<script language=JavaScript> function Diff() { jetzt =new Date(); gesamt=Date.parse(jetzt.toGMTString())-Date.parse("1 Jan 2001 00:00:00
GMT"); tage=Math.floor(gesamt/(24*3600*1000)); stunden=Math.floor((gesamt-24*3600*1000*tage)/(3600*1000));
minuten=Math.floor((gesamt-24*3600*1000*tage-3600*1000*stunden)/(60*1000)); sekunden=Math.round((gesamt-24*3600*1000*tage-3600*1000*stunden-
60*1000*minuten)/1000); alert("Es sind bereits "+tage+" Tage, "+stunden+ " Stunden, "+minuten+"
Minuten und "+sekunden+ " Sekunden\nim neuen Jahrtausend vergangen!"); } </script>
Zur Erläuterung: Bei der Bestimmung der Gesamtzeit (gesamt in ms) wird die Umwandlung in GMT verlangt. Ein Test ergab allerdings, daß JavaScript ohnehin mit GMT rechnet. Das ist deshalb von Bedeutung, weil die lokale Zeit ja mit Sommerzeit-Problemen behaftet ist. Komisch ist allerdings, daß die Anzeige der frischen Date-Instanz (erste Zeile dieser Seite) bereits in lokaler Zeit erfolgt.
Zeitberechnung
Wie lange ist der Nutzer schon auf der Seite?
Es ist evtl. nützlich, aber wiederum nicht unbedingt ratsam, dem Leser anzuzeigen, wie lange er auf meiner Seite weilt. Es geht, wenn man es denn will, um die Berechnung der Zeitdifferenz zwischen Öffnen der Seite und dem laufenden Zeitpunkt.Im Head-Teil der Seite, bei Frame-Strukturen im Index- oder Menüteil, wäre einzutragen:
JavaScript – Seite 10 von 27
<script language=JavaScript> var start = new Date(); function zeitzeigen() { nun = new Date(); zeit=(nun.getTime() - start.getTime())/1000; stunden=Math.floor(zeit/3600); minuten=Math.floor((zeit-3600*stunden)/60); sekunden=Math.round(zeit-3600*stunden-60*minuten); window.document.zeitformular.zeitbox.value = stunden + " h " + minuten +"
min " + sekunden + " s"; window.setTimeout('zeitzeigen()',1000);
} window.setTimeout('zeitzeigen()',1000);</script>
Kurzer Kommentar. Es wird das Startdatum ermittelt, weil es später als Bezug gebraucht wird. Dann folgt eine Funktionsdefinition. Schließlich wird ein Timer gestartet, der nach einer Sekunde die Funktion aufruft. Diese ermittelt und schreibt nun die abgelaufene Zeit. Wohin? Nuh dah, würde der Sachse sagen und was anderes meinen:
<form name="zeitformular"> Sie sind erst <input size=15 name="zeitbox"> auf dieser Seite!</form>
Nun darf man ja mal über Umständlichkeiten nachdenken. Geht es nicht auch einfacher? Da der Timer im Sekundentakt arbeiten kann, kann der Zähler auch ohne das Datumsobjekt arbeiten. Wie sähe es dann aus? Ganz gut, allerdings geht die neue Zählung etwas nach. Obwohl die neue Wartezeit sofort am Funktionsbeginn eingeläutet wird, bleibt dieser Zähler zurück. Ein Nutzer, der nur diesen vorfindet, würde das allerdings kaum merken.
<script language=JavaScript>
var stunde=0; var minute=0; var sekunde=1; function zaehle() { window.setTimeout('zaehle()',1000); sekunde++; if (sekunde==60){sekunde=0;minute++;} if (minute==60){minute=0;stunde++;} window.document.zeitformular2.zeitbox2.value = stunde + " h "+minute+"
min " + sekunde + " s"; } window.setTimeout('zaehle()',1000); </script>
6. Eingaben des NutzersText-Eingabe in eine Prompt-Box
JavaScript – Seite 11 von 27
Eine prompt-Box ist ein Dialogfenster, welches ein Eingabefeld, einen OK-Button und einen Abbrechen-Button enthält. Die Box kann mit einem Aufforderungstext und einem vorbelegten Eingabefeld aufgerufen werden, die beide in der Argumentklammer anzugeben sind. Als Ergebnis des Aufrufes erhält man nach Drücken des OK-Buttons den eingegebenen Text; wenn "Abbrechen" gedrückt wird, meldet die Variable Null zurück. Gerade haben Sie, Ramón, eine Prozedur hinter sich, die diese Art der Eingabe nutzt. Der zugehörige Code ist im Head untergebracht und lautet: <script language="JavaScript"> var ergebnistext=prompt("Wie heißen Sie?",""); if(ergebnistext==""||ergebnistext==null) history.back(); else alert("Hallo, "+ ergebnistext);</script>
Sinnvolle(?) Anwendungen dieser Eingabemöglichkeit wären etwa die Personalisierung, also Anrede des Lesers mit dem Namen. Wie sie wahrscheinlich hier oben im Text sehen können, funktioniert das höchst unzureichend. Auch das Erfragen eines Paßworts, das den Seitenzugang auf einen bestimmten Personenkreis beschränkt, hat nur mäßigen Sinn. Mit JavaScript allein läßt sich der richtige Wert nur unzureichend verstecken.
Text-Eingabe in Formularelemente
Formular-Elemente sind aus HTML bekannt. Sie sind für Eingaben bestimmt und ihre Ergebnisse können bei HTML im wesentlichen nur übernommen und etwa per E-Mail an der Seitenautor geschickt werden. Alle können nun mit JavaScript ausgewertet, manipuliert und ihre Ergebnisse überprüft werden. Speziell Texte können in die Typen: 'text' und 'textarea' eingegeben werden. Um ein Formularelement auswerten zu können, muß es adressierbar sein. Dazu gibt es zwei Möglichkeiten.
Mit den Mitteln von HTML kann jedes Formularelement einen eindeutigen Namen erhalten. Der Aufruf eines Elementes in Javascript erfolgt hierarchisch in der Form: document.formularname.elementname
In JavaScript werden alle Formulare und ihre Elemente in speziellen Arrays gespeichert, die in der Reihenfolge des Auftretens im von 0 beginnend durchnumeriert werden. Unabhängig von den Namen kann das erste Formular mit document.form[0], das dritte mit document.form[2] angesprochen werden. Für jedes Formular wird weiterhin ein Array elements[] geführt, in dem die Formularelemente abgelegt sind, wieder in der Reihenfolge ihres Auftretens numeriert.
Eintrag in einem TextfeldDer Text ist mit der Eigenschaft 'value' verknüpft. Ein solcher kann bei Öffnung des Feldes vorgegeben werden, z.B. um den Nutzer aufzufordern. Er kann vom Nutzer ungeändert übernommen oder überschrieben werden. Es folgt eine solche Eingabe, die mit Hilfe einer Funktion "auswert", die zuvor im Head definiert wurde, ausgewertet (was denn sonst?) wird um geeignet zu reagieren, wenn etwa keine Eingabe erfolgte. Der Fortschritt gegen die Möglichkeiten von HTML besteht darin, daß hier nun Texteingaben auf Plausibilität geprüft und ggf. zurückgewiesen werden können (wenn etwa in E-Mail-Adressen kein '@' vorkommt).
<script language="JavaScript"> function auswert() { if (document.form5.namensfeld.value=="Name?") alert("Faulheit wird
JavaScript – Seite 12 von 27
bestraft werden!"); else alert("ok " + document.form5.namensfeld.value + "!"); }</script>
<form name="form5"> <input type=text size=30 name="namensfeld" value="Name?"> <input type=button value="fertig" onClick="auswert()"></form>
Textfeld und Button werden wie üblich angelegt, der Button wertet das Ereignis aus, daß er angeklickt wird.
Eintrag in ein TextareaIm Prinzip genauso erfolgt der Zugriff auf <texarea>. Dieses ist ein eigenes Tag, das geöffnet und geschlossen werden muß und einen Container für den Text bildet. Der Inhalt heißt wieder "value" und kann vom Programm vorgegeben, vom Nutzer verändert und dann vom Programm wieder gelesen werden. <form name="show"> <textarea name="board" cols=30 rows=10 wrap="virtual"></textarea> <input type=button value="fertig" onClick="alert(document.show.board.value)"></form>
Bitte den Lebenslauf eintippen:
Listbox
Die Listbox, auch Listenfeld oder Auswahlfeld genannt, ermöglicht zwar keine direkte Nutzereingabe, sie gehört aber hierher, weil sie die Auswahl unter angebotenen Möglichkeiten bietet. Sie hat in HTML eigene Tags, in Kurzform <select ...><option...></select>. Mit JavaScript gibt es Eingriffsmöglichkeiten, mit denen ein Listenfeld nachträglich manipuliert werden kann.Mit geringem Aufwand und sicherer Funktion in allen Browsern lassen sich platzsparende Menüs oder Stichwortlisten für Suchhilfen anlegen.Hier sollen nur die grundsätzlichen Zugriffsmöglichkeiten kurz aufgelistet werden. Zunächst der HTML-Aufruf, der Voraussetzung für weitere Eingriffe ist:
<form name="list"> <select name="wahl" onChange="auswahl()"> <option>Überschrift <option value="eins">Erster
JavaScript – Seite 13 von 27
<option value="zwei">Zweiter <option value="drei">Dritter <option value="vier">Vierter <option value="fünf">Fünfter </select> </form>
Die Auswertungsfunktion, die hier auswahl() heißt, und nur das Ergebnis anzeigt, bedarf genauerer Betrachtung. Hier lautet sie
function auswahl(){ num=window.document.list.wahl.selectedIndex; if(num>0)alert(window.document.list.wahl.options[num].value);}
Man sieht, der Zugriff erfolgte unter Nutzung meiner Namen für Formular (=list) und Auswahlfeld (=wahl). Nur bei den Options, die ja auch eigene Namen besitzen, wurde anders verfahren. Alle Seitenelemente sind über innere Arrays zugänglich, hier wären das forms[i], elements[j], options[k], sofern man nur die passenden Zählerwerte kennt.Mögliche Zugriffe auf Auswahlfelder, bei denen Werte erfragt oder gesetzt werden sind:
defaultSelected Vorauswahl einer Option erfragen oder setzen (hier Option 0) falselength Zahl der Options 6selected ist eine Option gewählt? Hier wird Option 0 abgefragt trueselectedIndex Nummer der gewählten Option 0text Text der gewählten Option (hier Option 4) Fünftervalue Wert (=value) der gewählten Option (hier Option 4) fünf
Da bei allen Zugriffen auch Werte gesetzt werden können, hat man die Möglichkeit, Auswahlfelder nachträglich, etwa in Abhängigkeit von Formulareingaben oder dem Browser des Nutzers zu verändern.Die Veränderung, Löschung oder Ergänzung von Options ist möglich. Einzelheiten entnehme man dem folgenden Beispielcode:
<script> window.document.list.wahl.options[3].text="Hier ist jetzt der Dritte!"; window.document.list.wahl.options[2]=null; window.document.list.wahl.options[5]=new Option; window.document.list.wahl.options[5].text="Sechster";</script>
Dieses Script wird unmittelbar nach Aufbau des obigen Auswahlfeldes aufgerufen und bewirkt Veränderungen, die in der Tabelle, die erst danach angelegt wird, für scheinbare Unstimmigkeiten sorgen.
JavaScript – Seite 14 von 27
7. EreignisseEvents oder Ereignisse (z.B. ein Mausklick) sind in Windows (aber auch anderen Betriebssystemen) Anlaß für den Rechner, seine ständige Warterei zu unterbrechen und tätig zu werden. Ereignisse bedürfen einer Routine, die angibt, was zu geschehen hat. Diese Dinger heißen Handler (von engl. handle), genau also Eventhandler. Sie bilden die wichtigste Verbindung zu HTML, denn sie sind als Attribute in HTML-Tags zugelassen.
Ereignisse in HTML registrieren
Zunächst eine Übersicht.
Event Bedeutung Beispiel wo erlaubt
onAbort
auf dem Klo (Verzeihung, fiel mir nur so ein), bei Abbruch des Ladevorganges einer Grafik
<img src="/meinbild.jpg" width=600 height=480 onAbort=alert("OK, ich würde auch nicht so lang warten!")>
<img>
onBlur
beim Verlassen (Verlust des Focus) speziell von Tabellenelementen
siehe das erste Beispiel
<body>, <frameset>, <input>, <layer>, <select>, <textarea>
onChange
bei erfolgter Änderung speziell in Tabellenelementen
siehe das 2. Beispiel!<input>, <select>, <textarea>
onClick
beim Anklicken von Links und von Texteingabefeldern
<form><input type=button value="hier" onClick="alert('klappt!')"></form>
<a>, <area>,<input>, <textarea>
onDblClick
bei doppeltem Anklicken
<form><input type=button value="hier" onDblClick="alert('klappt auch!')"></form>
<a>, <area>,<input>, <textarea>
onError im Fehlerfall <img src="/meinbild.png" onError="alert('Ladeprob
<img>
JavaScript – Seite 15 von 27
lem, kann Ihr Browser png-Grafik darstellen?')">
onFocusbeim Erhalt des Eingabefocus
vgl. Beispiel 3
<body>, <frame>, <input>, <layer>, <select>, <textarea>
onLoad beim Laden der Datei
z.B. Start periodisch aufzurufender Funktionen <body onLoad="uhr()">, Aufruf von Paßwortabfragen oder speziellen Navigationsfenstern
<frameset>, <body>
onMouseDown
Beim Drücken der Maus
vgl. Beispiel 4 <a>, <area>
onMouseOut
beim Verlassen des Elements mit der Maus
vgl. Beispiel 4 <a>, <area>
onMouseOver
beim Überfahren des Elements mit der Maus
vgl. Beispiel 4 <a>, <area>
onMouseUp
bei losgelassener Maustaste
vgl. Beispiel 4 <a>, <area>
onReset
beim Zurücksetzen des Formulars
vgl. Beispiel 5 <form>
onSelectbeim Selektieren von Text
<input>,<textarea>
onSubmit
beim Absenden des Formulars
Beispiel dazu, dort wird ein "submit"-Button mit onClick ausgewertet, onSubmit hätte die gleiche Wirkung
<form>
onUnload
beim Verlassen der Datei
<framest>, <body>
JavaScript – Seite 16 von 27
Ereignisse simulieren und das Event-Objekt bedürfen noch einiger Worte:
Anwendungsbeispiele
Testung einer Tabelleneingabe (hier nur auf Länge des Eintrags!) Funktionsdefinition im Seitenkopf: <script language=JavaScript> function prüfe(wort) { if(wort.length<3) { alert("Ich kenne keine Stadt mit so kurzem Namen!\nErbitte richtige Eingabe!"); document.adresse.stadt.focus(); } }</script>
Formular mit Funktionsaufruf: <form name="adresse"> ... <input type=text size=15 name="stadt" onBlur=prüfe(this.value)> ...</form>
Bitte einen Städtenamen eingeben:
Achtung: Wenn Sie hier hängen bleiben, dann den Finger auf eine Taste legen und solange die alert-Box-wegklicken, bis Sie nicht mehr erscheint. Der reguläre Abbruch erfolgt innerhalb der Framestruktur nicht! Bisher kenne ich keinen Grund dafür!
Texteingabe in Textarea<form>Bitte Rechtschreibung korrigieren!<br> <textarea name="ich" rows=3 cols=10 wrap="physical" onChange=alert("... so ist es besser!")>Isch binn aihn Stuhdänd! </textarea> <input type=button value="fertig"></form>
Bitte Rechtschreibung korrigieren!
Focus-Ereignis nutzen<form>Beginnen Sie mit dem Eintrag! <input size=30 value="Ihren Namen bitte!" onFocus="this.value=''"><br> </form>
Beginnen Sie mit dem Eintrag!
Grafik unter der Maus verändern<a href="/jereignis#kugel" onMouseOver="document.bild.src='bilder/k_blau.gif'"
JavaScript – Seite 17 von 27
onMouseOut="document.bild.src='bilder/k_rot.gif'" onMouseDown="document.bild.src='bilder/k_gruen.gif'" onMouseUp="document.bild.src='bilder/k_gelb.gif'"> < img src="/bilder/k_gruen.gif" name="bild" alt="Kugel ändere dich!" border=0 height=37 width=39></a>
Sicherheitsabfrage vor Reset<form onReset="return confirm('Wirklich den Eintrag löschen?')"> <textarea cols=10 rows=5 wrap=virtual>Hier jede Menge Text!</textarea><br> <input type=reset></form>
8. Historyoder: "Wo war ich gewesen?"
history: Allgemeines zur Verwendung
Ein Tochterobjekt von "window" heißt "history". Es ermöglicht den Zugriff auf die interne Liste der in einem bestimmten Fenster angezeigten Seiten. Das bedeutet deshalb nicht notwendig, alle in einer Sitzung besuchten Seiten. Und noch viel weniger die in den Browsern zugängliche History-Liste. Diese ist bei Netscape über die Menübefehle "Communicator/Extras/History" oder im IExplorer mit "Ansicht/Explorerleiste/Verlauf" einzusehen. Wozu ist es gut? Man kann innerhalb der eigenen Seite bei Mißlingen eines Ladevorganges die vorher angezeigte Seite zurückrufen, wenn es klappt. Allerdings ist die Handhabung je nach JavaScript-Version leicht unterschiedlich. Seinen Sie deshalb nicht traurig, wenn etwas nicht funktioniert.
Eigenschaften und Methoden
Jedes Fenster hat seine eigene Liste. Deshalb muß der Fenstername mit angegeben werden.
back()Zeigt die zuletzt besuchte Seite wieder an
<a href="javascript:self.history.back()">zurück im Frame</a><a href="javascript:top.history.back()">zurück zur Seite vor dem Frame</a>
forward() Zeigt die Folgeseite, wenn zuvor in der Liste zurück
<a href="javascript:self.history.forward()">wieder vor</a>
JavaScript – Seite 18 von 27
gesprungen wurde, kann leider hier nicht sinnvoll getestet werden!
go()
Springt in der History-Liste vorwärts oder rückwärts. Parameter ist die Platzdifferenz
<a href="javascript:self.history.go(-3)">3 Seiten zurück (im Kurs)</a>
length
Speichert die Länge der History-Liste für ein Fenster.
<a href="javascript:alert(self.history.length)">Anzahl
besuchter Seiten</a>:Anzahl besuchter Seiten
Wenn die History-Liste mehrere Einträge besitzt, dann lohnt der folgende lehrreiche Test.
<script language=JavaScript>function blaettern() { gesamt=history.length; history.go(-gesamt+1);
for ( i = 0; i < gesamt; i++) {history.forward();} }</script>
<form> <input type=button value="Test" onClick="blaettern()"></form>
Leider funktioniert der Test nicht. Grund: Der Rücksprung innerhalb des Fensters löscht die Seite, die das Blättern veranlaßt. Blättern kann man nur, wenn es in einer zweiten Seite geschieht, die Rückschau erfordert also ein zweites Fenster.
9. Cookies...?Ein Cookie (amer. = Keks) ist eine Datei, die JavaScript auf den Anwenderrechner schreiben kann. Wohin, bestimmt der Browser des Anwenders. Cookies sind in ihrem Umfang begrenzt und können nur Variablenwerte speichern. Ausführbaren Code, der irgendwelchen Unsinn anstellen könnte, können sie nicht enthalten. Es gibt eine Reihe von sinnvollen Anwendungen. Bei allen Cookie-Anwendungen muß man wissen, daß Browser auf Wunsch die Annahme von Cookies verweigern können. Viele User nutzen diese Möglichkeit.
Cookie schreiben
JavaScript – Seite 19 von 27
Je nach Anlaß wird ein Cookie irgendwo auf einer HTML-Seite aktiviert werden, entweder aus einem Formular heraus oder automatisch beim Anzeigen der Seite.Zum Schreiben oder Lesen dient stets das Schlüsselwort "cookie". Beim Schreiben gehen die Browser unterschiedlich vor. Bei Netscape wird eine Datei "cookies.txt" angelegt, die zeilenweise organisiert ist und neben einem Ablaufdatum Einträge der Art "Bezeichner Wert" enthält. Der Explorer dagegen schreibt eine Textdatei, deren Name aus der URL des Senders gebildet wird. Beide registrieren nicht den Namen der aufrufenden Seite sondern den des Ordners, in dem sie sich befinden.Es ist empfehlenswert, die Routine zum Schreiben eines Cookies als JavaScript-Funktion im Head zu definieren.Der Code enthält hier im Beispiel einen Werteintrag und denjenigen der Ablaufzeit. Anzugeben ist mit "Dauer" die Gültigkeitsdauer in Tagen:
<script language="JavaScript"> function CookieSetz(Bezeichner,Wert,Dauer) { jetzt=new Date(); Auszeit=new Date(jetzt.getTime()+Dauer*86400000); document.cookie=Bezeichner+"="+Wert+";expires="+Auszeit.toGMTString()+";"; }</script>
Wenn beim Drücken der Taste nichts geschieht, überprüfen Sie bitte die Sicherheitseinstellungen Ihres Browsers. Cookies müssen natürlich (wenigstens zum Testen) "akzeptiert" werden.
Cookie lesen
Die folgende Funktion liest ein Cookie. Wenn von der Seite aus schon ein Cookie geschrieben wurde, wird dessen Wert ermittelt. Wenn kein Cookie geschrieben wurde, ist der Rückgabewert leer.
Mit der Abfrage if(document.cookie) ermittelt die Funktion, ob bereits ein Cookie vorhanden ist. Die Ermittlung von Wertstart und Wertende im ersten Codebeispiel sichert, daß nur der Wert, aber nicht der Bezeichner zurückgemeldet wird. Diese Auswahl kann aber genausogut am ausgelesenen Wert des kompletten Cookies geschehen, siehe 2. Codevorschlag.
<script language="JavaScript"> function CookieLesen() { Wert = ""; if(document.cookie) { Wertstart = document.cookie.indexOf("=") + 1; Wertende = document.cookie.indexOf(";"); if(Wertende == -1) Wertende = document.cookie.length; Wert = document.cookie.substring(Wertstart,Wertende); } return Wert; }</script>
<script language="JavaScript"> function CookieLesen() { Wert = ""; if(document.cookie) { Wert = document.cookie; Wert = Wert.slice(Wert.indexOf("=")+1,Wert.length); } return Wert;
JavaScript – Seite 20 von 27
}</script>
Cookies nutzen
Cookies können genutzt werden, um einen Zähler zu speichern, der die Zugriffe eines Nutzers zählt. Genauer ausgedrückt: Wann immer Horst Meier auf meine Seite zugreift, lese ich das von mir früher auf seinem Rechner gesetzte Cookie, dort steht ein Zahlenwert, den ich um 1 erhöhe und dann wieder schreibe.
Die Zählung allein macht es nicht, oft werden Cookies von kommerziellen Anbietern genutzt, um z.B. eine beim ersten Besuch erfolgte Befragung des Nutzers (Z.B. Kreditkartennummer!) beim zweiten oder weiteren Besuchen zu umgehen.
Cookies bieten eine Möglichkeit, Parameterwerte von Seite zu Seite eines Anbieters zu übergeben. Ein denkbarer Fall wäre, daß auf einer Startseite CSS-Dateien zur Auswahl gestellt werden. Auf die gewählte Datei, deren Name in ein Cookie geschrieben worden ist, kann anschließend die gesamte Präsentation zugreifen. Wie es funktioniert?
Erst das Cookie setzen. Das kann geschehen in einem Formular, das eine Auswahl zwischen Gestaltungsstilen anbietet. In das Cookie wird der Name der ausgewählten CSS-Datei (inklusive Pfad) geschrieben. Soweit kein Problem. Dann wird die nächste Seite der Präsentation aufgerufen. Sie erhält im head-Teil, ebenso wie alle weiteren zur Präsentation gehörigen Seiten, den folgenden Eintrag:
<script language="JavaScript"> var Wert = ""; if(document.cookie) { Wert = document.cookie; Wert = Wert.slice(Wert.indexOf("=")+1,Wert.length); } document.write("<link rel=stylesheet type='text/css' href='" + Wert+"'>" );</script>
Die letzte Zeile erzeugt den Ladebefehl in HTML, der noch innerhalb des <head>-Bereiches stehen muß, damit er berücksichtigt wird.
10. Alle Arten von Rechenzeichen Arithmetische Operatoren, auch Rechenzeichen genannt
+, -, *, / wie immer
% Modulo, Divisionsrest
Erklärungen sind nötig zur
Modulo-Funktion, sie gibt den Divisionsrest an.
JavaScript – Seite 21 von 27
Zuweisungsoperatoren
Zuweisungen sind die in (fast) allen Programmiersprachen vorkommenden Ausdrücke der Art: a = a + 1. Wäre es eine Gleichung, so folgte, daß nach beiseitiger Subtraktion von a nun 0 = 1 gälte. Das ist nicht mal im Internet wahr. Es ist ein "Zuweisung", die bedeutet: "Lies den Inhalt von a, erhöhe ihn um 1 und schreib ihn auf den Platz von a".Es gibt in JavaScript, herrührend aus der Sprache C einige spezielle Zuweisungsoperatoren.
= kennt mer
+= addiert beide Operanden und weist das Ergebnis dem linken zu
a += b bedeutet a = a + b
++ erhöht Variablenwert um 1, Inkrement, vor- oder nachgestellt verwendbar
++a bedeutet a = a + 1b = a++ bedeutet b = a; a = a + 1
-= subtrahiert rechten vom linken Operanden und weist das Ergebnis dem linken zu
a -= b bedeutet a = a - b
-- verringert Variablenwert um 1, Dekrement, vor- oder nachgestellt verwendbar
--a bedeutet a = a - 1b = a-- bedeutet b = a; a = a - 1
*= multipliziert beide Operanden und weist das Ergebnis dem linken zu
a *= b bedeutet a = a * b
/= dividiert linken durch rechten Operanden und weist das Ergebnis dem linken zu
a /= b bedeutet a = a / b
%= dividiert linken Operanden durch den rechten und weist nicht teilbaren Rest dem linken zu
Es sind Mehrfachzuweisungen erlaubt. Also z.B.: a = b = c = 5; Ein solcher Ausdruck wird von rechts nach links abgearbeitet.
Vergleichsoperatoren
Es können immer nur Variable gleichen Typs miteinander verglichen werden. Vergleichsoperatoren werden im Zusammenhang mit Auswahlfunktionen genutzt. Ihr Ergebnis kann immer nur "true" oder "false" sein.
< kleiner als
<= kleiner gleich
> größer als
>= größer gleich
== gleich
=== strikt gleich (gleicher Wert und Typ)
!= ungleich
!== strikt ungleich (Wert und/oder Typ
JavaScript – Seite 22 von 27
ungleich)
Logische Operatoren
Logische Operatoren werden ebenfalls in Auswahlfunktionen genutzt. Ihr Ergebnis kann immer nur "true" oder "false" sein.
! Negation nicht
&& Konjunktion sowohl als auch
|| Disjunktion entweder ... oder
Bitoperatoren
werden selten benutzt. Sie werden angewandt auf eine 32-Bit Ganzzahldarstellung.
& bitweise Und
| bitweise Oder
^ bitweise Exklusiv Oder
~ bitweise Nicht
<< Linksverschiebung
entspricht einer Multiplikation mit 2
>>
Rechtsverschiebung mit Vorzeichenerweiterung
entspricht einer Division durch 2, Vorzeichenbits werden nachgezogenBeispiel: 8 >> 3 = 1
>>>Rechtsverschiebung mit 0-Füllung
entspricht einer Division durch 2, Ergebnis immer positiv
Verkettungsoperator +
Mit einem einfachen Plus werden Zeichenketten verknüpft. Dabei dürfen sowohl Zeichenketten (in Anführungstrichen) als auch Stringvariable verwendet werden.
Sonstige Operatoren
JavaScript – Seite 23 von 27
Für die Handhabung von Objekten gibt es einige Operatoren, die hier der Vollständigkeit halber mit aufgelistet werden sollen.
delete löscht Objekte, Methoden oder Eigenschaftennamen=new Aarray(25);delete namen;
new erzeugt neues Objekt eines angegebenen Typs heute=new(Date);
this aktuelles Objekt this.length=12;
typeofObjekttyp wird zurückgegeben, mögliche Ergebnisse sind: "number", "string", "boolean", "object", "function", "undefined"
alert(typeof "sehr"), Ergebnis: string
void() Funktion ohne Rückgabewert aufrufen bzw. Rückgabewert verwerfen
11. Mathematische FunktionenWelche Mathematischen Funktionen sind verfügbar?
Mathematische Funktionen sind Methoden eines speziellen, vordefinierten Objektes, des Math-Objekts. Zum Aufruf später, zunächst die Übersicht der zur Verfügung stehenden Funktionen.
abs ( ) Absolutwert
acos ( ) Arcuskosinus
asin ( ) Arcussinus
atan ( ) Arcustangens
ceil ( ) rundet auf nächsthöhere Ganzzahl
cos ( ) Kosinus
exp ( ) Potenz zur Basis e
floor ( ) rundet auf nächstniedrigere Ganzzahl
log ( ) natürlicher Logarithmus
max (x, y) Maximum aus den Werten x, y
min (x, y) Minimum aus den Werten x, y
pow (x, y) errechnet x hoch y
random ( ) Zufallszahl zwischen 0 und 1
round ( ) rundet zur nächsten Ganzzahl
JavaScript – Seite 24 von 27
sin ( ) Sinus
sqrt ( ) Quadratwurzel
tan ( ) Tangens
Problem: Es fehlt eine notwendige mathematische Funktion
Mathematische Funktionen, die in der Liste nicht enthalten sind, können definiert werden. Die Syntax der Definition einer Funktion des frei wählbaren Namens (hier im Beispiel "fktName") lautet :
function fktName (Argumentvariable, ... ) { [Anweisungen unter Verwendung der Argumentvariablen] }
Beispiel: Ich brauche einen Arkuskotangens, es gilt: Arkuskotangens(X) = Atn(X) + 2 * Atn(1).
function acot( x ) { return Math.atan ( x ) + 2 * Math.atan ( 1 ) }
Vordefinierte Konstanten des Math-Objektes
E e, Eulerzahl
LN2 ln (2)
LN10 ln(10)
LOG2E ld(e) (Logarithmus von e auf Basis 2)
LOG10E log(e) (dekadischer Logarithmus von e)
PI 3,14...
SQRT1_2 Wurzel aus 0,5
SQRT2 Wurzel aus 2
Problem: Es fehlt eine Konstante
Die fügt man seiner Seite als globale Variable hinzu. Das geschieht entweder im <script>-Teil des Seitenkopfes etwa mit:
var mein_Vermögen = 1000000000;
oder mit gleicher Syntax zu Beginn der beabsichtigten Rechnung.
Das Objekt Math
JavaScript – Seite 25 von 27
Was ein Objekt ist, weiß jeder. Wenn es in Programmiersprachen auftaucht, will es plötzlich keiner wissen. Dazu später mehr. Das Objekt Math stellt die mathematischen Funktionen bereit. Es besitzt Methoden bzw. Funktionen und Eigenschaften. Anders als z.B. das Objekt Date steht Math immer zur Verfügung, ohne, daß eine Instanz erzeugt wird.Alle mathematischen Funktionsaufrufe verlangen die Angabe des Mutterobjektes Math. Deshalb lauten alle Aufrufe:
x = Math.Eigenschaft; bzw. x = Math.funktion(argument);
12. Arrays, Eigenschaft(en) und FunktionenArray-Eigenschaft(en)
Die Liste ist kurz.
length Nummer des höchsten vorkommenden Index plus 1. Da Arrays Lücken in der Zählung aufweisen können, ist dies nicht die Zahl der Glieder!
Zahl=arrayname.length;
Array-Funktionen
concat() verfügbar ab JavaScript 1.2. Zwei Arrays werden zu einem einzigen zusammengefügt.
a=new Array(1,2,3);b=new Array(4,5,6);
a.concat(b) ergibt in a=(1,2,3,4,5,6)
join() Array-Inhalte werden in Strings umgewandelt und aneinander gehängt. Argument ist ein jeweils einzufügendes Trennzeichen
Zahl=new Array(1,2,"Haus");str=Array.join("~");
ergibt in der Variablen str: 1~2~Haus
reverse() kehrt die Reihenfolge der Einträge eines Arrays um
aus ["Auto","Haus","Boot"] wird ["Boot","Haus","Auto"]
slice() extrahiert einen Abschnitt eines Arrays, von Position bis Position. Wenn bis<0, wird vom Ende her gezählt. Der zweite Parameter kann entfallen, dann wird bis zum Ende ausgeschnitten.
a=new Array(1,2,3,4,5,6);
b=a.slice(2,4) liefert b=(3,4) zurück
sort() sortiert die Glieder eines Arrays. Im Argument kann eine Funktion angegeben werden, die den Sortiervorgang steuert.
a=new Array("Z","h","A","j",9);
a.sort() ergibt in a (9,"A","Z","h","j")
JavaScript – Seite 26 von 27
http://www.kostenlose-javascripts.de/tutorials/tutorials.html
JavaScript – Seite 27 von 27