JavaScript - auf Matthias-Draeger.info

Netzprogrammierung 

Mobiler Code 

Robert Tolksdorf und Peter Löhr

Überblick 

1. Eingebetter Code 4 

2. Javascript 11 

3. AJAX 35 

Robert Tolksdorf und Peter Löhr 2

Klientenseitige Verarbeitung 

• „Dynamischer Inhalt“ kann auch bedeuten, dass eine an 

den Klienten gelieferte HTML-Seite Code enthält (oder 

auf Code verweist), der vom Browser - oder einem 

geeigneten Plugin des Browsers - auszuführen ist. 

Schlagwort: Dynamisches HTML. 

• Motivation: Eingabe-Überprüfung, visuelle Effekte, 

animierte Seiten, effiziente graphische Interaktion, 

Anpassung an die lokale Plattform. 

• Zwei Techniken für solchen mobilen Code: 

• eingebetteter Skript-Code: 

• nachzuladender Code: 

..... 

..... 

• Sicherheitsproblematik von mobilem Code: 

Code aus möglicherweise dubioser Quelle wird 

ausgeführt -> Gefahr von Trojanischen Pferden! 


In HTML eingebetteter Code 


Einbettung von Skript-Code 

HTML-Elemente für eingebetteten Code - Beispiel: 

 

..... 

 

.................. VBScript Code 

 

..... 

Cannot execute VBScript! 

..... 

Wird ausgegeben, wenn der Browser die 

gewünschte Skriptsprache nicht unterstützt. 

(siehe HTML-Spezifikation [ http://www.w3.org/TR/html4/ ] Kap. 18) 


Gemischte Sprachen 

 

 

 

..... 

 

Gilt für gesamtes Dokument. 

Voreinstellung ist "text/javascript". 

 

..... 

 

.................. JavaScript Code 

 

..... 

 

.................. VBScript Code 

 

..... 


Skript-Code als Ziel eines Verweises 

Ein HTML-Verweis (link, A element, tag ) kann sich 

auch auf Skript-Code beziehen: 

 

..... 

Unsere Geschäftsbedingungen finden Sie 

hier. 

 

Unsere Coldline erreichen Sie 

hier. 

Wenn Sie Ihren Namen eingeben wollen - 

 

hier. 

..... 

 


GUI-Interaktion 

Skript-Code kann auch auf andere Weise auf vom Benutzer 

ausgelöste Ereignisse (intrinsic events) reagieren. Beispiel: 

 

 

 

function check() { ..... } 

 

 

 

..... 

 

..... 

Auch hier beliebiger Skript-Code! 


Ereignis-Attribute 

• onclick 

• ondblclick 

• onmouseover 

• onmouseout 

• onfocus 

• onblur 

• onsubmit 

• ..... 

Für jedes HTML-Element kommt eine gewisse 

Auswahl aus diesen Ereignissen in Frage. 


Dynamisches Verhalten ... 

... ist nicht an GUI-Elemente gebunden! 

JavaScript 

https://developer.mozilla.org/en/JavaScript 

http://www.ecma-international.org/publications/standards/Ecma-262.htm 


Einschlägige Skript-Sprachen 

• Typische Sprachen für eingebetteten Skript-Code in HTML: 

• JavaScript mit Varianten 

• ECMAScript 

• Jscript 

• JScript.NET 

• VBScript 

• Tcl 

• Flash 

(Microsoft) 

(Microsoft) 

• JavaScript wird von fast allen Browsern unterstützt! 

• Flash ist attraktiv für Graphik/Animation 


JavaScript 

• JavaScript ist keine Java-Variante! 

• Mehrparadigmensprache: 

• objektorientiert mit Prototypen statt Klassen 

• funktional (beeinflusst durch Scheme, Self, Smalltalk, ...) 

• ausgeführt durch einen Interpretierer im Browser 

• kann umgehen mit Elementen des Dokuments und des 

umgebenden Browser-Fensters, ferner mit Ereignissen 

• auch auf der Server-Seite einsetzbar („SSJS“) 

• Meilensteine und Implementierungen: 

• JavaScript (1995): Netscape/Sun 

• ECMAScript: ECMA (European Computer Manufacturers 

Association) 

• JScript: Microsoft 

• Seit Version 1.5: Orientierung an DOM (Document Object 

Model): standardisierte Repräsentation des Dokumentinhalts 


Ein erstes Beispiel 

 

function action() { 

document.write(""); 

document.write("autsch! ") } 

 

 

 

Dies ist 

document.write("ein Test:") 

 

 

Nein, 

mich! 

 

 

Achtung: bei Skript-Fehlern schlechte oder 

gar keine Fehlermeldungen! 


Daten in JavaScript 

• dynamisch getypt (wie andere Skriptsprachen auch) mit 

• Zahlen, z.B. 4711 3.14 -1 

• Zeichenketten, z.B. 'bobcat' 

• Wahrheitswerte: true false 

• Objekte, z.B. { re: 3.14, im: 0 } 

"Bob's cat" 'Bob\'s cat\n‘ 

• Felder (sind auch Objekte), z.B. [4711, "4711", false] . 

• Reguläre Ausdrücke (sind auch Objekte), z.B. /ab*c/ 

• Funktionen ! (siehe unten) 

• Variablenvereinbarung: 

• ohne Initialisierung: var age; (Wert ist undefined !) 

• mit Initialisierung: 

• Konstanten: 

• Ausdrücke: ungefähr wie in Java 

var age = 23; (ohne var: global!) 

const host = "localhost"; 


Anweisungen in JavaScript 

• Einfache Anweisungen: 

• Zuweisung: V = E ; 

• return [ E ] ; 

• Zusammengesetzte Anweisungen: 

• wie in Java; zusätzlich: 

• for ( [ var ] variable in object ) statement 

iteriert über Attributnamen (property names) eines Objekts 

• for each ( [ var ] variable in object ) statement 

iteriert über Attributwerte (property values) eines Objekts 

• with (object) statement (vgl. Pascal) 

erlaubt in statement die Bezugnahme auf Attributnamen 

des Objekts ohne vorangestellten Objektbezeichner 

• Ausnahmebehandlung: ähnlich Java 


Funktionen in JavaScript 

• ... sind Werte - wie in funktionalen Sprachen 

• function ( parameters ) { statements } 

ist eine Prozedur/Funktionsprozedur mit lokalen Variablen 

• Parameter: Wertübergabe, keine Typangabe 

• function sqr(x) { return x*x; } ist Abkürzung für 

const sqr = function(x) { return x*x; } 

• Einschlägige Funktionale ab Version 1.6 verfügbar, z.B. 

map(sqr, [1,2,3]) == [1,4,9] 

• Variable Parameterlisten, Bezugnahme mit arguments[i], 

arguments.length 

• eval("string") interpretiert den als Zeichenkette 

übergebenen JavaScript Code (vgl. Lisp!) 

• viele Standardfunktionen: parseInt, String, ..... 


Objekte in JavaScript 

• Prototyp-Objekte statt Klassen 

• Eigenschaften, Attribute (properties) 

• Komponenten (sub-objects) 

• Methoden (methods) 

• Ereignisse (events) 

• Erzeugung mit Funktion als Konstruktor, z.B. 

function Complex(re, im) { this.re = re; this.im = im; } 

const notpi = new Complex(3.14, x); (vgl. Beta) 

• Somit Funktionsname als Ersatz für Klassenname! 

• ... oder kürzer mit Wertbezeichner in { }: 

const notpi = { re: 3.14, im: x } 

• Die Eigenschaften sind auch als Tabelle (assoziatives 

Feld) ansprechbar: notpi.re == notpi["re"] 


Methoden von Objekten 

• Methoden können als Funktionen dem Konstruktor 

übergeben oder auch dynamisch (!) an ein Objekt 

gebunden werden. Der Methodenname kann ad hoc 

eingeführt werden! Beispiel: 

object.method1 = somefunction; 

object.method1(...); 

// binding 

// invocation 

Die Funktion bezieht sich mittels this auf das Objekt. 

• Funktionen sind selbst wiederum Objekte. 

• Objektmodell ist extrem reichhaltig und flexibel. 

• Zum JavaScript-Experten wird man nicht an einem Tag. 


Vordefinierte Objekte 

• Sprachbezogene Objekte: 

• Number, Boolean, String, Array 

• Date, Math 

• Vom Browser bereitgestellte Objekte; diese bilden eine 

Baustein-Hierarchie (containment, aggregation) z.B. 

• window repräsentiert Browser-Fenster und enthält Objekte 

frame, document, ... 

• document repräsentiert das im Fenster gezeigt Dokument 

und enthält forms, images, ... 

• Ein form-Objekt repräsentiert ein HTML-Formular und 

enthält elements verschiedener HTML-Typen wie text, 

button, submit, ..... 

• ..... 


vereinfachte Objekthierarchie 

(aus http://www.comptechdoc.org/independent/web/cgi/javamanual/javaobjheir.html ) 


Objektbaum 

• Alle HTML-Elemente, Attribute und Texte eines Dokuments 

sind als Knoten eines Objektbaums repräsentiert und 

haben Eigenschaften und Methoden des Prototyps node. 

• Typische Eigenschaften: 

• childNodes: Feld der Kindknoten 

• nodeName: Marke eines Elements, z.B. A für .. 

• Typische Methoden: 

• appendChild(node) hängt angegebenen Knoten an 

• removeChild(node) entfernt angegebenen Knoten 

• deleteData(from,length) löscht Teil eines Attribut- oder 

Textwerts 

• Beachte: Jede Änderung am Objektbaum hat eine 

entsprechende Änderung der Darstellung zur Folge! 


Objekt window 

• ... repräsentiert das Browser-Fenster, in dem der 

JavaScript Code abläuft. Beachte: statt window.xyz 

kann man auch self.xyz oder xyz schreiben. 

• Typische Eigenschaft: 

• status: Inhalt der Statuszeile (unten); kann beliebig 

gesetzt werden! 

• Typische Komponente: 

• document: das im Fenster gezeigte Dokument (s.u.) 


• alert(warning) öffnet Extrafenster mit Warnungstext 

• confirm(question) öffnet Extrafenster mit ja/nein-Frage 

und liefert true/false entsprechend der Benutzerreaktion 

• back() geht zur letzten Seite zurück 

• open(URI, name) öffnet ein neues Fenster 


Objekt document 

• ... repräsentiert das im Browser-Fenster gezeigte HTML- 

Dokument mit allen seinen Elementen. 

• Typische Eigenschaft: 

• bgColor: Hintergrundfarbe, z.B. "#FFFFFF" (weiß) oder "red" 

• Typische Komponente: 

• forms: Feld mit allen Formularen des Dokuments 


• open()/close() öffnet/schließt das Dokument zum Schreiben 

• write(string) schreibt HTML-Text string ins Dokument 

• leert Schreibpuffer und schließt das Dokument 

• getElementById(string) liefert das HTML-Element 

 

• createElement(string) HTML-Element erzeugen, z.B. mit 

dem string "h3" ein Überschrift-Element 


Prototyp form 

• Beachte: form ist prototypisches Objekt für alle Objekte, 

die ein HTML-Formular repräsentieren. Dagegen ist 

document.forms das Feld aller Formulare im Dokument. 

• 


(Ergebnis bestimmt, ob die Aktion ausgeführt wird) 

• action: die action des Formulars, z.B. wie in 

document.forms[0].action == mailto:info@dot.com 

• method: die beim Abschicken der eingetragenen Werte zu 

verwendende Methode, z.B. wie in 

document.forms[0].method = "post"; 

• name: der Name des Formulars, z.B. wie oben "myform" 


Prototyp form 

• Einzige Komponente: 

• elements: Feld der in einem Formular enthaltenen Elemente, 

z.B. wie in (siehe gothic.html, 12-Web-CGI, S. 30) 

document.forms[0].elements[2].name == "age" 

• Beachte: Wenn ein Formular im HTML-Text wie oben 

benannt ist und die in ihm enthaltenen Elemente auch, 

kann man mit diesen Namen auf die Elemente Bezug 

nehmen. 

Die folgenden Ausdrücke haben alle den Wert "age" : 

• document.forms[0].elements[2].name 

• document.forms[0].age.name 

• document.myform.age.name 


Prototyp element 

• Element eines Formulars 


• type: 

• name: 

• value: 

gemäß 

gemäß 

gemäß 

• Einzige Komponente - nur für Auswahllisten : 

• options: das Feld der Wahlmöglichkeiten 

• Typische Methoden - simulieren Aktionen des Benutzers: 

• focus() wählt Element mit Maus 

• blur() annulliert Elementauswahl 

• select() markiert Text in ausgewähltem Textfeld 

• click() klickt ein clickable Element an 


Überprüfung von Formulareingaben 

Zur Erinnerung: gothic.html (12-Web-CGI, S. 28), 

gothic.php (13-Web-PHP, S. 16) 

..... 

 

First name: 

Last name: 

Age: 

email: 

Sex: male 

female 

 

 

 

..... 



Zur Erinnerung: gothic.html (12-Web-CGI, S. 28), 

gothic.php (13-Web-PHP, S. 16) 

 

$sex=='Male' && $age>'70') || 

$sex=='Female' && $age>'75'; 

Wenn für age korrekt eine natürliche Zahl eingegeben 

wurde, funktionieren diese Vergleiche, weil PHP für den 

Vergleich die Operanden in die entsprechenden Zahlen 

umwandelt! Wenn nicht, gilt z.B. 'xy'>'70' ! 



gothic.html mit Überprüfung der Eingabe im age-Feld: 

 

 

 

function checkAge(val) { 

var age = parseInt(val,10); 

if (age.toString() == val && val>0 && val


..... 

 

 

First name: 

Last name: 

Age: 

email: 

Sex: • onSubmit: male 

bildet den Rumpf einer 

female 

des Form-Objekts. 

• Er wird aktiviert, sobald das submit ansteht. 

dann ausgeführt, 

die Methode 

den Wert true liefert. 

 

• Dem age-Element des Formulars entspricht ein gleichnamiges 

Komponenten-Objekt des Form-Objekts; dessen value- 

Eigenschaft hat den im Textfeld eingetragenen value-Wert. 




Sicherheit 

• Mit JavaScript Code holt man sich unbekannten Code 

aus dem Netz - wie schützt man sich vor Trojanischen 

Pferden? 

• Sicherheitsstrategie des Browsers (security policy): 

• außer Zugriffen auf das eigene Dokument wird fast nichts 

erlaubt (z.B. keine Dateizugriffe). 

• Ausnahme: 

• Zugriff auf Ressourcen vom gleichen Server über gleichen 

Port und gleiches Protokoll (mit w = window.open(URL) ) 

• Kontrollierte Vergabe weiterer Rechte: ähnlich Java 

• Codebasis 

• signierte Dokumente 

• vgl. Applet-Sicherheit (15-Web-Applets, S. 32) 

• MS Internet Explorer: Sicherheitszonen 

• http://www.mozilla.org/projects/security/components/jssec.html 

http://www.devarticles.com/c/a/JavaScript/JavaScript-Security/ 


Empfehlung 

Die Web-Ressourcen zur verständlichen und umfassenden 

Darstellung von JavaScript und der DOM-Umgebung des 

Browsers sind dünn gesät. 

Eine empfehlenswerte Darstellung und Fundgrube von 

instruktiven Beispielen ist 

http://de.selfhtml.org/javascript/index.htm 

und dort auch zu HTML und anderen Themen rund ums Web: 

http://de.selfhtml.org/ 

(dort auch Hinweise auf diese Texte in Buchform) 


AJAX - Asynchronous JavaScript and XML 


HTTP-Interaktionen und GUI 

• Problematik: Durch die Anfrage/Antwort-Interaktion des 

HTTP wird bei jeder action ein völlig neues GUI im 

Browser aufgebaut 

Anfrage 

GUI 1 

Antwort 

GUI 2 

Client 

Anfrage 

Antwort 

Server 

GUI 3 

Anfrage 

Antwort 


Ziel: änderbares GUI 

Nur Teile des GUI sollen nach 

Benutzerinteraktion mit nachgeladenen 

Daten geändert werden. 


AJAX 

• Asynchronous JavaScript and XML (AJAX) realisiert dies 

durch Kombination von 

• Präsentationssprachen XHTML und CSS 

• Interaktion und Modifikation im Browser mit DOM 

• Datenaustausch mit XML 

• Datentransfer durch asynchrone HTTP-Anfragen 

• JavaScript integriert diese Technologien 

Anfrage 

Antwort 

GUI 1 

Klient 

mit AJAX 

Anfrage 

Antwort 

Server 

Anfrage 

Antwort 


AJAX 

• JavaScript Code im Dokument kann weitere HTTP-Anfrage 

starten, deren Antwort das aktuelle Dokument nicht 

ersetzt, sondern nur modifiziert. 

• Die Anfrage erfolgt mit Hilfe eines XMLHTTP-Objekts, 

dessen Konstruktorfunktion von der Umgebung abhängt: 

if (window.ActiveXObject) 

// IE 

http_request = new ActiveXObject("Microsoft.XMLHTTP"); 

else if (window.XMLHttpRequest) // Mozilla, Safari, ... 

http_request = new XMLHttpRequest(); 

• Funktion f definieren, die festlegt, was beim Eintreffen 

der Antwort zu tun ist, und damit: 

http_request.onreadystatechange = f 


AJAX 

• Asynchrone Anfrage starten: 

http_request.open('GET', 'http://www.dot.com/some.file', true); 

http_request.send(null); 

• auch Query String statt null bei Verwendung von POST 

• “beim Eintreffen der Antwort” genauer: 

• http_request.readyState von 0 bis 4 

• bei jeder Zustandsänderung wird die Funktion f aufgerufen 

• bei Zustand 4 liegt die Antwort vollständig vor 

if (http_request.readyState == 4) { 

} else { 

} 

. . . . . . // response received 

. . . . . . // still not ready 

0 (uninitialized) 

1 (loading) 

2 (loaded) 

3 (interactive) 

4 (complete) 


AJAX 

• HTTP-Statuscode prüfen 

if (http_request.status == 200) { 

. . . . . . . // perfect! 

} else { 

. . . . . . . // problem 

// 404 (Not Found) ? 

// 500 (Internal Server Error) ? 

} 

(Siehe 

https://developer.mozilla.org/en/AJAX/Getting_Started 

http://www.brainjar.com/dhtml/ajax/default2.asp ) 


AJAX: Beispiel 

 

var httpRequest; 

function makeRequest(url) { 

httpRequest = false; 

if (window.XMLHttpRequest) // Mozilla, Safari,... 

httpRequest = new XMLHttpRequest(); 

else if (window.ActiveXObject) // IE 

try { httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } 

catch (e) { 

try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } 

catch (e) {} } 

if (!httpRequest) { 

alert('Giving up: Cannot create an XMLHTTP instance'); 

return false; } 

httpRequest.onreadystatechange = alertContents; 

httpRequest.open('GET', url, true); 

httpRequest.send(null); 

} // end function makeRequest 

asynchron 

Query String bei POST 


AJAX: Beispiel 

function alertContents() { 

if (httpRequest.readyState == 4) 

if (httpRequest.status == 200) 

alert(httpRequest.responseText); 

else alert('There was a problem with the request.'); 

} 

 

 

Make a request 

 

Verbleibendes Problem: eventuelle nichtdeterministische Effekte 

über die globale Variable httpRequest bei nebenläufigen 

makeRequests. (Leicht behebbar - s.o. Mozilla Website.) 


AJAX: Beispiel mit XML 

• test.xml: 

 

 

 

• Im HTML: 

I'm a test. 

... onclick="makeRequest('test.xml')"> ... 

• Verarbeitung in alertContents: 

var xmldoc = httpRequest.responseXML; 

var root_node = 

xmldoc.getElementsByTagName('root').item(0); 

alert(root_node.firstChild.data); 


Zusammenfassung 


Zusammenfassung 

• Javascript 

• Mehrparadigmen-Sprache, eingebettet in Web-Seiten 

• Zugriff auf Dokumentenstruktur im Browser gemäß DOM 

• Ereignisgesteuerte Ausführung 

• Sicherheit! 

• AJAX 

• Dynamische Veränderung von GUI-Teilen 

• ermöglicht durch asynchronen HTTP-Zugriff und 

Veränderung des Dokuments 


Literatur 

• St. Münz: Web-Seiten professionell erstellen (3.Aufl.). Addison- 

Wesley 2008 

(Siehe auch SelfHTML: http://www.selfhtml.org) 

• D. Flanagan: JavaScript (5.ed.). O‘Reilly 2006 

• Mozilla Developer Center: JavaScript. 

https://developer.mozilla.org/en/JavaScript 

• Mozilla Developer Center: JavaScript Security. 

http://www.mozilla.org/projects/security/components/jssec.html 

• Mozilla Developer Center: AJAX. 

http://developer.mozilla.org/en/docs/AJAX

JavaScript - auf Matthias-Draeger.info

Erfolgreiche ePaper selbst erstellen

Template löschen?

Als Template speichern?