Hauptmenü:
JavaScript Einleitung |
JavaScript ist eine Scriptsprache, die an Java angelehnt ist. JavaScript ist
plattformunabhängig, d.h. läuft unter jedem Betriebessystem. Es benötigt jedoch den
Netscape Communicator bzw. den MS-Internet Explorer.
JavaScript ist eine Programmiersprache. Sie hat Ähnlichkeit bei verschiedenen Befehlen mit JAVA oder C/C++. JavaScript besitzt nur wenige Befehle und ist damit sehr kompakt und schnell zu erlernen. Wie auch Delphi, C++, VisualBasic und JAVA orientiert sich JavaScript nicht an Prozeduren, sondern an Objekten. Es können damit interaktive und dynamische WWW-Seiten erstellt werden. JavaScript mangelt es trotz der einfachen Strukturen nicht an Flexibilität.
Der JavaScript-Text wird als ASCII-Text in die HTML-Datei eingegeben. Das Programm wird
dann beim Aufruf der HTML-Datei interpretiert. Zum Programmieren genügt ein normaler
Text-Editor. Einen Debugger wie er beispielsweise bei C++ üblich ist, gibt es nicht. Die
Fehlersuche ist damit etwas aufwendiger.
Möglichkeiten von JavaScript:
Grenzen von JavaScript:
Historie |
JavaScript ist eine gemeinsame Entwicklung von Netscape und Sun. JavaScript wurde 1995
mit dem Netscape Navigator 2.0 als Programmiersprache für das Internet vorgestellt. Der
Codename war "LiveScript" und wird heute als "JavaScript"
bezeichnet. Die offizielle Dokumentation zu JavaScript findet man bei Netscape.
Script in HTML einbinden |
Die typische Einbindung in den HTML-Code sieht so aus:
<HTML>
<HEAD>
<TITLE>ein beliebiger Titel</TITLE></HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Browser die nicht JavaScript könne überspringen diese
Zeilen
//hier steht der JavaScript-Code
-->
</SCRIPT>
<BODY></BODY></HTML>
"//" wird innerhalb des JavaScript-Code als Kommentar interpretiert. Bei größeren Programmen sollte davon viel Gebrauch gemacht werden, um so Fehler schneller zu finden, bzw. spätere Änderungen leichter vornehmen zu können.
Es ist auch möglich den JavaScript-Code an anderer Stelle einzufügen. Der besseren Übersicht wegen empfiehlt es sich aber den Code vor dem <BODY>-Tag einzufügen.
Die verwendete Version kann so eingegeben werden. Für JavaScript 1.3 z.B.:
<SCRIPT LANGUAGE="JavaScript1.3">
Der Aufruf einer bestimmten JavaScript-Funktion erfolgt im HTML-Code über den <BODY>-Tag:
<BODY ONLOAD="functionsnamexy"> oder auch
<BODY onLoad="functionsnamexy">
Diese Funktion wird nun beim Laden der Seite aufgerufen.
Steht der JavaScript-Code in einer externen Text-Datei mit zum Beispiel dem Namen "meinscript.js" lautet die Einbindung so:
<HTML>
<HEAD>
<TITLE>ein beliebiger Titel</TITLE></HEAD>
<SCRIPT LANGUAGE="JavaScript"
SRC="meinscript.js">
<!-- hier kann ein Kommentar stehen
-->
</SCRIPT>
<BODY onLoad="functionsnamexyz"></BODY></HTML>
Neben onLoad gibt es auch andere sogenannte "Eventhandler", die den Aufruf der Funktion bestimmen:
Hier eine Übersicht dieser Eventhandler:
onAbort Funktion wird aufgerufen, wenn die Seite verlassen wird.
onBlur Funktion wird aufgerufen, wenn ein Feld den Focus verliert.
onChange Funktion wird aufgerufen, wenn Inhalte eines Feldes geändert werden.
onClick Funktion wird aufgerufen, wenn Button oder die Maus gedrückt werden
onDBClick Funktion wird aufgerufen, wenn Button oder die Maus zweimal gedrückt werden
onDragDrop Funktion wird aufgerufen, wenn ein Objekt per Drag&Drop verschoben wird
onError Funktion wird aufgerufen, wenn ein Fehler auftaucht.
onFocus Funktion wird aufgerufen, wenn ein Feld den Focus erhält.
onKeyDown Funktion wird aufgerufen, wenn eine Taste gedrückt wird
onKeyPress Funktion wird aufgerufen, wenn eine Taste gedrückt und gehalten wird
onKeyUp Funktion wird aufgerufen, wenn eine gedrückte Taste losgelassen wird
onLoad Funktion wird aufgerufen, wenn Seite geladen wurde (s.o.)
onMouseDown Funktion wird aufgerufen, wenn Maustaste gedrückt wird
onMouseMov Funktion wird aufgerufen, wenn Maus bewegt wird
onMouseOut Funktion wird aufgerufen, wenn die Maus ein feld verlässt
onMouseOver Funktion wird aufgerufen, wenn sich die Maus in einem Feld befindet
onMouseUp Funktion wird aufgerufen, wenn Maustaste lossgelassen wird
onMove Funktion wird aufgerufen, wenn ein Fenster verschoben wird
onReset Funktion wird aufgerufen, wenn innerhalb eines Formulars der Reset-Button gedrückt wird
onResize Funktion wird aufgerufen, wenn Größe eines Fensters geändert wird
onSelect Funktion wird aufgerufen, wenn in einem Feld ein Text ausgewählt wird
onSubmit Funktion wird aufgerufen, wenn ein Formular übermittel werden soll
onUnload Funktion wird aufgerufen, wenn ein HTML-Dokument verlassen wird.
Sprachelemente und Befehle |
Buchstaben |
A-Z a-z _ |
Ziffern |
0-9 |
Leerzeichen |
LZ und CR |
Sonderzeichen |
+ - * / = ^[ ] ( ) . : , ; ' # $ |
Zuweisungsoperator |
= |
Relationsoperatoren |
!= == <> <=>= |
Bei den Bezeichnern (z.B. Name für Variable) ist zu beachten
z.B.: var a, xy, a_b_c, Kreisradius (ist zulassig) - var if, 1x, d/a (ist unzulässig)
Wichtig: Jede Zeile ist mit ";" abzuschliesen.
Häufig verwendete Befehle für JavaScript 1.3:
Befehl |
Objekt |
Beschreibung |
| alert (String) | window | Zeigt Dialogbox |
| back() | window | Zeigt die vorherige Seite an |
| blur() | window | Fenster verliert Focus |
| captureEvents (type) | window | Fängt Events ab , "type" z.B.: Event.KEYDOWN |
| clearInterval(ID) | window | Löscht Intervallzeit, die über setInterval gesetzt wurde. ID ist Ergebnis von setInterval. |
| clearTimeout(ID) | window | Löscht Wartezeit, die über setTimeout gesetz wurde. ID ist Ergebnis von setTimeout. |
| close() | window | Schließt aktuelles Fenster (Vorsicht beim Gebrauch) |
| confirm(String) | window | Zeigt Dialogbox an |
| find (string,a,b) | window | Sucht nach einem String, a=TRUE wenn Groß u. Kleinschreibung unterschieden wird, b=TRUE wenn rückwärts gesucht wird. Ergebnis=TRUE wenn gefunden |
| focus() | window | Fenster erhält Focus |
| home() | window | Zeigt Startseite an |
| moveBy(PixelH,PixelV) | window | Bewegt das aktuelle Fenster, Beispiel: window.moveBy(20,20); |
| moveTo(x,y) | window | Bewegt das Fenster auf die Position x,y |
| open(URL,windowName,Attribute) | window | Öffnet ein neues Browser-Fenster. Beispiel Attribut: dependent (Fenster wird vom Browserfenster abhängig gemacht), status (Fenster enthält Statuszeile) |
| print() | window | Druckt Inhalt des Fensters |
| resizeTo(x,y) | window | Verändert Höhe und Breite des aktuellen Fensters |
| scroll(x,y) | window | Scrollt den Inhalt des aktuellen Fensters auf die Position x,y, Beispiel: window.scroll(200,300); |
| setIntervall(function,ms) | window | Setzt ein Zeitintervall in Millisekunden, bevor "function" kontinuierlich aufgerufen wird |
| setTimeout(function,ms) | window | Setzt ein Zeitintervall in Millisekunden, bevor "function" einmal aufgerufen wird |
| stop() | window | Stoppt das Laden einer Datei |
| reload() | location | Lädt Dokument nochmal |
| replace(URL) | location | Lädt Dokument mit URL |
| back() | history | Lädt das vorhergehende Dokument |
| forward() | history | Lädt das nachfolgende Dokument |
| availHeight (ist Eigenschaft) | screen | Ermittel die zur Verfügung stehende Höhe des Bildschirms. z.B. screen.availHeight; |
| availWidth (ist Eigenschaft) | screen | Ermittel die zur Verfügung stehende Breite des Bildschirms |
| colorDepth (ist Eigenschaft) | screen | Ermittelt Farbtiefe in Bits pro Pixel |
| close() | document | schließt das aktuelle Dokument |
| open(typ) | document | öffnet neues leeres Dokument Beispiel"typ": text/html (Texte im HTML-Format) Beispiel: window.document.open("text/html"); |
| write(text) | document | Schreibt Text in das aktuelle Dokument |
| reset() | form | Löscht Eingaben im Formular |
| submit() | form | Versendet Inhalt des Formulars |
| elements (ist Eigenschaft) | form | Damit können die Elemente des Formulars angesprochen werden. Beispiel: windows.forms[2].elements[1]; |
| getDate() | Date | Ermittel Tag des Monats Beispiel: var datum=new Date(2000,11,12,12,00,00,500); tag=datum.getDate(); |
| getDay() | Date | Ermittel Wochentag das Monats |
| getFullYear() | Date | Ermittel Jahreszahl |
| getHours() | Date | Ermittel Stundenzahl |
| getSeconds() | Date | Ermittels Sekunden |
| getMinutes() | Date | Ermittelt Minuten |
| getTime() | Date | Ermittelt Anzahl der Millisekunden, die seit dem 1.1.1979 verflossen sind |
| complete (ist Eigenschaft) | image | Ermittel, ob ein Bild komplett geladen wurde. |
| abs(Zahl) | math | Liefert den Absolutwert der Zahl |
| cos(Zahl) | math | Liefert den Cosinus der Zahl |
| floor(Zahl) | math | Liefert die nächst niedrigere Ganzzahl |
| round(Zahl) | math | Liefert die nächst höhere Ganzzahl |
| PI (ist Eigenschaft) | math | Ermittel den Wert der Zahl PI. Beispiel: var pi=Math.PI; |
| eval(String) | - | Führt JavaScript-Code aus der als String übergeben wird |
| break | - | Bricht eine Schleife ab |
| continue | - | Schleife wird im Schleifenkopf neu ausgeführt |
| do...while(bedingung) | - | do-while-Schleife |
| for(initialisierung; bedingung;zählung) | - | for-Schleife wird solange ausgeführt bis Laufbedingung erfüllt ist |
| if(bedingung) else | - | if-else-Abfrage. Beispiel: if(a==1){a=0;}else{a=1;} |
| return Variable | - | Gibt Funktionswert zurück |
| switch(ausdruck){case Fall1: //Code;break; case Fall2: //Code;break;... default: //Code} | - | switch-case Abfrage |
| var name | - | Definition einer Variablen |
| while(bedingung) | - | while-Schleife |
| = | - | Wertzuweisungsoperator |
| && | - | Logisches UND |
| || | - | Logisches Oder |
| ! | - | Logisches NICHT |
| & | - | Bitweises UND |
| | | - | Bitweises ODER |
| ^ | - | Bitweises XOR |
| ~ | - | Bitweises NICHT |
| << | - | Linksshift |
| >> | - | Rechtsshift |
| == | - | Vergleichsoperator: Gleichheitsoperator |
| != | - | Vergleichsoperator: Ungleichsoperator |
| === | - | strict equal (Wert und Typ gleich) |
| !== | - | strict not equal |
| > | - | größer als |
| < | - | kleiner als |
| >= | - | größer gleich |
| <= | - | kleiner gleich |
| ?: | - | Abkürzung für if. Beispiel: a=5; if a==1 ist identisch mit: (a?1:5) |
| new | - | Erzeugt ein neues Objekt |
| this | - | spricht aktuelles Objekt an. Beispiel: this.width=2; |
| typeof | - | Liefert Objekttyp zurück |
| void | - | Dadurch kann eine Funktion ohne Rückgabewert aufgerufen werden |
Arithmetische Operatoren + Rangstufen |
S
iehe auch obenZeichen |
Operation |
Eingabetyp |
Ergebnistyp |
|---|---|---|---|
+ |
Addition |
integer, real |
integer, real |
- |
Subtraktion |
integer, real |
integer, real |
* |
Multiplikation |
integer, real |
integer, real |
/ |
Division |
integer, real |
real |
sqrt1_2(var) |
Quadrat |
integer, real |
integer, real |
sqrt2(var) |
Quadratwurzel |
integer, real |
real |
% |
Integer-Division |
integer |
integer |
ceit |
rundet auf ganze Zahl auf |
real |
integer |
floor |
rundet auf ganze Zahl ab |
real |
integer |
round |
kaufmännisches Runden |
real |
integer |
Unter den Operatoren und Programmierzeichen von JavaScript gibt es eine Rangordnung, die besonders bei komplexen Ausdrücken eine Fehlerquelle sein kann, wenn man sie nicht berücksichtigt .
Datentypen |
Zahlen, Strings, Boolesche Werte, Null-Werte
Zahlen:
Dezimalzahlen (Basis 10): Integer- und Real-Zahlen ohne führende Null (z.B. 882)
Oktalzahlen (Basis 8): Integer-Zahl mit einer führenden Null (z.B. 076)
Hexadezimalzahlen (Basis 16): Kombination aus Buchstabe und Integer-Zahl, der ein ox
oder oX vorangestellt ist (z.B. ox3F oder 0X3F)
Man muss bei der Eingabe und Verarbeitung die englische Schreibweise der
real-(gebrochenen)-Zahlen berücksichtigen. Z.B. wird der Punkt statt dem Komma benutzt
(92.5; -247.; .3; -0.4e-3; 1.7E12).
Strings:
Eine Kette von Zeichen, die durch Anführungszeichen begrenzt wird
Boolesche Variable:
Ist eine 'logische' Variable, die den Wert "true" oder "false"
annehmen kann
Null:
Drückt eine leere Menge aus und ist weder ein leerer String ("") oder eine Zahl
mit dem Wert 0, da beides schon definiert ist. Bei Null gibt es überhaupt keinen Wert,
und die entsprechende Variable ist nicht definiert. JavaScript gibt beispielweise Null
zurück, wenn die Schaltfläche "Cancel" ausgewählt wurde.
Programmaufbau |
Die Einbindung wurde oben besprochen.
Variablen können deklariert und zugleich initialisiert werden:
Beispiel:
var var_xy=2;
Funktionen können direkt deklariert werden.
Die Syntax zur Deklaration lautet:
function FUNKTION_NAME(PARAMETER_1,...,PARAMETER_N)
{
ANWEISUNG_1;
...;
ANWEISUNG_N;
return Wert //falls nötig }
Es gibt zahlose Beispiele im Internet. Hier ein Formular für Feedback:
<
html><
head><title>Beispiel</title></head><
script LANGUAGE="JavaScript">function check()
{
var laenge, Eingabe, a;
Eingabe=window.document.forms[0].elements[0].value;
laenge=Eingabe.length;
if(laenge>40){alert ("Zu langer Name!");return false;}
if (Eingabe==""){alert ("Bitte einen Namen angeben!");return false;}
Eingabe=window.document.forms[0].elements[2].value;
laenge=Eingabe.length;
if(laenge>300){alert ("Zu langer Text!");return false;}
if (Eingabe==""){alert ("Kein Eintrag vorhanden!");return false;}}
<
/script><body bgcolor="
white"><
p align="center"><big><font color="#0000A0">Hier hast Du die Möglichkeit, eine Frage zustellen.<
/font></big></p><
form ACTION="mailto:deinname@provider.de?Subject=Feedback" METHOD="POST"ENCTYPE="
text/plain" NAME="Feedback"><
table BORDER="0"><
tr><td>Name</td><
td ALIGN="LEFT"><input TYPE="TEXT" NAME="Vorname" size="20">Vorname reicht</td><
/tr><tr><
td>E-Mail</td><
td><input TYPE="TEXT" NAME="Mail" size="20"> falls Antwort an abweichende E-Mail Adresse</td><
/tr><tr><
td>Meine Frage</td><
td><textarea rows="2" name="Meinung" cols="50"></textarea></td><
/tr><tr><
td>Antwort erwünscht </td><
td><input TYPE="CHECKBOX" NAME="antnein" value="ON">nein <input TYPE="CHECKBOX"NAME="
antfaqs" value="ON">über Eintrag in FAQs <input TYPE="CHECKBOX" NAME="antmail"value="
ON">über E-Mail</td><
/tr><tr><
td>Mein Alter</td><
td><input TYPE="CHECKBOX" NAME="alter12" value="ON">unter 12 <input TYPE="CHECKBOX"NAME="
alterunter18" value="ON">unter 18 <input TYPE="CHECKBOX" NAME="alterüber18"value="
ON">über 18</td><
/tr><
/table><
p><input TYPE="SUBMIT" VALUE="Abschicken" onclick="return check()"> Info: Beim Abschickenwird die E-Mail Adresse des Versenders übermittelt<
/p><
p><input TYPE="RESET" VALUE="Löschen"> Löscht alle Eintragungen</p><
/form><
/body><
/html>