4. Vorlesung JavaScript Anwendungsbeispiele ECMAScript

Transcription

JavaScript
• 6% JavaScript abgeschaltet (Stand Jan 2007)
4. Vorlesung
JavaScript, Ajax, Webengineering, PHP
JavaScript > Ajax > Webengineering >
EWA - WS 2007/08
PHP
©Dr. Ute Blechschmidt-Trapp
1
Anwendungsbeispiele
•
•
•
•
•
•
•
•
•
2
ECMAScript (JavaScript)
• Standard durch: Ecma International
• ereignisorientiert
• interpretiert im Client (Browser)
• Arrays
Formularvalidierung
Desktopähnliche Applikationen über AJAX
Menü
Dynamische Manipulation von Daten/Ansichten (DOM)
Spiele (Puzzle, Drag&Drop,...)
Sortieren von Tabellen
Zugriff auf Historie und Statusleiste
Cookies
Hilfefenster
EWA - WS 2007/08
PHP
EWA - WS 2007/08
PHP
–for(var Element in Menu)
–assoziative Arrays (Zeichenkette = Index)
–0.., dynamisch erweiterbar
• Syntax: javaähnlich
–Kontrollstrukturen
• switch, if, for, while
• try, catch, finally
–Farben: 0xFFD700
–Strings: " oder ’
–; wird autom. am Ende eingefügt
–Kommentare /*...*/, //
–var: lokal/privat
3
• untypisiert
–null
–dynamische Typisierung
• objektbasiert, nicht objektorientiert
• kein Zugriffsschutz
• eigener Objektbegriff
–DOM: window, document
(echte Objekte)
–Math, RegExp (eigentlich
Bibliotheken)
–Array, Boolean (eigentlich
Klassen)
• keine Mehrfachvererbung
–this
–prototype (Zeiger auf Basisklasse)
EWA - WS 2007/08
PHP
4
Syntaxbeispiele
• var a=1,b=2,c=4,d=8;
• var x=“ute” + “trapp”;
• function sqr(x)
{
var y=x*x;
return y;
JavaScript Code definieren
Zugriff auf HTML
• Knoten =
document.getElementById("xyz")
• Liste =
document.getElementsByTagName("
h3")
}
• Script dem Browser (Client) bekannt machen:
• im <head>-Tag
– <script type="text/javascript">
alert("Hallo Welt!");
cachebar
</script>
– <script src="quadrat.js" type="text/javascript"></script>
•
• var a = new Array();
im <body>-Tag
– <noscript><p>Bitte aktivieren Sie JavaScript</p></noscript>
a[1] = "Januar";
a[2] = "Februar";
• var links = new Array();
links["Netscape"] =
"http://developer.netscape.com";
links["Mozilla"] =
"http://www.mozilla.org";
EWA - WS 2007/08
PHP
5
Ereignisse - HTML
•
•
•
Maus:
– onclick, ondblclick,
onmousedown, onmouseup,
onmouseover, onmousemove,
onmouseout
Tastatur:
– onkeydown, onkeyup,
onkeypress
Datei/Fenster:
– onload, onunload, onabort,
onerror
•
•
•
EWA - WS 2007/08
PHP
Verbindung JavaScript - Ereignis im HTML
Formular:
– onsubmit, onreset
Formularelemente/a:
– onfocus, onblur
Formularelemente:
– onselect, onchange
Javascript an Ereignis binden und somit Ausführung erwirken:
• <a href="#">
<img src= "prod.jpg" alt="Produktfotografie" id="b1"
onclick="big(this);return false;" />
false: default-action (href) nicht ausführen.
</a>
• <form onsubmit="return FormulardatenOK();">
• <input type="submit" value="Abschicken" onclick="return
FormulardatenOK();"/>
• was Sie auch finden, aber nicht verwenden sollten
– <input type=“submit" onclick="check()" value="send" />
function check () {
{
var f=document.forms[0];
if(ok)f.submit();
}
EWA - WS 2007/08
PHP
6
7
Kein Versenden bei abgeschaltetem JS!
EWA - WS 2007/08
PHP
8
Verbindung JavaScript - Ereignis
Implizit im Skript - Trennung von HTML und JavaScript
window.onload=ini;
function ini() {
DOM
• generisches Objektmodell für
XML-Dokumente
• XML-Dokument: Baum aus
Knoten
• DOM-Api erlaubt Verändern des
Baumes
• Im DOM ist alles ein Knoten
(Node)
• Wurzelknoten eines DOMs ist
immer ein Objekt vom Typ
document
Keine Klammern hier!
document.getElementById('x').onclick =
function(){tuEs(this);return false;}
}
Falls return false, dann hier!
function tuEs(obj) {
obj.style.backgroundColor = "yellow";
}
Oder auch: return valide(this);
EWA - WS 2007/08
PHP
9
int getNodeType();
String getNodeValue();
NodeList getChildNodes();
boolean hasChildNodes();
Node removeChild(Node oldChild);
<<interface>> Element
public NodeList
getElementsByTagName(String tag);
String getAttribute(String name);
Attr getAttributeNode(String name);
String getTagName();
<head>
<script type="text/javascript">
document.write("Willkommen");
</script>
10
Eigenschaften/Methoden (Auswahl)
•
<<interface>>
NodeList
Node
– attributes
– childNodes/firstChild/lastChild
– nextSibling/ previousSibling
(nächster/vorheriger Knoten auf
derselben Ebene)
– nodeName/nodeValue
– parentNode
– id/className
int getLength();
Node item(int i);
<<interface>> Document
Element getDocumentElement();
Attr createAttribute(String name);
Element createElement(String tagName);
…
EWA - WS 2007/08
PHP
browserunabhängig (VB, JS)
Ajax
auch in Office
steht im Header noch nicht zur
Verfügung, also folgender Code
funktioniert nicht:
EWA - WS 2007/08
PHP
DOM Interfaces
<<interface>> Node
•
•
•
•
11
–
–
–
–
–
appendChild()
getAttribute()
getElementsByTagName()
hasChildNodes()
insertBefore(), kein insertAfter
oder insertAt
– removeChild(), replaceChild()
– setAttribute(), setAttributeNode()
•
Erzeugen von Knoten/Elemente mit
Methoden von document:
– createAttribut
– createElement
– createTextNode
Beispiele:
• nParent = n.parentNode;
• span = document.createElement('span');
• span.appendChild(document.createText
Node("hi"));
• span.setAttribute ("lang", "de");
• p.appendChild(span)
p sei vorhandener Paragraph, dann erhalten
wir <p>...<span lang="de">hi</span>
EWA - WS 2007/08
PHP
12
Reguläre Ausdrücke
var str = "Ute Trapp";
pattern = /(\w+)\s(\w+)/;
if(pattern.exec(str)) {
alert(RegExp.$2 + ", " + RegExp.$1);
}
Ausgabe?
•
•
•
•
•
•
\d eine Ziffer (== [0-9])
\D ein Zeichen, dass keine Ziffer ist
(==[^0-9])
\w alphanumerisches Zeichen (==[a-zAZ])
\W nicht alphanumerisches Zeichen
(==[^a-zA-Z])
\s whitespace (==[\t\v\n\r\f])
\S kein whitespace (==[^\t\v\n\r\f])
•
•
•
•
•
•
•
•
•
•
•
•
Objekte
. beliebiges Zeichen
[ ] Auswahlliste, z.B. [a-zA-Z0-9_]
[^ ] negierte Auswahlliste
^ Zeilenanfang
$ Zeilenende
| oder, z.B. /^\s*|\s*$/
{m,n} mindestens m-mal,
höchstens n-mal
{m,} mindestens m-mal
{m} genau m-mal
* 0 oder mehrere (=={0,})
+ 1 oder mehrere (=={1,})
? 0 oder 1 mal (=={0,1})
EWA - WS 2007/08
PHP
13
Vererbung
function Person(first, last) {
this.firstName = first;
this.lastName = last;
}
Person.prototype.fullName = function() {
return this.firstName + ' ' + this.lastName;
}
Person.prototype.fullNameReversed = function() {
return this.lastName + ', ' + this.firstName;
}
EWA - WS 2007/08
PHP
Coding Guidelines!!!
JavaScript Objekte
sind eigentlich
assoziative Arrays
14
Ajax
function Figure(posX, posY) {this.x
= posX;
this.y
= posY;}
function
Container
(label)
{
Figure.prototype.move = function(dx, this.label
dy) {this.x
+= dx; this.y += dy;}
= label;
Figure.prototype.printKoord = function()
{
this.ItemList
= new Array (0);
this.y);}
alert( "x = " + this.x + " y = " + this.add
= addItem;
function Circle(r){
this.print = printContainer;
this.radius = r;
}
Beispiel in Aktion
this.base = Figure;this.base(0,0);}
Circle.prototype = new Figure;
function addItem (i) {...}
return
Math.PI*Math.pow(this.radius,
2);}
Circle.prototype.getArea = function(){
function
printContainer
() {...}
function Rectangle(l, w) {
Container.prototype = new Item ();
this.length = l;this.width = w; function Shape (label) {
this.base = Figure;this.base(0,0);}this.label = label;
Rectangle.prototype = new Figure;
this.print = printShape;
return this.length * this.width;}
Rectangle.prototype.getArea = function(){
}
function Square(s) {this.base = Rectangle;this.base(s,
function printShape () {...} s);}
Square.prototype = new Rectangle; Shape.prototype = new Item ();
EWA - WS 2007/08
PHP
15
EWA - WS 2007/08
PHP
16
Probleme mit Ajaxanwendungen
AJAX
•
•
•
Client
•
• Benutzerin erkennt nicht, das und
wo Daten geändert werden.
• Zurückknopf funktioniert nicht,
wie erwartet (Undo, letzte Seite)
• Lesezeichen können nicht wie
gewohnt gesetzt werden
• Reihenfolge der Abarbeitung
nicht verlässlich
• Vorsicht mit Verlagerung der
Applikationslogik vom Server auf
den Client.
• Clientseitige
Entwicklungsmethodik und werkzeuge deutlich schlechter als
serverseitige
Webbrowser
Benutzeroberfläche
JavaScript
Aufruf
HTML
CSS
Ajax-Engine
Internet
•
Ajax : Asynchronous JavaScript and
XML.
Konzept der asynchronen
Datenübertragung zwischen Server
und Browser
Ausführen einer HTTP-Anfrage
innerhalb einer HTML-Seite
sukzessives Nachladen/Ändern
einzelner Daten
basiert auf HTTP, (X)HTML, CSS,
JavaScript, Document Object Model
(DOM), XML
Beispiele
– Google Suggests, Google &
Yahoo! Maps
– Amazon A9 Search
– Flickr, BaseCamp, Kayak
– Yahoo! AJAX Library
Anfrage
Webserver
•
HTTP
Antwort:
XML
Webserver
(Apache/IIS)
PHP, ...
EWA - WS 2007/08
PHP
17
EWA - WS 2007/08
PHP
Implementation
• Öffnen einer
asynchronen
Verbindung
vom Client zum
Server
• Request
• Verarbeitung
der erhaltenen
Daten mit
JavaScript,
Einbinden in
aktuelles
Dokument über
DOM
18
Quiz 1/8
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
// IE
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
//ältere IE
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4) //Anfrage beendet
{updateAjaxContent(xmlHttp.responseText);}
}
xmlHttp.open("GET","ajax.php",true);
xmlHttp.send(null);
EWA - WS 2007/08
PHP
• Häufig: Get-Methode, obwohl Get
– nicht eine
Transaktion/Änderung auf
dem Server verursachen
sollte
– bookmark-able sein sollten
– cachebar sein sollten
Wie binden Sie eine JS-Datei in eine HTML-Seite ein?
1)
2)
3)
4)
5)
<script href="xxx.js">
<script name="xxx.js">
<script src="xxx.js">
<link src="xxx.js">
<link href="xxx.js">
True:assynchron
19
EWA - WS 2007/08
PHP
20
Quiz 2/8
Quiz 3/8
Wie definieren Sie in JS eine Funktion mit dem Namen
myFunction?
Wie rufen Sie in JS eine Funktion mit dem Namen myFunction
auf?
1)
2)
3)
4)
5)
1) myFunction()
2) call function myFunction
3) call myFunction()
function=myFunction()
function myFunction()
function:myFunction()
sub myFunction()
void function myFunction()
EWA - WS 2007/08
PHP
21
EWA - WS 2007/08
PHP
Quiz 4/8
Quiz 5/8
Wie schreiben Sie in JS eine Bedingung, für den Fall, dass i
ungleich 5 ist?
1)
2)
3)
4)
Wie definieren Sie in JS ein Array?
1)
2)
3)
4)
5)
if (i <> 5)
if (i != 5)
if <>5
if =! 5 then
EWA - WS 2007/08
PHP
22
23
var txt = new Array(1:"tim",2:"kim",3:"jim")
var txt = new Array("tim","kim","jim")
var txt = new Array:1=("tim")2=("kim")3=("jim")
var txt = new Array(1->"tim", 2->"kim",3->"jim")
var txt = new Array="tim","kim","jim"
EWA - WS 2007/08
PHP
24
Quiz 6/8
Quiz 7/8
Was passiert hier?
<script language="JavaScript" type="text/javascript">
function myclass() {
this.name = "value";
this.display = display;
function display() { alert(this.name); }
}
obj = new myclass();
for(n in obj) { alert("Name: "+n+", Typ: "+typeof(n)); }
</script>
1) nichts, da das Skript einen Fehler enthält
2) nichts, da das Skript erst noch über ein Ereignis aufgerufen werden muss
3) es werden zwei Alerts ausgegeben: Name: name, Typ: string und Name:display,
Typ: string
4) es wird ein Alert ausgegeben: Name: name, Typ: string
Was passiert hier?
<head><script type="text/javascript">
function x() {var h2 = document.createElement("h2");
h2.appendChild(document.createTextNode("hi"));
var body = document.getElementsByTagName("body")[0];
body.appendChild(h2);}
</script>
<body onload="x();")>
<h1>Test</h1>
</body>
1)
2)
3)
4)
nichts, da das Skript einen Fehler enthält
es wird ein HTML-Tag h2 erzeugt, aber nicht angezeigt
nach h1 erscheint eine h2-Überschrift mit dem Inhalt hi
vor h1 erscheint eine h2-Überschrift mit dem Inhalt hi
EWA - WS 2007/08
PHP
25
Quiz 8/8
EWA - WS 2007/08
PHP
26
Webengineering
Was wird hier als Alert ausgegeben?
<script language="JavaScript" type="text/javascript">
function proto() { }
x = new proto();
y = new proto();
proto.prototype.sinn_des_lebens = 42;
x.oha = "oha";
alert(x.sinn_des_lebens + " " + x.oha + " " + y.oha);
</script>
1)
2)
3)
4)
nichts, da das Skript einen Fehler enthält
42 oha undefined
42 undefined undefined
undefined undefined undefined
EWA - WS 2007/08
PHP
27
EWA - WS 2007/08
PHP
28
Dimensionen einer Webapplikation
Was müssen Sie definieren/beachten?
Hypermediaebenen
•
•
Präsentation
•
•
Hypertext
(Verknüpfungen)
Entwicklungsphasen
Inhalt
Struktur
•
Analyse Entwurf Implementation Test
•
•
•
Verhalten
Sichtweise
EWA - WS 2007/08
PHP
29
Beispiel UWE
Szenarien /
Anwendungsfälle
Domänenmodell
Aufgabenmodell
Dialoge Geschäftsprozesse
Navigationsmodell
Struktur
Inhalte
Funktionalität
Prozesse
Webanwendungsmodell
•
•
•
Access
Präsentationsmodell
Strukturelle
PräsentationsSicht
sicht
Geschäftsprozessmodell
Ziele
Umgebung: Einbindung in Unternehmen,
Geschäftsprozesse, Unternehmenskultur, Vorsystem,
Konkurrenz (Marktanalyse)
Typische Benutzer, Personalisierung
Daten: welche, wo, wie verwaltet, ändern sich wie oft,
Transaktionen?
Navigation:Hauptnavigation, Guidedtour,...
Einheitliches Look & Feel
Erweiterbarkeit: neue Seiten, neue Prozesse, andere
Endgeräte, ...
Skalierbarkeit: wieviele Nutzer, Verteilung auf mehrere
Server, ...
Sicherheit
Zeitplan: Iterationen
Qualitätssicherung, wann war’s gut?
EWA - WS 2007/08
PHP
•
•
•
•
•
•
Architektur Subsysteme
Datenmodell
Klassendiagramm
Hypertextmodell
Navigationsmodell
Präsentationsmodell
30
Navigation
• objektorientiert
• Konzept für interaktive
Websites
• Aufgabenmodell /
Geschäftsprozessmodell
• Navigation wird
entwickelt aus
Domänenmodell und
Aufgabenmodell
• angelehnt an UML
• Werkzeug: ArgoUWE
score
Personalisierungsmodell
EWA - WS 2007/08
PHP
31
EWA - WS 2007/08
PHP
32
Gedanken zu PHP
Open
Source
interpretiert
Nicht
typisiert
Unicode ab
Version 6
• <?php echo 'Long Tags - empfohlen' ?>
• /* für lange Kommentare */
Design Pattern
OO
•
•
•
•
// Einzeiler
#Einzeiler, nicht erwünscht
Stringverkettung erfolgt mit einem Punkt (.) und nicht mit + oder &
Zugriff auf Klassenmethoden und -Member mit -> und nicht mit
einem Punkt (Bsp: $file->getFileName());
• Zugriff auf statische Methoden erfolgt mit ::
• Neben einem normalen Vergleich == gibt es auch einen typisierten
Vergleich (===).
Interfaces
Abstrakte
Klassen
private, ...
Kon-/Destruktor
Iterator
PHP
Keine
Namenräume
PHP einbinden, Kommentare, Sprachbesonderheiten
Extensions
XML
Exif
• pass by reference (Änderung gegenüber PHP 4)
PDF
SOAP
EWA - WS 2007/08
PHP
33
EWA - WS 2007/08
PHP
Variablen/Konstanten/include
34
Arrays
• Variablen $name
• array(
• untypisiert, Deklaration nicht zwingend
• Typ der Variablen augrund letzter Zuweisung
• Konstanten: define("Name",Wert) Konstanten werden ohne $ über
Namen angesprochen
• Datentypen: Boolean, Integer, Double, String, Array, Object
• DatentypenTyp-Casting möglich:$ganz=(int) "12.45"; funktioniert
nicht mit speziellen Objekten - nur object!
• instance of
if ($obj instance of Circle) {
• include "vars.php";include_once
• require "prepend.php";require_once
0 => array(
Hier liefert implode:
"url" => "/",
Array, ...
"title" => "Home"
),...
• $array = array("lastname", "email", "phone");
• $comma_separated = implode(",", $array);
• echo $comma_separated; // lastname,email,phone
include: Warning
require: Fatal Error
EWA - WS 2007/08
PHP
35
EWA - WS 2007/08
PHP
36
Kontrollstrukturen
•
•
•
•
•
•
•
•
Klassen
• interface
• protected / private / public / const
• Konstruktor (keine
Konstruktorenüberladung)
• extends (Vererbung), final (bei
Methoden und Klassen)
• abstrakte Klassen
• Object cloning (echte Kopie)
if - elseif - else
for
foreach
while
do - while
switch
break - continue
try - catch - (kein finally)
– $bar = clone $foo;
• self:
– self::$schlafplaetze;
• this
–
$this->z=1;
• parent
–
EWA - WS 2007/08
PHP
37
Zusammenfassung
parent::schnell();
interface Fahren {
public function schnell();
public function langsam();
}
class Auto implements Fahren{
const ANZAHL_RAEDER = 4;
function __construct($baujahr,
$marke, $km) {...}
function __destruct() {...}
...}
class Bus extends Auto {
protected static $schlafplaetze = 4;
...}
abstract class x {
abstract public function y();
...}
EWA - WS 2007/08
PHP
38
Ausblick
• JavaScript:
• Wiederholung aufgrund eingehender Fragen
• PHP konkret
– gezielt einsetzen
– Seite sollte auch ohne JS funktionieren, insb. Formularverarbeitung
und Navigation
– objektbasiert nicht objektorientiert
• Ajax:
– trendy, aber mit Bedacht einsetzen
– Vor-/Nachteile von assynchron beachten
Vielen Dank
und bis zur nächsten Woche
oder gleich im Praktikum.
• Webengineering:
– nicht unterschätzen
– Navigation, Verhalten mit planen
• PHP
– voll objektorientierte Sprache mit syntaktischen Besonderheiten
EWA - WS 2007/08
PHP
39
EWA - WS 2007/08
PHP
40

4. Vorlesung JavaScript Anwendungsbeispiele ECMAScript

Transcription

Similar documents

Aktueller Technologieüberblick

Das Lern-Coach-Toolkit

Zum Primat des Parteienstaates gegenüber der

Ein Ersatz für Javascript?

Drei systematische Schritte für beschleunigtes

Trigger

G Data Antivirus für Mac

task - LIA Laboratory for integrative architecture

Kapitel 9: HTTP und HTML

Progr Medienwandel 03 02 10 - Arbeitsgemeinschaft für

Robert Wloch – Professional Consulting

Führungssysteme: Welche anforderungen Westminster abbey an

Masterarbeit zur Baumartenklassifikation aus