E EWS-5.1
E3. Statische und dynamische Semantik am Beispiel PHP
E3.1 Statische Bindung von Namen
Namen im Programmtext werden an Objekte der Programmausführung gebunden:
Variablenname an Variable mit Speicherstelle
Funktionsname an definierte Funktion
Gültigkeitsbereich einer Bindung:
der Bereich des Programms, in dem ein Name n an das Programmobjekt o gebunden ist.
Außerhalb des Gültigkeitsbereiches ist n nicht an o sondern an ein anderes Programmobjekt
oder gar nicht gebunden.
Sprachen haben unterschiedliche Gültigkeitsregeln (engl.: scope rules).
Eine Bindung entsteht
* explizit durch eine Definition, z. B. in PHP: Funktionen und formale Parameter;
in C, C++, Java, u.v.a.m.: Variablen, Funktionen, Typen, Parameter, Marken etc.
* implizit durch Benutzung des Namens: z. B. in PHP: Variable
Explizite Definitionen ordnen dem Programmobjekt statische Eigenschaften zu: z. B.
in PHP:
Funktion: Anzahl und Übergabeart der Parameter, Funktionsrumpf
Parameter: Übergabeart
in statisch typisierten Sprachen:
Variable: Typ ihrer Werte { float x; int i; x = 3.1; i = 0;}
(c) 2003 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 501
Ziele:
Begriffe zur Bindung verstehen
in der Vorlesung:
Am Beispiel von EWS-5.2 wird erklärt:
* Name gebunden an Programmobjekt,
* Gültigkeitsbereich,
* Definitionen,
* explizit - implizit,
* definierte Eigenschaften.
--------------------------------------------------------------------------------
E EWS-5.2
Gültigkeitsbereiche in PHP-Programmen
Gültigkeitsregeln in PHP: Art des Namens Gültigkeitsbereich
Funktion ganzes Programm
Parameter sein Funktionsrumpf
lokale Variable ihr Funktionsrumpf
globale Variable $x ganzes Programm außer
Funktionsrümpfe ohne global $x
Beispiel für Gültigkeitsbereiche:
function namesOut ($v) {
global $out, $lineCnt;
$lg = strlen ($v);
fputs($out, $v);
$lineCnt++;
}
$out = fopen ("names","w");
$lineCnt = 0; $out
$sum = 0; $lineCnt
$lg = 5; $v $lg$lg
while ( ... ) { $sum
namesOut (...); namesOut
} strlen
print $lineCnt; fopen
fclose ($out);
(c) 2005 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 502
Ziele:
Gültigkeitsregeln von PHP verstehen
in der Vorlesung:
Am Beispiel wird erklärt:
* Anwendung der Gültigkeitsregeln,
* Gültigkeitsbereiche der Namen,
* ein Name mit zwei Bindungen.
--------------------------------------------------------------------------------
E EWS-5.4
E3.2 Lebensdauer von Variablen
Lebensdauer: Begriff der dynamischen Semantik
Zeit, während der eine Variable im Speicher existiert;
sie wird ausgedrückt in Bezug auf die Ausführung von Programmabschnitten
Art von PHP-Variablen Lebensdauer
globale Variable gesamte Ausführung des Programms
lokale Variable und Parameter einer Funktion Ausführung eines Aufrufes der Funktion
Beispielprogramm:
function ff ($pf) {gg(2*$pf); print $pf . "\n";}
function gg ($pg) {hh(3*$pg); print $pg . "\n";}
function hh ($ph) {print $ph . "\n";}
$x = 1; ff (5); print $x . "\n";
ausgeführte Aufrufe:
ff(5); gg(10); hh(30); print $ph; print $pg; print $pf; print $x;
x 1 x 1 x 1 x 1 x 1 x 1 x 1
pf 5 pf 5 pf 5 pf 5 pf 5
pg 10 pg 10 pg 10
ph 30
Variablen im Speicher und ihre Lebensdauer
(c) 2003 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 504
Ziele:
Begriff Lebensdauer verstehen
in der Vorlesung:
Am Beispiel wird erklärt:
* Lebensdauer von globalen und lokalen Variablen;
* die Ausführung eines Aufrufes erzeugt Speicher für die lokalen Variablen der aufgerufenen Funktion;
* Funktionen rufen Funktionen auf;
* zuletzt begonnener Aufruf wird zuerst beendet (Prinzip: last-in-first-out, LIFO);
* Speicher für Aufrufe wird nach LIFO-Prinzip organisiert (auch Keller-Prinzip genannt).
--------------------------------------------------------------------------------
E EWS-5.5
Rekursive Funktionsaufrufe
Rekursiv: auf sich selbst bezogen
Rekursive Funktion F:
Der Rumpf von F enthält einen Aufruf von F oder von einer anderen Funktion,
die F direkt oder indirekt aufruft.
Beispiel:
function fak ($n) {
if ($n <= 1) return 1;
else return $n * fak ($n - 1);
}
print fak (4). "\n";
ausgeführte Aufrufe:
fak(4) fak(3) fak(2) fak(1) return 1; return 2; return 6; return 24;
n 4 n 4 n 4 n 4 n 4 n 4 n 4
n 3 n 3 n 3 n 3 n 3
n 2 n 2 n 2
n 1
Variablen im Speicher und ihre Lebensdauer
(c) 2003 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 505
Ziele:
Rekursive Funktionen verstehen
in der Vorlesung:
Am Beispiel wird erklärt:
* Rekursive Definitionen von Funktionen, Produktionen, Bäume, Ausdrücken;
* wie auf EWS-5.4: jeder Aufruf hat seinen eigenen Speicher für lokale Variable - auch rekursive Aufrufe!
--------------------------------------------------------------------------------
E EWS-5.6
E3.3 Dynamische Semantik von Aufrufen
Der Aufruf einer Funktion führt die definierte Berechnung aus mit den (aktuellen)
Parameterwerten, die beim Aufruf angegeben sind. (siehe EWS-4.23)
Aufrufe haben die Form: FunctExpr ( [ Parameters ] )
Ein Aufruf wird in folgenden Schritten ausgeführt:
0. FunctExpr auswerten (ist meist nur ein Name), liefert eine Funktion.
1. Aktuelle Parameter an der Aufrufstelle auswerten.
2. Speicher für formale Parameter und lokale Variablen anlegen.
3. Die Werte der aktuellen Parameter an die formalen Parameter zuweisen
(bei Übergabeart call-by-value).
4. Anweisungen aus dem Funktionsrumpf im Speicher des Aufrufes ausführen.
5. Speicher (aus Schritt 2) freigeben; Ergebnis an die Aufrufstelle zurückgeben.
Verschieden Arten der Parameterübergabe: (siehe EWS-4.38)
Call-by-value: Der formale Parameter ist eine Variable, die mit dem
Wert des aktuellen Parameters initialisiert wird.
in PHP, C, C++, Java, Ada, Pascal, u.v.a.m.
Call-by-reference: in PHP, C++, Pascal
Call-by-value-and-result: in Ada
(c) 2007 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 506
Ziele:
Begriffe wiederholen
in der Vorlesung:
Begriffe werden wiederholt
--------------------------------------------------------------------------------
S EWS-6.1
S4 JavaScript
Skriptsprache, 1995 bei Netscape als LiveScript entwickelt dann in JavaScript
(unpassend) umbenannt. Standard ECMA 262 (1996) fasst JavaScript (Netscape) und
JScript (Microsoft) zusammen
* abgeleitet von Perl; Notation wie C, C++, Java, PHP; sonst kein Bezug zu Java
* interpretiert, dynamisch typisiert
* spezielle objektorientierte Eigenschaften
* eingebettet in HTML
* Interpretierer in Web-Browser integriert (Netscape, Internet Explorer)
* Zugriff auf Elemente des dargestellten Dokumentes (DOM)
Anwendungszwecke:
* Programme, die im Web-Browser des Client ausgeführt werden
* Bedienoberflächen in dynamischen Web-Seiten
* Reaktionen auf Ereignisse bei der Interaktion mit Web-Seiten
* Formular-Elemente dynamisch erzeugen, Eingabe prüfen
* Animationseffekte
(c) 2004 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 601
Ziele:
Übersicht
in der Vorlesung:
* Eigenschaften und Anwendungen werden erklärt.
* Alternative Sprache ist VBScript; weniger verbreitet.
--------------------------------------------------------------------------------
S EWS-6.2
Ein erstes Beispiel in JavaScript
Quadrat
onClick-Ereignis
Anzeige im
Browser
(c) 2004 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 602
Ziele:
Eindruck zum Einsatz von JavaScript
in der Vorlesung:
Am Beispiel wird erklärt:
* das Beispiel ausführen,
* Interaktion zwischen Benutzer und Browser,
* Programmstruktur,
* Einbettung in HTML-Datei.
--------------------------------------------------------------------------------
S EWS-6.3
S3.1 Einbettung in HTML
script-Tags
Programmfragmente in JavaScript können auf unterschiedliche Arten in HTML-Dateien
eingebettet werden. Wir betrachten hier 3 von 4 Arten:
1. Mit script-Tags geklammerte Programmfragmente:
}
Solche Programmfragmente werden ausgeführt und die Ausgabe, die sie erzeugen wird an
ihrer Stelle in die HTML-Datei eingesetzt und angezeigt (wie in PHP).
Funktionsdefinitionen erzeugen keine Ausgabe;
man bettet sie sinnvoll in dem head-Teil ein.
(siehe vorige Folie)
(c) 2007 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 603
Ziele:
Einbettung mit script-Tags kennen
in der Vorlesung:
Am Beispiel wird erklärt:
* Notation,
* Ausführung,
* Einbettung im head- oder body-Teil,
* document.writeln ist eine Funktion, die ihren Parameterwert als string ausgibt.
--------------------------------------------------------------------------------
S EWS-6.4
Einbettung: Werte spezieller HTML-Attribute
2. Einige HTML-Attribute benennen Ereignisse, die der Bediener auslösen kann, z. B.
einen Knopf betätigen.
Als Wert des Attributes wird eine Anweisungsfolge angegeben. Sie wird ausgeführt,
wenn das Ereignis eintritt.
3. In einem Anker-Element kann man statt einer URL auch eine Anweisungsfolge
mit vorangestelltem javascript: angeben. Beim Klicken darauf wird sie ausgeführt.
Musterlösung
Meist werden an solchen Stellen anderweitig definierte Funktionen aufgerufen.
(c) 2005 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 604
Ziele:
Anweisungen als Wert bestimmter HTML-Attribute
in der Vorlesung:
Am Beispiel wird erklärt:
* Hinweis auf Ereignisse (werden noch ausführlich behandelt;
* Anweisungen ausführen statt URL verfolgen;
* das Beispiel ausführen.
--------------------------------------------------------------------------------
S EWS-6.5
S3.2 Spracheigenschaften
Notation
Die Notation stimmt in Vielem mit der von PHP, vom Kern von C, C++ und Java überein.
einige wichtige Unterschiede:
Bezeichner, Wortsymbole:
Groß- und Kleinschreibung ist unterscheidend (case-sensitive):
headOut verschieden von headout
true und false aber nicht True oder False
Bezeichner:
einheitliche Schreibweise für alle Arten von Bezeichnern:
(Buchstabe | $ | _) (Buchstabe | $ | _ | Ziffer)*
Anweisungen:
abschließendes ; kann am Zeilenende entfallen
mit ; ohne ;
lineCount = 1; lineCount = 1
sum = 0; sum = 0
while (lineCount < 100) { while (lineCount < 100) {
... ...
} }
(c) 2004 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 605
Ziele:
Unterschiede der Notation im Vergleich mit PHP
in der Vorlesung:
An den Beispielen wird die Notation erklärt.
--------------------------------------------------------------------------------
S EWS-6.6
Variable und Zuweisungen
Variable und Zuweisungen haben die gleiche Bedeutung wie in PHP (siehe EWS-4.5).
* Variablennamen brauchen nicht durch ein $-Zeichen gekennzeichnet zu werden.
* Eine Variable kann (wie in PHP) Werte beliebiger Typen annehmen.
* Es wird (wie in PHP) unterschieden zwischen
globalen Variable x: gilt im ganzen Programm, außer in Funktionen mit einem lokalen x
lokale Variable: gilt in der Funktion, in der sie definiert ist
* Es gibt Definitionen für Variable.
Lokale Variable muss man, globale kann man definieren.
Wird eine Variable in einer Funktion benutzt aber nicht definiert, so ist sie global.
In einer Variablendefinition können eine oder mehrere Variable definiert werden,
sie können auch durch Zuweisung eines Anfangswertes initialisiert werden,
er muss durch ein Literal oder eine andere Variable angegeben werden.
var line;
var sum, result; function compute (n) { n lokal
var col, count = 3, row; var sum = n; sum lokal
var minimum = count, sum *= col; col global
maximum = 999; return sum;
}
(c) 2005 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 606
Ziele:
Definitionen von Variablen kennenlernen
in der Vorlesung:
An den Beispielen wird erklärt:
* Schreibweise von Definitionen,
* Initialisierung,
* Konsequenzen für lokal oder global.
--------------------------------------------------------------------------------
S EWS-6.7
Datentypen
number:
numerische Werte, ganze Zahlen und Gleitpunktzahlen zusammengefasst,
spezieller Wert für undefinierte Werte NaN (not a number)
Literale wie in PHP
arithmetische Operatoren wie in PHP
string:
Zeichenreihen
Literale: Klammerung mit " oder quotesingle ist gleichbedeutend
quotesingle Er sagt "Hallo!"quotesingle "Sagquotesingle s auch!"
Umschreibungen nicht-druckbarer Zeichen wie in PHP \n, \t, usw.
In Zeichenreihen werden Variablenwerte nicht eingesetzt (anders als in PHP)
Operatoren: Kontatenation +: "Er heißt " + name
string-Funktionen in Objekt-Notation (wird nicht hier erklärt)
boolean:
Wahrheitswerte
Literale: false, true
Operatoren: Konjunktion &&, Disjunktion ||, Negation ! (wie in PHP)
Undefined: einziger Wert undefined, Ergebnis bei Zugriff auf nicht-zugewiesene Variable
Objekte inklusive Arrays
Funktionen als Werte
(c) 2004 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 607
Ziele:
Datentypen kennen
in der Vorlesung:
An Beispielen wird erklärt:
* Wertebereiche,
* Literale,
* wichtige Operatoren.
--------------------------------------------------------------------------------
S EWS-6.8
Konversion
Alle Konversionen implizit (coercion), so wie der Kontext es erfordert:
in boolean:
von number: 0, NaN -> false, sonst -> true
von string: "" -> false, sonst -> true
von undefined: false
in number:
von boolean: false -> 0, true -> 1
von string: ganze Zeichenreihe (ohne Leerzeichen am Anfang und Ende)
wie ein numerisches Literal (ggf. mit Vorzeichen) lesen und
konvertieren;
leere Zeichenreihe (oder nur Leerzeichen) -> 0;
sonst NaN
von undefined: NaN
in string:
von boolean: false -> "false", true -> "true"
von number: Zahlwert als Zeichenreihe, wie Literal (ggf. mit Vorzeichen)
von undefined: "undefined"
(c) 2007 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 608
Ziele:
Konversionen kennenlernen
in der Vorlesung:
Die Tabelle wird kurz erklärt.
--------------------------------------------------------------------------------
S EWS-6.9
Operatoren
Präzedenz Stellig- Assozia- Operatoren Erklärung
(steigend) keit tivität
1 2 rechts = += -= usw. Zuweisungsoperatoren
2 3 links ?: bedingter Ausdruck
3 2 links || log. Disjunktion (oder)
4 2 links && log. Konjunktion (und)
5 2 links | Bitoperator
6 2 links ^ Bitoperator
7 2 links & Bitoperator
8 2 links == != === !== Gleichheit, Identität
9 2 links < <= > >= Ordnungsvergleich
10 2 links << >> >>> shift-Operatoren
11 2 links + - Konkatenation, Add., Subtr.
12 2 links * / \% Arithmetik
13 1 ! - ~ Negation (log., arithm., bitw.)
1 ++ -- Inkrement, Dekrement
1 typeof void Typ?; nach undefined konv.
14 1 () [] . Aufruf, Index, Objektzugriff
(c) 2007 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 609
Ziele:
zum Nachschlagen
in der Vorlesung:
Einige Operatoren werden an Beispielen erklärt.
--------------------------------------------------------------------------------
S EWS-6.10
Ablaufstrukturen
Anweisungsfolge: wie in PHP
{ st = st + "*"; i = i + 1; }
{ var k = 42; document.writeln (5*k); }
Durch var eingeführte Bindung gilt nicht nur in der Anweisungsfolge, sondern in
umgebender Funktion bzw. im umgebenden Programm.
Bedingte Anweisung: wie in PHP
if (a < 0) {a = b;} if (a < b) {min = a;} else {min = b;}
Bei einzelnen Anweisungen sind die {}-Klammern nicht nötig aber sinnvoll.
while-Schleife: wie in PHP
s = 0; while (s < n) {document.write ("*"); s++;}
for-Schleife: wie in PHP
for (s = 0; s < n; s++) {document.write ("*");}
Funktionsaufrufe: wie in PHP, aber nur call-by-value als Parameterübergabe
headOut ("Test") document.write ("*")
return-Anweisung: wie in PHP
return n*42; return;
(c) 2004 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 610
Ziele:
Nur wenige Unterschiede zu PHP lernen
in der Vorlesung:
Beispiele werden aus PHP wiederholt.
--------------------------------------------------------------------------------
S EWS-6.11
Funktionen
Funktionsdefinitionen: wie in PHP
function Ueberschrift (grad, text) {
var marke = "h"+grad;
document.writeln ("<"+marke+">"+text+"");
}
grad und text sind formale Parameter, grad, text und marke sind lokale Variable.
function fak (n) {
if (n<=1) return 1; else return n * fak (n-1);
}
Funktionen können im head- oder im body-Teil der HTML-Datei definiert werden.
Aufrufe können in jedem JavaScript-Fragment stehen.
Funktionen als Werte:
Funktionen kann man als Werte notieren. Literal für eine Funktion ohne Namen:
function (a, b) { return a + b; }
Solche Funktionsliterale kann man in Ausdrücken verwenden,
z. B. einer Variablen zuweisen
var add = function (a, b) { return a + b; };
und den Wert der Variablen (die Funktion) aufrufen: x = add (42*k, 3);
(c) 2006 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 611
Ziele:
Funktionen in JavaScript anwenden
in der Vorlesung:
An den Beispielen wird erklärt:
* Definitionen wie in PHP, aber
* Lokale Varaible mit var definieren; globale Variablen nicht definieren.
* Funktionen als Werte.
--------------------------------------------------------------------------------
S EWS-6.12
Arrays
Ein Array ist eine Abbildung von Indizes (oder Schlüsseln) auf Werte (wie in PHP):
Jedes Element eines Arrays ist ein Paar aus Index und zugeordnetem Wert;
erste Komponente der Paare: numerischer Index oder ein string als Schlüssel.
In JavaScript sind Arrays spezielle Objekte (wird nicht hier erklärt).
Arrays kann man auf verschiedene Weise erzeugen:
Liste von Werten: monatsName = new Array("", "Jan", ..., "Dez");
indiziert von 0 an, erster Wert ist hier irrelevant
leeres Array erweitern: monatsName = new Array();
monatsName[1]= "Jan"; monatsName[2]= "Feb";..
auch monatsNr = new Array();
monatsNr["Jan"] = 1; monatsNr["Feb"] = 2; ...
Zugriff auf die Werte von Array-Elementen durch
Indizierung wie in PHP: monatsName[4] oder monatsNr["Apr"]
Objektselektion: monatsNr.Apr
Schleife zum Aufzählen aller Elemente eines Arrays (ähnlich wie in PHP):
for (key in arr) { ... } arr muss ein Array sein;
mit key wird im Rumpf auf den Schlüssel eines Elementes zugegriffen
for (mname in monatsNr)
{ document.writeln (mname + "=>" + monatsNr[mname]); }
(c) 2004 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 612
Ziele:
Variante des Konzeptes aus PHP lernen
in der Vorlesung:
An den Beispielen wird erklärt:
* Konstruktion, Zugriff, Schleife
* Objektnotation
--------------------------------------------------------------------------------
S EWS-6.13
S3.3 Objekte
Ein Grundkonzept von JavaScript ist der Objektbegriff. Er wird hier nur soweit eingeführt,
dass die notwendigen Notationen verstanden werden.
Das aktuelle Fenster und das Dokument sind auch als Objekte verfügbar.
Ein Objekt wird im Speicher erzeugt und durch seine Speicherstelle eindeutig identifiziert.
student = {name:"E. Mustermann", matrNr:9999999};
erzeugt ein Objekt und weist seine Speicherstelle der Variablen zu.
Ein Objekt besteht aus Komponenten.
Sie haben jeweils einen Namen und einen Wert - wie Variable.
Das obige Objekt hat Komponenten mit Namen name, matrNr, usw.
Objektkomponenten werden durch Objekt-Ausdruck.Name zugegriffen.
student.name liefert "E. Mustermann"
Arrays und Zeichenreihen sind auch Objekte.
Array-Objekte haben auch eine Komponente length:
monatsName.length liefert 13 (den größten numerischen Schlüssel + 1, also 12+1)
Einige der Komponenten können auch Funktionen sein; sie heißen dann Methoden.
Ihre Aufrufe können die übrigen Komponenten des Objektes lesen oder verändern:
monatsName.reverse() monatsName.sort() document.writeln()
(c) 2007 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 613
Ziele:
Notationen des Objektbegriffes verstehen
in der Vorlesung:
An den Beispielen wird erklärt:
* Objekte im Speicher,
* ihre Komponenten,
* Arrays als Objekte,
* Methoden: Funktionen, die auf dem Objekt operieren, zu dem sie gehören.
--------------------------------------------------------------------------------
S EWS-6.14
Funktionen auf Zeichenreihen-Objekten
Zeichenreihen sind Objekte in JavaScript. Aufrufe von Funktionen (Methoden) auf
Zeichenreihen werden in Objekt-Notation geschrieben, z. B.
var Aussage = "Der Mensch ist des Menschen Feind";
var Suche = Aussage.indexOf("Mensch");
Die Funktion indexOf wird für die Zeichenreihe der Variablen Aussage mit dem Parameter
"Mensch" aufgerufen. In PHP hätten wir in Funktions-Notation stattdessen geschrieben:
$Suche = strpos ($Aussage, "Mensch");
Diese Aufrufe ändern die Zeichenreihe nicht, auf die sie angewandt werden:
Aussage.toLowerCase();
liefert eine neue Zeichenreihe: alle Großbuchstaben durch Kleinbuchstaben ersetzt.
Weitere string-Funktionen:
charAt(i) Zeichen an Position i liefern
replace(r, s) Auftreten des regulären Ausdruck r suchen und ersetzen durch s
search(r) suchen mit regulärem Ausdruck r
substr(p,l) Teilzeichenreihe ab Position p der Länge l liefern
Einige string-Funktionen erleichtern die Auszeichnung in HTML:
Inh = "Inhalt"; document.write(Inh.anchor("IH"));
gibt einen Anker in HTML aus: Inhalt
(c) 2004 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 614
Ziele:
Aufrufe auf Objekten verstehen
in der Vorlesung:
An den Beispielen wird erklärt:
* Objektnotation für Aufrufe: allgemeine Form ObjektAusdruck.FunktionsName(Parameter),
* Das Objekt des ObjektAusdruckes ist ein weiterer, spezieller Parameter,
* Bedeutung und Nutzen der string-Funktionen,
* Weitere findet man im Abschnitt JavaScript/"string" von SelfHTML.
--------------------------------------------------------------------------------
S EWS-6.15
Zugriff auf Elemente des Dokumentes
Aus dem JavaScript-Programm kann man auf Elemente des Dokumentes zugreifen, das
der Browser anzeigt. Das ist meist die HTML-Datei, in die das Programm eingebettet ist.
Damit kann man z. B. den Inhalt von Formular-Elementen prüfen:
Hier wird die Zugriffsstruktur angewandt:
document.FormularName.EingabeElementName.AttributName
Alternativ kann man die Formulare im Dokument und ihre Elemente jeweils indizieren:
document.forms[i].elements[j].AttributName
also für obiges Beispiel:
var zahl = document.forms[0].elements[0].value;
(c) 2004 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 615
Ziele:
Zugriffsstruktur anwenden können
in der Vorlesung:
An den Beispielen wird erklärt:
* mehrstufige Selektion mit Namen von HTML-Elementen,
* hierarchische HTML-Struktur entspricht den Selektionsstufen,
* mehrstufige Selektion mit Indizes von HTML-Elementen,
* Hinweis auf DOM
--------------------------------------------------------------------------------
S EWS-6.16
Document Object Model (DOM)
Das Document Object Model (DOM) regelt, welche Informationen ein Browser zur Client-
seitigen Programmierung, z. B. in JavaScript, verfügbar macht:
1. Eigenschaften des gerade angezeigten Dokumentes, wie
document.title Titel-string
document.forms[i] Formulare, durchnummeriert von 0 an
document.images[i] Bilder, durchnummeriert von 0 an
2. Methoden für das gerade angezeigte Dokument, wie
document.write(string, ...) Ausgabe von Zeichenreihen
document.writeln(string, ...) ebenso mit abschließendem Zeilenwechsel
3. Eigenschaften der vom Browser angezeigten URL, wie
location.href die gesamte URL
4. Methoden für die vom Browser angezeigte URL, wie
location.reload() erneut laden
location.replace(url) ein anderes Dokument anzeigen
Beispiel: Seitenwechsel
Sie sind auf der Seite:
(c) 2007 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 616
Ziele:
Möglichkeiten des DOM erkennen
in der Vorlesung:
Am Beispiel wird erklärt:
* Zugriffe auf Eigenschaften und Methoden des Dokumentes, der URL-Anzeige,
* Hinweise auf weitere Möglichkeiten,
* Benutzung am Beispiel
--------------------------------------------------------------------------------
S EWS-6.17
S3.4 Ereignisbehandlung
Ereignis in der Informatik (engl. event): Wahrnehmung einer Zustandsänderung.
Ereignis-getriebene Programmierung: Ereignissen werden Operationen zugeordnet
(Ereignisbehandler); sie werden bei Eintreten des Ereignisses ausgelöst; typisch für
Regelung und Steuerung realer Prozesse, Programmierung von Bedienoberflächen, z. B.
Ereignis Ereignisbehandlung
Temperatur überschreitet 90 C Kühlung anschalten
Temperatur unterschreitet 80 C Kühlung ausschalten
Knopf wird gedrückt Formular abschicken
Mauszeiger ist über dem Bild Bildüberschrift blinken lassen
Behandlung des Ereignisses Click als Attribut von Formular-Elementen:
(c) 2004 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 617
Ziele:
Ereignisbehandlung verstehen
in der Vorlesung:
Am Beispiel wird erklärt:
* Begriffe,
* Ereignisse bei Bedienoberflächen,
* 2 Arten der Zuordnung von Ereignisbehandlern,
* in der 2. Art können abhängig von Bedingungen unterschiedliche Ereignisbehandler zugewiesen werden.
--------------------------------------------------------------------------------
S EWS-6.18
Wichtige Ereignisse
Ereignisbehandler HTML-Elemente Bedeutung
onclick Knopf, Checkbox, Anker Element wird angeklickt
onchange Textfeld, Textbereich, Wert wird geändert
Auswahl
onkeydown Dokument, Bild, Anker, Taste gedrückt, losgelassen
onkeyup Textfeld
onkeypress
onmousedown Dokument, Knopf, Anker Maustaste gedrückt, losgelassen
onmouseup
onmouseout Bereiche, Anker Mauszeiger verlässt einen Bereich
onmouseover Anker Mauszeiger über Anker
onreset, Formular Reset, Submit für ein Formular
onsubmit
onselect Textfeld, Textbereich Element wird ausgewählt
onfocus Fenster, Eingabefokus wird dem Element
onblur alle Formular-Elemente gegeben, entzogen
(c) 2004 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 618
Ziele:
Nachschlagen
in der Vorlesung:
Am Beispiel werden einige Ereignisse erklärt
--------------------------------------------------------------------------------
S EWS-6.19
Beispiel: Bildtausch
Für ein img-Element werden die Ereignisse onmouseover
und onmouseout benutzt, um das Bild auszutauschen:
Bildtausch
Bild wechselt zwischen und
(c) 2004 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 619
Ziele:
Ereignisse benutzen
in der Vorlesung:
Am Beispiel wird erklärt:
* Ereignisse zuordnen,
* Attributwerte verändern,
* Beispiel für eine winzige Animation.
--------------------------------------------------------------------------------
S EWS-6.20
Unterschiede: Netscape Navigator und Internet Explorer
Leider sind Eigenschaften des Ereignismodells im Netscape Navigator und Internet Explorer
unterschiedlich realisiert. Man muss auf sie in separaten Programmzweigen zugreifen.
Navigator vs. Explorer
gerade eingetretenes Ereignis in der
Variablen event:
Netscape: lokal im Ereignisbehandler
Explorer: global
Koordinaten der Stelle, wo ein
Ereignis e eingetreten ist:
Netscape: e.pageX, e.pageY
Explorer: e.clientX, e.clientY
(c) 2004 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 620
Ziele:
Unterschiede der Browser umgehen
in der Vorlesung:
Am Beispiel wird erklärt:
* Unterschiede beim Zugriff auf Ereignisse,
* Browser unterscheiden,
* Programmzweige, bedingte Ausdrücke
--------------------------------------------------------------------------------
S EWS-6.21
Interaktion zwischen Client und Server
Client Host-Rechner
mit Browser mit Web-Server
URL HTML-Datei mit
Prüffunktion in
JavaScript
PHP-Programm für
Formular mit Prüffunktion Formular erzeugen
Benutzer-
Interaktion
Formular- geprüfte Formular-Eingaben
prüfung
Eingabe verarbeiten
Ergebnisse
(c) 2004 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 621
Ziele:
Ablauf verstehen
in der Vorlesung:
Am Beispiel wird erklärt:
* Interaktion:
* PHP-Programm erzeugt HTML-Formular,
* JavaScript-Programm prüft Eingabe,
* PHP-Programm verarbeitet Eingabe und schickt Ergebnis zurück.
* Vergleich mit Folie EWS-2.3
--------------------------------------------------------------------------------
S EWS-6.22
Beispiel mit Formularprüfung
Geprüfte Formular-Eingabe
";
}
?>
(c) 2007 bei Prof. Dr. Uwe Kastens
--------------------------------------------------------------------------------
Vorlesung Einführung in Web-bezogene Sprachen WS 2006 / Folie 622
Ziele:
Ereignisgesteuerten Ablauf verstehen
in der Vorlesung:
Am Beispiel wird erklärt:
* Einbettung der Programmteile (blau),
* Zweige im PHP-Programm (grün),
* Zugriff auf Formular-Eingaben (magenta),
* Behandlung des click-Ereignisses im Submit-Knopf (rot): check-Funktion wird aufgerufen; Ergebnis bestimmt die
Fortsetzung nach der Ereignisbehandlung:
* true: submit-Aktion wird ausgeführt,
* false: submit-Aktion wird nicht ausgeführt, es wird auf das nächste Ereignis gewartet.
--------------------------------------------------------------------------------
Koordinaten der Stelle, wo ein