javascript –...
TRANSCRIPT
JavaScript – Basiskonzepte
Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Department of Law and Economics WS 2011/2012 Mittwoch, 8:00 – 9:30 Raum HS 021, B4 1
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 2
Wrap-Up
• HTML dient zur Strukturierung von Website-Inhalten
• CSS definiert das Erscheinungsbild von Websites
(http://web2.0calc.com/widgets/minimal/)
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 3
Client
Server
Server-seitige Programmlogik
• HTML dient zur Strukturierung von Website-Inhalten
• CSS definiert das Erscheinungsbild von Websites
• Mit HTML + CSS lässt sich keine Programmlogik abbilden (z.B. „x mal y“) è Verarbeitung auf dem Server (Request è Response)
(http://web2.0calc.com/widgets/minimal/)
BA
SV
BA SV
Benutzeraktivität Server-seitige Verarbeitung Datenübertragung
Eingabe: „2“
Antwort: HTML für „2“
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 4
Client
Server
Server-seitige Programmlogik
• HTML dient zur Strukturierung von Website-Inhalten
• CSS definiert das Erscheinungsbild von Websites
• Mit HTML + CSS lässt sich keine Programmlogik abbilden (z.B. „x mal y“) è Verarbeitung auf dem Server (Request è Response)
(http://web2.0calc.com/widgets/minimal/)
BA
SV
BA
SV
Antwort: HTML für „2ד
Eingabe: „ד
BA SV
Benutzeraktivität Server-seitige Verarbeitung Datenübertragung
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 5
Client
Server
Server-seitige Programmlogik
• HTML dient zur Strukturierung von Website-Inhalten
• CSS definiert das Erscheinungsbild von Websites
• Mit HTML + CSS lässt sich keine Programmlogik abbilden (z.B. „x mal y“) è Verarbeitung auf dem Server (Request è Response)
(http://web2.0calc.com/widgets/minimal/)
BA
SV Eingabe: „3“
BA
SV
BA
SV
Antwort: HTML für „2×3“
BA SV
Benutzeraktivität Server-seitige Verarbeitung Datenübertragung
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 6
Client
Server
Server-seitige Programmlogik
• HTML dient zur Strukturierung von Website-Inhalten
• CSS definiert das Erscheinungsbild von Websites
• Mit HTML + CSS lässt sich keine Programmlogik abbilden (z.B. „x mal y“) è Verarbeitung auf dem Server (Request è Response)
(http://web2.0calc.com/widgets/minimal/)
BA
SV
Eingabe: „=“
Antwort: HTML für „2×3=6“
BA
SV
BA
SV
BA
SV
BA SV
Benutzeraktivität Server-seitige Verarbeitung Datenübertragung
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 7
Client
Server
Server-seitige Programmlogik
• Vorteile • Rechenintensive Operationen können auf
leistungsstarker Server-Hardware ausgeführt werden • Client hat keinen Einblick in die Programmlogik
• Nachteile • Jede Operation erfordert Rücksprache mit dem
Server • Es wird immer eine komplett neue Website generiert
und übertragen • Kommunikation mit Server ist strikt synchron
(http://web2.0calc.com/widgets/minimal/)
BA
SV
BA
SV
BA
SV
BA
SV
BA SV
Benutzeraktivität Server-seitige Verarbeitung Datenübertragung
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 8
Client
Server
Client-seitige Programmlogik mit JavaScript
• JavaScript (JS) ermöglicht es Website-Inhalte client-seitig zu generieren, verändern, validieren und nachzuladen
• Weniger Datentransfer, schnellere Reaktionszeiten, ermöglicht asynchrone Kommunikation mit dem Server
(http://web2.0calc.com/widgets/minimal/)
BA CV SV
Benutzeraktivität Client-seitige Verarbeitung Server-seitige Verarbeitung Datenübertragung Ein-/Ausgabe
BA
CV
BA
CV
BA
CV
BA
SV
Mit JS modifiziert BA
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 9
Bet
riebs
- sy
stem
B
row
ser
Client-seitige Programmlogik mit JavaScript
• JS (ECMA-262) ist eine Skriptsprache: Programmiersprache zur Steuerung von ein oder mehreren bestehenden Anwendungen (hier: Browser)
• Sandbox-Prinzip: Im Allg. nur Zugriff auf Elemente des Browsers, nicht auf das Betriebssystem (Dateisystem, Programme, Geräte, etc.)
• JS kann durch unterschiedliche Browser verschieden interpretiert werden (abhängig von der Layout-Engine)
• Trident: Microsoft Internet Explorer • Gecko: Mozilla Firefox • WebKit: Google Chrome, Apple Safari • Presto: Opera
JavaScript
Steuerung
(siehe auch: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(ECMAScript))
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 10
Client-seitige Programmlogik mit JavaScript
• JavaScript ≠ Java (Namensgebung Netscape & Sun Microsystems)
• Historische Entwicklung: • 1995: LiveScript (Brendan Eich, Netscape) • 1996: JavaScript (zur Interaktion mit Java-Applets) • 1996: Konkurrenz durch Microsoft JScript (Y2K-
Problematik) • 1997: Standardisierung als ECMAScript (ECMA-262) • 1998: ECMA-262 wird als ISO/IEC 16262 anerkannt • Seit ca. 2003: Komplexe Web 2.0 Anwendungen
(asynchronous JavaScript and XML = AJAX)
• Anwendungsbeispiele:
(Ausschnitt aus: http://de.wikipedia.org/w/index.php?title=Datei:Genealogical_tree_of_programming_languages.svg)
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 11
Integration von JavaScript in HTML
• Script-Tag • Kann in Body und Head platziert werden • Kann mit externer Datei verbunden werden
• Aufruf in Event-Attributen: • Body-Events: onload, onunload • Maus-Events: onclick, onmouseover, etc. • Formular-Events: onfocus, onselect,
onsubmit, etc.
mySite2.html (Script-Tag + externe Datei) <!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"> <head><title>my page</title> <script type="text/javascript" src="myScript.js" /> </script> </head> <body></body></html>
myScript.js
alert("hello world");
mySite1.html (Script-Tag) <!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"> <head><title>my page</title> <script type="text/javascript">alert("hello");</script> </head> <body> <script type="text/javascript">alert("world");</script> </body> </html>
mySite3.html (Event-Attribute) <!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"> <head><title>my page</title> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body onload="alert('hello world');"> </body> </html>
(siehe auch: http://www.w3schools.com /tags/ref_eventattributes.asp)
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 12
Datenstrukturen und Operatoren
• Datentypen: number, string, boolean, object, function, undefined
• Operatoren: • Arithmetische Operatoren:
+ - * / % ++ -- • Logische Operatoren:
&& || ! • Vergleichsoperatoren:
== === != > < >= <= • Zuweisung und Berechnungsoperatoren:
= += -= *= /= %= • Bit-Operatoren:
>> << & | ~
variables1.js (Datentyp number)
var x = 2; var y = 3; var z = x + y; // z ist jetzt mit 5 belegt
variables2.js (Datentyp string)
var x = "zwei"; var y = "drei"; var z = x + y; // z ist jetzt mit "zweidrei" belegt
variables3.js (Datentyp boolean)
var x = 2; var y = 3; var z = x == y; // z ist jetzt mit false belegt z = !z; // z ist jetzt mit true belegt (siehe auch: http://de.selfhtml.org/javascript/
sprache/operatoren.htm)
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 13
Datenstrukturen und Operatoren
• Objekte realisieren eine ungeordnete Sammlung von Variablen
• Arrays realisieren eine geordnete Liste von Variablen
• Sowohl Objekte als auch Arrays können zu Bäumen verschachtelt werden è JavaScript Object Notation (JSON) wird als Format zum Datenaustausch verwendet
myObject.js (Datentyp object)
var myObj = {x: 2, y: 3}; // Punktnotation, z wird mit 5 belegt: var z = myObj.x + myObj.y; // Klammernotation, z wird mit -1 belegt: z = myObj["x"] - myObj["y"];
myArray.js (Datentyp object)
var myArr= [22, 33]; var x = myArr[0]; // x wird mit 22 belegt var y = myArr[1]; // y wird mit 33 belegt var z = myArr.length // z wird mit 2 belegt
myJson.json (JSON Datei)
{ "name": "Web Technologies", "tags": ["JavaScript","Lecture"], "parameter": { "x": 2, "y": 3 }, "result": 5 }
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 14
Kontrollstrukturen
• Verzweigungen • If-Else • Switch
• Schleifen • While, Do-While • For, For-In
ifElse.js
var x = 2; var y = 3; var z; If(x == y) { z = "gleich"; } else if (x < y) { z = "kleiner"; } else { z = "größer"; }
x == y x < y
z = "gleich"; z = "kleiner"; z = "größer";
true true
false false
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 15
switch.js
var x = 2; var y = 3; var op = "plus"; var z; switch(op) { case "plus": z = x + y; case "minus": z = x - y; default: z = 0; } // z ist mit 0 belegt
Kontrollstrukturen
• Verzweigungen • If-Else • Switch
• Schleifen • While, Do-While • For, For-In
• break; Bricht die weitere Ausführung der Kontrollstruktur ab
z = x + y;
z = x - y;
z = 0;
op == "minus"
op == "plus"
false
true
true
false
z = x + y; break;
z = x - y; break;
z = 0;
op == "minus"
op == "plus"
false
true
true
false
switch.js
var x = 2; var y = 3; var op = "plus"; var z; switch(op) { case "plus": z = x + y; break; case "minus": z = x - y; break; default: z = 0; } // z ist mit 5 belegt
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 16
Kontrollstrukturen
• Verzweigungen • If-Else • Switch
• Schleifen • While, Do-While • For, For-In
• break; Bricht die weitere Ausführung der Kontrollstruktur ab
while.js var ingredients = [20, 60, 40]; var maxCup = 100; var inCup = 0; var i = 0; while(inCup + ingredients[i] < maxCup) { inCup += ingredients[i]; i++; } // inCup ist mit 80 belegt
inCup + ingredients[i] < maxCup
inCup += ingredients[i]; i++;
true false
doWhile.js
var ingredients = [20, 60, 40]; var maxCup = 100; var inCup = 0; var i = 0; do { inCup += ingredients[i]; i++; } while(inCup < maxCup); // inCup ist mit 120 belegt
inCup < maxCup
inCup += ingredients[i]; i++;
false
true
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 17
Kontrollstrukturen
• Verzweigungen • If-Else • Switch
• Schleifen • While, Do-While • For, For-In
• break; Bricht die weitere Ausführung der Kontrollstruktur ab
• continue; Überspringt den aktuellen Schritt der Kontrollstruktur und fährt mit dem Nachfolgenden fort
for.js var ingredients = [20, 60, 40]; var inCup = 0; for(var i = 0; i < ingredients.length; i++) { inCup += ingredients[i]; }
i < ingredients.length
true
inCup += ingredients[i];
var i = 0;
i++; false
forIn.js var ingredients= {butter: 20, milk: 60, sugar: 40}; var inCup = 0; for(var name in ingredients) { inCup += ingredients[name]; }
forIn.js var ingredients= {butter: 20, milk: 60, sugar: 40}; var inCup = 0; for(var name in ingredients) { if(name == "milk") continue; inCup += ingredients[name]; }
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 18
Funktionen
• Funktionen ermöglichen es Programmcode wieder zu verwenden
• Eine Funktion muss definiert werden bevor sie aufgerufen werden kann
• Kann Eingabe-Parameter besitzen (hier: ingredients)
• Kann einen Ausgabe-Wert besitzen (hier: return i;)
• Variable Scope: Variablen, die in einer Funktion deklariert werden, sind nur nur innerhalb dieser gültig
• Viele Funktionen werden bereits vom Browser bereitgestellt (z.B. alert("hi");)
function.js var inCup= 0; var pourInCup = function(ingredients){ var i = 0; for(var name in ingredients) { inCup += ingredients[name]; i++; } return i; }; var ingredients1 = {butter: 20, milk: 60}; var ingredients2 = {sugar: 40, eggs: 30}; var added = 0; added += pourInCup(ingredients1); // inCup ist jetzt belegt mit 80 added += pourInCup(ingredients2); // inCup ist jetzt belegt mit 150
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 19
Document Object Model
• Das Document Object Model (DOM): Spezifikation zum Zugriff auf HTML/XML
• Mittels JS lässt sich das DOM einer Website dynamisch verändern è document-Objekt
• document.getElementById(id) bietet Zugriff auf HTML-Elemente, die mit einer ID versehen sind
• Die string-Variable innerHTML steht für den HTML-Code innerhalb eines Elementes
dom.html <!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"> <head><title>my page</title> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript"> var changeName = function(newName){ var vorname = document.getElementById("vorname"); vorname.innerHTML = newName; }; </script> </head> <body> <table><tr><td id="vorname">Donald</td> <td id="nachname">Duck</td></tr></table> <p><img onclick="changeName('Duffy');" src="duffy.jpg" alt="Duffy"/></p> </body> </html> (siehe auch:
http://de.selfhtml.org/javascript/objekte/document.htm)
Univ.-Prof. Dr.-Ing. Wolfgang Maass
14.09.2011 Slide 20
Literatur
Bücher: • Douglas Crockford
JavaScript: The Good Parts ISBN 978-0-596-51774-8
• Christian Wenz JavaScript ISBN 978-3-89842-234-5 Online unter http://openbook.galileocomputing.de/javascript/
Web: • http://www.ecma-international.org/publications/standards/Ecma-262.htm • https://developer.mozilla.org/en/JavaScript • http://de.selfhtml.org/javascript/ • http://www.w3schools.com/js/ • http://www.w3.org/DOM/ • http://www.w3schools.com/dom/
Univ.-Prof. Dr.-Ing. Wolfgang Maass
Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Saarland University, Germany