JavaScript
Dipl. Math. F. Braun
Universität Regensburg Rechenzentrum
http://www.uni-regensburg.de/EDV/kurs_info/brf09510/kurs_info/js/js.pdf
http://www.uniregensburg.de/EDV/kurs_info/brf09510/kurs_info/js/html/js.html
http://www-nw.uni-regensburg.de/brf09510/js/js.pdf
http://www-nw.uni-regensburg.de/brf09510/js/html/js.html
K:/RZ/KURSE/BRAUN/svn/doku/trunk/js/js.html
K:/RZ/KURSE/BRAUN/svn/doku/trunk/js/js.pdf
K:/RZ/KURSE/BRAUN/svn/doku/trunk/js/js.dvi
11. Juli 2016
KAPITEL 1
Vorwort
1. Kursinhalt
(C- oder Java-Grundlagen werden vorausgesetzt; HTML- oder XML-Kenntnisse sind vorteilhaft )
Ausgeteilt:
1. Skript: http://www.uni-regensburg.de/EDV/kurs_info/brf09510/kurs_info/js/html/js.html
2. Programmbeispiele
3. ecma Standard ECMA-262: ECMAScript Language Specication
http://www.ecma-international.org/publications/standards/Ecma-262.htm
4. Eloquent JavaScript http://eloquentjavascript.net/print.html
5. Rhino shell: https://developer.mozilla.org/en-US/docs/Rhino/Shell
6. Scripts in HTML documents: http://www.w3.org/TR/html4/interact/scripts.html
2. Literatur
RRZN
David Flanagan: JavaScript - The Denitive Guide, 2011, 978-0596805524
David Flanagan: JavaScript - Das umfassende Referenzwerk 978-3-86899-135-2
David Flanagan, Lars Schulten: JavaScript kurz & gut, O'Reilly, 2007, 978-3-89721-531-3
Adam Freman: Pro jQuery, 978-1-4302-4095-2
Cody Lindley, jQuery Cookbook, 978-0596159771
Cody Lindley, jQuery Kochbuch, 978-3-89721-999-1
3. Originalliteratur
JavaScript Standard ECMA-262 ECMAScript Language Specication
http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
Standard ECMA-357 ECMAScript for XML Specication 2nd edition (December 2005)
http://www.ecma-international.org/publications/standards/Ecma-357.htm
Standard ECMA-327 ECMAScript 3rd Edition Compact Prole (June 2001)
http://www.ecma-international.org/publications/standards/Ecma-327.htm
Annotated EcmaScript 5.1
http://es5.github.io/
4. Internet
Galileo http://openbook.galileocomputing.de/javascript/
Kursbeispiele (K: https://netstorage.uni-regensburg.de/NetStorage/)
3
KAPITEL 2
Allgemeines
1995
3'1996
8'1996
8'1996
1997
6'1997
1997
1'1998
1998
Jun'1998
10'1998
12'1999
11'2000
6'2001
2002
1'2002
2004
11'2005
12'2005
26.8.2006
10'2006
1'2007
9'2007
6'2008
1'2009
6'2009
12'2009
1'2010
6'2011
31.1.2011
3.5.2011
2011
11'2011
8'2012
1'2013
5'2013
10'2013
24.1.2014
12'2014
1. Geschichte und Begrie
Netscape Navigator 2.0, Frames, Mocha und LiveScript
Brendan Eich, Netscape, Javascript (Navigator ≥2.0)
Microsoft JScript (IE ≥3.0)
Javascript 1.0
JScript (MS-Dialekt) mit IE3.0
Javascript 1.1
ECMA General Assembly accepts JavaScript
Javascript 1.2
Rhino
Netscape wird als Mozilla open source
ISO/IEC-16262
ECMA-262-2
Javascript 1.3
ECMA-262-3
Javascript 1.5
ECMA-327 (Compact Prole Scripting Language)
subset of ECMAScript for resource-constrained devices
such as battery-powered embedded devices
ISO/IEC 16262:2002
regular expressions, string handling, new control statements, try/catch,
tighter denition of errors, formatting, i18n
JScript.NET (MS-Dialekt) mit IE7
ECMA-262-4 existiert nicht
ECMA-357 (Erweiterung für XML
Javascript 1.6
ECMA-357 2. ed. (Erweiterung für XML
jQuery 1.0
Javascript 1.7
jQuery 1.1
jQuery 1.2
Javascript 1.8
jQuery 1.3
Ryan Dahl: nodejs 0.0.3
ECMA-262-5
de facto interpretations, new features, reective creation/inspection of objects,
JSON support, strict mode
jQuery 1.4
ECMA-262-5 (5.1)
jQuery 1.5
jQuery 1.6 (prop())
ISO/IEC 16262-2011
jQuery 1.7
jQuery 1.8
jQuery 1.9 (nal) 2.0β
jQuery 1.10
ECMA-404 The JSON Data Interchange Format
jQuery 1.11 und 2.0
io.js (fork von nodejs)
5
6
15.4.2015
6'2015
23.6.2015
6'2015
6'2015
2. ALLGEMEINES
Rhino 1.7.6
nodejs 0.12.5
io.js 2.3.1
ECMAScript harmony (JavaScript 6)
ECMAScript Internationalization
Derzeit (2014) sind ECMAScript 3 und 5 die beiden fast einzig relevanten Versionen.
2. Zusammenspiel mit anderen Produkten insbesondere Browsern
JavaScript wurde von Netscape für das Web zum Einsatz in Browsern entwickelt - clientseitig. Es ist auch
serverseitig einsetzbar.
Ergänzung zu HTML/XHTML/CSS/XML
HTML/XHTML/CSS wurden zur Programmierbarkeit erweitert .
XML: Einlesen und Ergänzen von XML aus HTML. Erstellen von SVG. Steuerung/Kontrolle von SMIL (MMLanguage). Erzeugung von XSLT. JavaScript in XML als CDATA.
http://www.html-world.de/program/xml_5.php
jQuery ist JavaScript-Bibliothek zur bequemen und einheitlichen Extraktion der Clientantworten.
Ajax ist weitere Ergänzung.
JSON
JavaScript und Flash (Actionscript)
2.1. HTML und Browser - client side JavaScript. Informationen:
http://www.w3.org/TR/html4/interact/scripts.html
http://www.w3.org/TR/html401/interact/scripts.html
http://www.w3.org/TR/html5/scripting-1.html
Jeder Browser ist heute zur Ausführung von JavaScript in der Lage. Dabei haben sich die Browser zu kleinen
Betriebssystemen entwickelt, in denen JavaScript-Programme ablaufen können. So brauchen die Skripte etwa
einen Scheduler zur Ausführung, Timeout- oder Timerinterval-Funktionen.
Globale Scriptspracheneinstellung:
<META http-equiv="Content-Script-Type" content=\"application/javascript">
Einbetten von JavaScript:
1. Im HTML-Dokument im Script-Element; Code steht im Content.
2. Im HTML-Dokument als externe js-Datei, die im src-Attribut des Script-Elements angegeben wird.
3. In HTML-Event-Handlern wie onclick steht ausführbarer Code meistens Funktionsaufrufe.
4. Durch die Protokollangabe javascript: gefolgt von einem einzeiligen (keine //-Kommentare) JavaScript Codestring als URL. Die URL darf überall stehen, wo eine URL erlaubt ist - <a href="URL" <form action="URL"
Script-Element:
<script>document.write("Hallo")</script>
<script language="JavaScript">document.write("Hallo")</script>
<script type="text/javascript">document.write("Hallo")</script>
<script type="text/javascript" src="bsp.js"></script>
Scriptstart in anderen Elementen:
<a href="javascript:window.alert('42')">Link</a>
<a href="#" onClick=\"alert('42')">Link</a>
Das window-Objekt repräsentiert den Zugri auf die Browser-Schnittstelle. Das window.document-Objekt repräsentiert den Zugri aus das JavaScript einbettende HTML-Dokument. Alle Elemente des window-Objekts
können auch ohne window. geschrieben werden (window.document ≡ document).
2.2. Iana media types. http://www.rfc-editor.org/rfc/rfc4329.txt
Historisches Gewirr:
text/javascript text/ecmascript text/javascript1.0 text/javascript1.1 text/javascript1.2 text/javascript1.3 text/javascript1.4 text/javascript1.5 text/jscript text/livescript text/x-javascript text/x-ecmascript application/xjavascript application/x-ecmascript application/javascript application/ecmascript
Empfohlen für allgemeinen Gebrauch:
application/javascript (.js)
application/ecmascript (.es)
4. WERKZEUGE
7
Da die meisten Browser JavaScript bevorzugen, lassen die meisten Web-Experten den Medientyp gleich ganz
weg.
2.3. URLs.
protocol://subsubdomain.subdomain.topleveldomain:port/dir/subdir/le#lepart?input
Beispiel: http://www.uni-regensburg.de:80/EDV/kurs_info/brf09510/index.html
3. Eigenschaften
Conformance with Unicode ≥ 5.1.0 and ISO/IEC 10646 with UTF-16 as the adopted encoding form.
Object oriented language for computations and manipulations of computation objects.
No specication for input of external data or output of results.
Host objects not described in ECMA-262.
Scripting language.
Web scripting language.
Syntax as in C.
Similarities to Java/Self/Scheme (Gosling/Ungar/IEEE1178-1990).
Web Browser - Window, ... objects.
Webserver - request objects.
Many terrible rumours are true (it does things dierently from intentions of the programmer).
Ridiculously liberal.
Flexible.
Normed (ECMA).
Other things are camouaged JavaScript (Flash with ActionScript).
Prototype based (without classes)
JSON: JavaScript Object Notation
JXON: JavaScript XML Object Notation
jQuery: Library to access HTML
4. Werkzeuge
Browser: Firefox, Chrome, IE. . .
HTML-Editor: Amaya, Komodo Edit (activestate), JsFiddle. . .
Homepages: G:
WWW (netware), /homepages/brf09510/public_html/ (Linux)
Libraries: jQuery, jsgl. . .
Liste von JavaScript-Engines:
http://en.wikipedia.org/wiki/List_of_JavaScript_engines
Tabelle 1.
Engine
Rhino
SpiderMonkey
V8
JScript
node
nashorn
Frei OpSrc Hersteller
ja
ja
Mozilla
ja
ja
Mozilla
ja
Google
Microsoft
ja
ja
Google
Oracle
Werkzeuge
Sprache OpenSuse Debian Windows Java
Java
Yast
apt-get Web
aufrufbar
C++
apt-get
apt-get
C++
Java
Debugger: Firebug
Speed Test: http://www.webkit.org/perf/sunspider/sunspider.html
Javascript lint: http://javascriptlint.com/online_lint.php
http://www.jslint.com/
http://jshint.com/
Code conventions: http://addyosmani.com/blog/javascript-style-guides-and-beautifiers/
http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
https://github.com/styleguide/javascript
Minication: Codetranformation ohne Semantikänderung in komprimierten Code.
Aufruf
smjs
node
jjs
8
2. ALLGEMEINES
4.1. Rhino. http://en.wikipedia.org/wiki/Rhino_%28JavaScript_engine%29
Rhino ist in Java geschrieben und damit auf jedem Rechner mit JRE installierbar.
4.1.1. openSuse. Rhino ist als Paket verfügbar.
su/Yast2/Software/Rhino installieren
Java nicht vergessen:
su/Yast2/Software/java-1_7_0-ibm-devel
4.1.2. Debian. Rhino ist als Paket verfügbar.
apt-get install rhino
js-Konsole:
rhino
java -jar /usr/share/java/js.jar
4.1.3. Windows. Rhino muss aus dem Internet beschat und installiert werden.
Download:
http://www.mozilla.org/rhino/download.html
rhino1.7R4.zip
Auspacken:
k:\RZ\KURSE\BRAUN\rhino\unzip32.exe c:\Users\brf09510\Downloads\rhino1_7R4.zip
Pfade:
path "c:\Program Files\Java\jdk1.7.0_03\bin";%path%
Start:
java -jar c:\rhino\rhino1_7R4\js.jar java -jar c:\rhino\rhino1_7R4\js.jar halloshell.js
Test:
js> print ("Hallo")
Hallo
js> quit()
Batchdatei zum Start von Rhino:
1
2
3
4
5
6
7
8
9
10
11
12
rem
rem
rem
rem
Zur I n s t a l l a t i o n e i n e n Ordner waehlen und r h i n o auspacken
c:
mkdir r h i n o
k : \RZ\KURSE\BRAUN\ djgpp \ u n z i p 3 2 . exe g : \ rhino1_7R3 . z i p
j a v a −v e r s i o n
i f e r r o r l e v e l 1 goto javaakt
goto j a v a s t a r t
: javaakt
c a l l g : \ j a v . bat
: javastart
j a v a − j a r c : \ r h i n o \ rhino1_7R3 \ j s . j a r %1
(http://www-nw.uni-regensburg.de/~brf09510/js/beispiele/hallo/rhino.bat)
4.1.4. Rhino und Java. Rhino kann direkt aus Java aufgerufen werden.
http://en.wikipedia.org/wiki/Rhino_%28JavaScript_engine%29#Example
1
2
3
4
5
6
7
8
9
10
11
12
// RhinoEngine . j a v a
import j a v a x . s c r i p t . S c r i p t E n g i n e ;
import j a v a x . s c r i p t . ScriptEngineManager ;
import j a v a x . s c r i p t . S c r i p t E x c e p t i o n ;
p u b l i c c l a s s RhinoEngine {
p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) {
ScriptEngineManager mgr = new ScriptEngineManager ( ) ;
// Now we can go and g e t a s c r i p t e n g i n e we want .
// This can be done e i t h e r by f i n d i n g a f a c t o r y t h a t s u p p o r t s
// our r e q u i r e d s c r i p t i n g l a n g u a g e
4. WERKZEUGE
13
14
15
16
17
18
19
20
21
22
23
24
25
26 }
// ( e n g i n e = f a c t o r y . g e t S c r i p t E n g i n e ( ) ; )
// o r by r e q u e s t i n g a s c r i p t e n g i n e t h a t s u p p o r t s a
// g i v e n l a n g u a g e by name from t h e s c r i p t e n g i n e manager .
S c r i p t E n g i n e e n g i n e = mgr . getEngineByName ( " J a v a S c r i p t " ) ;
// Now we have a s c r i p t e n g i n e i n s t a n c e t h a t
// can e x e c u t e some J a v a S c r i p t
try {
e n g i n e . put ( " name " , a r g s [ 0 ] ) ;
e n g i n e . e v a l ( " p r i n t ( ' H e l l o ' + name + ' ! ' ) " ) ;
} c a t c h ( S c r i p t E x c e p t i o n ex ) {
ex . p r i n t S t a c k T r a c e ( ) ;
}
}
(http://www-nw.uni-regensburg.de/~brf09510/js/beispiele/hallo/RhinoEngine.java)
rrzvm034: javac RhinoEngine.java; java RhinoEngine Peter
joe bsp1.js rhino bsp1.js Eingaben Ende mit quit() oder ctrl-D
4.1.5. Beispiel. Hello-world als Javascript-Programm mit Rhino:
1
2
3
4
5
6
7
8
// h a l l o s h e l l . j s : H a l l o i n e i n e r S h e l l
// C: \ U s e r s \ b r f 0 9 5 1 0 \ svn \ doku \ trunk \ j s \ b e i s p i e l e >
// j a v a − j a r c : \ r h i n o \ rhino1_7R3 \ j s . j a r h a l l o s h e l l . j s
p r i n t ( " H e l l o Hola H a l l o ! " )
3*4
quit ()
(http://www-nw.uni-regensburg.de/~brf09510/js/beispiele/hallo/halloshell.js)
4.2. Node.js.
node.js für Windows, MaxOSX, Linux, SunOS; source code
Debian: package nodejs; Aufruf nodejs
OpenSuSE: package nodejs;
Windows: Download node.exe (32- oder 64bit); Aufruf: node
Konsolausgaben: console.log("Hallo");
Node Ende: process.exit();
Webseite: https://nodejs.org/
4.3. SpiderMonkey.
Debian: apt-get install spidermonkey-bin
smjs
smjs halloshell.js
Übersetzung aus der Quelle (openSuSE):
https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey
get tarball; bzip2 -d mozjs-31.2.0.rc0.tar.bz2
tar -tf mozjs-31.2.0.rc0.tar
tar -xf mozjs-31.2.0.rc0.tar
cd mozjs-31.2.0/
joe INSTALL README
cd mozjs-31.2.0/
cd js/src/
time ./configure
time make
cd js/src/dist/bin/
./js --help
4.4. V8 (Google). open source, proprietär, compilierend, written in C++, used in Chrome
9
10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
4.5. Beispiele. Erste Beispiele
2. ALLGEMEINES
<!DOCTYPE HTML PUBLIC " −//W3C//DTD HTML 4 . 0 1 / /EN"
" h t t p : / /www. w3 . o r g /TR/ html4 / s t r i c t . dtd">
<html> <!−− f i r s t . html : HTML− B e i s p i e l e −−>
<head>
<META http −e q u i v="Content −Type" c o n t e n t=" t e x t / html ; c h a r s e t=UTF−8">
<META http −e q u i v="Content − S c r i p t −Type" c o n t e n t=" a p p l i c a t i o n / j a v a s c r i p t ">
< t i t l e > f i r s t . html</ t i t l e >
</head>
<body>
<p>
<!−− HTML V a l i d a t o r : r e q u i r e d a t t r i b u t e "TYPE" not s p e c i f i e d −−>
<s c r i p t >document . w r i t e ( " H a l l o ")</ s c r i p t ><br>
<!−− HTML V a l i d a t o r : r e q u i r e d a t t r i b u t e "TYPE" not s p e c i f i e d −−>
<s c r i p t >Unsinn </ s c r i p t ><br>
<!−− HTML V a l i d a t o r : r e q u i r e d a t t r i b u t e "TYPE" not s p e c i f i e d −−>
<s c r i p t ><!−− Hide s c r i p t from b r o w s e r i n a mixed HTML/ J a v a s c r i p t comment
document . w r i t e ( " H a l l o " )
//−−></ s c r i p t ><br>
<!−− HTML V a l i d a t o r : t h e r e i s no a t t r i b u t e "LANGUAGE" ; r e q u i r e d a t t r i b u t e "TYPE" not s p
< s c r i p t l a n g u a g e=" j a v a s c r i p t ">
document . w r i t e ( " l a n g u a g e=j a v a s c r i p t d e p r e c a t e d i n HTML" )
</ s c r i p t >
</p><p>
<a h r e f ="h t t p : / /www. w3 . o r g /TR/ html401 / i n t e r a c t / s c r i p t s . html"> s i e h e </a><br>
< s c r i p t type=" t e x t / j a v a s c r i p t ">
document . w r i t e ( " type=t e x t / j a v a s c r i p t o b s o l e t e by IANA" )
</ s c r i p t >
<a h r e f ="h t t p : / /www. i a n a . o r g / a s s i g n m e n t s / media−t y p e s / t e x t / i n d e x . html"> s i e h e </a><br>
< s c r i p t type=" a p p l i c a t i o n / j a v a s c r i p t ">
document . w r i t e ( " type=a p p l i c a t i o n / j a v a s c r i p t not e v e r y Browser " )
</ s c r i p t >
<a h r e f ="h t t p : / /www. i a n a . o r g / a s s i g n m e n t s / media−t y p e s / a p p l i c a t i o n / i n d e x . html"> s i e h e </a><b
< s c r i p t type=" a p p l i c a t i o n / j a v a s c r i p t " s r c =" h a l l o . j s ">
document . w r i t e ( " not e x e c u t e d " )
</ s c r i p t ><br>
< s c r i p t type=" a p p l i c a t i o n / e c m a s c r i p t ">
document . w r i t e ( " type=a p p l i c a t i o n / e c m a s c r i p t not e v e r y Browser " )
</ s c r i p t >
< s c r i p t type=" a p p l i c a t i o n / e c m a s c r i p t " s r c =" h a l l o . j s ">
document . w r i t e ( " not e x e c u t e d " )
</ s c r i p t >
5. CIP-POOLS
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
11
</p>
<n o s c r i p t ><p>F a l l s k e i n e S c r i p t s p r a c h e a k t i v </p></n o s c r i p t >
<p>
<a h r e f =" j a v a s c r i p t : window . a l e r t ( ' J a v a s c r i p t a l s URL− P r o t o k o l l ')" > H i e r k l i c k e n </a><br>
<a h r e f="#" o n c l i c k ="window . a l e r t ( ' J a v a s c r i p t durch Link ')" > H i e r k l i c k e n </a><br>
<a h r e f="#" o n c l i c k ="window . a l e r t (3*7)" > H i e r k l i c k e n </a><br>
<a h r e f =" j a v a s c r i p t : new Date ( ) . t o L o c a l e T i m e S t r i n g ();" > U h r z e i t b i t t e </a>
</p>
</body>
</html>
(http://www-nw.uni-regensburg.de/~brf09510/js/beispiele/hallo/first.html)
5. CIP-Pools
cmd (Kommandofenster)
K:\RZ\KURSE\BRAUN\js\rh.bat Rhino aktivieren
rhino x.js
rhino
K:\RZ\KURSE\BRAUN\js\nd.bat Node aktivieren (nd32.bat!)
node x.js
node
K:\RZ\KURSE\BRAUN\rhino\rhino.bat x.js Rhino direkt starten
K:\RZ\KURSE\BRAUN\jquery\ jQuery-Library
K:\RZ\KURSE\BRAUN\jquery\ jQuery-Library
K:\RZ\KURSE\BRAUN\jsgl\ JavaScript graphic library
K:\RZ\KURSE\BRAUN\rhino\ Rhino zum mitnehmen
derzeit nicht im Linux-Pool
KAPITEL 3
Sprachgrundlagen (Core-JavaScript)
1. Struktur
Denitionen:
ECMAScript program: cluster of Communicating objects.
Object: collection of properties with attributes (attribute writable=false: changes will fail).
Properties: containers for other objects.
Method: function associated with an object.
Der Quelltext eines ES-Programms besteht aus Schriftzeichen des Unicodes in UTF-16, folglich können alle
Unicodezeichen dargestellt werden, selbst wenn sie breiter als 16 Bit sind. Das BOM (byte order mark) wird
interpretiert. Die meisten JavaScript-Interpreter verstehen alle encodings. Ein JavaScript-Programm in Unicode
sollte bereits normalisiert sein, eigentlich eine Aufgabe eines Editors.
Der Quelltext ist wie bei C case-sensitiv und formatfrei.
HTML ist case-insensitiv und kollidiert mit JavaScript. Auch wenn HTML das zuläÿt, darf das
korrekte onclick nie durch (z.B.) onClick ersetzt werden. XHTML ist hier problemlos, weil es selbst casesensitiv ist.
Kommentare werden wie in C99 geschrieben. Zeilenendkommentare beginnen mit // und enden mit den folgenden Zeilenende. Klassische Kommentare beginnen mit /* und enden mit dem folgenden */. Kommentare
werden nicht geschachtelt.
Achtung:
http://www-nw.uni-regensburg.de/~brf09510/js/beispiele/hallo/woaini.html
Trotz der fehlenden Struktur und der gegenüber C viel freieren Gestaltungsmöglichkeit empehlt es sich, auch
Javascript-Programme strukuriert zu schreiben. Das ist (leider) nicht zwingend.
Üblich ist die Zusammenfassung aller Javascriptdenitionen im Kopf einer HTML-Datei, also zwischen <HEAD>
und </HEAD>
Ausführungsreihenfolge: statische Reihenfolge im Programm oder in der HTML-Datei. Ausnahme: Funktionen.
Im strict-mode gelten schärfere Restriktionen. Um älteren JavaScript-Interpretierern auch die Ausführung mit
strict zu ermöglichen, wird die strict-Anweisung als String geschrieben. Um sie zu kapseln, verwendet man eine
anonyme Funktion, die sofort aufgerufen wird.
'use strict'; // umschalten in den strict mode
Strict mode auf die kapselnde Funktion beschränken:
(function() {// kapselnde Funktion
'use strict'; // umschalten in den strict mode
// strict js-code
}()); // Aufruf dieser Funktion
Eine ausgezeichnete Hilfe zur Erzeugung von hochwertigem JavaScript-Code ist das Buch von Douglas Crockford: JavaScript: The Good Parts, 978-0-596-51774-8 und die zugehörende jslint-Webseite.
https://www.ebooks-it.net/ebook/javascript-the-good-parts
http://www.jslint.com/
Semikolon: beendet Anweisungen; darf weggelassen werden; Vorsicht: Zeilenumbruch einer Anweisung vermeiden, wenn schon der erste Teil eine syntaktisch vollständige Anweisung ist.
1 // h a l l o . j s : H a l l o i n s HTML
2
3 document . w r i t e ( " H e l l o Hola H a l l o ! " )
(http://www-nw.uni-regensburg.de/~brf09510/js/beispiele/hallo/hallo.js)
2. Kommunikation
Kommunikation ist in Javascript nicht deniert, sondern wird erst in der Umgebung bereitgestellt. Daher muÿ
zwischen den Umgebungen unterschieden werden.
13
14
3. SPRACHGRUNDLAGEN (CORE-JAVASCRIPT)
Für erste Versuche folgen jetzt ein paar Rezepte:
2.1. Ausgaben.
Rhino shell:
Konsolausgaben: print("Hallo");
3*7
Rhino Ende: quit();
Node:
Konsolausgaben: console.log("Hallo");
Node Ende: process.exit();
HTML:
window.alert("Hallo")
document.write("Hallo")
document.write(3*7)
2.2. Eingabe.
Rhino: Mit readFile("Dateiname") kann der Inhalt einer Datei als String geholt werden.
HTML: In HTML müssen Eingaben in Formularen erfolgen. Sie werden dann aus der Umgebung geholt. Formular
und Eingabeelemente haben Namen, deren Werte in Javascript benutzt werden.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE HTML PUBLIC " −//W3C//DTD HTML 4 . 0 1 / /EN"
" h t t p : / /www. w3 . o r g /TR/ html4 / s t r i c t . dtd">
<html> <!−−komm . html : B l u t a l k o h o l −K o n z e n t r a t i o n e n −−>
<head>
<META http −e q u i v="Content −Type" c o n t e n t=" t e x t / html ; c h a r s e t=UTF−8">
<META http −e q u i v="Content − S c r i p t −Type" c o n t e n t=" a p p l i c a t i o n / j a v a s c r i p t ">
< t i t l e >komm . html</ t i t l e >
< s c r i p t type=" a p p l i c a t i o n / j a v a s c r i p t "><!−−
f u n c t i o n Prom ( ) {
var g = document . Formular . Gewicht . v a l u e
var k = document . Formular . A l k o h o l . v a l u e
var v = document . Formular . Menge . v a l u e
var t = document . Formular . Z e i t . v a l u e
var p = k /100 * v * 0 . 7 9 * 1000
p = p − t * g / 10
window . a l e r t ( " g="+g+", k="+k+", v="+v+", t="+t +": "+p+" g A l k o h o l im Koerper " )
p = p / (0.7 * g)
window . document . Formular . P r o m i l l e . v a l u e =
""+p +" P r o m i l l e = " + p + " ‡"
}
//−−></ s c r i p t >
</head>
<body>
<form name="Formular " a c t i o n ="">
<p>
Gewicht : <i n p u t type=" t e x t " name="Gewicht " v a l u e ="75" s i z e ="5"><br>
A l k o h o l im Getr&auml ; nk : <i n p u t type=" t e x t " name="A l k o h o l " v a l u e ="12" s i z e ="5"><br>
Alkoholmenge : <i n p u t type=" t e x t " name="Menge" v a l u e ="0.5" s i z e ="5"><br>
Z e i t s e i t T r i n k b e g i n n : <i n p u t type=" t e x t " name=" Z e i t " v a l u e ="1" s i z e ="5"><br>
<i n p u t type="button " v a l u e="W i e v i e l P r o m i l l e ?" o n c l i c k ="Prom()"><br>
P r o m i l l e : <i n p u t type=" t e x t " name="P r o m i l l e " v a l u e ="?" s i z e ="50"><br>
</p>
</form>
<p>
<a h r e f ="h t t p : / / v a l i d a t o r . w3 . o r g / check ? u r i=r e f e r e r "><img
s r c ="h t t p : / /www. w3 . o r g / I c o n s / v a l i d −html401 " a l t ="V a l i d HTML 4 . 0 1
4. SPEICHER
39
40
41
42
43 </body>
44 </html>
15
S t r i c t " h e i g h t ="31" width="88"></a>
</p>
(http://www-nw.uni-regensburg.de/~brf09510/js/beispiele/komm/komm.html)
3. Kommentare
wie in C
4. Speicher
4.1. Variable.
Variable in JavaScript lassen sich auf mehrere Arten kategorisieren.
Zunächst kann man explizit und implizit deklarierte Variablen unterscheiden. Explizit werden Variable mit var
deklariert. Implizit deklarierte Variablen existieren mit der ersten Verwendung und sind immer global.
Weiter existieren globale und lokale Variable. Globale Variablen gelten im gesamten Programm und werden
auÿerhalb einer Funktion deklariert oder in Funktionen ohne Deklaration verwendet. Lokale Variable werden
nur innerhalb von Funktionen mit dem Wort var deklariert und mit Funktionsende wieder gelöscht. Globale
Variable werden eigentlich einem Objekt, dem sog. globalen Objekt, zugeordnet. Nicht deklarierte Variable sind
seit ES5 deprecated und werden im strict-Modus nicht zugelassen.
Variable dürfen doppelt deklariert werden. Die zweite Deklaration hat keine Wirkung. Eine zweite Initialisierung
wirkt wie eine Wertzuweisung.
Schlieÿlich unterscheidet man in JavaScript zwei bis vier Variablenstrukturen: elementare (primitive) Variablen
(in Perl Skalare) und Objekte. Objekte werden unterteilt in echte Objekte, Felder (Arrays) und Funktionsobjekte.
Skalare sind Variable für Daten, die ohne weitere innere Struktur als Einheit betrachtet werden wie Zahlen oder
Strings. Arrays sind geordnete, indizierte Zusammenfassungen solcher Skalare. Objekte sind ungeordnete, nicht
indizierte Zusammenfassungen, deren Elemente benannt sind. Streng genommen sind Felder spezielle Objekte
mit zusätzlichen Eigenschaften und modizierter Syntax (eckige statt geschweifter Klammern).
Variable in JavaScript sind typenlos. Der Typ gehört also nicht fest zu einer Variablen, sondern nur zum
gespeicherten Wert. Er kann sich mit dem Wert jederzeit ändern. Bei Bedarf werden Werte auch implizit in
andere Typen geändert.
Tabelle 1.
Elementar
Dekl. var x;
Variable
Array
Objekte
Funktionen
var x=[];
var x={};
var x=function(){}
var x=3.14; var x=[1,"Hallo"]; var x={x:0,y:1.3};
var x;
var i, j, k;
var y = 5;
var l, m = 10;
var m = 10, n = "Text";
z = 15;
4.2. Namen.
Ein Name (identier ) ist eine Bezeichnung für JavaScript-Programmelemente nach den folgenden Regeln. Reservierte Wörter sind nicht erlaubt:
Namen: Beginn: Buchstabe, $, _
Fortsetzung: zusätzlich: Ziern, weitere Sonderzeichen
case-sensitiv
16
3. SPRACHGRUNDLAGEN (CORE-JAVASCRIPT)
Als Buchstabe gilt sehr liberal jeder Unicode-Buchstabe, als Zier jede Unicode-Zier (UnicodeDigit ). Sonderzeichen sind ebenfalls sehr weit gefasst als UnicodeCombiningMark, UnicodeConnectorPunctuation und formatcontrol-characters aus bestimmten natürlichen Sprachen. Auch Zero-width-joiner (\u200D) und Zero-width-nonjoiner (\u200C)sind zugelassen. Die Aufzählung ist nur exemplarisch und nicht erschöpfend.
ecma S. 123
Reservierte Wörter:
break case catch class const continue debugger default delete do else export extends nally for function if import
in instanceof let new return static super switch this throw try typeof var void while with yield
davon Zukunftsmusik:
await enum implements interface package private protected public
zu vermeidende Wörter (auÿer für ihren Zweck ): null true false Array Date Innity JavaArray JavaClass
JavaObject JavaPackage Math NaN Number Object String alert all anchor anchors area assign blur button
checkbox clearInterval clearTimeout clientInformation close closed conrm constructor crypto decodeURI decodeURIComponent defaultStatus document element elements embed embeds encodeURI encodeURIComponent
escape eval event leUpload focus form forms frame frameRate frames function getClass hasOwnProperty hidden history image images innerHeight innerWidth isFinite isNaN isPrototypeOf java layer layers length link
location mimeTypes name navigate navigator oscreenBuering onbeforeunload onblur onclick oncontextmenu
ondragdrop ondragdrop onerror onfocus onkeydown onkeypress onkeyup onload onmousedown onmousemove
onmouseout onmouseover onmouseup onreset onsubmit onunload open opener option outerHeight outerWidth
packages pageXOset pageYOset parent parseFloat parseInt password pkcs11 plugin prompt propertyIsEnum
prototype radio reset screenX screenY scroll secure select self setInterval setTimeout status submit taint text
textarea toString top undened unescape untaint valueOf window
Mit var denierte Variable ohne Wert haben den Typ undened.
Undenierte Variable ohne Wert erzeugen beim Verwenden einen Laufzeitfehler.
4.3. Konstante nicht aktuell.
const max = 100
unveränderlicher Wert Zukunftsmusik nach Ecma-262
4.4. Typen.
Die Bestimmung des Typs erfolgt aus dem Wert einer Variablen.
Man unterscheidet elementare (primitive, skalare) Typen und Objekte.
JavaScript kennt fünf elementare Typen:
undened null Boolean String Number (reell, ganz, IEEE754).
Zusammen mit dem Objekttyp sind das sechs Typen. Arrays sind einerseits spezielle Objekte und damit Objekttypen, andererseits durch Spezialbehandlung in der Sprache verankert und für den Programmierer durchaus
eigenständig. Ähnliches gilt für Funktionen, so dass man je nach Zählweise von sechs bis acht Typen sprechen
kann.
Tabelle 2.
Typ
undened
null
Boolean
Number
String
Object
Array
Function
Typen
Anzahl der Werte
1
1
2
18437736874454810626 = 1.8 · 1019
Werte
undened
null
true false
Zahlen, 0, +Inf, -Inf, NaN
"", "Hallo"
{}, {a:2,b:3,c:5}
[], [2,3,,5]
function(){}
Die leichte Diskrepanz zu Flanagan in der Zahlenanzahl von 1 erklärt sich wahrscheinlich damit, dass Flanagan
die eine Zahl ±0 als zwei Werte rechnet.1
4.4.1. undened. Jede denierte, aber nicht initialisierte Variable ist undefined. Dieser Wert wird von
der Engine auch in anderen Situationen, z.B. als nicht denierte Argumente oder Ergebnisse von Funktionen
automatisch vergeben.
1Es gibt 264 = 18446744073709551616 Bitmuster. Sie sind in normals und subnormals, zusammen nite numbers, sowie Null,
Unendlich und NaNs unterteilt. Es gibt 2 × (211 − 2) × 252 = 18428729675200069632 Normals, 2 × (252 − 1) = 9007199254740990
Subnormals, zusammen sind das 18437736874454810622 endliche Zahlen. Insgesamt sind das 18437736874454810626 verschiedene
Werte (echte Zahlen, 0, +Inf, -Inf, NaN).
4. SPEICHER
17
4.4.2. null. null bezeichnet das Fehlen eines Wertes einer Variablen, also einen leeren Wert oder anders
ausgedrückt einen nichtnumerischen Nullwert. Er wird fast nie automatisch von der Engine eingetragen, sondern
muss explizit vom Programmierer benutzt werden. Die Anweisung
var x = null;
drückt also aus, dass der Programmierer eine denierte Variable braucht, die derzeit explizit leer ist.
Wie in Java wird null vor allem für leere Objekte verwendet. Logischerweise liefert typeof null den Typ
"object" (als String!).
4.4.3. undened, null und NaN. Alle drei Werte bezeichnen einen nicht denierten Wert und können letztlich
austauschbar für diesen Fall verwendet werden. Im allgemeinen ist undened jedoch "richtiger" als die beiden
anderen Werte. null sollte ausschlieÿlich für Objekte verwendet werden und NaN nur für numerische undenierte
Werte. Beim schwachen Vergleich sind undened und null gleich, beim starken verschieden:
undefined == null
undefined !== null
null ist also schwächer im Sinn von "weniger falsch" als undefined, aber stärker ("fälscher") als NaN.
Eine andere Charakterisierung ist undefined als undenierter Wert auf Systemebene, null auf Programmebene
und NaN auf numerischer Ebene.
4.4.4. Boolean. Der Typ Boolean hat zwei Werte true und false und wird hauptsächlich in Bedingungen
von Anweisungen verwendet. Dort wird jeder nicht-Boolean Wert in einen Boolean Wert umgewandelt. Die
speziellen Werte undefined null 0 -0 NaN und "" sind false, alle anderen Werte sind true.
4.4.5. Number. Es gibt in Javascript nur einen einzigen numerischen Typ zum Rechnen mit 8 Byte. Es ist
als double in IEEE-754 festgelegt und existiert unter demselben Namen auch in C und Java.
Number unterscheidet die Zahlen 0, subnormals, normals, Unendlich und NaNs. Unendlich mit Vorzeichen (±∞)
wird mathematisch korrekt berechnet und ist beispielsweise das Ergebnis von ± 01 . NaN ist ein nicht berechenbares
Ergebnis und wird genau in diesem Fall gespeichert, z.B. bei ∞−∞. Erscheint es als Endergebnis, dann hat man
vorher wahrscheinlich eine unmögliche Rechnung bei einem Zwischenergebnis verlangt. Für x = Number.NaN
gilt immer die Bedingung x != x. Der Wert NaN ist also zu jedem Wert einschlieÿlich ihm selbst verschieden.
Zahlen werden wie in Java und C geschrieben: 0 -1 127 08 0xf 3.14 1.3e-3 Auch in Javascript sind mit
0x beginnende ganze Zahlen sedezimal, mit 0 beginnende ganze Zahlen oktal. Spezielle Werte werden verbal
benutzt:
Number.MIN_VALUE
Number.MAX_VALUE
Number.NaN
Number.NEGATIVE_INFINITY
Number.POSITIVE_INFINITY
Alle Rechnungen erfolgen reell. Ganzzahlige Arithmetik im Bereich −9007199254740990 . . . 9007199254740990 =
253 ist exakt, alle anderen Rechnungen führen zu gerundeten Ergebnissen mit etwa 15 Stellen Genauigkeit. Mit
echten ganzen Zahlen wird nur gelegentlich in Zwischenergebnissen (Bsp.: floor, <<, &) gerechnet.
Kurz: Ganze Zahlen existieren nicht in Javascript, es gibt jedoch genügend Operationen, die diese Fehlstelle
ausgleichen.
var x = Number.NaN; // x ̸= x
if (x != x) // if (x !== x) if (isNaN (x))
4.4.6. String. Strings verhalten sich eher wie in Java. Die C-Schreibweisen werden übernommen:
"String mit \n\r\t\f\b\"\\\'"
4.4.7. Object, auch Array und Funktion. alles andere;
Global object
Wrapper objects
Immutable (Primitives, insbesondere Strings) and Mutable (alle objects)
4.5. Konversionen.
4.5.1. Automatische Konversionen. Konversionen werden implizit und kontextabhängig durchgeführt.
Tricks:
var x = "Text"+7*7; print (typeof(x)) Text49
var x = 1.0*"3.14"; print (typeof(x)) 3.14
var x = "1"+"1"; print (typeof(x)) 11
+x erzeugt numerischen Wert aus x
- -x erzeugt numerischen Wert aus x
x+"" erzeugt String aus x
!!x erzeugt boolean aus x
18
3. SPRACHGRUNDLAGEN (CORE-JAVASCRIPT)
Tabelle 3.
Quelltyp Quellwert
undened
null
String
leer
nicht-leer
Zahl
0
subnormal
normal
∞
−∞
NaN
Boolean false
true
Objekt
Automatische Konversionen:
String
"undefined"
"null"
≡
≡
"0"
"Wert"
"Wert"
"Infinity"
"-Infinity"
"NaN"
"false"
"true"
toString()
valueOf()
Zahl
NaN
0
0
num. Wert
≡
≡
≡
≡
≡
≡
0
1
valueOf()
toString()
NaN
Boolean
false
false
false
true
false
true
true
true
true
false
≡
≡
true
Objekt
Fehler
Fehler
String-Objekt
String-Objekt
Number-Objekt
Number-Objekt
Number-Objekt
Number-Objekt
Number-Objekt
Number-Objekt
Boolean-Objekt
Boolean-Objekt
≡
!!new Boolean(false) erzeugt true, da mit new Objekt erzeugt wird
4.5.2. Explizite Konversionen. In verschiedenen Objekten, die teilweise schon von ECMA deniert sind,
manchmal auch erst in externen Libraries (jQuery) programmiert sind, gibt es eine Reihe weiterer Konversionen
für diverse Zwecke. So werden ganze Zahlen mit Math.floor(x) oder Math.ceil(x) erzeugt.
4.5.3. Zahlenformatierungen. Zahlenformatierungen wandeln den Typ Number in den Typ String um und
können als Konversionen aufgefasst werden.
Tabelle 4.
Konversion
implizite Konversion
Zahlenformatierungen:
Objekt
Denition
ECMA 48
Number.toString ()
Number
ECMA 155
Number.toString (radix)
Number
ECMA 155
Number.toFixed (digs)
Number
ECMA 156
Number.toExponential (digs)
Number
ECMA 155
Number.toPrecision (prc)
Number
ECMA 156
parseNumber({format:"#,###.00", locale:"us"}); jquery-numberformatter jQuery plugin
formatNumber({format:"#,###.00", locale:"us"}); jquery-numberformatter jQuery plugin
sprintf('format', inserts);
Das jQuery-Plugin stammt von der Webseite https://code.google.com/p/jquery-numberformatter/. Die
sprintf-Library ndet man auf https://github.com/alexei/sprintf.js.
Beispiele:
3.14 + '' ergibt den String '3.14'
(3.14).toString()
(3.14).toString(16)
(3.14).toFixed(2)
(3.14).toExponential()
(3.14).toPrecision(2)
$(this).parseNumber({format:"#,###.00", locale:"us"});
$(this).formatNumber({format:"#,###.00", locale:"us"});
sprintf('Hello %(name)s', user);
4.6. Typabfragen.
Speziell bei der Auswertung von Funktionsargumenten und bei HTML-Dokumentbearbeitungen ist es wichtig, den Typ von Variablen festzustellen. Dazu gibt es in JavaScript Sprachmittel,
Bibliotheksmittel und schlieÿlich in speziellen Bibliotheken weitere Hilfsmittel.
Implementierungen wird abgeraten, die Freiheit bei Host objects auszunutzen. Verboten sind: "undefined",
"boolean" "function" "number" "symbol" "string" .
5. RECHENAUSDRÜCKE (EXPRESSIONS)
Tabelle 5.
Typ
undened
null
Boolean
Number
String
Symbol
Object
Array
Function
Host objects
typeof
"undefined"
"object"
"boolean"
"number"
"string"
"symbol"
"object"
"object"
"function"
impl.dened
instanceof in
19
Typen
JavaScript JavaScript-Library jQuery
5. Rechenausdrücke (expressions)
5.1. Operatoren. Mit leichten Unterschieden orientieren sich die Javascript-Operatoren an C.
Tabelle 6.
Priorität Bezeichnung
1
Primary
2
Left hand side
3
4
5
6
7
8
9
10
11
12
13
14
Postx
Unary (Präx)
Multiplicative
Additive
Bitshift
Relational
Equality
Binary bitwise
Binary logical
Conditional
Assignment
Comma
Operatorübersicht
Operator
this Name String Array Object (Ausdruck)
. [] ()
call args funct
++ -++ -- + - ~ ! delete typeof void
*/%
+-+
<< >> >>>
< <= > >= instanceof in
== != === !==
&^|
&& ||
?:
= *= /= \%= += -= <<= >>= >>>= &= ^= |=
,
Assoziativität
→
new ←
→
→
→
→
→
→
→
→
→
←
←
→
5.2. JavaScript Ausführung.
Es gibt in JavaScript drei Arten von Code: globaler Code, eval-Code und
Funktionsrumpfcode. Global sind alle Anweisungen auÿerhalb von Funktionen. Ein Stringparameter der evalFunktion wird immer als globaler Code ausgeführt. Schlieÿlich bildet der Rumpf einer Funktion ohne verschachtelte innere Funktionen Funktionscode (Funktionsrumpfcode FunctionBody source code). Funktionscode
wird einem builtin Function constructor mit allen Argumenten in Form eines Komma-separierten Strings und
darüberhinaus dem source code als zusätzlichem letzten Argument übergeben. Diese beiden Argumente heiÿen
FormalParameterList und FunctionBody.
Bei der Ausführung werden zwei Modi unteschieden: strict und unrestricted. Im strict Modus gibt es strict
global code, strict eval code und strict function code. strict code wird mit der use strict directive am Anfang
explizit angegeben oder von aufrufendem Code vererbt.
Ausführung von JavaScript-Code bewirkt einen neuen execution constet, der auf dem stack gespeichert wird. Nur
der jeweils letzte oberste EC ist der running EC. Der EC besteht aus lexical envoironment, variable environment
und this-binding.
5.3. Primary.
this: thisBinding of current EC
name: die jeweils zu einem Namen gehörende Variable wird von der Funktion GetIdentierReference mit den
drei Argumenten env (lexical environment od running EC), strict (true, false) und dem name bsestimmt.
Konstante (Literale): null true false Zahlen strings
array initializer
object initializer
Klammern
20
5.4. Left hand side.
3. SPRACHGRUNDLAGEN (CORE-JAVASCRIPT)
Feld- und Objektzugri (property access): a.b a[b]
Objekterzeugung mit new (constructor Aufruf)
Funktionsaufruf
5.5. Postx. ++ -- wie in C,
5.6. Präx (unary. ++ -- wie in C,
+ - ~ ! wie in C,
Bei bitweisen Operatoren wird der Operand als numerische Gröÿe (Zahl) dargestellt, in eine 32-bit-int konvertiert, die Operation durchgeführt und das Ergebnis als Zahl (double) zurückgegegeben.
delete: löscht array elements und object properties.
typeof: Der Typ des nachfolgenden Ausdrucks wird als String zurückgegeben. Ist der Ausdruck callable, dann
ist das Ergebnis function. Bei host-Objekten ist das Ergebnis in Grenzen implementation-dened.
void: ein nachfolgender unary expression wird ausgewertet und statt dessen Ergebnis ein undened erzeugt. Der
Ausdruck wird wegen seiner Nebenwirkung aufgerufen, sein Resultat wird ignoriert.
5.7. Arithmetik. * / % + - wie in C,
5.8. Bits. << >> >>> & ^ | wie in Java.
Bei bitweisen Operatoren wird der Operand als numerische Gröÿe (Zahl) dargestellt, in eine 32-bit-int konvertiert, die Operation durchgeführt und das Ergebnis als Zahl (double) zurückgegegeben.
5.9. Logik.
< <= > >= wie in C,
instanceof: (object class test; class is constructor function) und in (property-test)
in:
== != === !==
& ^ |
&& || ! wie in C,
1
2
3
4
5
6
7
8
9
10
5.10. cond. ?: wie in C
5.11. Assignment. = *= /= %= += -= <<= >>= >>>= &= ^= |=
5.12. Komma. , wie in C
5.13. Math Objekt. > ecma S 330
// b e i s p i e l e / r e c h n e / d i c e . j s : 30 mal w u e r f e l n
var i , d ;
f o r ( i = 1 ; i <= 3 0 ; i ++)
{
d = Math . random ( ) ;
d = Math . f l o o r ( 1 + d * 6 ) ;
p r i n t (" " + d ) ;
}
(http://www-nw.uni-regensburg.de/~brf09510/js/beispiele/rechne/dice.js)
5.14. Date Objekt. > ecma s. 339
1 // b e i s p i e l e / r e c h n e / h e u t e . j s : Datum und U h r z e i t
2
3 var d = new Date ( ) ;
4 p r i n t ( " Heute i s t " + d ) ;
(http://www-nw.uni-regensburg.de/~brf09510/js/beispiele/rechne/heute.js)
5.15. String Objekt. > ecma s 357
5.16. eval. selten aber für js characteristisch;
5.17. Anmerkungen zur Library. assert: JavaScript kennt keine assert-Anweisung, nur Pläne sie ein-
zuführen.
Fremdlibraries: http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-quick-and-easy-javascript-t
http://chaijs.com/guide/styles/#assert
6. ANWEISUNGEN
6. Anweisungen
zahl = 42
if (zahl == 42) autor = "Douglas Adams"
alert ("Meldung")
6.1. Blöcke.
6.2. Alternativen. if switch
6.3. Iterationen. while do for
for (var in object)
forEach - eigentlich method
6.4. with. with (object)
6.5. Kleine Anweisungen. Expressions, Deklarationen (var, function),
break
continue
return
throw
try catch nally
debugger
'use strict';
21
KAPITEL 4
Arrays
Felder in Javascript sind spezielle Objekte. Sie enthalten geordnete numerierte Sammlungen von Daten. Die
Daten werden über Indizes zugegrien. Im Normalfall beginnt die Numerierung mit 0.
1. Erzeugung
Felder können direkt erzeugt werden:
var a1 = []; // leeres Feld
var
var
var
var
var
tur
a2
a3
a4
a5
a6
=
=
=
=
=
[2, 3, 5, 7, 11, 13, ]; // homogenes Feld mit Primzahlen
[2, "2", "zwei", "two", 2.0]; // inhomogenes Feld
[, "voll", , "voll"]; // inhomogenes Feld mit Lücken
[[1, 2], [3, 4]]; // zweidimensionales Feld
[{x:1, y:"value"}, "string", [1, 2], [3, 4]]; // inhomogene teils mehrdimensionale Struk-
Kommas in der Mitte denieren fehlende Elemente. Ein abschlieÿendes Komma wird ignoriert.
Für Felder gibt es einen Konstruktor, der zum Testen und Erzeugen dienen kann:
var a7 = new Array (); // leeres Feld
var a8 = new Array (5); // Feld mit 5 undenierten Elementen
var a9 = new Array (5, 2.5, "Hans"); // Feld mit den angegebenen drei Werten
Das Wort new darf entfallen als Funktionsaufruf wirkt der Konstruktor gleich.
2. Feldlänge
Jedes Feld speichert seine Feldlänge in der Variablen length. Die Längen der Felder a1 . . . a9 sind 0, 6, 5, 4, 2,
4, 0, 5 und 3.
3. Feldzugri
Feldelemente werden durch ihren Index in eckigen Klammern nach dem Feldnamen bezeichnet. Das Element
0 des Feldes a4 ist a4[0]. Die ersten Elemente der obigen Felder haben die Werte undened, 2, 2, undened,
[1,2], object, undened, undened und 5.
Bei jedem Feld hat das letzte Element die Nummer lenght-1. im Beispiel sind das die Werte undened, 13 (trotz
des Kommas), 2, "voll", [3,4], [3,4], undened, undened und "Hans".
4. Ändern des Feldinhalts
Jedes Feldelement kann jederzeit geändert werden. Dabei wird die Länge bei Bedarf angepasst. Sie ist immer
die Anzahl der Elemente zwischen dem ersten und letzten denierten, selbst wenn dieses undefined ist.
a1 [100] = 2;
a2 [a2.length-1] = undefined;
delete a3[a3.length-1];
Nur die erste Anweisung ändert (vergröÿert) die Länge und deniert ein Element. Die beiden folgenden Anweisungen löschen das jeweils letzte Element. Die letzten Element sind jetzt 2, undened, undened.
5. Ändern der Länge
Die Feldlänge kann jederzeit geändert werden. Nicht betroene Elemente bleiben dabei erhalten. Bei Bedarf
werden Elemente am Ende undefined.
a = [2, 3, 5, 7, 9, ]; // Feld mit 5 Elementen
a.length = 3; // Feld mit drei Elementen
a.length = 0; // Leeres Feld
23
24
4. ARRAYS
a.length = 2; // Feld mit zwei undenierten Elementen
In strict Javascript 5.0 kann die Feldlänge vor Änderungen geschützt werden:
Object.defineProperty(a, "length", {writable: false}); //
a.length = 0; // a bleibt trotzdem unverändert
6. Ererbte Methoden
Viele Feldmanipulationen können durch von Array ererbte Methoden durchgeführt werden.
siehe ecma 400
Beispiele:
a = []; // Leeres Feld
a.push("Eins"); //
a.push("Zwei", "Drei"); //
while (a.length > 0) var x = a.pop (); // Drei Zwei Eins
Die Stackfunktionen push und pop legen Werte am Ende des Feldes auf einen Stapel (push), von wo sie in
umgekehrter Reihenfolge wieder abgerufen werden können (pop).
Wie das push-/pop-Paar funktionieren unshift und shift am Anfang des Feldes. Mehrere Elemente werden bei
unshift in der Textreihenfolge angefügt. Dadurch ändert sich die Reihenfolge bei Mehrfacheingaben in unshift.
a = []; // Leeres Feld
a.unshift("Eins"); //
a.unshift("Zwei", "Drei"); // ["Zwei", "Drei", "Eins"]
while (a.length > 0) var x = a.shift (); //Zwei Drei Eins
Felder können komplett in komma-separierte Strings konvertiert werden. Andere Separatoren werden durch ein
Zusatzargument gewählt.
a = []; // Leeres Feld
a.unshift("Eins"); //
a.unshift("Zwei", "Drei"); // ["Zwei", "Drei", "Eins"]
print (a.join ());// "Zwei, Drei, Eins"
print (a.join (" und "));// "Zwei und Drei und Eins"
Das Zerlegen erfolgt mit regular expressions (eigenes Kapitel). Zwei kurze Rezepte:
var a = str.split ("\n"); // zerlegt langen String in Einzelzeilen
var b = (a[0]).split ("/\s+/"); // zerlegt erste Zeile in non-space-Bereiche
Weitere Feld-Funktionen sind concat, reverse, slice, sort, splice
Hilfsfunktionen sind isArray, toString, toLocaleString, indexOf, lastIndexOf
Verarbeitungsfunktionen sind every, some, forEach, map, lter, reduce, reduceRight
7. Iterationen
Wie in C/C++/Java ist die for-Schleife der Standard für Felditerationen. In der Schleife kann man die Fälle
nichtexistierender Feldelemente von undened, null und anderen unterscheiden:
for (var i = 0; i < a.length; i++)
{
if (a [i]) {} // undened null und nonexistent
if (a [i] === undefined) {} // undened and nonexistent
if (i in a) {} // Feldelement existiert
}
JavaScript hat eine eigene Schleife für Felder mit fehlenden Elementen:
for (var i in a)
{
}
Schlieÿlich kennt EcmaScript 5 eine spezielle Objektschleife forEach(eigentlich eher eine ererbte Funktion), die
als Argument eine Funktion mit drei Argumenten verlangt:
a.forEach (function (el, ix, ar) {print ("forEach: " + el); });
8. MEHRDIMENSIONALE FELDER
8. Mehrdimensionale Felder
25
Wie in Java sind mehrdimensionale Strukturen in JavaScript Objekte mit Feldern als Inhalt. Sie müssen vor
Benutzung erzeugt werden:
n = 5;
a = [];
for (i = 0; i < n; i++)
{
a [i] = [];
}
for (i = 0; i < n; i++)
{
for (j = 0; j < n; j++)
{
a [i] [j] = 1 / (i+j+1);
}
}
KAPITEL 5
Funktionen
Funktion: Block von Javascript-Code für eine denierte Aufgabe, der unter einem Namen oder einer anderen
Bezeichnung aufgerufen (call, invokation) und ausgeführt (execution) wird.
Wichtige Begrie: Funktion, Deklaration, Aufruf, Parameter, Argumente, Kontext, Konstruktor, Closure
1. Funktionsdenitionen
Es gibt zwei Möglichkeiten der Funktionsdenition: bei einem function denition expression (fde) wird die
Funktion als Objekt in einer Variablen gespeichert, bei einem function declaration statement (fds) wird die
Funktion implizit einem Variablennamen zugewiesen. In diesem Fall gilt die Funktion als im ganzen Scope
deniert und kann auch schon vor der fds aufgerufen werden - anders als bei einer fde, wo die Variable erst ab
der Wertzuweisung einen Funktionswert hat.
Es gibt benannte, anderweitig bezeichnete und sogar anonyme (Einmal-)Funktionen.
Funktionsdenitionen gelten als Ausdrücke mit oder ohne Namen, die auch in Variablen gespeichert werden
können. Damit kann eine Funktion mehrere Namen haben und unter mehreren Namen aufgerufen werden.
Insbesondere für eval ist das problematisch.
Anders als in C sind Funktionen schachtelbar, allerdings nur in anderen Funktionen, die dann als ihr Scope
gelten, nicht in Anweisungsblöcken.
Noch einmal: fds-Funktionen müssen nicht vor ihrer ersten Verwendung deklariert werden, sondern gelten in
ihrem scope als deklariert.
Da ein $-zeichen als Bestandteil eines Namens erlaubt ist, können auch Funktionsbezeichnungen $-Zeichen
enthalten. Zentrale Funktionen werden oft zur Hervorhebung so bezeichnet.
Da das $-Zeichen als Buchstabe gilt, reicht ein $-Zeichen als Funktionsname aus. Das wird oft für zentrale
Funktionen ausgenutzt. So wird in jQuery der zentrale jQuery-Aufruf einfach mit $(args), z.B. $(":header")
bezeichnet.
2. Aufruf
Eine Funktion wird mit ihrem Namen, einem sie bezeichnenden Ausdruck oder auch ihrer Deklaration und
einem folgendem runden Klammernpaar aufgerufen.
Ein möglicher Returnwert wird anschlieÿende statt des Aufrufs eingesetzt.
Weitere Möglichkeiten der Funktionsaufrufs sind der Methodenaufruf, der Konstruktoraufruf und del call/applyAufruf.
3. Parameter und Argumente
Die Parameter einer Funktion werden in Klammern aufgeführt. Für diese Parameter werden beim Funktionsaufruf Argumente eingesetzt. Die Zuordnung erfolgt durch die Reihenfolge der Aufzählung.
function f (pars) { code }
F = function (pars) { code }
Funktionen werden mit ihrem (einem ihrer) Namen und der aktuellen Argumentliste aufgerufen. Die aktuellen
Argumente werden den typlosen Parametern zugewiesen. Zu wenige Argumente führen zu undened Werten.
Die Argumentanzahl bei Denition und Aufruf ist jeweils beliebig. Zuwenig aktuelle Argument führen zu undenierten Parametern. Zuviele Argumente werden ignoriert.
Alle Argumente, auch die ohne Parameter stehen in einer feldähnlichen Objektvariablen arguments zusätzlich
zur Verfügung.
Wie in JavaScript allgemein üblich gibt es keinerlei Typprüfung; es wird jeder Typ übergeben und eventuell
notwendige Typprüfungen dem Progammierer überlassen.
Jeder gute Programmierer schreibt in einer JavaScript-Funktion am Anfang Code für eine ausführliche exakte Analyse der Typen aller tatsächlich vorhandenen Argumente.
27
28
5. FUNKTIONEN
4. return-Wert
return beendet eine Funktion mit oder ohne Ergebnis. Ein fehlendes Ergebnis ist undened.
Aufruf: var res = f (args)
5. Typanalyse von Parameters
Erster Hinweis: typeof (x): "undened" "object"
Zweiter Hinweis: instanceof
Dritter Hinweis: Angus Croll:
https://javascriptweblog.wordpress.com/2011/08/08/fixing-the-javascript-typeof-operator/
6. Ein erstes Beispiel
function max ()
http://javascriptlint.com/online_lint.php
Es gibt kein falschen Typen; Wenn gewünscht, Typprüfungen in der Funktion
7. Aufruf (die zweite)
Eine Funktion kann mit vier Varianten aufgerufen werden: als Funktion, als Methode, als Konstruktor und
mit call/apply. Jede aufgerufene Funktion wird einem Objekt zugeordnet. Dieses Objekt wird innerhalt der
Funktion mit this bezeichnet. Die Kurzsprechweise bezeichnet vor allem die Bedeutung von this innerhalb der
aufgerufenen Funktion.
Bei einer Funktionsdenition wird noch kein Code ausgeführt. Funktionscode wird erst nach einem Aufruf einer
Funktion aktiv.
7.1. Funktionsaufrufe.
Eine Funktion wird dem globalen Objekt zugeordnet. Innerhalt der Funktion
bezeichnet this das globale Objekt.
1
2
3
4
5
6
7
f u n c t i o n max ( a , b ) {
i f (a > b) return a ;
return b ;
}
p r i n t (max ( 2 , 3 ) ) ;
p r i n t (max ( 2 , − 3));
7.2. Methodenaufrufe. Eine Funktion ist member des ihr zugeordneten Objekts.
1 var k = {
2
x: 1,
3
y: 2,
4
r: 3,
5
area : function () {
6
return this . r * this . r * 3.14;
7
}
8 };
9
10 p r i n t ( k . a r e a ( ) ) ;
7.3. Konstruktoraufrufe. Die Funktion wird mit new aufgerufen und erzeugt das zugeordnete Objekt
erst.
1 function kreis (x , y , r ) {
2
this .x = x;
3
this .y = y;
4
this . r = r ;
5
t h i s . area = function () {
6
return this . r * this . r * 3.14;
7
}
8 }
9
9. LEXICAL SCOPE, CLOSURE
10
11
12
13
14
15
16
29
k r e i s . prototype . peri = function () {
return 2 * this . r * 3.14;
}
var k = new k r e i s ( 1 , 2 , 3 ) ;
print (k . area ( ) ) ;
print (k . peri ( ) ) ;
7.4. call und apply.
Jede Funktion ist auch ein Objekt mit den beiden Methoden call und apply, die die
Funktion aufrufen. Das erste Argument ist ein explizit bestimmbares Objekt. Bei call sind die nachfolgenden
Argumente die Aufrufargumente der Funktion, bei apply ist das zweite Argument ein Feld mit den Argumenten.
8. Javascript style für gute Funktionen
Styleguides:
Qualitäts-Verbesserung von JavaScript.
http://javascriptlint.com/online_lint.php
• var am Anfang der Funktionsrumpfes
• Funktionsdeklaration vor dem ersten Aufruf
•
•
•
•
•
caller callee
9. lexical scope, closure
Wenn Sie bis hierher gelesen haben, sollten folgende Punkte klar sein:
1. Variable in einer Funktion sind lokal; sie können von auÿen nicht zugegrien werden.
2. Jeder Funktionsaufruf erzeugt einen Satz aller Funktionsvariabler für genau diesen Aufruf.
3. Das Funktionsende entfernt diesen Variablensatz wieder aus dem Speicher im Normalfall!
4. Funktionen können in JavaScript verschachtelt werden.
5. Der Zugri auf globalere Variable ist jederzeit möglich.
Das folgende einfache Beispiel demonstriert alle diese Eigenschaften:
1 ( function () {
2
" use s t r i c t " ;
3
function print (x) { console . log (x ) ; }
4
f u n c t i o n pr ( n ) {
5
var s = " H a l l o " + n ;
6
var p r I t = f u n c t i o n ( ) { p r i n t ( s ) ; }
7
prIt ( ) ;
8
}
9
pr ( " P e t e r " ) ;
10
pr ( " R it a " ) ;
11 } ( ) ) ;
Closures sind abgesehen vom Namen einfach zu verstehen:
1. Eine lokale Variable einer Funktion bleibt nach dem Ende der Funktion im Speicher und benutzbar.
2. Der ganze Variablensatz dieser Funktion wird nicht vom Stack entfernt.
1 ( function () {
2
" use s t r i c t " ;
3
function print (x) { console . log (x ) ; }
4
f u n c t i o n pr ( n ) {
5
var s = " H a l l o " + n ;
6
var p r I t = f u n c t i o n ( ) { p r i n t ( s ) ; }
7
return prIt
8
}
30
5. FUNKTIONEN
9
var p = pr ( " P e t e r " ) ;
10
// Mit p kann j e t z t d i e Funktion p r I t a u f g e r u f e n werden
11
// Die V a r i a b l e s e x i s t i e r t a l s o noch :
12
p ();
13
// Das pr −E r g e b n i s kann auch d i r e k t a u f g e r u f e n werden :
14
( pr ( " R it a " ) ) ( ) ;
15
// Die V a r i a b l e s e x i s t i e r t a l s o s o g a r noch zweimal :
16
p ();
17 } ( ) ) ;
10. Funktionen und Objekte
Funktionen sind Objekte mit Prototyp.
Methoden: Funktionen, gespeichert in property
Methodenverkettung - method chaining methode, die Objekt zurückgibt.
Prototype deniert call() und Properties
Function() Konstruktor kann z.B. dynamische Funktionen erzeugen.
var summe = new Function ("x", "y", "return x+y;");
Andere Schreibweise: Funktionsliteral
var Summe = function (x, y) return x+y;
Wertzuweisung einer Funktion a eine Eigenschaft eines Objektes: Funktion wirdc zur Methode.
In der Funktion ist dann this das Objekt dessen Eingenschaft sie ist.
array Arguments[] enthaelt die Argumente, auch die ev. ueberzaehligen.
11. Beispiele
1
2
3
4
5
6
7
8
9
10
11
// b e i s p i e l e / r e c h n e /summe100 . j s : 1 + 2 + 3 + . . . + 100
var i , s , n ;
s = 0;
f o r ( i = 1 ; i <= 1 0 0 ; i ++)
{
s += i ;
}
p r i n t ("1+2+...+100=" + s ) ;
(http://www-nw.uni-regensburg.de/~brf09510/js/beispiele/rechne/summe100.js)
konstruktoren konstruktorverkettung
KAPITEL 6
Objekte
Jeder nicht elementare Datentyp (undened, null, Boolean, Number, String) in Javascript ist ein Objekt. Das
gilt auch für Felder und Funktionen. Objekte übernehmen die Funktion von C-Strukturen genauso wie die von
Klassen in der objektorientierten Programmierung.
Objekte sind zunächst ungeordnete Sammlungen von Properties, die jederzeit ergänzt, gelöscht und modiziert
werden können. Properties bestehen aus Namen und Wert. Die Werte sind von beliebigem Typ. Sie können
auch Funktionen sein, die ihrerseits ja wieder Objekte sind. Das sichert den Anschluÿ an die objektorientierte
Programmierung. Neben Namen und Wert haben die Properties zusätzliche Attribute (writable, enumerable,
congurable), die dem Programmierer eine genauere Steuerung ermöglichen.
Felder sind spezielle Objekte, deren Properties zusätzlich geordnet und indiziert sind.
Objekte können wie in C als statische struct deniert und verwendet werden. Objekte können wie in Java als
Instanzen dynamischer Klassen verwendet werden. Objekte dienen aber auch wie in Perl als assoziative arrays
(hash, hash table, dictionary). Im einfachsten Fall, wenn man die Werte ignoriert, speichern Objekte auch
einfach nur Stringmengen. Objekte in JavaScript sind also sehr vielseitig verwendbar.
1. Erzeugung von Objekten
Objekte werden einfach durch eine Variablenanweisung ins Leben gerufen.
var o1
var o2
var o3
o3.p =
= {}; //
= {x: true, y: 1, z: "Hallo", o: o1}; //
= {}; //
"Hallo"; //
Objekte können durch einen Funktionsaufruf erzeugt werden. Funktionen, die hauptsächlich der Objekterzeugung dienen, werden Konstruktoren genannt. Die enstandenen Objekte haben durch die Funktionen gewisse
Grundproperties.
function k1 () { var r={}; r.m = "Hallo"; return r; } //
var o4 = k1 (); //
Mit new kann (und sollte) ein Konstruktoraufruf explizit formuliert werden.
function k2 () { this.m = "Hallo"; } //
var o5 = new k2 (); //
create
prototype
getter setter
Vererbung
Fehler
delete
hasOwnProperty
enumerte properties and iterate for in
property attributes
object attributes prototype class extensibkle
JSON serialize
Object methods thString toLocaleString toJSON valueOf
Klassen: nicht explizit; ähnliche Objekte
31
KAPITEL 7
Exceptions
throw catch nally Error
33
KAPITEL 8
Regular Expressions
1. Allgemeines
Stärke von Javascript: Regular expressions fast wie in Perl.
RE sind Strings, die im RegExp-Konstruktor in einen RE umgebaut werden. OO-JavaScript wird ausgenutzt.
Syntax weitgehend wie in Perl.
Anwendungen: Pattern matching, Suchen und Ersetzen in Strings. Komfortable Stringbearbeitung.
RE-Syntax teilweise in Sprache eingebaut (/RE/).
RegExp- und Stringobjekte arbeiten mit RE.
RE wurden ursprünglich zur lexikalischen Analyse von Programmiersprachen entwickelt und denieren Produktionen, Wiederholungen und Alternativen.
2. Denition
Denition eines RE:
var
var
var
var
pattern
pattern
pattern
pattern
=
=
=
=
new RegExp ("RE"); Konstruktordenition (auch mit Stringvariablen)
new RegExp ("RE", "gim");
/RE/ direkte Denition (ES 7.8.5)
/RE/gim
3. Verwendung
Properties und Methoden aus String und RegExp.
var s = new String ("3 Chinesen mit dem Kontrabass");
var p = /[aeiou]/ig
var r = "au";
p.test (s) Kommt Muster p in String s vor? (true)
p.exec (s) Wende Muster p auf String s mit Objekt als Ergebnis an; Mehrfachaufruf möglich
([ 'i', index: 4, input: '3 Chinesen mit dem Kontrabass' ])
do { r = p.exec(s); console.log(r); } while (r !== null);
[ 'i', index: 4, input: '3 Chinesen mit dem Kontrabass' ]
[ 'e', index: 6, input: '3 Chinesen mit dem Kontrabass' ]
[ 'e', index: 8, input: '3 Chinesen mit dem Kontrabass' ]
[ 'i', index: 12, input: '3 Chinesen mit dem Kontrabass' ]
[ 'e', index: 16, input: '3 Chinesen mit dem Kontrabass' ]
[ 'o', index: 20, input: '3 Chinesen mit dem Kontrabass' ]
[ 'a', index: 24, input: '3 Chinesen mit dem Kontrabass' ]
[ 'a', index: 26, input: '3 Chinesen mit dem Kontrabass' ]
null
p.toString() Wandle Muster in String zurück
s.search (p) liefert Position von Muster p in String s (4)
s.replace (p, r) ersetzt Muster p in String s durch String r
'3 Chaunausaun maut daum Kauntraubauss'
s.match (p) liefert alle Treer von Muster p in String s
[ 'i', 'e', 'e', 'i', 'e', 'o', 'a', 'a' ]
35
36
8. REGULAR EXPRESSIONS
s.split (p, l) liefert Array mit Strings aus s geteilt bei p mit max l Elementen
[ '3 Ch', 'n', 's', 'n m', 't d', 'm K', 'ntr', 'b', 'ss' ]
4. Flags
Bei Konstruktoraufrufen sind die drei möglichen Flags ein zusätzliches Stringargument, bei direkter Schreibweise
werden sie an den schlieÿenden Schrägstrich angehängt.
g: globale Suche (nicht nur der erste Treer)
i: case-insensitive Suche
m: mehrzeilige Suche
(Die Perlmodikationen ceosx fehlen)
5. Zeichen und Zeichenklassen
Fast alle Zeichen (Unicode!) stehen für sich selbst. Zeichen, die dies nicht tun (^$\.*+?()[]{}|), werden mit \
markiert.
Hallo sucht freundliche Zurufe
\^ sucht Zirkumex
\. sucht Punkte
Eckige Klammern denieren Zeichenklassen und ihre Komplemente.
[aeiou] sucht englische Vokale
[abc] sucht die ersten drei Buchstaben
[^abc] sucht alles andere
[a-fA-F] sucht Sedezimalziern
[-^] sucht Minuszeichen und Zirkumex
Merke: − als Bindestrich steht immer als erstes.
^ als Zirkumex steht nie als erstes.
Bei allen anderen Zeichen ist die Reihenfolge ohne Bedeutung
Für wichtige Zeichenklassen gibt es Abkürzungen. Groÿbuchstaben stehen jeweils für die Komplemente.
. alles auÿer Zeilenende
\w ASCII-Buchstabe wie in Programmiersprachen ([a-zA-Z0-9_])
\W
\s Leerraum inclusive BOM,USP1(\n\r\u2028\u2029\t\v\f \u00A0\uFEFF)
\S
\d ASCII-Zier ([0-9_])
\D
Spezielle Positionen im String werden durch die Symbole ^$ bezeichnet.
^ Stringanfang oder Zeilenanfang
$ Stringende oder Zeilenende
6. Wiederholung
Greedy (gierig) x Wiederholungen. Greedy heiÿt, der gefundene Bereich ist maximal.
? x = 0, 1
+x≥1
*x≥0
{n} x = n
{n,} x ≥ n
{n,m} n ≤ x ≤ m
Non-greedy: der gefundene Bereich ist minimal
Fragezeichen hinter Wiederholungszeichen
?? 0, 1
+? ≥ 1
1Byte
order mark, Unicode space separator, ES 7.2, 7.3
10. STRING-MEMBER
37
*? ≥ 0
{n}? n-mal
{n,}? ≥ n
{n,m}? n ≤ x ≤ m
Vorsicht:
var s = "Drei Chinesen"
var pg = /[aeiou]+/ig greedy
var pn = /[aeiou]+?/ig non-greedy
s.match(pg) ndet ei
s.match(pn) ndet e und i getrennt
7. Alternativen
| trennt Alternativen
Alternativen werden von links nach rechts ausgewertet. Also wirkt a|ab anders als ab|a
Im ersten Fall ist schon a im String "ab" ein Treer.
Regel: Vom speziellen zum Allgemeinen
8. Gruppen
Mit () werden Gruppen gebildet, die als einheitliche Produktionen betrachtet werden.
Diese Gruppen dienen zusätzlich zur Bildung von Teilmustern. Bei Treern können die Teilmuster getrennt
verwertet werden.
\i (i > 0) verweist auf den Teiltreer der Gruppe Nummer i im Muster. Die Numerierung beginnt bei 1!
Teilmusterbildung wird mit (?:
) abgeschaltet.
Gruppen ohne Speicherung von Teilmustern werden mit (?: ) gespeichert.
var p = /([aeiou]+).*\1/ig; Vokalgruppe, die sich wiederholen muss
"einerlei".match(p) Treer: zweimal ei
"Drei Chinesen".match(p) kein Treer: erste Vokalgruppe ei wiederholt sich nicht
9. RegExp-Member
p.source Quell-String des RegExp
p.global g-ag
p.ignoreCase i-ag
p.multiline -m-ag
p.lastIndex Stringposition, wo die nächste Suche beginnen muss
p.exec(s) Suche mit Array-Resultat
p.test(s) Suche mit boolean-Resultat
10. String-Member
s.search(p)
s.replace(p,r)
s.match(p)
s.split (p)Der String wird in ein Array von Substrings an den Mustergrenzen zerlegt
38
8. REGULAR EXPRESSIONS
11. Übersicht
Assertion | Atom | Atom Faktor Atom
Unicode
.
\0
\n n > 0
\f\n\r\t\v
\c L
\xxx
\uxxxx
\ˆ \$ . . . \|
\ < ZW J >
\ < ZW N J >
\d\s\w
\D\S\W
[Menge]
[Bereich]
[ˆ ]
[−ˆ ]
(Gruppe )
(?:Gruppe )
Variable
Bedeutung
auÿer ˆ $\. ∗ +?()[] { } |
Unicode auÿer neuer Zeile
\u0000
nte gespeicherte Gruppe
/
Programm
r.exec(s)[1]
r.exec(s)[2]
Bedeutung
Treer Gruppe 1
Treer Gruppe 2
\13
r.exec(s)[13]
Treer Gruppe 13
...
Flag
g
i
m
Steuerzeichen ˆ L
Codepoint xx16
Codepoint xxxx16
verbotene Unicodes
Unicode zero width joiner
Unicode zero width non joiner
Zier/Leerraum/Wort
keine Zier/Leerraum/Wort
Zeichenmenge [aeiou]
Zeichenbereich [A−Z]
Komplementmenge [ˆaeiou]
Menge aus − und ˆ
zu speichernde Gruppe
Gruppe ohne Speicherung
\1
\2
...
/body/ags
Assertion
ˆ
$
\b
\B
A(?=group )
A(?!group )
Faktor
∗
+
?
{n}
{n,}
{n,m}
U
non-greedy
∗ ?
+?
??
{n}?
{n,}?
{n,m}?
Property
global
ignoreCase
multiline
W
W
Bedeutung
nach Treer weiter
ˆ$
Zeilen- statt Stringbezogen
Bedeutung
String- oder Zeilenanfang
String- oder Zeilenende
Wortgrenze vor Position
Nicht-Wortgrenze vor Position
matches A only when followed by group
matches A only when not followed by group
Bedeutung
0≤x<∞
1≤x<∞
0≤x≤1
x=n
n≤x<∞
n≤x≤m
KAPITEL 9
eval
und
JavaScript kann zur Laufzeit einen beliebigen String freier Herkunft, also auch aus Eingabefenstern einer Webseite, als JavaScript-Code betrachten
ausführen. Genau das leistet die funktion eval().
eval (s)
Der im String s stehende Javascript-Code wird ausgeführt.
1+2 und eval("1+2")
eval kann in der Umgebung jedes Chaos anrichten
39
KAPITEL 10
Debugger
1. Firebug
Installieren
Starten
Bedienung
41
KAPITEL 11
Wie geht das in Javascript
1. Typenanalyse in Funktionen
In Funktionen müssen die Argumente oft auf ihren Typ untersucht werden. Der oensichtliche Weg ist typeof.
Dabei werden allerdings viele zu dierenzierende Fälle nicht unterschieden.
Insgesamt gibt es einige Problemfälle.
Die Verwendung nicht-existierender Variabler führt zu einem Programmabbruch. Das stimmt jedoch nicht bei
nicht-exisitierenden Properties in Objekten.
null gilt als Objekt.
Arrays haben den Typ "object".
Die einfache Frage
if (x == undened)!
erzeugt bei nicht existierenden Variablen einen Programmabbruch wegen der nicht existierenden Variablen.
Dieser Abbruch wird mit typeof vermieden:
if (typeof (x) == "undened")!
Damit kann allerdings nicht mehr zwischen undefined und nicht existierenden Variable unterschieden werden.
typeof:
Tabelle 1.
Typanalyse
undened
null
boolean
number
string
object
array
function
typeof
\"undefined" \"object" "boolean" "number" "string" \"object" \"object" "function"
instanceof
isPrototypeOf()
2. assoziative Arrays
Objekte
objekt.property
object
”property”
3. objektorientiertes Javascript
43
KAPITEL 12
JavaScript-Varianten
Einschränkungen.
Sehr streng: JavaScript: The Good Parts, Douglas Crockford, Mai 2008, ISBN 978-0-596-51774-8
ADsafe, JavaScriptlint
dojox.secure
Caja, Cajita
FBJavaScript
Microsoft Websandbox
45
KAPITEL 13
Technik und Interna
1. Verschiedene Javascript Grammatiken
lexikalische ES7
syntaktische ES 11 12 13 14
numerische Grammatik ES 9
regular expression ES 15.10
JSON ES 15.12.1
47
KAPITEL 14
Clientseitiges Javascript
1. Übersicht
Zusammenspiel zwischen Hardware, OS, Browser und JS bei Webseiten aus
HTML, CSS und JS
Abbildung 1.
2. Einbettung von JavaScript in HTML
1. Als Content im Script-Element.
2. Als externe Datei im src-Attribut des Script-Elements
3. Durch Aufruf eines HTML-Event-Handlers (onload-, onclick-Attribut)
4. Als URL mit dem Protokoll javascript:
Achtung: Kollisionsgefahr zwischen case-insensitivem HTML und case-sensitivem JavaScript: In HTML darf
man auch onLoad= schreiben und manche Programmierer nutzen das. In JavaScript muss es onload= heiÿen!
In XML tritt dieses Problem nicht auf.
Innerhalb HTML stehen div und class zur neutralen Verwendung durch JavaScript bereit.
Eventhandler-Attribute tragen Funktionen ein.
Formulare dürfen zur Eingabe verwendet werden.
3. Denitionen der clientseitigen Schnittstellen
EcmaScript deniert hier nichts!
Hauptakteure: W3C, Browserhersteller
49
50
14. CLIENTSEITIGES JAVASCRIPT
Javascript point of view: document object, window object
W3C point of view: HTML (HTML Nightly), XHTML, DOM, CSS
Programmers point of view: direkt mit Browser- und Betriebssystemabhängigkeiten oder mit jQuery und anderen
Libraries.
Es ist sehr mühsam wenn auch nicht mehr so schlimm wie vor etwa 10 Jahren , die fehlende Standardisierung
durch eigene Recherchen über die Browser, die verschiedenen Betriebssysteme und die verschiedenen JavascriptEngines zu ersetzen. Die einfachste Regel ist, nicht alle features zu verwenden und Experimente mit dem Code
durchzuführen. Die oft mangelhafte Dokumentation erleichtert die Arbeit nicht unbedingt.
Eine wertvolle und mit viel Liebe und Arbeit zusammengestellte Übersicht stammt von David Flanagan. Diese
Arbeit sollte ein Javascript-Programmierer durch Kauf seines Buches honorieren; als Gegenleistung kann er hier
alle komplizierten Details schnell nden.
4. Javascript und HTML
Mit dem HTML-Element <script>, mit Event-Handlern und mit dem javascript-Protokoll wird Javascriptcode
in HTML-Dokumente eingebunden. Insgesamt sind das vier Methoden, die am Anfang dieses Textes schon kurz
erläutert wurden:
1. direkt synchron ausgeführter Javascriptcode als Content in <script>-Elementen.
2. direkt synchron ausgeführter Javascriptcode aus einer Javascript-Datei, die als src-Attribut eines <script>Elements angegeben wird.
3. asynchron in Event-Handlern angegebener Javascriptcode.
4. asynchron mit Javascriptcode, der in URLs durch das Protokoll javascript: gekennzeichnet ist.
Die Ausführung erfolgt im Normalfall synchron. Dann führt der Browser den Javascriptcode aus, wenn er ihn
beim Parsen des HTML-Dokuments sieht. Während der Ausführung ist er blockiert, er setzt seine Arbeit nicht
fort, bevor der Javascriptcode vollständig ausgeführt ist. Die Manipulation des HTML-Dokuments erfolgt mit
document.write; dabei wird der erzeugte Text statt des <script>-Elements in das Dokument eingefügt.
Asynchrone (asynchrouneos) und verzögerte (deferred) Ausführung muss explizit mit den boolschen Attributen
async und defer gewählt werden. Der Javascriptcode darf dann kein document.write enthalten. Die Bearbeitung
des HTML-Dokuments durch der Browser wird fortgesetzt. Mit defer wird die Ausführung des Javasciptcodes
vom Browser verschoben, bis das Dokument vollständig geladen, geparst und dargestellt ist. Es steht somit
zur Manipulation durch Javascript bereit. Asynchroner Code wird wie deferred Code ausgeführt, ohne dass
der Browser blockiert wird. Anders als deferred Code erfolgt seine Ausführung so schnell wie möglich (also bei
Mehrkernprozessoren auch gleichzeitig). Das HTML-Dokument muss noch nicht ganz komplett bereitstehen.
Gibt der Programmierer (unsinnigerweise) beide Attribute async und defer an, wird defer ignoriert.
Kurz zusammengefasst:
1. Synchrone Ausführung: sofort; Browser wird blockiert; document.write möglich; das document.write-Argument
wird als HTML verwendet.
2. async: Ausführung so schnell wie möglich; Browser setzt seine Arbeit fort; document.write verboten.
3. defer: Ausführung erst wenn Browser mit laden, parsen und darstellen fertig ist. Browser setzt seine Arbeit
fort; document.write verboten.
4. Durch Events ausgelöster (event driven) Javascriptcode wird immer asynchron dann ausgeführt, wenn die
entsprechenden Events auftreten. Sie stammen vom Benutzer durch Eingaben, vom Browser durch Statusänderungen des Dokuments oder vom der Hardware durch Timerablauf.
Zu jedem vom Programmierer gewünschten Event muss der auszulösende Javascriptcode als Eventhandler registriert werden. Dazu schreibt der Programmierer den Code einfach im HTML-Dokument in die Eventattribute.
Bei Timern wird der Code beim Starten der Timer registriert. Alternativ kann der Javascriptcode Evenhandler
direkt registrieren.
5. In Javascript gibt es derzeit kein Threadmodell; Javascriptcode kann also nicht parallel ausgeführt werden.
Somit führt der Browser niemals zwei Events gleichzeitig aus. Die Timerroutine wird nie ausgelöst, wenn schon
ein anderer Eventcode läuft.
6. In HTML5 sind sogenannte Webworkers geplant, die parallele Ausführung durch den Browser erlauben. Auch
hier kann der Javascriptcode nicht selbst parallele Programmierung organisieren. Webworkercode hat keinen
Zugri aus das window- und document-Objekt. Er kann nur im Hintergrund "embarrassing parallele Arbeiten
erledigen, das sind im HPC-Jargon Tätigkeiten, die auÿer eigenen keinerlei andere Variable beeinussen und
durch keinerlei anderen Code beeinusst werden.
5. window object
Im Clientside Javascript ist das window-Objekt das zentrale globale Objekt. Es stellt Properties und Methoden
zur Manipulation der Browserfensters bereit. Zwei Properties window und self sind Referenzen auf sich selbst
und können zur Verdeutlichung des Codes verwendet werden. Man kann also location (globale Property)
6. DOCUMENT OBJECT
51
ebensogut schreiben wie window.location (location Property des durch window bezeichneen globalen Objekts)
oder self.location. Die Schreibweise self.window.location erhöht die Code-Klarheit jedoch eigentlich nicht
mehr. Umgekehrt enthält document einen Rückverweis auf das window-Objekt mit document.defaultView.
Das window-Objekt war leider lange Zeit nirgendwo verbindlich (d.h. standardisiert oder genormt) deniert.
Die einzigen Denitionen wurden von den Browserherstellern erstellt und sind vielleicht auf deren Webseiten
zu nden. Der Javascriptprogrammierer sollte das window-Objekt nur in den Teilen benutzen, die alle Browser
gemeinsam und identisch denieren.
W3C versucht im HTML5-Standard eine Denition:
http://www.w3.org/html/wg/drafts/html/master/browsers.html#window
window; Rückreferenz auf das globale Objekt
self; Rückreferenz auf das globale Objekt
frames
document; Referenz auf das document Objekt im Fenster
name;
location; Dukoment-URL
history; Browser-History
locationbar;
menubar;
personalbar;
scrollbars;
statusbar;
toolbar;
status;
void close();
closed; Window geschlossen?
void stop();
void focus();
void blur();
length; top; opener; parent; frameElement; WindowProxy open(optional DOMString url = "about:blank", optional DOMString target = "_blank", optional DOMString features = "", optional boolean replace = false);
getter WindowProxy (unsigned long index); getter object (DOMString name);
// the user agent navigator; Allgemein verfügbar; von Netscape eingeführt
external;
applicationCache;
// user prompts void alert(messageString); Dialogbox
boolean conrm(optional DOMString message = ""); DOMString? prompt(optional DOMString message = "",
optional DOMString default = "");
void print(); Druckerdialog aufrufen
Im Window-Objekt können mit setTimeout() und setInterval() Funktionen registriert werden, die nach
Ablauf einer festgelegten Zeit oder regelmäÿig aufgerufen werden.
Die location-Property enthält die URL des Dokuments und erlaubt durch Überschreiben das Umlenken des
Dokuments. Als Objekt sind weitere Funktionen verfügbar.
Die history-Property erlaubt Zugri auf die und Manipulation der Browser-History.
Die navigator-Property ist in allen Browsern heute vorhanden. Sie wurde von Netscape eingeführt daher
der Name und ist ein Objekt mit dem Namen des Webbrowsers (appName), dem Hersteller und der Version
des Browsers (appVersion) (), dem HTTP-Header USER-AGENT (userAgent) und dem Betriebssystem im
Hintergrund (platform).
Die document-Property enthält ein Objekt zum Zugri auf das Dokument selbst.
6. document object
Das document-Objekt ist nirgendwo verbindlich (d.h. standardisiert oder genormt) deniert. Die einzigen Denitionen werden von den Browserherstellern erstellt und sind vielleicht auf deren Webseiten zu nden. Der
Javascriptprogrammierer sollte das document-Objekt nur in den Teilen benutzen, die alle Browser gemeinsam
und identisch denieren.
52
14. CLIENTSEITIGES JAVASCRIPT
W3C versucht im folgenden Entwurf (draft) eine Denition:
http://www.w3.org/html/wg/drafts/html/master/dom.html#document
7. DOM
http://www.w3.org/TR/DOM-Level-3-Core/core.html#i-Document
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268
http://www.w3.org/TR/dom/#html-document
https://developer.mozilla.org/en-US/docs/DOM
http://msdn.microsoft.com/en-us/library/ms535862%28v=vs.85%29.aspx
Tabelle 1.
Datum
2012-12-11
2013-05-14
2012-12-06
2012-09-20
2012-09-06
2008-12-22
2004-04-07
2004-04-07
2004-01-27
2003-01-09
2000-11-13
2000-11-13
2000-11-13
2000-11-13
2000-11-13
1998-10-01
Document Object Model
Titel
Server-Sent Events
Shadow DOM
DOM4
DOM Parsing and Serialization
DOM Level 3 Events Specication
Element Traversal Specication
DOM Level 3 Load and Save Specication
DOM Level 3 Core Specication
DOM Level 3 Validation Specication
DOM Level 2 HTML Specication
DOM Level 2 Core Specication
DOM Level 2 Events Specication
DOM Level 2 Style Specication
DOM Level 2 Traversal and Range Specication
DOM Level 2 Views Specication
DOM Level 1
Status
Candidate
Draft
Draft
Draft
Last Call Draft
Standard
Standard
Standard
Standard
Standard
Standard
Standard
Standard
Standard
Standard
Standard
8. Der DOM-Baum
Das Dokument wird vom DOM-Parser des Browsers gelesen, analysiert und interpretiert und am Ende im
Speicher durch den sog. DOM-Baum dargestellt. Die Ausgabe des Dokuments auf dem Bildschirm (oder ev. auf
Papier beim Ausdruck) erfolgt aus diesem Baum. Es ist dieser Baum, der von JavaScript manipuliert werden
kann. Der Baum enthält wirklich das gesamte Dokument sogar inklusive aller Kommentare.
http://www.openbookproject.net/tutorials/getdown/css/lesson4.html
9. Zugri auf HTML-Elemente
document.getElementById("id");
document.getElementByName("name");
document.getElementByTagName("tag");
document.getElementByClassName("class");
document.querySelectorAll("css");
Der letzte Aufruf wie auch jQuery benutzt die CSS-Selectorsprache.<br> siehe http://www.w3.org/TR/css3-selectors
Mit einer Referenz auf ein HTML-Element bekommt man Zugri auf andere Elemente relativ zu dem referierten
Element. In DOM-Sprache stellt eine solche Referenz einen Knoten (node) dar, von dem mehrere Achsen ausgehen. Diese Achsen bieten Suchrichtungen mit denen man andere Teile des Dokuments erreichen kann. Es sind
child- parent- descendant-or-self- ancestor-or-self- descendant- ancestor- following- preceding- following-siblingpreceding-sibling- self- attribute- und namespace-Achsen.
http://www.georgehernandez.com/h/xComputers/XML/XSL/Media/XPathAxes.gif
10. EINGABE
53
var id = document.getElementById("id");
id.parentNode
id.childNodes
id.firstChild
id.lastChild
id.nextSibling
id.previousSibling
id.nodeType numerischer Wert zwischen 1 und 12
Der nodeType bedeuted
nodeType === 1 Element-Knoten
nodeType === 2 Attribut-Knoten
nodeType === 3 Text-Knoten (der content)
nodeType === 4 CDATA-section
nodeType === 5 Entity-Referenz
nodeType === 6 Entity-Knoten
nodeType === 7 Processing unstruction
nodeType === 8 Kommentar-Knoten
nodeType === 9 Dokument-Knoten (ganz auÿen)
nodeType === 10 Dokumenttyp-Knoten
nodeType === 11 Dokument-Fragment-Knoten
nodeType === 12 Notation-Knoten
Von diesen vor allem in XML benötigten Werten sind in HTML nur 1, 2, 3, 8, 9, 10 wichtig.
id.nodeValue
id.nodeName
id.previousSibling
id.nodeType
id.parentNode
Attribute können bequem mit ihrem Namen bezeichnet werden. Ihr Wert kann gelesen oder verändert werden.
id.src src ist Attribut im Element mit der id="id"
id.getAttribute ("WIDTH")
id.setAttribute ("HEIGHT", "20")
Jedes Element hat einen Inhalt, der gelesen und modiziert werden kann.
id.innerHTML Content als HTML-Markupstring
id.textContent()
Neuer Inhalt wird zunächst erzeugt und dann an geeigneter Stelle als Unterelement (child) eingefügt:
var neu = document.createTextNode("neuer content")
id.appendChild(neu) neu wird als letztes child angefügt
id.insertBefore(neu, id.childNodes[i]) neu wird vor child Nr. i eingefügt
Unterelemente (childs) können analog gelöscht werden.
id.removeChild(i)) child i wird entfernt
id.replaceCild(neu, i)) neu ersetzt child i
10. Eingabe
Formulare sind HTML-Elemente, die wie alle anderen bearbeitet werden können. Ihre child-Elemente erlauben
jedoch Eingaben, die mit Event-Handlern in JavaScript bearbeitet werden können. Die Event-Handler stehen als
Event-Attribute im HTML-Dokument oder werden mit immer noch Browser-spezischen Aufrufen eingetragen.
<body onload="function(){}">
id.onclick=function(){}
id.addEventListener("click", function(){});
id.attachEvent("click", function(){}); IE < 9
KAPITEL 15
jQuery
Da Manipulationen des HTML-Dokumentes mit JavaScript-Mitteln relativ aufwendig sind und teilweise auch
heute noch browserabhängig sind, wenn auch weniger, als am Anfang des Jahrhunderts, wurde eine Query
Library mit dem Namen jQuery für Webprogrammierer und -designer entwickelt.
jQuery vereinheitlicht die Browserunterschiede.
jQuery erlaubt einen leichten Zugri auf das HTML-Dokument (Abfragen - Queries).
jQuery hat eine Schnittstelle zu CSS mit den CSS-Selektoren.
jQuery benutzt die Ideen von XPATH.
jQuery arbeitet mit Methodenverkettung (jeder jQuery-Zugri liefert Objekt zurück, deren Methoden sofort
aufgerufen werden können).
jQuery bearbeitet die gelieferten Dokument-Objekte.
jQuery bearbeitet ezient Objektmengen.
jQuery hat eine eigene ready()-Funktion die nach dem Laden des Dokumentes aufgerufen wird.
jQuery stellt zusätzlich Hilfsfunktionen, weitere Eekte und Ajax-Abfragen bereit.
jQuery verhindert nicht die Benutzung anderer Bibliotheken (soweit diese nicht jQuery verhindern).
Das aktuelle jQuery-2 und die letzte Version jQuery-1 sind identisch; jQuery-2 ist aber kürzer, schneller und
ezienter, da ältere Browser wie IE-5/6/7 nicht mehr unterstützt werden.
Webseite: http://jQuery.com/
Download: http://jQuery.com/download/
https://ajax.googleapis.com/ajax/libs/jQuery/1.7.2/jQuery.min.js
Dokumentation: http://api.jQuery.com/
Einbinden: Datei im Skript in HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jQuery/1.7.2/jQuery.min.js"
<script type="text/javascript" src="jQuery.min.js"></script>
1. jQuery Core
jQuery deniert eine zentrale globale Zugrisfunktion jQuery(). Da in JavaScript das $-Zeichen als Buchstabe
gilt, kann dieses Zeichen als Funktionsaufruf verwendet werden und ist in jQuery ein Synonym:
jQuery();
$();
Die kurze Variante kann mit anderen Libraries kollidieren. Deshalb kann sie mit
jQuery.noConflict();
ausgeschaltet werden.
Es wird empfohlen, immer die lange Variante zu verwenden, auch wenn in Texten über jQuery und in freier
Wildbahn die kurze meist bevorzugt wird.
siehe http://api.jQuery.com/jQuery/#jQuery3
Man kann eine eigene jQuery-Abkürzung denieren:
var jq = jQuery.noConflict();
jq(document).ready(handler);
Es gibt mehrere Aufruftypen:
jQuery(selector); CSS-selector zur Denition einer Elementmenge
jQuery(selector, context);
jQuery(element-object); wrapper
jQuery(document-object); wrapper
jQuery(window-object); wrapper
jQuery(html); Erstellung eines html-Elementes - Einfügung getrennt
jQuery(handler); Funktion handler wird nach Laden des Dokumentes aufgerufen
jQuery(); Leeres Objekt erzeugen
55
56
15. JQUERY
jQuery(HTML);
Die Funktion $() von jQuery hat dieselbe Leistung wie document.querySelectorAll() und darüberhinaus
den Vorteil, mit allen auch älteren Browsern zu funktionieren. Ihr Ergebnis, ein Mengenobjekt, ist leichter
verwendbar als die NodeList.
2. Start
Kein onload mehr; kollidiert mit jQuery.
$( document ).ready( handler )
$().ready( handler ) (this is not recommended)
$( handler )
Die angegebene Handler-Funktion wird genau dann einmal ausgeführt, wenn das Dokument geladen und das
DOM bereit für JavaScript ist.
Da der Handler zur Ausführung registriert wird, darf man nur Funktionen übergeben, nicht etwa JavaScriptAnweisungen.
jQuery ist nicht nur eine Funktion, sondern auch ein Objekt. Dieses Objekt bietet eigene Leistungen. Eine davon
ist die Verzögerung der Handler bis nicht nur das DOM fertig ist, sondern bis die gesamte Dateisammlung geladen
ist.
$.holdReady( true );
Hier wird nicht $() aufgerufen, sondern die (von $() verschiedene) Funktion holdReady() aus dem $-Objekt
aufgerufen.
3. jQuery-Zugri in das HTML-Dokument mit Selektoren
Selektoren orientieren sich an CSS3 (siehe http://www.w3.org/TR/CSS21/selector.html) und an XPATH.
3.1. CSS.
* alles
E Element E
E F Element F, wenn es descendant von E ist
E > F Element F, wenn es direktes child von E ist
E:condition Element E, wenn es Bedingungen erfüllt (eigentlich Pseudoklassen und -elemente)
E:first-child E nur wenn es erstes child seines parent ist.
:link :visited :hover :active :focus :lang :first-line :first-letter :before :after
E + F Element F, wenn sein direkter vorheriger sibling E ist
E[a] E, wenn Attribut a gesetzt
E[a="value"] E, wenn Attribut a auf value gesetzt
E[a~="value"] E, wenn Attribut a als space-Liste mindestens einmal value hat
E[a|="value"] E, wenn Attribut a als hyphen-Liste value am Anfang hat
E[a*="value"] E, wenn Attribut a value als substring hat
E[a^="value"] E, wenn Attribut a value als Anfang hat
E[a$="value"] E, wenn Attribut a value als Ende hat
E[a!="value"] E, wenn Attribut a nicht oder nicht mit value existiert
DIV.class Class selector
E#id ID selector
E,F Alle E und alle F
E+F F after E
E~F Alle F preceded by E
:animated
:button :checkbox :checked :file :header :hidden :image :input :last :parent :password :radio :reset
:contains() Element with content
:disabled :enabled
:empty
:eq(n) :gt(n) :lt(n)
:even :odd
:first-of-type :first :last :focus :text
:animated :contains
:has(selector)
9
57
http://www.w3.org/TR/selectors/#selectors
3.2. XPATH.
append...
5.1. Events.
4. Manipulation des HTML-Dokuments
5. Eventmodell
http://www.quirksmode.org/dom/events/
https://developer.mozilla.org/en-US/docs/Web/Events
6. jQuery und Formulare
6.1. text. var currentValue = $obj.prop("value");
However, using val() is not always the same. For instance, the value of <select> elements is actually the value
of their selected option. val() takes that into account, but prop() does not. For this reason, val() is preferred.
6.2. checkbox.
Der aktuelle Wert einer checkbox wird im Attribut checked gespeichert. Die HTML-Seite
enthält den default-Wert.
prop() wurde 2011 in jQuery 1.6 neu eingeführt. In älteren Releases war attr() die einzige (und richtige) Methode,
checked abzufragen.
Seit 2011 und Release 1.6 liefert und manipuliert prop() den aktuellen Wert (die gespeicherte Property) und
attr() den in der HTML-Seite stehenden default-Wert.
Der gesuchte Wert muss also zwingend mit prop() abgefragt werden.
http://stackoverflow.com/questions/5874652/prop-vs-attr
http://ejohn.org/blog/jquery-16-and-attr/
http://stackoverflow.com/questions/426258/how-do-i-check-a-checkbox-with-jquery
http://stackoverflow.com/questions/13247058/jquery-attr-vs-prop
7. Plugins
8. Bibliotheken, die auf jQuery aufbauen
jQuery UI
jQuery Tools (owpower)
jQWidgets
Wijmo
jQuery mobile
9
KAPITEL 16
JSON
59
KAPITEL 17
Ajax
61
KAPITEL 18
Weitere Anwendungen
1. Javascript und XML
http://www.html-world.de/program/xml_5.php
63
Inhalt
65
Inhaltsverzeichnis
Kapitel 1. Vorwort
1. Kursinhalt
2. Literatur
3. Originalliteratur
4. Internet
3
3
3
3
3
Kapitel 2. Allgemeines
1. Geschichte und Begrie
2. Zusammenspiel mit anderen Produkten insbesondere Browsern
3. Eigenschaften
4. Werkzeuge
5. CIP-Pools
5
5
6
7
7
11
Kapitel 3. Sprachgrundlagen (Core-JavaScript)
1. Struktur
2. Kommunikation
3. Kommentare
4. Speicher
5. Rechenausdrücke (expressions)
6. Anweisungen
13
13
13
15
15
19
21
Kapitel 4. Arrays
1. Erzeugung
2. Feldlänge
3. Feldzugri
4. Ändern des Feldinhalts
5. Ändern der Länge
6. Ererbte Methoden
7. Iterationen
8. Mehrdimensionale Felder
23
23
23
23
23
23
24
24
25
Kapitel 5. Funktionen
1. Funktionsdenitionen
2. Aufruf
3. Parameter und Argumente
4. return-Wert
5. Typanalyse von Parameters
6. Ein erstes Beispiel
7. Aufruf (die zweite)
8. Javascript style für gute Funktionen
9. lexical scope, closure
10. Funktionen und Objekte
11. Beispiele
27
27
27
27
28
28
28
28
29
29
30
30
Kapitel 6. Objekte
1. Erzeugung von Objekten
31
31
Kapitel 7.
33
Exceptions
Kapitel 8. Regular Expressions
1. Allgemeines
2. Denition
35
35
35
67
68
INHALTSVERZEICHNIS
3.
4.
5.
6.
7.
8.
9.
10.
11.
Verwendung
Flags
Zeichen und Zeichenklassen
Wiederholung
Alternativen
Gruppen
RegExp-Member
String-Member
Übersicht
Kapitel 9.
eval
35
36
36
36
37
37
37
37
38
39
Kapitel 10. Debugger
1. Firebug
41
41
Kapitel 11. Wie geht das in Javascript
1. Typenanalyse in Funktionen
2. assoziative Arrays
3. objektorientiertes Javascript
43
43
43
43
Kapitel 12.
45
JavaScript-Varianten
Kapitel 13. Technik und Interna
1. Verschiedene Javascript Grammatiken
47
47
Kapitel 14. Clientseitiges Javascript
1. Übersicht
2. Einbettung von JavaScript in HTML
3. Denitionen der clientseitigen Schnittstellen
4. Javascript und HTML
5. window object
6. document object
7. DOM
8. Der DOM-Baum
9. Zugri auf HTML-Elemente
10. Eingabe
49
49
49
49
50
50
51
52
52
52
53
Kapitel 15. jQuery
1. jQuery Core
2. Start
3. jQuery-Zugri in das HTML-Dokument mit Selektoren
4. Manipulation des HTML-Dokuments
5. Eventmodell
6. jQuery und Formulare
7. Plugins
8. Bibliotheken, die auf jQuery aufbauen
9.
55
55
56
56
57
57
57
57
57
57
Kapitel 16.
JSON
59
Kapitel 17.
Ajax
61
Kapitel 18. Weitere Anwendungen
1. Javascript und XML
63
63
Inhalt
65
INHALTSVERZEICHNIS
TTH-Seite:
http://hutchinson.belmont.ma.us/tth/
69

Stellenausschreibung

Werkstudent (m/w) Java Developer

Full-Stack-JavaScript Entwicklungspraktikum (Angular 2 & Node.js)

Webentwickler (m/w) PHP, (X)HTML, CSS, AJAX

Webentwickler (m/w) in den Bereichen Backend und/oder Frontend

Frontend Entwickler/in

PDF

Stellenangebot als PDF-Datei herunterladen

Werkstudent Webentwicklung im Bereich Utilities (m/w)

Software Developer (m/f) JavaScript (Angular JS), Ruby