Hochschule Darmstadt Fachbereich Informatik
Werbung
2.3 Clientseitige Programmierung
Interaktion mit Webseiten auf dem Client
Hochschule Darmstadt
Fachbereich Informatik
Seitenumschaltung
Hotwords, (transparente) Schaltflächen, sensitive Grafik
HTML
Eingabeformulare
2.3 Clientseitige Programmierung
Listbox, Checkbox, Radiobutton
Konsistenzprüfung der Eingabewerte
(auf dem Client !)
HTML
ECMAScript
objektbezogene Ereignisbehandlung
Veränderung der HTML-Seite
(auf dem Client !)
ECMAScript,
DOM
Ajax
allgemeine Programmierung
aufwändige Visualisierung (Konfigurator beim Autokauf),
spezielle Widgets (TreeControl)
Java Applet
Flash
wird in der Vorlesung nicht behandelt
162
163
Hahn, Kreling, Blechschmidt-Trapp, h_da Fachbereich Informatik, Entwicklung webbasierter Anwendungen, WS 09/10
Hahn, Kreling, Blechschmidt-Trapp, h_da Fachbereich Informatik, Entwicklung webbasierter Anwendungen, WS 09/10
2.3 Clientseitige Programmierung
Zur Abgrenzung: Server-seitig
Content Management System
2.3 Clientseitige Programmierung
Skriptsprachen wurden ausgebaut
Große Datenmengen
bzw. persistente
Daten werden auf
dem Server gehalten!
Ursprung: Programmierung von Eingabeformularen
Ereignisbehandlung war auf Formulare beschränkt
komplexere Aufgaben erforderten Java,
aber selbst damit kein Zugriff auf HTML-Dokument
Durchsuchen großer Datenmengen
Datenbankabfrage (z.B. Fahrplanauskunft)
Volltextsuchmaschine
seit ca. 1999: Layout-Elemente als programmierbare Objekte
Speicherung von Daten
alle Eigenschaften per Skript änderbar
Ereignisbehandlung mit zugeordneten Skripten
Gästebuch, Schwarzes Brett, Bestellungen
Realisierungsmöglichkeiten
CGI, proprietäre Server-APIs (NSAPI, ISAPI)
PHP, ASP, JSP
Java Servlet
Java Applet mit RMI (remote method invocation)
...
Seiten können vom Surfer modifiziert werden (z.B. Warenkorb)
ermöglicht Anzeige von Berechnungsergebnissen (z.B. Gesamtkosten)
ermöglicht Auf- und Zuklapp-Effekte
ermöglicht lokale Animationen
...
164
Hahn, Kreling, Blechschmidt-Trapp, h_da Fachbereich Informatik, Entwicklung webbasierter Anwendungen, WS 09/10
165
Hahn, Kreling, Blechschmidt-Trapp, h_da Fachbereich Informatik, Entwicklung webbasierter Anwendungen, WS 09/10
2.3 Clientseitige Programmierung
2.3 Clientseitige Programmierung
Beispiel (ECMAScript eingebettet in HTML)
Historie
hatte mit Java nur C gemeinsam
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Sinn des Lebens</title>
<script type="text/javascript">
<!-var Hinweis = "Gleich werden Quadratzahlen
ausgegeben"; alert(Hinweis);
Ursprung: JavaScript (Netscape) in Navigator 2.0
von Netscape an Microsoft lizenziert; MS hinkte hinterher
HTML-Kommentar!
Alte Browser geben
sonst das Skript als
Text aus
function SchreibeQuadrate() {
var SinnDesLebens = 42;
var i, x;
var Satzteil = "Das Quadrat von ";
for(i=1; i <= SinnDesLebens; ++i) {
ersetzt das
x = i * i;
aktuelle
Dokudocument.write(Satzteil+i+" ist "+x+"<br />");
ment (besser
}
via DOM)
}
//-->
</script>
Ausführung zu
</head>
<body onload="SchreibeQuadrate()">
Beginn des
</body>
Ladevorgangs
</html>
JScript (Microsoft)
lizenzunabhängige Sprachvariante mit MS-eigenen Erweiterungen
(MSIE versteht JavaScript und JScript)
ECMAScript (ECMA-262, herstellerunabhängig)
European Computer Manufacturer's Association, Genf
- aktuell: 3rd Edition, 1999
darauf
konzentrieren
wir uns
autorisiert von W3C, übernommen als ISO / IEC 16262
Netscape und Microsoft haben Einhaltung zugesagt
http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
Quelle: SelfHTML
166
167
Hahn, Kreling, Blechschmidt-Trapp, h_da Fachbereich Informatik, Entwicklung webbasierter Anwendungen, WS 09/10
Hahn, Kreling, Blechschmidt-Trapp, h_da Fachbereich Informatik, Entwicklung webbasierter Anwendungen, WS 09/10
2.3.1 ECMAScript: Definition
Overview
Hochschule Darmstadt
Fachbereich Informatik
Free-formatted with C-like
syntax. Careful formatting is
optional, unlike FORTRAN.
Interpreted and loosely-typed.
You don't have to wrestle with a
pedantic compiler.
Garbage collected with no
pointers. Like Java, someone
else cleans up your mess.
Floating point numbers and
Unicode strings. Basic types are
kept simple.
Arrays and objects.
Objects are easy and informal,
and have properties and
methods.
2.3.1 ECMAScript: Definition
Object-based, not objectoriented. Complex object
features are left out, unlike C++
or Java.
Null and undefined special
values. Variables and functions
can be created anytime.
Flexible functions.
Bare statements without a main()
will do. Variable parameters for
functions.
Highly portable. Hardware
independent, so it can run
anywhere, much like Java
168
Hahn, Kreling, Blechschmidt-Trapp, h_da Fachbereich Informatik, Entwicklung webbasierter Anwendungen, WS 09/10
☺
169
Hahn, Kreling, Blechschmidt-Trapp, h_da Fachbereich Informatik, Entwicklung webbasierter Anwendungen, WS 09/10
2.3.1 ECMAScript: Definition
Vergleich mit C
Syntax sehr ähnlich
2.3.1 ECMAScript: Definition
Einfache Literale (Notation für Werte)
man kann einfach mal
drauflos schreiben...
Notation wie in C
Zuweisung, if, switch, for, while, do, try catch, //, /*...*/
- Besonderheiten: with, for (var Prop in Objekt) {}
Konstanten, Operatoren (Stringverkettung mit +)
Variablen nicht typisiert
Zahlen sind immer Gleitkommazahlen
Schlüsselworte var bzw. function statt Typ in der Deklaration
Integer-Literal
Floating-Point Literal
String-Literal
Boolean-Literal
var
var
var
var
antwort
pi
Gruss
isPrime
=
=
=
=
42;
3.14;
"Hello World";
true;
Schlüsselworte null, true, false
Objekterzeugung mit new
Besonderheit für Strings
wie in Java; kein delete
wahlweise mit "..." oder '...'
ermöglicht String im String (z.B. String in HTML-Attributwert)
nicht zeilenorientiert
; wird am Zeilenende automatisch eingefügt, falls es fehlt
(kein Zeilenende hinter return oder vor ++ und -- lassen !)
170
Hahn, Kreling, Blechschmidt-Trapp, h_da Fachbereich Informatik, Entwicklung webbasierter Anwendungen, WS 09/10
171
Hahn, Kreling, Blechschmidt-Trapp, h_da Fachbereich Informatik, Entwicklung webbasierter Anwendungen, WS 09/10
2.3.1 ECMAScript: Definition
2.3.1 ECMAScript: Definition
Array
Assoziatives Array
das kann C nicht...
dynamisch erzeugtes und erweiterbares Objekt
das kann C nicht...
dynamisch erzeugtes und erweiterbares Objekt
ganzzahliger Index im Bereich 0..length -1
Elementtyp beliebig und nicht notwendigerweise einheitlich
String als Index
Elementtyp beliebig und nicht notwendigerweise einheitlich
vgl. Datenstruktur / struct / Hashtabelle / map / dictionary
Erzeugung
Erzeugung, Erweiterung und Zugriff
ohne Längenangabe für dynamische Erweiterung
var Vektor1 = new Array ();
mit Längenangabe (eine Zahl)
var Vektor2 = new Array (27);
mit Initialisierung (mehr als 1 Wert oder Objekt)
var Vektor3 = new Array ("abc", 55, "xyz");
var Vektor = new Array ();
Vektor["posLeft"] = 45;
var Element = Vektor["posLeft"];
Verarbeitung
häufig mit Hilfe von
for (var Element in Vektor) { ... }
Zugriff
var Element = Vektor2[4];
Vektor1[0] = "text";
var AnzahlElemente = Vektor2.length;
Arrays werden beim Zugriff auf DOM häufig gebraucht
Assoziative Arrays sind wirklich praktisch
172
Hahn, Kreling, Blechschmidt-Trapp, h_da Fachbereich Informatik, Entwicklung webbasierter Anwendungen, WS 09/10
173
Hahn, Kreling, Blechschmidt-Trapp, h_da Fachbereich Informatik, Entwicklung webbasierter Anwendungen, WS 09/10
2.3.1 ECMAScript: Definition
2.3.1 ECMAScript: Definition
Literale für Arrays
Funktionen
konstruieren Objekte
dürfen auch Ausdrücke als Elemente enthalten, d.h. die Elemente
müssen nicht ihrerseits Literale sein
werden im Rahmen der JSON genutzt (siehe Abschnitt "Ajax")
Deklaration mit Schlüsselwort function
Rückgabe von Werten aus Funktionen durch return
ein Rückgabeparameter wird nicht deklariert
Klammern nicht vergessen !
Beispiel
Literal für numerisch indiziertes Array
var Tiere = ["Hund", "Hamster", "Affe"];
ist Abkürzung für
var Tiere = new Array ("Hund", "Hamster", "Affe");
function Doppel (InParam) {
var OutParam = 2 * InParam;
return OutParam;
}
Literal für assoziatives Array (erzeugt eigentlich ein Objekt)
var Preise =
{ Margherita: 4.0, Salami: 4.5, Hawaii: 5.5 }
174
Hahn, Kreling, Blechschmidt-Trapp, h_da Fachbereich Informatik, Entwicklung webbasierter Anwendungen, WS 09/10
175
Hahn, Kreling, Blechschmidt-Trapp, h_da Fachbereich Informatik, Entwicklung webbasierter Anwendungen, WS 09/10
2.3.1 ECMAScript: Definition
2.3.1 ECMAScript: Definition
Vordefinierte Funktionen
Ausnahmebehandlung
Vordefinierte Funktionen können einfach aufgerufen werden
wie in Java / C++, Ausnahmeobjekte jedoch untypisiert
eval(Zkette)
try {
...
if (FehlerAufgetreten)
throw "Text oder Objekt";
...
}
catch (Ausnahme) {
// sofern es Text ist
alert (Ausnahme);
}
interpretiert übergebenes Argument als
Code; gibt Ergebnis zurück (z.B. Objekt)
auf numerischen Wertebereich prüfen
auf nicht-numerischen Wert prüfen
in Kommazahl umwandeln
String(anfang) in Ganzzahl umwandeln
Datum in Zahl umwandeln
In Zeichenkette umwandeln
CGI-Parameter für URL (de)kodieren
(vgl Abschnitt CGI)
Erzwingt n Nachkommastellen
isFinite(Wert)
isNaN(Wert)
parseFloat(Zkette)
parseInt(Zkette)
Number(Wert)
String(Wert)
encodeURI(Zkette)
decodeURI(Zkette)
Zahl.toFixed(n)
...
vollständige Übersicht und Details siehe SELFHTML
zusätzlicher finally-Block möglich wie in Java
wird in jedem Fall ausgeführt
sicherheitshalber einbauen, auch ohne eigenes throw
manche Browser werfen bei manchen JavaScript-Fehlern Ausnahmen
aus...
176
Hahn, Kreling, Blechschmidt-Trapp, h_da Fachbereich Informatik, Entwicklung webbasierter Anwendungen, WS 09/10
177
Hahn, Kreling, Blechschmidt-Trapp, h_da Fachbereich Informatik, Entwicklung webbasierter Anwendungen, WS 09/10
