JavaScript Basiskonzepte

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

Wrap-Up HTML dient zur Strukturierung von Website-Inhalten CSS definiert das Erscheinungsbild von Websites (http://web2.0calc.com/widgets/minimal/) Slide 2

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) Antwort: HTML für 2 Client Server Eingabe: 2 Benutzeraktivität Server-seitige Verarbeitung Datenübertragung (http://web2.0calc.com/widgets/minimal/) Slide 3

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) Antwort: HTML für 2 Client Server Eingabe: Benutzeraktivität Server-seitige Verarbeitung Datenübertragung (http://web2.0calc.com/widgets/minimal/) Slide 4

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) Antwort: HTML für 2 3 Client Server Eingabe: 3 Benutzeraktivität Server-seitige Verarbeitung Datenübertragung (http://web2.0calc.com/widgets/minimal/) Slide 5

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) Antwort: HTML für 2 3=6 Client Server Benutzeraktivität Server-seitige Verarbeitung Datenübertragung Eingabe: = (http://web2.0calc.com/widgets/minimal/) Slide 6

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 Client Server Benutzeraktivität Server-seitige Verarbeitung Datenübertragung (http://web2.0calc.com/widgets/minimal/) Slide 7

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 Mit JS modifiziert Client CV CV CV Server CV Benutzeraktivität Client-seitige Verarbeitung Server-seitige Verarbeitung Datenübertragung Ein-/Ausgabe (http://web2.0calc.com/widgets/minimal/) Slide 8

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 Browser Betriebssystem JavaScript Steuerung (siehe auch: http://en.wikipedia.org/wiki/comparison_of_layout_engines_(ecmascript)) Slide 9

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) Slide 10

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. (siehe auch: http://www.w3schools.com /tags/ref_eventattributes.asp) 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> myscript.js <body></body></html> 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> Slide 11

Datenstrukturen und Operatoren Datentypen: number, string, boolean, object, function, undefined Operatoren: Arithmetische Operatoren: + - * / % ++ -- Logische Operatoren: &&! Vergleichsoperatoren: == ===!= > < >= <= Zuweisung und Berechnungsoperatoren: = += -= *= /= %= Bit-Operatoren: >> << & ~ (siehe auch: http://de.selfhtml.org/javascript/ sprache/operatoren.htm) 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 Slide 12

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 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 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"]; { } myjson.json (JSON Datei) "name": "Web Technologies", "tags": ["JavaScript","Lecture"], "parameter": { "x": 2, "y": 3 }, "result": 5 Slide 13

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"; } false false x == y x < y true true z = "gleich"; z = "kleiner"; z = "größer"; Slide 14

Kontrollstrukturen Verzweigungen If-Else Switch Schleifen While, Do-While For, For-In break; Bricht die weitere Ausführung der Kontrollstruktur ab switch.js var x = 2; var y = 3; var op = "plus"; var z; switch(op) { case "plus": z = x + y; case break; "minus": case z = "minus": x - y; default: z = x - y; break; z = 0; } default: // z ist z mit = 0; 0 belegt } // z ist mit 5 belegt op == "plus" false op == "minus" false z = 0; true true z = x + y; y; break; z = x - y; y; break; Slide 15

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 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 + ingredients[i] < maxcup incup += ingredients[i]; i++; true false true incup += ingredients[i]; i++; incup < maxcup false Slide 16

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]; } forin.js i++; var i = 0; i < ingredients.length true incup += ingredients[i]; var ingredients= {butter: 20, milk: 60, sugar: 40}; var incup = 0; for(var name in ingredients) { incup if(name += == ingredients[name]; "milk") continue; } incup += ingredients[name]; } false Slide 17

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 Slide 18

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 (siehe auch: http://de.selfhtml.org/javascript/objekte/ document.htm) 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> Slide 19

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/ Slide 20

Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Saarland University, Germany Univ.-Prof. Dr.-Ing. Wolfgang Maass