MWA-JavaScript 2015

Transcription

MWA-JavaScript 2015

Multimediale Web-Anwendungen
JavaScript
Einführung
MWA – JavaScript-Einführung | Dr. E. Schön
Sommersemester 2015 | Folie 1
JavaScript
Entstehungsgeschichte:
●
1995 Netscape Communications Corp. (Brendan Eich)
●
Sprachkern 1997 als ECMAScript in ECMA1-262
standardisiert; aktuell: 5.1th Edition (2011)
●
aktuelle Versionen: JavaScript 1.8.5 (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
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)
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
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>
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>
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
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};
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”
Document Object Model
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.
DOM des Beispiels auf einer der
vorhergehenden Folien
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]
DOM-Vererbungshierarchie
(nach [WÖHR2004])
Variablen des Objektes Node (Beispiele)
nodeName: DOMString
attributes: NamedNodeMap
nodeValue: DOMString
ownerDocument: Document
nodeType: unsigned short
namespaceURI: DOMString
parentNode: Node
prefix: DOMString
childeNodes: NodeList
firstChild: Node
lastChild: Node
previousSibling: Node
nextSibling: Node
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
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
http://ecma-international.org/ecma-262/5.1/
SelfHTML-Wiki: http://wiki.selfhtml.org/wiki/JavaScript
W3-Schools: http://www.w3schools.com/js/default.asp
(Tutorial und Referenz)

MWA-JavaScript 2015

Transcription

Similar documents

JavaScript - Java Forum Stuttgart

Einstieg in VBA und die Office Programmier Beispiel von Excel

Performance

Performance