JavaScript

Transcrição

JavaScript - auf Matthias

Netzprogrammierung
Mobiler Code
Robert Tolksdorf und Peter Löhr
Überblick
1. Eingebetter Code
2. Javascript
3. AJAX
4
11
35
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:
<script ....> ..... </script>
<object ...> ..... </object>
• Sicherheitsproblematik von mobilem Code:
Code aus möglicherweise dubioser Quelle wird
ausgeführt -> Gefahr von Trojanischen Pferden!
3
In HTML eingebetteter Code
Einbettung von Skript-Code
HTML-Elemente für eingebetteten Code - Beispiel:
<html>
.....
<script type="text/vbscript">
..................
VBScript Code
</script>
.....
<noscript><br>Cannot execute VBScript!</noscript>
.....
Wird ausgegeben, wenn der Browser die
gewünschte Skriptsprache nicht unterstützt.
(siehe HTML-Spezifikation [ http://www.w3.org/TR/html4/ ] Kap. 18)
5
Gemischte Sprachen
<html>
<head>
<META http-equiv="Content-Script-Type" content="text/vbscript">
.....
Gilt für gesamtes Dokument.
</head>
Voreinstellung ist "text/javascript".
<body>
.....
<script type="text/javascript">
..................
</script>
.....
<script>
..................
</script>
.....
JavaScript Code
VBScript Code
6
Skript-Code als Ziel eines Verweises
Ein HTML-Verweis (link, A element, tag <a> ) kann sich
auch auf Skript-Code beziehen:
<html>
.....
Unsere Geschäftsbedingungen finden Sie
<a href="http://www.dot.com/agb.html">hier.</a>
<br><br>
Unsere Coldline erreichen Sie
<a href="mailto:[email protected]">hier.</a>
Wenn Sie Ihren Namen eingeben wollen <br><br>
<a href="javascript: var name = prompt('Name:','');
if(name=='') ..... ">hier.</a>
.....
</html>
7
GUI-Interaktion
Skript-Code kann auch auf andere Weise auf vom Benutzer
ausgelöste Ereignisse (intrinsic events) reagieren. Beispiel:
<html>
<head>
<script>
function check() { ..... }
</script>
</head>
<body>
.....
<input type="button" name="checkButton" value="check input"
onclick=" check(); " >
.....
Auch hier beliebiger Skript-Code!
8
Ereignis-Attribute
•
•
•
•
•
•
•
•
onclick
ondblclick
onmouseover
onmouseout
onfocus
onblur
onsubmit
.....
Für jedes HTML-Element kommt eine gewisse
Auswahl aus diesen Ereignissen in Frage.
9
Dynamisches Verhalten ...
... ist nicht an GUI-Elemente gebunden!
<html<body>
<p onclick="firstChild.nodeValue = 'pong' ">
ping
<br>
pong
</p>
</body></html>
Beim Anklicken von ping oder pong
wird ping durch pong ersetzt.
(Siehe auch S. 23ff.)
Hintergrund: objektbasierte Repräsentation des Dokumentinhalts
gemäß dem Document Object Model (DOM) - siehe unten.
10
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
(Microsoft)
(Microsoft)
• VBScript
• Tcl
• Flash
• JavaScript wird von fast allen Browsern unterstützt!
• Flash ist attraktiv für Graphik/Animation
12
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
13
Ein erstes Beispiel
<html><head>
<script> function action() {
document.write("<br><font size=3 color='red'>");
document.write("<b>autsch!<\/b> <\/font> ") }
</script>
</head>
<body>
<br>Dies ist
<script> document.write("ein Test:<br><br>")
</script>
<input type="button" name="button" value="drück mich!"
onclick=" action() " >
<br><br>Nein,
<a href="javascript: alert('aua!') ">mich!</a>
</body>
</html>
Achtung: bei Skript-Fehlern schlechte oder
gar keine Fehlermeldungen!
14
Daten in JavaScript
• dynamisch getypt (wie andere Skriptsprachen auch) mit
•
•
•
•
•
•
•
Zahlen, z.B. 4711 3.14 -1
Zeichenketten, z.B. 'bobcat' "Bob's cat" 'Bob\'s cat\n‘
Wahrheitswerte: true false
Objekte, z.B. { re: 3.14, im: 0 }
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:
• mit Initialisierung:
var age;
(Wert ist undefined !)
var age = 23; (ohne var: global!)
• Konstanten:
const host = "localhost";
• Ausdrücke: ungefähr wie in Java
15
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
16
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, .....
17
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"]
18
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.
19
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, .....
• .....
20
vereinfachte Objekthierarchie
(aus http://www.comptechdoc.org/independent/web/cgi/javamanual/javaobjheir.html )
21
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 <a ..>..</a>
• 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!
22
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
23
Objekt document
• ... repräsentiert das im Browser-Fenster gezeigte HTMLDokument 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
<... id="string" ...>
• createElement(string) HTML-Element erzeugen, z.B. mit
dem string "h3" ein Überschrift-Element <h3> </h3>
24
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.
• <form name="myform" action="mailto:[email protected]"
onsubmit="Rumpf einer anonymen Boole‘schen Funktion">
(Ergebnis bestimmt, ob die Aktion ausgeführt wird)
• action: die action des Formulars, z.B. wie in
document.forms[0].action == mailto:[email protected]
• 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"
25
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
26
Prototyp element
• Element eines Formulars
• type:
• name:
• value:
gemäß <...type="type"...>
gemäß <...name="name"...>
gemäß <...value="value"...>
• Einzige Komponente - nur für Auswahllisten <select> :
• 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
27
Überprüfung von Formulareingaben
Zur Erinnerung:
gothic.html (12-Web-CGI, S. 28),
gothic.php (13-Web-PHP, S. 16)
.....
<FORM action="http://localhost/cgi-bin/alp5/gothic.cgi" method="GET">
First name:<INPUT type="text" name="firstname" size=10>
Last name:<INPUT type="text" name="lastname"><br>
Age:
<INPUT type="text" name="age" size=2><br>
email:
<INPUT type="text" name="email"><br>
Sex:
<INPUT type="radio" name="sex" value="Male"> male
<INPUT type="radio" name="sex" value="Female"> female
<br><br>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>
.....
28
Zur Erinnerung:
gothic.html (12-Web-CGI, S. 28),
gothic.php (13-Web-PHP, S. 16)
<? .....
$eligible =
$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' !
29
gothic.html mit Überprüfung der Eingabe im age-Feld:
<HTML>
<HEAD>
<SCRIPT>
function checkAge(val) {
var age = parseInt(val,10);
if (age.toString() == val && val>0 && val<200) return true;
else { document.bgColor = "red";
alert("incorrect age " + val);
document.bgColor = "white";
return false; } }
</SCRIPT>
</HEAD>
<BODY> .....
30
.....
<BODY>
<FORM action="http://page.mi.fu-berlin.de/lohr/php/gothic.php"
method="GET" name="form"
onSubmit="return checkAge(age.value)">
First name: <INPUT type="text" name="firstname" size=10>
Last name: <INPUT type="text" name="lastname"><br>
Age: <INPUT type="text" name="age" size=2><br>
email: <INPUT type="text" name="email"><br>
• onSubmit:
hier angegebene
Code value="Male">male
bildet den Rumpf einer
Sex:
<INPUT Der
type="radio"
name="sex"
anonymen
Boole‘schen
Methode
des Form-Objekts.
<INPUT
type="radio"
name="sex"
value="Female">female
• Er wird aktiviert, sobald das submit ansteht.
<br><br>
• Das type="submit"
submit wird nurvalue="Send">
dann ausgeführt,
wenn type="reset">
die Methode
<INPUT
<INPUT
den Wert true liefert.
</FORM>
• Dem age-Element des Formulars entspricht ein gleichnamiges
</BODY></HTML>
Komponenten-Objekt des Form-Objekts; dessen valueEigenschaft hat den im Textfeld eingetragenen value-Wert.
31
32
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/
33
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)
34
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
GUI1
GUI2
Antwort
Client
GUI3
Anfrage
Antwort
Server
Anfrage
Antwort
36
Ziel: änderbares GUI
Nur Teile des GUI sollen nach
Benutzerinteraktion mit nachgeladenen Daten geändert werden.
37
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
GUI1
Klient
mit AJAX
Anfrage
Antwort
Anfrage
Server
Antwort
38
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
39
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) {
......
// response received
0 (uninitialized)
} else {
1 (loading)
......
// still not ready
2 (loaded)
}
3 (interactive)
4 (complete)
40
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 )
41
AJAX: Beispiel
<script>
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);
asynchron
httpRequest.send(null);
Query String bei POST
} // end function makeRequest
42
AJAX: Beispiel
function alertContents() {
if (httpRequest.readyState == 4)
if (httpRequest.status == 200)
alert(httpRequest.responseText);
else alert('There was a problem with the request.');
}
</script>
<span
style="cursor: pointer; text-decoration: underline"
onclick="makeRequest('test.html')">
Make a request
</span>
Verbleibendes Problem: eventuelle nichtdeterministische Effekte
über die globale Variable httpRequest bei nebenläufigen
makeRequests. (Leicht behebbar - s.o. Mozilla Website.)
43
AJAX: Beispiel mit XML
• test.xml:
<?xml version="1.0" ?>
<root>
I'm a test.
</root>
• Im HTML:
... onclick="makeRequest('test.xml')"> ...
• Verarbeitung in alertContents:
var xmldoc = httpRequest.responseXML;
var root_node =
xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);
44
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
46
Literatur
• St. Münz: Web-Seiten professionell erstellen (3.Aufl.). AddisonWesley 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
47

JavaScript - auf Matthias

Transcrição

Documentos relacionados

Dirk Loehr: Unmoralische Steuerhinterziehung in einem

JavaScript leicht gemacht

Basic-Schriften

Profil - Diplom-Informatiker Frank Seitz

Anzeigen - Projektgruppe Schulprofil

dekra - BOS Auspuff

Referenzblatt-Sheraton Lagos Hotel DE

JavaScript Die ersten Schritte

Frontend-Entwickler / Web-Producer (m/w)