Sie sind auf Seite 1von 27

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 spter durch irgendwelche Ereignisse (ausgelst 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 drfen auch JavaScript-Versionsnummern angegeben werden, worauf ich hier generell verzichte. Eigentlich soll diese Angabe in HTML 4.0 anders lauten, nmlich <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 knnen. 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 aufgefhrt: <head> ... <title>Test</title> <script language="JavaScript"> <!-var wo = "in Wildau!"; function ausruf(wo) { alert("Ich studiere " + wo); } //--> </script> </head>

Im Body: Alles ist mglich


Der gleiche Aufruf, der oben im head erfolgte, knnte auch im body-Teil erfolgen. Einziger Nachteil: Er wird spter gelesen. Definitionen sind natrlich erst dann wirksam, wenn sie gelesen worden sind. Aus Grnden der bersichtlichkeit bevorzugt man gewhnlich 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 gewhnlich durch Ereignisse (auf gut deutsch also "Events") ausgelst. 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);">

JavaScript Seite 1 von 27

</form>

In HTML-Tags: Vordefinierte Funktion aufrufen


Der Aufruf von JavaScript kann innerhalb von HTML-Tags erfolgen. Wenn es dabei um vordefinierte JavaScriptFunktionen geht, gengt eine einfache Angabe ber den Script-Typ. Die Aufrufe werden auch hier durch Ereignisse ausgelst. Diese werden durch die speziellen JavaScript-Attribute im Tag aufgefangen. Hier ist es die Anwahl eines Links. <a href="javascript:alert('Ihre History-Liste enthlt ' + history.length + ' Eintrge');"> Sndenregister </a> Als Beispiel: Wie lang ist mein Sndenregister? Es hat nicht funktioniert? Dann nutzen Sie wahrscheinliche Netscape 6! Es liegt am history-Aufruf, der in dieser Form von Netscape 6 nicht untersttzt 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 stnden. 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 fr 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 erwhnt, 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! /* ein mehrzeiliger Kommentar kann so lang sein, wie er will, Mehrzeilige Kommentare in Javascript werden wie in C geklammert:

JavaScript Seite 2 von 27

Javascript berliest ihn auch */

3. Datentypen und Variablendeklaration


Wohin mit den Informationen?
Wenn Informationen aller Art gesammelt und verarbeitet werden sollen, mssen sie irgendwo im Rechner gespeichert werden und ggf. wiederholt abfragbar sein, also eine Adresse oder einen Namen haben. Letztere nennt man -etwas grob ausgedrckt- eine Variable. Davon gibt es Typen, nmlich 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
boolean

Bedeutung Boolscher Wert, Wahrheitswert Zahl, 8 Byte lange Fliekommazahl nach IEEEStandard

Wertebereich
False und True

number

von +/-2.2250738585072014*10-308 bis +/-1.7976931348623157*10308; dezimal: Natrliche und rationale Zahlen, Exponentialschreibweise > 3 4.66 3.6E-21 oktal: Ganzzahlen, Kennzeichen ist fhrende Null -> 023 hexadezimal: Ganzzahlen mit fhrendem 0X bzw. 0x -> 0xFF
Zum Typ number gibt es einige spezielle Werte

Infinity, -Infinity

"unendlich", "unendlich kleine", Zahl > als grte darstellbare bzw. < als kleinste darstellbare Zahl "Not a Number", undefiniertes Ergebnis einer Rechnung

NaN

JavaScript Seite 3 von 27

string

Zeichenkette Variable ohne Wertzuweisung


null

undefined

Zu den Datentypen gehren ungewohnterweise aber auch: function

knnen wie normale Variable in arrays gespeichert, als Parameter anderer Funktionen aufgerufen, als Eigenschaften beliebigen Objekten zugewiesen werden. Ansammlung benannter Daten (= Eigenschaften) zu denen auch Funktionen gehren, die dann Methoden genannt werden. Zugriff erfolgt durch Nennung des Objektnamens, gefolgt von Punkt und Eigenschaftsoder Methodennamen oder in der Form "assoziativer Arrays" sind Datenfelder, die ber natrliche Zahlen (den Index) indiziert werden

Beispiel: funktionsname(variable1,variable2,..); lies(eintrag,ergebnis);

object

Eigenschaft:
picture.height, picture.width; picture["height"], picture["width"];

Methode:
document.write("*");

array

forms[0], forms[1];

JavaScript Seite 4 von 27

Variable erzeugen

Variable sollten -aber mssen nicht- vor ihrer Verwendung deklariert werden. Die Deklaration reserviert Speicherplatz. Es ist bei der Deklaration nicht ntig, den Datentyp festzulegen. Letzteres geschieht allein durch Zuweisung eines Wertes. Auch alleinige Zuweisung reicht zur Deklaration aus. Gleichzeitige Deklaration und Zuweisung heit Initialisierung Variablendeklaration:

var Variablenname1[, Variablenname2[, ...]];

var a, x_wert, y_wert, name;

a = false; ODER x_wert = 3.654;

Wertzuweisung:
Variablenname = Wert;

ODER
name = "Meyer"; 'Meyer';

ODER name =

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 unabhngig gilt. Variablennamen knnen beliebig lang werden, drfen aber kein Leerzeichen enthalten bei Variablennamen wird zwischen Gro- und Kleinbuchstaben unterschieden! Variablennamen drfen keine Schlsselwrter von JavaScript sein

Arrays anlegen
Arrays oder Felder von Variablen werden wie folgt gehandhabt:

Deklaration:

var ArrayName = new Array (Gre);

var person = new Array(100);

Wertzuweisung:
ArrayName[Nummer] = Wert;

person[0] = "Peter"; person[1]= "Manfred"; person[2]="Karl"; ..... var name = new Array ("Mller","Lehmann","Schulze",..); Ergebnis: name[1] hat den Wert Lehmann.

Initialisierung:

var Variablenname = new Array (Wert1, Wert2, .. );

Erweiterung:
var berg = new Array (5); berg[27] = "Mount Everest"

Arrays zhlen immer ab 0. Sie mssen nicht lckenlos belegt sein. Arrays knnen nachtrglich erweitert, aber nicht verkleinert werden. JavaScript Seite 5 von 27

Arrays knnen nur eine Dimension besitzen. Allerdings kann fr einzelne oder alle Arraykomponenten ein jeweils neues Array angelegt werden. Die Schachtelungstiefe ist nicht beschrnkt. Der Zugriff auf erfolgt dann mit: ArrayName[Dim1_Nummer],[Dim2_Nummer] Arrays knnen, anders als in "klassischen" Programmiersprachen Daten unterschiedlicher Typen enthalten. Deshalb kann JavaScript komplette Datenbankdateien innerhalb eines Arrays handhaben.

Achtung Falle! Wenn ausdrcklich 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 erhlt.

4. Bildschirm- und Fensterdaten ermitteln


JavaScript ist dazu bestimmt, die Seitengestaltung zu untersttzen. HTML als Beschreibungssprache wurde geschaffen, weil die fertige Prsentation unabhngig von der Bildschirmauflsung 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 Prsentation Anpassungsmanahmen organisieren kann. Dafr gibt es zunchst einige Eigenschaften des Objektes "screen", die man zwar nicht setzen, wohl aber lesen und bercksichtigen kann. Weitere Mglichkeiten bietet das Objekt "window", dessen Mglichkeiten 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

verfgbare Hhe, also Vollbild minus Taskbar Abstand der linken Kante des verfgbaren Schirmbereiches vom Rand in Pixeln, also Breite einer links angeordneten Taskbar Abstand der oberen Kante des verfgbaren Schirmbereiches vom Rand in Pixeln, also Breite einer oben liegenden Taskbar verfgbare Breite, also Vollbild minus Taskbar Farbtiefenzahl in Bits, die zur Darstellung der Farbe eines Pixels verwendet wird. Kann auch als undefined (Netscape) oder null (MS Internet Explorer) wiedergegeben werden. Hhe des kompletten Anzeigebereiches also z.B. 480, 600 oder 768 Pixel Farbauflsung Breite des kompletten Anzeigebereiches also z.B. 640, 800 oder 1024 Pixel

966 Pixel 0 Pixel 22 Pixel 1680 Pixel 24 Bit 1050 Pixel 24 Bit 1680 Pixel

availLeft

availTop

availWidth

colorDepth

height pixelDepth width

JavaScript Seite 6 von 27

Wie und wann ermittelt man diese Daten? Es gibt mehrere Mglichkeiten und es hngt davon ab, wozu man sie nutzen mchte.

Da sich die Daten whrend einer Sitzung kaum ndern werden, kann man diejenigen, die man bentigt, bei Laden der Startseite ermitteln und, soweit sie nicht sogleich zu Konsequenzen fhren, einer Variablen zuweisen. <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&nbsp; </td> Die Daten knnen aber auch zu Konsequenzen fhren. 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 enttuscht sein,\nwenn sie nicht mindestens 256 Farben eingestellt haben!"); </script> oder schlielich die wichtige Reaktion auf die Fenstergre. Sie erzeugen etwa einen Satz durchgestylter Startseiten fr drei verschiedene Bildbreiten mit den Namen welcome.htm (fr 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 fr alle Anzeigen.ber das Objekt window, das auch mit self anzusprechen ist, knnen 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 Mglichkeiten 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

JavaScript Seite 7 von 27

window-Daten nicht unbedingt sachgem. Wenn auf solche bedienabhngigen Daten reagiert werden soll, mssen sie unmittelbar vor ihrer Verwendung bestimmt werden.

defaultStatus innerHeight

Text der Statuszeile Hhe des tatschlichen Browserfensters Breite des tatschlichen Browserfensters Name des Fensters Hhe des gesamten Fensters Breite des gesamten Fensters Fensterstartposition von links, scrollabhngig, hier wird Position beim Seitenstart angezeigt Fensterstartposition von oben, scrollabhngig, hier wird Position beim Seitenstart angezeigt zeigt oder setzt den Inhalt der Statuszeile 966 Pixel 1680 Pixel Pixel 0 Pixel 0 849 Pixel 1680 Pixel

innerWidth name outerHeight

outerWidth

pageXOffset

pageYOffset status

5. Datumsfunktionen
Das 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 knnen. Beim Aufruf wird das aktuelle Datum mit der Uhrzeit zusammen einer Variablen zugewiesen, deren Name frei whlbar ist, deren Inhalt aber mit dem erfolgten Aufruf festliegt, die Zeit luft 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 knnte auch 'Xanthippe' heien: 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 eingefgt 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 fr das Internet erfunden wurde. Die zweite Zeile zeigt das sogenannte lokale Datum. Zu deren Erzeugung wurde eingetragen:

JavaScript Seite 8 von 27

document.write(datum.toLocaleString()); Was da auf Ihrem Browser angezeigt wird, soll von der Lndereinstellung Ihres Rechners abhngen. Aber von welcher?

Methoden zur Datums- und Zeitbestimmung


Datum und Berechnungswerte
getDate() getYear() getFullYear() getMonth() getDay() setDate() setYear() setMonth()

Tag ermitteln Jahr ermitteln, ggf. Jahr-1900 Jahreszahl komplett ermitteln Monatsnummer ermitteln, 0..11 Wochentagsnummer ermitteln Tag setzen, 1... 31 Jahr setzen, 0..99 oder 19xx etc. Monat setzen, 0...11 direkt von Date abzuleiten, Millisekunden zwischen dem 1.1.1970 und datum, als Zeichenkette angegeben, hier 1.1.2000 Zeitpunkt in GMT-Format konvertieren Zeitpunkt in lokales Format konvertieren direkt von Date abzuleiten, GMT-Zeit seit dem 1.1.1970 ermittelt , einzugeben Zahlwerte fr year, etc., Eingabe des Monats abweichend mit 0... 11! gleiches Datum wie bei parse! Uhrzeit

31 113 2013 0 4 5/5 2005 / 105 6/6 bis: 1 Jan 2000 00:00:00 GMT / 946684800000 Thu, 31 Jan 2013 16:31:05 GMT Thu Jan 31 17:31:05 2013

Date.parse(datum)

toGMTString()

toLocaleString()

Date.UTC(y,m,d,h,min,s)

bis: 2000,1,1,0,0,0 / 946684800000

getTime() getHours() getMinutes() getSeconds() getTimezoneOffset()

Zeitpunkt ermitteln, ms seit dem 1.1.1970 Stundenteil der Uhrzeit ermitteln Minutenteil der Uhrzeit ermitteln Sekundenteil der Uhrzeit ermitteln Zeitzonenabweichung der Lokalzeit gegen GMT (Greenwich Mean Time) in Minuten ermitteln JavaScript Seite 9 von 27

1359649865737 17 31 5 -60

setTime() setHours() setMinutes() setSeconds()

Uhrzeit setzen Stunden der Uhrzeit setzen Minuten der Uhrzeit setzen Sekunden der Uhrzeit setzen

123456 / 123456 11 / 11 11 / 11 11 / 11

Die Aufrufe, die in beiden Tabellen die rechte Spalte mit aktuellen Werten fllen, sollen kurz erlutert werden. Die get-Methoden gelten alle fr den Aufrufzeitpunkt der Seite. Diese Aufrufe lauten (am Beispiel des ersten gezeigt): <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 knnen. Damit lst 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 gltige Anzeige mte dauernd erneuert werden. Deshalb bestimmen wir die Zeit beim Tastendruck: Was, Sie wundern sich? Demnach gehren Sie auch zu den Leuten, die beim Zhlen ihrer Finger mit "0" anfangen und erstaunt sind, wenn ihnen einer fehlt. Die Funktion fr 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*tage3600*1000*stunden)/(60*1000)); sekunden=Math.round((gesamt-24*3600*1000*tage-3600*1000*stunden60*1000*minuten)/1000); alert("Es sind bereits "+tage+" Tage, "+stunden+ " Stunden, "+minuten+" Minuten und "+sekunden+ " Sekunden\nim neuen Jahrtausend vergangen!"); } </script> Zur Erluterung: 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

JavaScript Seite 10 von 27

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. ntzlich, 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 Menteil, wre einzutragen: <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 spter als Bezug gebraucht wird. Dann folgt eine Funktionsdefinition. Schlielich wird ein Timer gestartet, der nach einer Sekunde die Funktion aufruft. Diese ermittelt und schreibt nun die abgelaufene Zeit. Wohin? Nuh dah, wrde 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 Umstndlichkeiten nachdenken. Geht es nicht auch einfacher? Da der Timer im Sekundentakt arbeiten kann, kann der Zhler auch ohne das Datumsobjekt arbeiten. Wie she es dann aus? Ganz gut, allerdings geht die neue Zhlung etwas nach. Obwohl die neue Wartezeit sofort am Funktionsbeginn eingelutet wird, bleibt dieser Zhler zurck. Ein Nutzer, der nur diesen vorfindet, wrde 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

JavaScript Seite 11 von 27

" + sekunde + " s"; } window.setTimeout('zaehle()',1000); </script>

6. Eingaben des Nutzers


Text-Eingabe in eine Prompt-Box
Eine prompt-Box ist ein Dialogfenster, welches ein Eingabefeld, einen OK-Button und einen Abbrechen-Button enthlt. Die Box kann mit einem Aufforderungstext und einem vorbelegten Eingabefeld aufgerufen werden, die beide in der Argumentklammer anzugeben sind. Als Ergebnis des Aufrufes erhlt man nach Drcken des OK-Buttons den eingegebenen Text; wenn "Abbrechen" gedrckt wird, meldet die Variable Null zurck. Gerade haben Sie, Ramn, eine Prozedur hinter sich, die diese Art der Eingabe nutzt. Der zugehrige Code ist im Head untergebracht und lautet:
<script language="JavaScript"> var ergebnistext=prompt("Wie heien Sie?",""); if(ergebnistext==""||ergebnistext==null) history.back(); else alert("Hallo, "+ ergebnistext); </script> Sinnvolle(?) Anwendungen dieser Eingabemglichkeit wren etwa die Personalisierung, also Anrede des Lesers mit dem Namen. Wie sie wahrscheinlich hier oben im Text sehen knnen, funktioniert das hchst unzureichend. Auch das Erfragen eines Paworts, das den Seitenzugang auf einen bestimmten Personenkreis beschrnkt, hat nur migen Sinn. Mit JavaScript allein lt sich der richtige Wert nur unzureichend verstecken.

Text-Eingabe in Formularelemente
Formular-Elemente sind aus HTML bekannt. Sie sind fr Eingaben bestimmt und ihre Ergebnisse knnen bei HTML im wesentlichen nur bernommen und etwa per E-Mail an der Seitenautor geschickt werden. Alle knnen nun mit JavaScript ausgewertet, manipuliert und ihre Ergebnisse berprft werden. Speziell Texte knnen in die Typen: 'text' und 'textarea' eingegeben werden. Um ein Formularelement auswerten zu knnen, mu es adressierbar sein. Dazu gibt es zwei Mglichkeiten.

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. Unabhngig von den Namen kann das erste Formular mit document.form[0], das dritte mit document.form[2] angesprochen werden. Fr jedes Formular wird weiterhin ein Array elements[] gefhrt, in dem die Formularelemente abgelegt sind, wieder in der Reihenfolge ihres Auftretens numeriert.

Eintrag in einem Textfeld Der Text ist mit der Eigenschaft 'value' verknpft. Ein solcher kann bei ffnung des Feldes JavaScript Seite 12 von 27

vorgegeben werden, z.B. um den Nutzer aufzufordern. Er kann vom Nutzer ungendert 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 Mglichkeiten von HTML besteht darin, da hier nun Texteingaben auf Plausibilitt geprft und ggf. zurckgewiesen werden knnen (wenn etwa in E-Mail-Adressen kein '@' vorkommt).
<script language="JavaScript"> function auswert() { if (document.form5.namensfeld.value=="Name?") alert("Faulheit wird 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 Textarea Im Prinzip genauso erfolgt der Zugriff auf <texarea>. Dieses ist ein eigenes Tag, das geffnet und geschlossen werden mu und einen Container fr den Text bildet. Der Inhalt heit wieder "value" und kann vom Programm vorgegeben, vom Nutzer verndert 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, ermglicht zwar keine direkte Nutzereingabe, sie gehrt aber hierher, weil sie die Auswahl unter angebotenen Mglichkeiten bietet. Sie hat in HTML eigene Tags, in Kurzform

JavaScript Seite 13 von 27

<select ...><option...></select>. Mit JavaScript gibt es Eingriffsmglichkeiten, mit denen ein Listenfeld nachtrglich manipuliert werden kann. Mit geringem Aufwand und sicherer Funktion in allen Browsern lassen sich platzsparende Mens oder Stichwortlisten fr Suchhilfen anlegen. Hier sollen nur die grundstzlichen Zugriffsmglichkeiten kurz aufgelistet werden. Zunchst der HTML-Aufruf, der Voraussetzung fr weitere Eingriffe ist: <form name="list"> <select name="wahl" onChange="auswahl()"> <option>berschrift <option value="eins">Erster <option value="zwei">Zweiter <option value="drei">Dritter <option value="vier">Vierter <option value="fnf">Fnfter </select> </form> Die Auswertungsfunktion, die hier auswahl() heit, 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 fr Formular ( =list) und Auswahlfeld (=wahl). Nur bei den Options, die ja auch eigene Namen besitzen, wurde anders verfahren. Alle Seitenelemente sind ber innere Arrays zugnglich, hier wren das forms[i], elements[j], options[k], sofern man nur die passenden Zhlerwerte kennt. Mgliche Zugriffe auf Auswahlfelder, bei denen Werte erfragt oder gesetzt werden sind: defaultSelected length selected selectedIndex text value

Vorauswahl einer Option erfragen oder setzen (hier Option 0) Zahl der Options ist eine Option gewhlt? Hier wird Option 0 abgefragt Nummer der gewhlten Option Text der gewhlten Option (hier Option 4) Wert (=value) der gewhlten Option (hier Option 4)

false 6 true 0 Fnfter fnf

Da bei allen Zugriffen auch Werte gesetzt werden knnen, hat man die Mglichkeit, Auswahlfelder nachtrglich, etwa in Abhngigkeit von Formulareingaben oder dem Browser des Nutzers zu verndern. Die Vernderung, Lschung oder Ergnzung von Options ist mglich. 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 Vernderungen, die in der Tabelle, die erst danach angelegt wird, fr scheinbare Unstimmigkeiten sorgen.

JavaScript Seite 14 von 27

7. Ereignisse
Events oder Ereignisse (z.B. ein Mausklick) sind in Windows (aber auch anderen Betriebssystemen) Anla fr den Rechner, seine stndige Warterei zu unterbrechen und ttig zu werden. Ereignisse bedrfen einer Routine, die angibt, was zu geschehen hat. Diese Dinger heien 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


Zunchst eine bersicht.

Event

Bedeutung auf dem Klo (Verzeihung, fiel mir nur so ein), bei Abbruch des Ladevorganges einer Grafik beim Verlassen (Verlust des Focus) speziell von Tabellenelemente n bei erfolgter nderung speziell in Tabellenelemente n beim Anklicken von Links und von Texteingabefelde rn bei doppeltem Anklicken

Beispiel

wo erlaubt

onAbort

<img src="/meinbild.jpg" width=600 height=480 onAbort=alert("OK, ich wrde auch nicht so lang warten!")>

<img>

onBlur

siehe das erste Beispiel

<body>, <frameset>, <input>, <layer>, <select>, <textarea>

onChange

siehe das 2. Beispiel!

<input>, <select>, <textarea>

onClick

<form><input type=button value="hier" onClick="alert('klappt!')"></fo rm>

<a>, <area>,<input>, <textarea>

onDblClick

<form><input type=button value="hier" onDblClick="alert('klappt auch!')"></form> <img src="/meinbild.png" onError="alert('Ladeproblem, kann Ihr Browser png-Grafik darstellen?')">

<a>, <area>,<input>, <textarea>

onError

im Fehlerfall

<img>

JavaScript Seite 15 von 27

onFocus

beim 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 Pawortabfragen oder speziellen Navigationsfenstern vgl. Beispiel 4

<frameset>, <body>

onMouseDow n

Beim Drcken der Maus beim Verlassen des Elements mit der Maus beim berfahren des Elements mit der Maus bei losgelassener Maustaste beim Zurcksetzen des Formulars beim Selektieren von Text

<a>, <area>

onMouseOut

vgl. Beispiel 4

<a>, <area>

onMouseOve r

vgl. Beispiel 4

<a>, <area>

onMouseUp

vgl. Beispiel 4

<a>, <area>

onReset

vgl. Beispiel 5

<form>

onSelect

<input>,<textare a>

Beispiel dazu, dort wird ein onSubmit beim Absenden des Formulars beim Verlassen der Datei
"submit"-Button mit onClick ausgewertet, onSubmit htte die <form>

gleiche Wirkung onUnload


<framest>, <body>

Ereignisse simulieren und das Event-Objekt bedrfen noch einiger Worte:

JavaScript Seite 16 von 27

Anwendungsbeispiele
Testung einer Tabelleneingabe (hier nur auf Lnge des Eintrags!) Funktionsdefinition im Seitenkopf:
<script language=JavaScript> function prfe(wort) { if(wort.length<3) { alert("Ich kenne keine Stadt mit so kurzem Namen!\nErbitte richtige Eingabe!"); document.adresse.stadt.focus(); } } </script>

Bitte einen Stdtenamen eingeben:

Formular mit Funktionsaufruf:


<form name="adresse"> ... <input type=text size=15 name="stadt" onBlur=prfe(this.value)> ... </form>

Achtung: Wenn Sie hier hngen bleiben, dann den Finger auf eine Taste legen und solange die alert-Boxwegklicken, bis Sie nicht mehr erscheint. Der regulre Abbruch erfolgt innerhalb der Framestruktur nicht! Bisher kenne ich keinen Grund dafr!

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 Stuhdnd! </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 verndern


<a href="/jereignis#kugel" onMouseOver="document.bild.src='bilder/k_blau.g if'" 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 lschen?')"> <textarea cols=10 rows=5 wrap=virtual>Hier jede Menge Text!</textarea><br> <input type=reset>

JavaScript Seite 17 von 27

</form>

8. History
oder: "Wo war ich gewesen?"

history: Allgemeines zur Verwendung


Ein Tochterobjekt von "window" heit "history". Es ermglicht 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 zugngliche History-Liste. Diese ist bei Netscape ber die Menbefehle "Communicator/Extras/History" oder im IExplorer mit "Ansicht/Explorerleiste/Verlauf" einzusehen. Wozu ist es gut? Man kann innerhalb der eigenen Seite bei Milingen eines Ladevorganges die vorher angezeigte Seite zurckrufen, 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. Zeigt die zuletzt besuchte Seite wieder an
<a href="javascript:self.history.back()">zurck im Frame</a> <a href="javascript:top.history.back()">zurck zur Seite vor dem Frame</a>

back()

Zeigt die Folgeseite, wenn zuvor in der Liste zurck forward() gesprungen wurde, kann leider hier nicht sinnvoll getestet werden!
go()

<a href="javascript:self.history.forward()">wieder vor</a>

Springt in der History-Liste

<a href="javascript:self.history.go(-3)">3 Seiten zurck (im Kurs)</a>

JavaScript Seite 18 von 27

vorwrts oder rckwrts. Parameter ist die Platzdifferenz Speichert die Lnge der History-Liste fr ein Fenster.
<a href="javascript:alert(self.history.length)">Anzahl besuchter Seiten</a>:Anzahl besuchter Seiten

length

Wenn die History-Liste mehrere Eintrge 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 Rcksprung innerhalb des Fensters lscht die Seite, die das Blttern veranlat. Blttern kann man nur, wenn es in einer zweiten Seite geschieht, die Rckschau 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 knnen nur Variablenwerte speichern. Ausfhrbaren Code, der irgendwelchen Unsinn anstellen knnte, knnen 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 knnen. Viele User nutzen diese Mglichkeit.

Cookie schreiben
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 Schlsselwort "cookie". Beim Schreiben gehen die Browser unterschiedlich vor. Bei Netscape wird eine Datei "cookies.txt" angelegt, die zeilenweise organisiert ist und neben einem Ablaufdatum Eintrge der Art "Bezeichner Wert" enthlt. 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.

JavaScript Seite 19 von 27

Der Code enthlt hier im Beispiel einen Werteintrag und denjenigen der Ablaufzeit. Anzugeben ist mit "Dauer" die Gltigkeitsdauer 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 Drcken der Taste nichts geschieht, berprfen Sie bitte die Sicherheitseinstellungen Ihres Browsers. Cookies mssen natrlich (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 Rckgabewert 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 zurckgemeldet 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; } </script>

Cookies nutzen

Cookies knnen genutzt werden, um einen Zhler zu speichern, der die Zugriffe eines Nutzers zhlt. Genauer ausgedrckt: Wann immer Horst Meier auf meine Seite JavaScript Seite 20 von 27

zugreift, lese ich das von mir frher auf seinem Rechner gesetzte Cookie, dort steht ein Zahlenwert, den ich um 1 erhhe und dann wieder schreibe. Die Zhlung 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 Mglichkeit, Parameterwerte von Seite zu Seite eines Anbieters zu bergeben. Ein denkbarer Fall wre, da auf einer Startseite CSS-Dateien zur Auswahl gestellt werden. Auf die gewhlte Datei, deren Name in ein Cookie geschrieben worden ist, kann anschlieend die gesamte Prsentation 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 ausgewhlten CSS-Datei (inklusive Pfad) geschrieben. Soweit kein Problem. Dann wird die nchste Seite der Prsentation aufgerufen. Sie erhlt im head-Teil, ebenso wie alle weiteren zur Prsentation gehrigen 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 bercksichtigt wird.

10. Alle Arten von Rechenzeichen


Arithmetische Operatoren, auch Rechenzeichen genannt

+, -, *, / % Erklrungen sind ntig zur

wie immer Modulo, Divisionsrest

Modulo-Funktion, sie gibt den Divisionsrest an.

Zuweisungsoperatoren
Zuweisungen sind die in (fast) allen Programmiersprachen vorkommenden Ausdrcke der Art: a = a + 1. Wre es eine Gleichung, so folgte, da nach beiseitiger Subtraktion von a nun 0 = 1 glte. Das ist nicht mal im Internet wahr. Es ist ein "Zuweisung", die bedeutet: "Lies den Inhalt von a, erhhe ihn um 1 und schreib ihn auf den Platz von a". Es gibt in JavaScript, herrhrend aus der Sprache C einige spezielle Zuweisungsoperatoren.

JavaScript Seite 21 von 27

= +=

kennt mer addiert beide Operanden und weist das Ergebnis dem linken zu erhht Variablenwert um 1, Inkrement, vor- oder nachgestellt verwendbar subtrahiert rechten vom linken Operanden und weist das Ergebnis dem linken zu verringert Variablenwert um 1, Dekrement, vor- oder nachgestellt verwendbar multipliziert beide Operanden und weist das Ergebnis dem linken zu dividiert linken durch rechten Operanden und weist das Ergebnis dem linken zu dividiert linken Operanden durch den rechten und weist nicht teilbaren Rest dem linken zu a += b bedeutet a = a +b ++a bedeutet a = a + 1 b = a++ bedeutet b = a; a = a + 1 a -= b bedeutet a = a -b --a bedeutet a = a - 1 b = a-- bedeutet b = a; a = a - 1 a *= b bedeutet a = a *b a /= b bedeutet a = a /b

++

-=

--

*=

/=

%=

Es sind Mehrfachzuweisungen erlaubt. Also z.B.: a = b = c = 5; Ein solcher Ausdruck wird von rechts nach links abgearbeitet.

Vergleichsoperatoren
Es knnen 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 grer als grer gleich gleich strikt gleich (gleicher Wert und Typ) ungleich strikt ungleich (Wert und/oder Typ ungleich)

Logische Operatoren
JavaScript Seite 22 von 27

Logische Operatoren werden ebenfalls in Auswahlfunktionen genutzt. Ihr Ergebnis kann immer nur "true" oder "false" sein. ! && ||

Negation Konjunktion Disjunktion

nicht sowohl als auch entweder ... oder

Bitoperatoren
werden selten benutzt. Sie werden angewandt auf eine 32-Bit Ganzzahldarstellung. & | ^

bitweise Und bitweise Oder bitweise Exklusiv Oder bitweise Nicht entspricht einer Multiplikation mit 2 entspricht einer Division durch 2, Vorzeichenbits werden nachgezogen Beispiel: 8 >> 3=1 entspricht einer Division durch 2, Ergebnis immer positiv

<<

Linksverschiebung

>>

Rechtsverschiebung mit Vorzeichenerweiterung

>>>

Rechtsverschiebung mit 0-Fllung

Verkettungsoperator +
Mit einem einfachen Plus werden Zeichenketten verknpft. Dabei drfen sowohl Zeichenketten (in Anfhrungstrichen) als auch Stringvariable verwendet werden.

Sonstige Operatoren
Fr die Handhabung von Objekten gibt es einige Operatoren, die hier der Vollstndigkeit halber mit aufgelistet werden sollen.

JavaScript Seite 23 von 27

delete

lscht Objekte, Methoden oder Eigenschaften erzeugt neues Objekt eines angegebenen Typs aktuelles Objekt Objekttyp wird zurckgegeben, mgliche Ergebnisse sind: "number", "string", "boolean", "object",
"function", "undefined"

namen=new Aarray(25);delete namen; heute=new(Date); this.length=12; alert(typeof "sehr"), Ergebnis: string

new this

typeof

void()

Funktion ohne Rckgabewert aufrufen bzw. Rckgabewert verwerfen

11. Mathematische Funktionen


Welche Mathematischen Funktionen sind verfgbar?
Mathematische Funktionen sind Methoden eines speziellen, vordefinierten Objektes, des Math-Objekts. Zum Aufruf spter, zunchst die bersicht der zur Verfgung stehenden Funktionen.
abs ( acos ( asin ( atan ( ceil ( ) cos ( ) exp ( ) ) ) ) )

Absolutwert Arcuskosinus Arcussinus Arcustangens rundet auf nchsthhere Ganzzahl Kosinus Potenz zur Basis e rundet auf nchstniedrigere Ganzzahl natrlicher Logarithmus Maximum aus den Werten x, y Minimum aus den Werten x, y errechnet x hoch y Zufallszahl zwischen 0 und 1

floor ( ) log ( ) max (x, y) min (x, y) pow (x, y) random ( )

JavaScript Seite 24 von 27

round ( ) sin ( ) sqrt ( tan ( ) )

rundet zur nchsten Ganzzahl Sinus Quadratwurzel Tangens

Problem: Es fehlt eine notwendige mathematische Funktion


Mathematische Funktionen, die in der Liste nicht enthalten sind, knnen definiert werden. Die Syntax der Definition einer Funktion des frei whlbaren 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 LN2 LN10 LOG2E

e, Eulerzahl ln (2) ln(10) ld(e) (Logarithmus von e auf Basis 2) log(e) (dekadischer Logarithmus von e) 3,14... Wurzel aus 0,5 Wurzel aus 2

LOG10E PI SQRT1_2 SQRT2

Problem: Es fehlt eine Konstante


Die fgt man seiner Seite als globale Variable hinzu. Das geschieht entweder im <script>-Teil des Seitenkopfes etwa mit: var mein_Vermgen = 1000000000;

JavaScript Seite 25 von 27

oder mit gleicher Syntax zu Beginn der beabsichtigten Rechnung.

Das Objekt Math


Was ein Objekt ist, wei jeder. Wenn es in Programmiersprachen auftaucht, will es pltzlich keiner wissen. Dazu spter 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 Verfgung, 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 Funktionen


Array-Eigenschaft(en)
Die Liste ist kurz.

length

Nummer des hchsten vorkommenden Index plus 1. Da Arrays Lcken in der Zhlung aufweisen knnen, ist dies nicht die Zahl der Glieder!

Zahl=arrayname.length;

Array-Funktionen
concat()

verfgbar ab JavaScript 1.2. Zwei Arrays werden zu einem einzigen zusammengefgt.

a=new Array(1,2,3); b=new Array(4,5,6); a.concat(b) ergibt in a=(1,2,3,4,5,6) Zahl=new Array(1,2,"Haus"); str=Array.join("~"); ergibt in der Variablen str: 1~2~Haus

join()

Array-Inhalte werden in Strings umgewandelt und aneinander gehngt. Argument ist ein jeweils einzufgendes Trennzeichen kehrt die Reihenfolge der Eintrge eines Arrays um extrahiert einen Abschnitt eines Arrays, von Position bis Position. Wenn bis<0, wird vom Ende her gezhlt. Der zweite Parameter kann entfallen, dann wird bis zum Ende ausgeschnitten. sortiert die Glieder eines Arrays. Im

reverse()

aus ["Auto","Haus","Boot"] wird ["Boot","Haus","Auto"]


a=new Array(1,2,3,4,5,6); b=a.slice(2,4) liefert b=(3,4)

slice()

zurck

sort()

a=new

JavaScript Seite 26 von 27

Argument kann eine Funktion angegeben werden, die den Sortiervorgang steuert.

Array("Z","h","A","j",9); a.sort() ergibt in a (9,"A","Z","h","j")

http://www.kostenlose-javascripts.de/tutorials/tutorials.html

JavaScript Seite 27 von 27