+ All Categories
Home > Documents > JavaScript Handbuch

JavaScript Handbuch

Date post: 27-Oct-2015
Category:
Upload: ra1ja2
View: 52 times
Download: 0 times
Share this document with a friend
35
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(); JavaScript – Seite 1 von 35
Transcript

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&nbsp;</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


Recommended