Multimediale Web-Anwendungen. JavaScript. Einführung. MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 1.

Größe: px

Ab Seite anzeigen:

Download "Multimediale Web-Anwendungen. JavaScript. Einführung. MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 1."

Chantal Krüger
vor 8 Jahren
Abrufe

1 Multimediale Web-Anwendungen JavaScript Einführung MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 1 Entstehungsgeschichte: JavaScript 1995 Netscape Communications Corp. (Brendan Eich) Sprachkern 1997 als ECMAScript in ECMA1-262 standardisiert; aktuell: 5.1th Edition (2011) aktuelle Versionen: JavaScript (Juli 2010) und JScript 9.0 (März 2011) Konzept: dynamisch typisierte, objektorientierte, aber klassenlose Skriptsprache (von Interpreter umgesetzt) Unterscheidung zwischen Sprache und Ablaufumgebung mögliche Programmierparadigmen: prozedural, objektorientiert, funktional MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 2

Eigenschaften von JavaScript Script-Sprache Verarbeitung schrittweise durch Interpreter clientseitigen Verarbeitung von Daten meist Browser als Laufzeitumgebung - benötigt JavaScript-Interpreter

2 Eigenschaften von JavaScript Script-Sprache Verarbeitung schrittweise durch Interpreter clientseitigen Verarbeitung von Daten meist Browser als Laufzeitumgebung - benötigt JavaScript-Interpreter (kleine Abweichungen bei der Implementation in einzelnen Browsern möglich) Code wird in (X)HTML eingebettet und vom Browser ausgeführt (X)HTML-Datei als DOM-Baum im Speicher abgelegt Manipulation mit Hilfe von JavaScript Veränderungen und Interaktivität möglich notwendig für Entwicklung und Test: Browser und Editor (möglichst mit Syntax-Highlighting) MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 3

eingebettet und vom Browser ausgeführt (X)HTML-Datei als DOM-Baum im Speicher abgelegt Manipulation mit Hilfe von JavaScript Veränderungen und

4 Leistungsmerkmale von JavaScript Zugriff auf Bestandteile des geladenen Dokumentes dynamische Änderung des geladenen Dokumentes Steuerung externer Komponenten (SVG-Grafiken, Applets,...) Reaktion auf Benutzeraktionen Fenstermanagement clientseitiger Zugriff auf Cookies (wichtig für Personalisierung, Sessionmanagement) Sandbox-Prinzip MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 7 Einbindung von JavaScript in HTML Trennung von HTML- und Script-Code Einbindung: 1.<script>-Tag (verbreitetste Möglichkeit) siehe nächste Folie und Übungen 2.Einbindung als Attributwert von Event Handlern <p class="style1" onmouseover="this.classname='style2'" onmouseout="this.classname='style1'"> Text mit <b>mouseover</b>-effekt </p> 3.Attributwerte, die URLs erwarten <a href="javascript:alert('hallo Welt!')">Melde dich!</a> MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 8

Schön Sommersemester 2015 Folie 7 Einbindung von JavaScript in HTML Trennung von HTML- und Script-Code Einbindung: 1.<script>-Tag (verbreitetste Möglichkeit) siehe nächste Folie und Übungen 2.

5 Beispiel für JavaScript innerhalb von HTML <!DOCTYPE HTML> <html> <head> <title>beispiel zu JavaScript</title> </head> <body> <h1>js-beispiel</h1> <p>normaler HTML-Text.</p> <h2>javascript</h2> <script type="text/javascript"> document.writeln("zufallszahl: "); var R = Math.random(); document.writeln(r, "<br><br>"); </script> <p>das ist wieder normaler HTML-Text.</p> </body> </html> MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 9 JavaScript-Syntax Variable und Datentypen Definition von Variablen mit var (nicht zwingend) Typ dynamisch ermittelt, wenn nicht explizit festgelegt Kontrollstrukturen Verzweigungen: if, switch Schleifen: for, while, do-while (mit break und continue) Funktionen müssen definiert werden, bevor sie verwendet werden maximal einen Rückgabewert Objekte eigene Definition (syntaktisch über Definition von Funktionen) vordefinierte Klassen vorhanden: Date, Math, String, Array MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 10

</p> </body> </html> MWA JavaScript-Einführung Dr. E.

6 Funktionen Zusammenfassung von Befehlen unter eigenem Namen damit mehrfach aufrufbar Variablen können übergeben werden; Rückgabewert mit return gekennzeichnet wird i.d.r. im <head>-bereich der HTML-Datei definiert und im <body>-teil benutzt Beispiel: function quadrat(value) { var result = 0; result = value * value; return result; } oder function quadrat(value) { return value*value}; MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 11 Objekte Objekte sind Instanzen einer Klasse nach Definition einer Klasse können beliebig viele Objekte dieser Klasse erzeugt werden Klasse (und damit Objekt) hat Eigenschaften (entsprechen den Variablen) und Methoden zur Veränderung dieser Eigenschaften Konstruktor zur Erzeugung eines neuen Objektes: new Besonderheiten in JavaScript: objektorientiert aber klassenlos in JS existieren bereits Objekte, die verwendet werden können Web-Browser stellt bereits Objekte zur Verfügung (window, document, location, history,...) Erzeugung eigener Objekte in Form von Funktionen Methoden als Funktionen innerhalb der Objekt-Funktion MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 12

Document Object Model DOM des Beispiels auf einer der vorhergehenden Folien Document Object Model (DOM) ist eine Spezifikation einer Schnittstelle für den

Eine Implementierung, die dieser Spezifikation genügt, besteht im Sinne der objektorientierten Programmierung aus einem Satz von Klassen zusammen mit

7 Document Object Model DOM des Beispiels auf einer der vorhergehenden Folien Document Object Model (DOM) ist eine Spezifikation einer Schnittstelle für den Zugriff auf HTML- oder XML-Dokumente. Sie wird vom World Wide Web Consortium definiert. Eine Implementierung, die dieser Spezifikation genügt, besteht im Sinne der objektorientierten Programmierung aus einem Satz von Klassen zusammen mit deren Methoden und Attributen. Sie erlaubt Computerprogrammen, dynamisch den Inhalt, die Struktur und das Layout eines Dokuments zu verändern. [Wikipedia 2015] MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 14

8 DOM-Vererbungshierarchie (nach [WÖHR2004]) MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 15 Variablen des Objektes Node (Beispiele) nodename: DOMString nodevalue: DOMString nodetype: unsigned short parentnode: Node childenodes: NodeList firstchild: Node lastchild: Node previoussibling: Node nextsibling: Node attributes: NamedNodeMap ownerdocument: Document namespaceuri: DOMString prefix: DOMString MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 16

nodetype: unsigned short parentnode: Node childenodes: NodeList firstchild: Node lastchild: Node previoussibling: Node

9 Methoden des Objektes Node (Beispiele) insertbefore(newchild: Node, refchild: Node): Node replacechild(newchild: Node, oldchild: Node): Node removechild(oldchild: Node): Node appendchild(newchild: Node): Node haschildnodes(): boolean clonenodes(deep: boolean): Node normalize() issupported(feature: DOMString, version: DOMString): boolean hasattributes(): boolean MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 17 Informationen zu JavaScript Bücher St. Koch: JavaScript (Einführung, Programmierung und Referenz inklusive Ajax), dpunkt.verlag Heidelberg 2011 D. Flanagan: JavaScript - kurz & gut (Taschenbuch); O'Reilly Verlag 2012 Webseiten ECMAScript Language Specification SelfHTML-Wiki: W3-Schools: (Tutorial und Referenz) MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 18

Schön Sommersemester 2015 Folie 17 Informationen zu JavaScript Bücher St. Koch: JavaScript (Einführung, Programmierung und Referenz inklusive Ajax), dpunkt.verlag Heidelberg 2011 D.

Ähnliche Dokumente

Kapitel 4 Clientseitige Technologien

Kapitel 4 Clientseitige Technologien Multimediale Web-Anwendungen Dr. E. Schön Sommersemester 2016 Folie 40 Hypertext Markup Language (HTML) HTML ist eine deklarative, textbasierte Seitenbeschreibungssprache