JavaScript – Basiskonzepteiss.uni-saarland.de/workspace/documents/wt_2_javascript_basiskonzepte.pdf · Univ.-Prof. Dr.-Ing. Wolfgang Maass 14.09.2011 Slide 2 Wrap-Up • HTML dient

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/)


14.09.2011 Slide 3

Client

Server

Server-seitige Programmlogik



•  Mit HTML + CSS lässt sich keine Programmlogik abbilden (z.B. „x mal y“) è Verarbeitung auf dem Server (Request è Response)


BA

SV

BA SV

Benutzeraktivität Server-seitige Verarbeitung Datenübertragung

Eingabe: „2“

Antwort: HTML für „2“


14.09.2011 Slide 4

Client

Server






BA

SV

BA

SV

Antwort: HTML für „2×“

Eingabe: „×“

BA SV



14.09.2011 Slide 5

Client

Server






BA

SV Eingabe: „3“

BA

SV

BA

SV

Antwort: HTML für „2×3“

BA SV



14.09.2011 Slide 6

Client

Server






BA

SV

Eingabe: „=“

Antwort: HTML für „2×3=6“

BA

SV

BA

SV

BA

SV

BA SV



14.09.2011 Slide 7

Client

Server


•  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


BA

SV

BA

SV

BA

SV

BA

SV

BA SV



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


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


14.09.2011 Slide 9

Bet

riebs

- sy

stem

B

row

ser


•  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))


14.09.2011 Slide 10


•  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)


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)


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)


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 }


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


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



•  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


14.09.2011 Slide 16

Kontrollstrukturen




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


14.09.2011 Slide 17

Kontrollstrukturen




•  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]; }


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


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)


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 Chair in Information and Service Systems Saarland University, Germany

Documents

JavaScript – Basiskonzepteiss.uni-saarland.de/workspace/documents/wt_2_javascript_basiskonzepte.pdf · Univ.-Prof. Dr.-Ing. Wolfgang Maass 14.09.2011 Slide 2 Wrap-Up • HTML dient