Teil 4. Der Sprachaufbau von Client

JavaScript
Inhalt:
Teil 1. Allgemeines Vorwort über die Script-Sprachen
(welche, wozu) und Abhängigkeit von Browsern.
Teil 2. Definition von JavaScript.
2.1 Unterschied zu Java.
Teil 3. Core, Client-Side, and Server-Side JavaScript
(Überblick).
Teil 4. Der Sprachaufbau von Client-Side JavaScript und
das Einbetten in HTML-Seiten.
4.1 <script> - Tag.
4.2 Kommentare.
4.3 Objekte und Objekthierarchie.
4.4 Erreignisse.
4.5 Variable, Werte und Wertzuweisungen.
4.6 Arrays.
4.7 Ausdrücke.
4.8 Funktionen.
Teil 5. Dokumentationsquellen.
Teil 1
Existierte Scriptsprache: JavaScript, VBScript, Perl, PHP(Hypertext Preprozessor) usw.
Solche Scripte werden direkt in das HTML-Dokument implementiert. Sie fügen Webseiten
aktive und interaktive Komponenten hinzu, die durch HTML nicht realisierbar sind. Es geben
Scripte , die vom Browser ausgeführt werden(s.g. Client-Side Scripte) und die vom Server
erzeugt werden(s.g. Server-Side Scripte).
In einer idealen Welt gäbe es „die eine Scriptsprache“, die allen Anforderungen gerecht wird
und Browser, die immer standardkonform sind. Dies ist leider nicht der Fall. Deswegen
manche Probleme lassen sich in der einen Scriptsprache besser lösen als in der anderen,
andere Probleme sind nur mit bestimmten Scriptsprachen lösbar.
Netscape hat schon früh JavaScript als Sprache für Client-Side JavaScript eingeführt.
JavaScript ist Grundlage für den Standard ECMA-262 der ECMA, der die Grundlage für
zukünftige Entwicklungen plattformunabhängiger Scriptsprachen für das Internet darstellt.
JavaScript wurde zuerst von Netscape im Netscape Navigator 2.0 vorgestellt. Microsoft hat
im Internet Explorer ab Version 3.0 eine eigene Implementierung: JScript.
JavaScript und Jscript sind nicht 100%-tig kompatibel.
Teil 2
Buchmäßige Definition: JavaScript ist eine Prototypenbasierte Programmiersprache, die dazu
dienen soll, dem HTML-Code zusätzliche Eigenschaften zu geben wie z.B.:
Ereignisbehandlung, Objekten – und Funktionenentwicklung.
2.1 Zwar ist JavaScript, wie auch Java, den Objektorientierten Sprachen
zuzuordnen,jedoch haben die beiden Sprachen bis auf die Ähnlichkeit einiger Konstrukte und
den Namen nichts miteinander zu tun. Bei der JavaScript – Objekte sind Browser-Objekte, die
die einfache und nahtlose Integration in diesen ermöglichen. Daher ist es wichtig, die
eigentliche Sprache und diese Objekte zu trennen, um vom Browserhersteller und
Kompabilitätsproblem zu abstrahieren.
Teil 3
Core(Kern) JavaScript – Elemente, die Client-Side und Server-Side JavaScripts gemeinsam
benutzen und zwar:
Schlüsselwörte
Syntax und Grammatik der Sprache
Regeln für Ausdrücke, Variablen usw.
Gleiche Objektmodell(obwohl Client-Side und Server-Side JavaScripts die vordefinierte
Objekte auf unterschiedliche Weise benutzen).
Gleiche vordefinierte Objekte wie z. B.: Array, Date, und Math.
Client-Side JavaScript wird vom Browser interpretiert und ausgeführt. Wird in HTMLCode eingebettet. Kann die Ereignisse von Außen behandeln(wie z. B.: MouseClick oder
Formenderung , kommt später).
Server-Side JavaScript – bei der Server kann man auch den Script in HTML-Code
einbetten. SSJS kann die Verbindung mit relationaler Datenbank von verschiedenen Anbieter
aufbauen, die Information zwischen Benutzern verwalten oder kommunizieren mit anderen
Applikationen durch LiveConnection oder Java. HTML Seite mit SSJS kann CSJS enthalten.
Im unterschied zu pure CSJS, HTML-Seite, die SSJS enthält wird zur ausführbaren Datei im
bytecode kompiliert.
Wir haben: Datei.js und Datei.htm , die werden bei der Kompilation zusammengekoppelt in
bytecode executable Webfile. Mit der Hilfe von s. g. JavaScript runtime-Maschiene wird
richtige Webfile gefunden, dynamisch HTML-Seite erzeugt und zu Client übertragen.
Weiter geht es nur um Client-Side JavaScrip!
Teil 4
4.1
Um JavaScript in Web-Seiten zu verwenden, muß dem Browser mitgeteilt werden, wo dies
beginnt und endet.Alle Scripten werden durch das Tag <script> eingeleitet. Der gesamte
folgende Text wird als Scriptkörper bis zum abschließenden </script> interpretiert. Dies kann
an jeder Stelle in einem HTML-Dokument gesetzt werden und ist nicht auf den Kopf oder
Körper beschränkt. Weiterhin können beliebig viele Scriptblöcke in einem Dokument
verwendet werden.
Im Script-Tag sollte immer die verwendete Sprache angegeben werden. Für JavaScript wird
dies durch „language = „JavaScript“ „ realisiert. Dadurch weiß der Browser, welche
Scriptsprache verwendet wird.
Bsp.: <HTML>
<HEAD>
<TITLE>Hallo Welt in JavaScript</TITLE>
</HEAD>
<BODY>
<H1>Textausgabe mit JavaScript: </H1>
<SCRIPT language = „JavaScript“>
<document.write(„Hallo Welt“);
</SCRIPT>
</BODY>
</HTML>
Was zwischen <SCRIPT...> und </SCRIPT> steht wird als Script-Body interpretiert und ggf.
als JavaScript ausgeführt.
Es gibt noch eine Technik, JavaScript in Webseiten einzubinden : Einbindung von
Bibliotheken aus externen Quellen, z.B. aus dem Dateisystem:
Bsp.: <SCRIPT language = „JavaScript“ SRC = „myscript.js“> (diese Anweisung muß
im Rumpf des <HEAD> - Tags erfolgen, sonst für
Dokument unsichtbar).
</SCRIPT>
oder durch einen URI:
Bsp.: <SCRIPT language = „JavaScript“ SRC =
„http://www.irgendwo.de/myscript.js“>
</SCRIPT>
4.2
Mit // wird der Rest der Zeile als Kommentar interpretiert und von Browser ignoriert.
Komplette Textblöcke, die zwischen /* und */ stehen, gelten als Kommentare.
4.3
Eines der wichtigsten Konzepte von JavaScript ist das Objekt. Es gibt vier Gruppen von
Objekten:
1. Browser Objekte: document, window, location, history, navigator;
Wichtige Methoden von window: alert(text) – Gibt den Text text in einem Dialogfenster aus;
open() – Öffnet ein neues Fenster; confirm(text) – Blendet ein Dialogfenster mit 2 Buttons
für OK und Abbrechen und dem angegebenen Text text ein; close() – Schließt ein Fenster.
Bsp.: window.open(„doc.html“);
document – Objekt erlaubt die dynamische Generierung von HTML – Seiten.
Bsp.: document.write(„Hallo Welt“); Hier wird die Methode write des Objekts document
mit dem Parameter „Hallo Welt“ aufgerufen. Nach solchem Syntax unterscheidet JavaScript
Interpreter eindeutig zwischen Methoden, Objekten und Parametern.
location – Objekt enthält Eigenschaften vom aktuellen URL.
Bsp.: location.href = „http://www.terrapin.com/samples/vsimple.html
!" $#%'&
(!)" )" +*(,-.
/0 12 345 0 687:9 ;2 < =%>?:6 4@$A History.go(-2);
Navigator – Objekt enthält Eigenschaften über Navigator, z. B.:
navigator.appName – definiert die Name des Navigators; navigator.appVersion – Version.
2. Vordefinierte Objekte: Date, Math, RegExp, Function ...
Date – Objekt – zur Erzeugung und Manipulation von Datum und Zeit: dateObjectName
= new Date(1999,12,23,12,00,00,200);
Math – Objekt –Eine Samlung von Methoden und Eigenschaften aus Mathematik, wie
z.B.: sin, cos oder PI;
RegExp – Objekt - Eine Samlung von Methoden und Eigenschaften zur Bearbeitung von
regulären Ausdrücken: re = new RegExp("ab+c")
3. HTML – Objekte: Link, Form, Button, Checkbox, Submit ...
Diese Objekte werden im Dokument erzeugt und können in der JavaScript-Funktion
aufgerufen und manipuliert werden.
Bsp. für Form-Objekt:
...
<FORM action = ...
onClick = „myFunktion(this)“; ... >
<INPUT TYPE="text" ...>
<P>
<INPUT NAME="button1" TYPE="button" VALUE=... >
</FORM>
...
function myFunktion(form) {
if(isEmpty(form.elements[1].value)) {
...
Selbstdefinierte Objekte
Neben den existierenden Objekten der Sprache gibt es Möglichkeit eigene Objekte nach
Schema: Objekt = { Eigenschaft1: Wert1,...,Eigenschaft n: Wert n} zu definieren.
Bsp.: Objekt1:
function tier(gattung,name,haut,besitzer) {
this.gattung = gattung;
this.name = name;
this.haut = haut;
this.besitzer = besitzer;
}
Objek2:
function person(vorname,name) {
this.vorname = vorname;
this.name = name;
}
4.
Dann kann neue Objekte erzeugen:
person1= new person(„Peter“,“Meier“);
einTier = new tier(„Bär“,“Winnie“,“Pelz“,person1);
Auf Eigenschaften, z.B. Name des Besitzers kann man durch Ausdruck:
einTier.besitzer.name zugegriffen werden.
Da JavaScript alle Zuweisungen dynamisch durchführt und auch für Objekte keine
Struktur deklariert werden muß, können auch neue Eigenschaften einfach durch
Zuweisung wie einTier.farbe = „braun“; einTier.besitzer.alter = 37; angefügt werden
und das alles im beliebige Stelle des Programms(im unterschied zu Java oder C++, wo es
innerhalb einer Klasse passieren soll).
Es ist gute Still – delete zu benutzen um aufzuräumen, obwohl das ist nicht unbedingt
nötig ist: ein Objekt wird auf jeden Fall zerstört, sobald die Seite verlassen wird.
JavaScript hat ein hierarchisches Objektmodell. Objekt window ist das oberste Objekt in
der Objekthierarchie von JavaScript, denn es ist gewissermaßen der Container für alles, was
in einem Fenster des Browsers angezeigt werden kann. Unterobjekte sind frame, dokument,
location und history. Das Objekt document hat wiederum mehrere Unterobjekte, so z. B.: für
Bilder, Verweise oder Form-Elemente.
Also, die Aufgabe der Objekthierarchie ist es, dem Programmierer den Zugriff auf alle
Objekte innerhalb des Browserfensters zu ermöglichen. Jedes Objekt besitzt eigene
Funktionalitäten, die individuell aufgerufen werden können. Dies sind die Methoden des
Objekts.
Noch ein Vergleich: Klassenorientierte Sprachen gegen Prototypeorientierten.
Ein Beispiel, wie JavaScript mit den HTML-Objekten manipulieren kann:
<script language="javascript"><!--window.defaultStatus="Willkommen bei Rad Online!";
function isBad (wort) {
var bad = new Array("Ihr Vorname", "Ihr Nachname", "0");
if (!wort)
return true;
for (var i = 0; i < bad.length; i++ ) {
if ( wort.indexOf(bad[i]) >= 0) {
return true;
}
}
return false;
}
function testForm() {
if ( isBad ( B C D E H
F G I J K
L G %
M 8J G NNK(
O P D Q I P H
F G K
R P N
E G )){
alert("Bitte geben Sie Ihren Nachnamen an!");
document.Bestell.Nachname.focus();
document.Bestell.Nachname.select();
return false;
}
if ( isBad( B C D E H
F G I J K
L G %
M 8J G NNK(
S C T I P H
F G K
R P N
E G )){
alert("Bitte geben Sie Ihren Vornamen an!");
document.Bestell.Vorname.focus();
document.Bestell.Vorname.select();
return false;
}
if ( !document.Bestell.Bestellung1.selectedIndex &&
!document.Bestell.Bestellung2.selectedIndex &&
!document.Bestell.Bestellung3.selectedIndexs ) {
alert("Bitte wählen Sie mindestens einen Artikel an!");
document.Bestell.Bestellung1.focus();
return false; ....
}
return true;
}
</script>
<h1>Rad Online</h1>
<p>Willkommen bei der Internet-Präsenz von "Rad Online",.....
<p>Bitte geben Sie ihre Bestellung in das nachfolgende Formular ein:</p>
<h3>Bestellung:</h3>
<table border="0" align="center" cellpadding="2">
W
U V Z
X :
Y ]
[ (
\ ^ :
_ `Z
X c
a d
b e
[ f
\ ` g _ c
X hk
i f
j Y :
_ %
Y `f
j k
l n
m _ (
j o _ (
\ p Y (
j o o f
j qf
p r
j
e
[ s
j :
_ k
t k
X u
p w
b (
v f
X x
o _
f
j (
a x
^ _ Z
y (
v j ]
b _ s
j (
z %
_ Z
{ f
v gf
\ `|
a
X (
a c
} f
~ f
l 
[ `
_ w
b Y j :
_ f
~ :
Y €
a _ k
j x
o :
_  Z
X :
Y 
[ ‚ ƒ
(
a f
\ e
[ c
j w
b Z
„ k
j x
o _ f
j g€
g …
<td valign="top">Nachname:</td>
Z
† ‡
‡Ž
I ˆ E k
J J ‰ ˆ s
G ‹
Š 8J x
G Œ 
J M s
G 
Š s
 d
‘ I P H
F s
G ’
Š k
O P D Q I P H
F “
G R P N
E G •
Š ” Q T (
O P D Q I P H
F —
G –
Z
† ‡
‡Ž
I ˆ E k
J J ‰ ˆ s
G ‹
Š 8J x
G Œ 
J M s
G 
Š s
 d
‘ I P H
F s
G ‹
Š k
S C T I P H
F “
G R P N
E s
G 
Š ” Q (
T (
S C T I P H
F ‹
G –
.......
<td valign="top">Bestellung(en)</td>
<td valign="top" align="center"><select name="Bestellung1" size="1">
<option selected> </option>
<option>Rennrad Modell 1</option>
......
4.4
Handling Events ist ganz leicht bei JavaScript. Es gibt vordefinierte Event Objekte, die man
folgendermaßen benutzen kann:
<INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!"
onClick="window.open('mydoc.html')">
4.5
Um Werte zu speichern, werden Variablen verwendet. Diese entsprechen Containern, die
Werte aufnehmen können. Obwohl JavaScript die primitive Datentypen wie Integer, Float
oder String besitzt, die müssen nicht explizit bei der Variablendeklarationen eingegeben
werden.
Bsp.: var x;
x = 15;
x = „Hallo“;
4.6
//Arrays initialisieren
Autos = [„BMW“, „Porsche“, „Mercedes“];
oder Autos = new Array („BMW“, „Porsche“, „Mercedes“);
//Ausgabe
document.write(Autos: “ + Autos[0] + „ , „ + Autos[2]);
JavaScript bietet eine ganze Reihe von Methoden, mit denen Arrays modifiziert werden
können. Die wichtigsten sind:
concat – vereinigt zwei Arrays zu einem neuen.
join – fügt alle Elemente eines Arrays zu einer Zeichenkette zusammen, wobei die
einzelnen Elemente durch ein Komma getrennt werden.
pop – entfernt das letzte Element.
push – fügt ein Element hinten an das Array an.
reverse – spiegelt die Reihenfolge des Arrays .
-
shift – entfernt das erste Element und gibt dessen Wert zurück.
sort – sortiert die Elemente eines Arrays aufsteigend.
z.B.:
myArray = new Array("Wind","Rain","Fire")
myArray.join() gibt "Wind,Rain,Fire" zurück;
myArray.reverse spiegelt das Array so, daß myArray[0] ist "Fire", myArray[1] ist
"Rain", und myArray[2] ist "Wind".
myArray.sort sortiert das Array so, daß myArray[0] ist "Fire", myArray[1] ist "Rain",
und myArray[2] ist "Wind".
Alles was weiter kommt wurde vom C unverändert übernommen deswegen wird nur an den
Beispielen angezeigt:
4.7
Bsp.: Zuweisungsoperatoren: x = y; x += y; ...
Logische Vergleichsoperatoren: x == y; x != y; ...
Arithmetische Operatoren: x % y; x++; ...
Logische Operatoren: x && y; x || y; ...
4.8
Bsp.: Definition: function kubik(zahl) {
return zahl*zahl*zahl;
}
Aufruf: Kubikzahl = kubik(100);
Teil 5
Quellen:
Zu JavaScript:
http://developer.netscape.com/docs/manuals/js/core/jsref/index.htm
http://developer.netscape.com/docs/manuals/js/client/jsref/index.htm
Zu JScript:
http://msdn.microsoft.com/scripting/default.htm?/scripting/jscript/ default.htm