javascript dipl. math. f. braun - homepages.uni-regensburg.debrf09510/kurs_info/js/js.pdf · 6 2....

JavaScript

Dipl. Math. F. Braun

Universität Regensburg � Rechenzentrum

https://homepages.uni-regensburg.de/~brf09510/kurs_info/js/js.pdf

https://homepages.uni-regensburg.de/~brf09510/kurs_info/js/js.html

https://homepages.uni-regensburg.de/~brf09510/kurs_info/js/js.dvi

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

17. Oktober 2019

KAPITEL 1

Vorwort

1. Kursinhalt

(C- oder Java-Grundlagen werden vorausgesetzt; HTML- oder XML-Kenntnisse sind vorteilhaft )Ausgeteilt:1. Kurshomepage https://homepages.uni-regensburg.de/~brf09510/js/js_infos.html2. Skript (S. 1-24): https://homepages.uni-regensburg.de/~brf09510/kurs_info/js/js.html3. JavaScript und Theologie https://blog.fefe.de/?ts=a43bddf0 https://pbs.twimg.com/media/DZcCUAvXUAAdjqQ.jpg:large4. JavaScript performance https://blog.fefe.de/?ts=a2689de5 https://blog.fefe.de/?ts=b7c295e7 https://ptrace.fefe.de/wp/timings.txthttps://ptrace.fefe.de/wp/timings2019.txt

2. Literatur

RRZNDavid Flanagan: JavaScript - The De�nitive Guide, 2011, 978-0596805524David Flanagan: JavaScript - Das umfassende Referenzwerk 978-3-86899-135-2David Flanagan, Lars Schulten: JavaScript kurz & gut, O'Reilly, 2007, 978-3-89721-531-3Adam Freman: Pro jQuery, 978-1-4302-4095-2Cody Lindley, jQuery Cookbook, 978-0596159771Cody Lindley, jQuery Kochbuch, 978-3-89721-999-1

3. Originalliteratur

JavaScript Standard ECMA-262 ECMAScript Language Speci�cationhttp://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

Standard ECMA-327 ECMAScript 3rd Edition Compact Pro�le (June 2001)http://www.ecma-international.org/publications/standards/Ecma-327.htm

Annotated EcmaScript 5.1http://es5.github.io/

4. Internet

Galileo http://openbook.galileocomputing.de/javascript/

Kursbeispiele (K: https://netstorage.uni-regensburg.de/NetStorage/)Nodejs: https://nodejs.org/en/Nodejs releases: https://nodejs.org/en/download/releases/Rhino: https://developer.mozilla.org/de/docs/RhinoVergleich von JavaScript:Smalltalk, Scheme, JavaScript, Java (und die Herkunft con JavaScript):https://medium.com/smalltalk-talk/smalltalk-vs-scheme-javascript-and-java-e031fa6d3528

Smalltalk, JavaScript:https://medium.com/smalltalk-talk/smalltalk-vs-javascript-f35e8bcc5ef4

Gute JavaScript-Seite; leider seit 26.10.2016 ungeändert:https://www.keithcirkel.co.uk/

3

KAPITEL 2

Allgemeines

1. Geschichte und Begri�e

EcmaScript: https://www.ecma-international.org/publications/standards/Ecma-262-arch.htmrhino: https://developer.mozilla.org/en-US/docs/Mozilla/Projects/Rhino/Downloads_archivenode.js: https://nodejs.org/en/download/releases/

1958 Lisp (McCarthy, MIT)1975 Scheme (Steele, Sussman, MIT)1987 Self (Ungar, Smith, Sun)1995 Netscape Navigator 2.0, Frames, Mocha und LiveScript

Brendan Eich, Netscape, JavaScript (Navigator ≥2.0)Microsoft JScript (IE ≥3.0)

JavaScript inspiriert von Scheme;Crockford: JavaScript ist Lisp als C verkleidetPrototypes inspired by Self

3'1996 JavaScript 1.08'1996 JScript (MS-Dialekt) mit IE3.08'1996 JavaScript 1.11997 ECMA General Assembly accepts JavaScript6'1997 JavaScript 1.2, ECMA-262-1, Unicode 2.01997 Rhino1'1998 Netscape wird als Mozilla open source1998 ISO/IEC-16262Jun'1998 ECMA-262-2, Unicode 2.010'1998 JavaScript 1.312'1999 ECMA-262-3, Unicode 2.111'2000 JavaScript 1.56'2001 ECMA-327 (Compact Pro�le Scripting Language)

subset of ECMAScript for resource-constrained devicessuch as battery-powered embedded devices

2002 ISO/IEC 16262:2002regular expressions, string handling, new control statements, try/catch,tighter de�nition of errors, formatting, i18n

1'2002 JScript.NET (MS-Dialekt) mit IE7ECMA-262-4 existiert nicht

2004 ECMA-357 (Erweiterung für XML)8'2005 Beginn der Entwicklung von jQuery (John Resig)11'2005 JavaScript 1.612'2005 ECMA-357 2. ed. (Erweiterung für XML)26.8.2006 jQuery 1.010'2006 JavaScript 1.71'2007 jQuery 1.19'2007 jQuery 1.26'2008 JavaScript 1.81'2009 jQuery 1.36'2009 Ryan Dahl: nodejs 0.0.312'2009 ECMA-262-5

de facto interpretations, new features, re�ective creation/inspection of objects,JSON support, strict mode

1'2010 jQuery 1.4

5

6 2. ALLGEMEINES

6'2011 ECMA-262-5 (5.1, Unicode 3.0)31.1.2011 jQuery 1.53.5.2011 jQuery 1.6 (prop())2011 ISO/IEC 16262-201126.8.2011 nodejs v0.1.1411'2011 jQuery 1.718.6.2012 Rhino 1.7R48'2012 jQuery 1.81'2013 jQuery 1.9 (�nal) 2.0β18.4.2013 jQuery 1.11 und 2.05'2013 jQuery 1.1010'2013 ECMA-404 The JSON Data Interchange Format24.1.2014 jQuery 1.11 und 2.112'2014 io.js (fork von nodejs)14.1.2015 node iojs v1.0.029.1.2015 Rhino 1.7R515.4.2015 Rhino 1.7.64.5.2015 node iojs v2.0.017.6.2015 Rhino 1.7.76'2015 nodejs 0.12.523.6.2015 io.js 2.3.16'2015 ECMAScript harmony (JavaScript 6, Unicode 5.1.0)6'2015 ECMAScript Internationalization4.8.2015 node iojs v3.0.08.9.2015 nodejs v4.0.029.10.2015 nodejs v5.0.01.2.2016 Rhino 1.7.7.126.4.2016 nodejs v6.0.020.5.2016 jQuery 2.2.46'2016 ECMA-262-7 (Unicode 8.0)9.6.2016 jQuery 3.025.10.2016 nodejs v7.0.020.3.2017 jQuery 3.2.14.4.2017 nodejs v6.10.230.5.2017 nodejs v8.0.06'2017 ECMAScript8 2017 Language Speci�cation24.8.2017 Rhino 1.7.7.21.10.2017 nodejs v9.0.0 (aktuell, 12.4.201822.1.2018 Rhino 1.7.815.3.2018 Rhino 1.7.9 (aktuell, 12.4.2018)4'2016 nodejs v10.0.06'2018 ECMAScript9 2018 Language Speci�cation4'2019 nodejs v10.15.3 LTS

Derzeit (2019) sind ECMAScript 3 und 9 die beiden fast einzig relevanten Versionen.https://tc39.github.io/ecma262/ Draft http://2ality.com/2017/02/ecmascript-2018.html

2. Zusammenspiel mit anderen Produkten insbesondere Browsern

JavaScript wurde von Brendan Eich (Netscape) für das Web zum Einsatz in Browsern entwickelt - clientseitig.Es ist heute auch serverseitig einsetzbar.Es stellt eine unverzichtbare Ergänzung zu HTML/XHTML/CSS/XML dar.HTML/XHTML/CSS wurden mit JavaScript zur Programmierbarkeit erweitert. In den ersten Jahren warJavaScript wirklich lediglich eine nützliche Erweiterung. Webseiten waren statisch und in HTML/CSS formuliertund durch dynamische JavaScript-Elemente ergänzt. Im Lauf der letzten 20 Jahre hat sich das Verhältnisumgekehrt: Heutige Webseiten bestehen manchmal nur aus einem winzigen statischen HTML-Kern, der durchriesige Mengen JavaScript-Code erweitert wird. Erst dieser JavaScript-Code erzeugt dynmisch das HTML/CSS,das dem Benutzer am Bildschirm vom Browser dargestellt wird.XML: Einlesen und Ergänzen von XML aus HTML. Erstellen von SVG. Steuerung/Kontrolle von SMIL (MM-Language). Erzeugung von XSLT. JavaScript in XML als CDATA.

3. EIGENSCHAFTEN VON JavaScript 7

http://www.html-world.de/program/xml_5.php

jQuery ist eine JavaScript-Bibliothek zur bequemen und einheitlichen Extraktion der Client-Antworten.Ajax ist weitere Ergänzung.JSON dient zum Austausch von Informationen, die in Objekten gespeichert sind.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 kleinenBetriebssystemen entwickelt, in denen JavaScript-Programme ablaufen können. So brauchen die Skripte etwaeinen Scheduler zur Ausführung, Timeout- oder Timerinterval-Funktionen.Globale Scriptspracheneinstellung:<META http-equiv="Content-Script-Type" content=\"application/javascript">

Einbetten von JavaScript in HTML:1. Im HTML-Dokument im Script-Element; JavaScript-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 erlaubt) JavaScriptCodestring 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("Hello")</script>

<script type="text/javascript">document.write("Hallo")</script>

<script type="application/javascript" src="bsp.js"></script>

Scriptstart in anderen Elementen:<a href="#" onclick=\"alert('42')">Link</a>

<a href="javascript:window.alert('42')">Link</a>

Das window-Objekt repräsentiert den Zugri� auf die Browser-Schnittstelle. Das window.document-Objekt re-präsentiert den Zugri� aus das JavaScript einbettende HTML-Dokument. Alle Elemente des window-Objektskö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 tex-t/javascript1.4 text/javascript1.5 text/jscript text/livescript text/x-javascript text/x-ecmascript application/x-javascript application/x-ecmascript application/javascript application/ecmascriptEmpfohlen für allgemeinen Gebrauch:application/javascriptapplication/ecmascriptDa die meisten Browser JavaScript bevorzugen, lassen die meisten �Web-Experten� den Medientyp gleich ganzweg.

2.3. URLs. protocol://subsubdomain.subdomain.topleveldomain:port/dir/subdir/�le#�lepart?inputBeispiel: https://homepages.uni-regensburg.de:443/ brf09510/kurs_info/js/js.html

3. Eigenschaften von JavaScript

Conformance with latest version of Unicode and ISO/IEC 10646 with UTF-16 as the adopted encoding form(ISO/IEC 10646:2003+1:2005+2:2006+3:2008+4:2008 or newer; actual version: ISO/IEC 10646:2017, Unicode10.0, 20.6.2017).Object oriented language for computations and manipulations of computational objects.No speci�cation for input of external data or output of results.Host objects not described in ECMA-262.Scripting language.Web scripting language.General purpose language

8 2. ALLGEMEINES

Syntax similar as in CSimilarities to Java/Self/Scheme (Gosling/Ungar/IEEE1178-1990).Web Browser - Window, ... objects.Webserver - request objects.Many terrible rumours are true (it does things di�erently from intentions of the programmer).Ridiculously liberal.Flexible.Normed (ECMA).Other things are camou�aged JavaScript (Flash with ActionScript).Prototype based (without classes)

JSON: JavaScript Object NotationJXON: JavaScript XML Object NotationjQuery: Library to access HTML

4. Werkzeuge

Browser: Firefox, Opera, Safari, Chrome, Edge, Vivaldi, IE. . .HTML-Editor: Amaya, Komodo Edit (activestate), JsFiddle. . .Homepages der Uni Regensburg unter Linux: rex2:/homepages/bbbnnnnn/public_html> mit der Web-Adresse:http://homepages.uni-regensburg.de/~bbbnnnnn/index.html

Zum Beispiel: rex2:/homepages/brf09510/public_html/js/beispiele/komm/komm.htmlhttp://homepages.uni-regensburg.de/~brf09510/js/beispiele/komm/komm.html

Libraries: jQuery, jsgl, glMatrix. . .Liste von JavaScript-Engines:http://en.wikipedia.org/wiki/List_of_JavaScript_engines

Tabelle 1. Werkzeuge

Engine Frei OpSrc Hersteller Sprache OpenSuse Debian Windows Java AufrufRhino ja ja Mozilla Java Yast apt-get Web aufrufbarSpiderMonkey ja ja Mozilla C++ apt-get smjsV8 ja Google apt-getJScript Microsoftnode ja ja Google C++ nodenashorn Oracle Java jjs

Debugger: FirebugSpeed Test: http://www.webkit.org/perf/sunspider/sunspider.html

JavaScript lint: http://javascriptlint.com/online_lint.phphttp://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

Pretty printer: https://www.cleancss.com/javascript-beautify/https://beautifier.io/

Mini�cation: Codetranformation ohne Semantikänderung in komprimierten Code.Inline JavaScript: http://math.chapman.edu/~jipsen/js/

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 installierenJava nicht vergessen:su/Yast2/Software/java-1_7_0-ibm-devel

4. WERKZEUGE 9

4.1.2. Debian. Rhino ist als Paket verfügbar.apt-get install rhinojs-Konsole:rhinojava -jar /usr/share/java/js.jar

4.1.3. Windows. Rhino muss aus dem Internet bescha�t und installiert werden.Download:http://www.mozilla.org/rhino/download.html

rhino-1.7.9.zip

Auspacken:k:\RZ\KURSE\BRAUN\rhino\unzip32.exe c:\Users\brf09510\Downloads\rhino-1.7.9.zip

Pfade:path "c:\Program Files\Java\jre1.8.0_111\bin";%path%

set classpath=.;c:\rhino\rhino1.7.9\lib\rhino-1.7.9.jar

Start:java -jar c:\rhino\rhino1.7.9\lib\rhino-1.7.9.jar

java -jar c:\rhino\rhino1.7.9\lib\rhino-1.7.9.jar halloshell.js

Test:js> print ("Hallo")

Hallo

js> quit()

Batchdatei zum Start von Rhino:

1 rem Zur Rhino -Installation einen Ordner waehlen und rhino auspacken , z.B.:

2 rem c:

3 rem mkdir rhino

4 rem cd rhino

5 rem copy c:\ Users\heinz\Downloads\rhino1 .7.7.1. zip

6 rem k:\RZ\KURSE\BRAUN\djgpp\unzip32.exe c:\ rhino\rhino1 .7.7.1. zip

7

8 java -version

9 if errorlevel 1 goto javaakt

10 goto javastart

11 :javaakt

12 path "c:\ Program Files\Java\jre1 .8.0 _111\bin";%path%

13 set classpath =.

14 :javastart

15 java -jar c:\rhino\rhino1 .7.7.1\ lib\rhino -1.7.7.1. jar %1

(http://homepages.uni-regensburg.de/~brf09510/js/beispiele/hallo/rhino.bat)Rhino help (rhino -?):

1 Usage: java org.mozilla.javascript.tools.shell.Main [options ...] [files]

2 Valid options are:

3 -?, -help Displays help messages.

4 -w Enable warnings.

5 -version 100|110|120|130|140|150|160|170

6 Set a specific language version.

7 -opt [-1|0-9] Set optimization level.

8 -f script -filename Execute script file , or "-" for interactive.

9 -e script -source Evaluate inline script.

10 -modules [path -or-url]

11 Add path or URL to the CommonJS modules search path.

12 -main [module] Set CommonJS main module id or file name.

13 -sandbox Enable CommonJS sandbox mode.

14 -debug Generate debug code.

15 -strict Enable strict mode warnings.

16 -fatal -warnings Treat warnings as errors.

17 -encoding charset Use specified character encoding as default when reading scripts.

10 2. ALLGEMEINES

4.1.4. Rhino und Java. Rhino kann direkt aus Java aufgerufen werden.http://en.wikipedia.org/wiki/Rhino_%28JavaScript_engine%29#Example

1 // beispiele/hallo/RhinoEngine.java

2

3 import javax.script.ScriptEngine;

4 import javax.script.ScriptEngineManager;

5 import javax.script.ScriptException;

6

7 public class RhinoEngine {

8 public static void main(String [] args) {

9 ScriptEngineManager mgr = new ScriptEngineManager ();

10 // Now we can go and get a script engine we want.

11 // This can be done either by finding a factory that supports

12 // our required scripting language

13 // (engine = factory.getScriptEngine ();)

14 // or by requesting a script engine that supports a

15 // given language by name from the script engine manager.

16 ScriptEngine engine = mgr.getEngineByName("JavaScript");

17 // Now we have a script engine instance that

18 // can execute some JavaScript

19 try {

20 engine.put("name", args [0]);

21 engine.eval("print('Hello ' + name + '!')");

22 } catch (ScriptException ex) {

23 ex.printStackTrace ();

24 }

25 }

26 }

(http://homepages.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-D4.1.5. Beispiel. Hello-world als JavaScript-Programm mit Rhino:

1 // beispiele/hallo/halloshell.js: Hallo in einer Shell

2

3 // C:\ Users\brf09510\svn\doku\trunk\js\beispiele >

4 // java -jar c:\ rhino\rhino1 .7.7.1\ lib\rhino -1.7.7.1. jar halloshell.js

5

6 print("Hello Hola Hallo!")

7 3*4

8 quit()

(http://homepages.uni-regensburg.de/~brf09510/js/beispiele/hallo/halloshell.js)

4.2. Node.js. node.js für Windows, MaxOSX, Linux, SunOS; source codeDebian: package nodejs; Aufruf nodejsOpenSuSE: package nodejs;Windows: Download node.exe (32- oder 64bit); Aufruf: nodeKonsolausgaben: console.log("Hallo");Node Ende: process.exit();Webseite: https://nodejs.org/

4.3. SpiderMonkey. Debian: apt-get install spidermonkey-binsmjssmjs 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/

4. WERKZEUGE 11

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

4.5. JavaScript Debugger (Firefox und Chrome). Viele Browser enthalten einen Debugger für Ja-vaScript. Am Beispiel von Chrome und Firefox werden kurz die wichtigsten Funktionen vorgestellt.Der Aufruf des Chrome-Debuggers erfolgt durch Klicken des Menubuttons (rechts oben, Google Chrome anpas-sen und einstellen). Es erscheint ein Kontextmenü mit (unter anderem) dem Befehl Weitere Tools/Entwicklertools.Der Firefox verfügt über den Menübefehl tools/Web Developer/debugger.In beiden Browsern wird der Bildschirm halbiert und in der anderen Hälfte erscheint das Debugger-Interface.Die Bedienung ist sehr intuitiv.Der Inspector stellt in kompakter und auf- und zuklappbarer Form die HTML-Seite dar. Klicken in der Web-seitenhälfte klappt die richtigen Teile auf.Die Console erlaubt die Auswahl der gewünschten Ausgaben durch Anklicken (Net, CSS, JS, Security, Logging,Server). Da die Ausgaben dynamisch zum Zeitpunkt ihrer Entstehung erfolgen, sollte man, wenn man nichtssieht, die Webseite neu laden. Dann erscheinen mindestens die vom Browser geholten Dateien mit ihrer Ladezeitund weiteren Angaben.Der Debugger zeigt alle Dateien mit JavaScript-Code und deren Inhalte an. Hier kann man durch klicken derZeilennummern Breakpoints setzen und wieder löschen. Nach einem Reload der Seite bleibt der Code am erstengesetzten Breakpoint stehen. Sie können Variableninhalte inspizieren (rechtes Fenster). Die Fortsetzung desProgramms erfolgt mit vier Klickbaren Befehlen resume, step over, step in und step out.CSS wird im Stylesheet Editor angezeigt und manipuliert.Performance erlaubt die Messung von CPU-Zeit der einzelnen Programmteile. Im Menübefehl muss eine Per-formancemessung gestartet werden. Anschlieÿend werden alle folgenden Aktivitäten (oder alle, wenn die Seiteneu geladen wird) protokolliert unter Berücksichtigung der von ihnen verbrauchten Rechenzeit. Dabei wird dieAusführung stark verlangsamt; man sollte daher Geduld mitbringen. Nach dem Stoppen der Messung werdendie Ergebnisse in verschiedenen Formen graphisch dargestellt.Ähnlich funktioniert die Speicherbelegung: hier wird ein Snapshot gespeichert und graphisch dargestellt.Der letzte Reiter Network überwacht die Netzaktivitäten und stellt sie dar. Auch hier kann angeklickt werden,welche Auswahl bei der Darstellung gewünscht ist.

4.6. Beispiele. Erste Beispiele

1 <!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01// EN"

2 "http ://www.w3.org/TR/html4/strict.dtd">

3 <html > 

4 <head >

5 <META http -equiv="Content -Type" content="text/html; charset=UTF -8">

6 <META http -equiv="Content -Script -Type" content="application/javascript">

7 <title >first.html </title >

8 </head >

9 <body >

10

11 <p>

12 

13 <script >document.write("Hallo")</script ><br>

14


16 <script >Unsinn </script ><br>

17


19 <script ></script ><br>

22

23 

24 <script language="javascript">

25 document.write("language=javascript deprecated in HTML")

12 2. ALLGEMEINES

26 </script >

27

28 </p><p>

29

30 <a href="http ://www.w3.org/TR/html401/interact/scripts.html">siehe </a><br>

31

32 <script type="text/javascript">

33 document.write("type=text/javascript obsolete by IANA")

34 </script >

35 <a href="http ://www.iana.org/assignments/media -types/text/index.html">siehe </a><br>

36

37 <script type="application/javascript">

38 document.write("type=application/javascript not every Browser")

39 </script >

40 <a href="http ://www.iana.org/assignments/media -types/application/index.html">siehe </a><br>

41

42 <script type="application/javascript" src="hallo.js">

43 document.write("not executed")

44 </script ><br>

45

46 <script type="application/ecmascript">

47 document.write("type=application/ecmascript not every Browser")

48 </script >

49

50 <script type="application/ecmascript" src="hallo.js">

51 document.write("not executed")

52 </script >

53

54 </p>

55

56 <noscript ><p>Falls keine Scriptsprache aktiv </p></noscript >

57

58 <p>

59

60 <a href="javascript:window.alert('Javascript als URL -Protokoll ')">Hier klicken </a><br>

61

62 <a href="#" onclick="window.alert('Javascript durch Link ')">Hier klicken </a><br>

63

64 <a href="#" onclick="window.alert (3*7)">Hier klicken </a><br>

65

66 <a href="javascript:new Date().toLocaleTimeString ();">Uhrzeit bitte </a>

67

68 </p>

69

70 </body >

71 </html >

(http://homepages.uni-regensburg.de/~brf09510/js/beispiele/hallo/first.html)

5. CIP-Pools

cmd (Kommandofenster)K:\RZ\KURSE\BRAUN\JavaScript\READ.ME\ Lesesto�

K:\RZ\KURSE\BRAUN\js\rh.bat Rhino aktivierenrhino x.js

rhino

K:\RZ\KURSE\BRAUN\js\nd.bat Node aktivieren (nd32.bat bei 32-Bit-Rechner!)node x.js

node

K:\RZ\KURSE\BRAUN\rhino\rhino.bat x.js Rhino direkt starten

5. CIP-POOLS 13

K:\RZ\KURSE\BRAUN\JavaScriptLint\jsl-0.3.0\jsl.exe JavaScript lint

K:\RZ\KURSE\BRAUN\jquery\ jQuery-Library

K:\RZ\KURSE\BRAUN\jsgl\ JavaScript graphic library

K:\RZ\KURSE\BRAUN\rhino\ Rhino installiert und zum mitnehmen (die letzten Versionen)

K:\RZ\KURSE\BRAUN\node\ node.js und io.js zum mitnehmen

K:\RZ\KURSE\BRAUN\svn\doku\trunk\js Skript und Beispiele

JavaScript derzeit nicht im Linux-Pool

KAPITEL 3

Sprachgrundlagen (Core-JavaScript)

1. Struktur

De�nitionen: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 alleUnicodezeichen dargestellt werden, selbst wenn sie breiter als 16 Bit sind. Das BOM (byte order mark) wirdinterpretiert. Die meisten JavaScript-Interpreter verstehen alle encodings. Ein JavaScript-Programm in Unicodesollte bereits normalisiert sein, eigentlich eine Aufgabe eines Editors.Der Quelltext ist wie bei C case-sensitiv und formatfrei.Achtung: HTML ist case-insensitiv und kollidiert mit JavaScript. Auch wenn HTML das zuläÿt, darf daskorrekte onclick nie durch (z.B.) onClick ersetzt werden. XHTML ist hier problemlos, weil es selbst case-sensitiv ist.http://homepages.uni-regensburg.de/~brf09510/js/beispiele/hallo/woaini.html

Trotz der fehlenden Struktur und der gegenüber C viel freieren Gestaltungsmöglichkeit emp�ehlt es sich, auchJavaScript-Programme strukuriert zu schreiben. Das ist (leider) nicht zwingend.Üblich ist die Zusammenfassung aller JavaScriptde�nitionen 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 mitstrict zu ermöglichen, wird die strict-Anweisung als String geschrieben. Um sie zu kapseln, verwendet man eineanonyme Funktion, die sofort aufgerufen wird.'use strict'; // umschalten in den strict mode

Strict mode auf die kapselnde Funktion beschränken:

1 (function () {// kapselnde Funktion

2 'use strict '; // umschalten in den strict mode

3 // strict js-code

4 }()); // Aufruf dieser Funktion

Wenn der auszuführende Code komplett in dieser Funktion steht, kann man diese Funktion als JavaScript-Äquivalent von main in C/C++ interpretieren.Eine ausgezeichnete Hilfe zur Erzeugung von hochwertigem JavaScript-Code ist das Buch von Douglas Crock-ford: 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 syntaktischvollständige Anweisung ist.

1 // beispiele/hallo/hallo.js: write Hallo to HTML file

2

3 document.write("Hello Hola Hallo !")

(http://homepages.uni-regensburg.de/~brf09510/js/beispiele/hallo/hallo.js)

2. Kommentare

Kommentare werden wie in C99 geschrieben. Zeilenendkommentare beginnen mit // und enden mit den folgen-den Zeilenende. Klassische Kommentare beginnen mit /* und enden mit dem folgenden */. Gleiche Kommentarewerden nicht geschachtelt.

15

16 3. SPRACHGRUNDLAGEN (CORE-JavaScript)

3. Kommunikation

Kommunikation ist in JavaScript nicht de�niert, sondern wird erst in der Umgebung bereitgestellt. Daher muÿzwischen den Umgebungen unterschieden werden.Für erste Versuche folgen jetzt ein paar Rezepte:

3.1. Ausgaben.3.1.1. Rhino shell: Konsolausgaben: print("Hallo");

3*7

Rhino Ende: quit();3.1.2. Node: Konsolausgaben: console.log("Hallo");

Node Ende: process.exit();3.1.3. HTML:. window.alert("Hallo")

document.write("Hallo")

document.write(3*7)

3.2. Eingaben.3.2.1. Rhino shell: Am einfachsten wird mit einem Java-Befehl von der Tastatur gelesen:

1 (function () {

2 "use strict";

3

4 var x;

5 print ("Gib x: ");

6 x = prompt ();

7 print ("" + x + " " + typeof (x));

8 x = - - x;

9 print ("" + x + " " + typeof (x));

10

11 var y;

12 print ("Gib y: ");

13 y = prompt ();

14 print ("" + y + " " + typeof (y));

15 y = "" + y;

16 print ("" + y + " " + typeof (y));

17

18 function prompt1 () {

19 importPackage(java.io);

20 importPackage(java.lang);

21 var stdin = new BufferedReader(new InputStreamReader(System['in']));

22 return function () {

23 return String(stdin.readLine ());

24 };

25 }

26 function prompt () {

27 importPackage(java.io);

28 importPackage(java.lang);

29 var stdin = new BufferedReader( new InputStreamReader(System['in']) )

30 var aLine = stdin.readLine ();

31 return aLine;

32 }

33 } ());

(http://homepages.uni-regensburg.de/~brf09510/js/beispiele/prompt/rhprompt.js)Mit readFile("Dateiname") kann der Inhalt einer Datei als String geholt werden.(Beispiel als Kommentar in beispiele/string/str.js)

3.2.2. Nodejs. Node verfügt über eine elaborierte, jedoch relativ komplizierte Ein- und Ausgabe. Sie ist imnächsten Beispiel dokumentiert. Zum Vergleich ist als Kommentar auch Rhino berücksichtigt:

1 // beispiele/string/str.js: read file; get words; get vocabulary; get palindroms

2 // rhino: remove print (last function)

3 // read file with rhino (line 21)

4

5 String.prototype.trim = function () {

6 "use strict";

3. KOMMUNIKATION 17

7 return this.replace (/^\s+|\s+$/g, "");

8 }; // does not work without semicolon; caution: no hoisting!

9

10 String.prototype.rev = function () {

11 "use strict";

12 if (this.length <= 1) { return this;

13 } else { return this.slice (1).rev() + this.slice (0,1); }

14 };

15

16 (function () {

17 "use strict";

18

19 var n = 50;

20

21 // var txt = readFile('process1.txt '); // rhino

22

23 var f = require ('fs'); // node

24 var txt = f.readFileSync('./ flanders.txt','utf8');

25 //var txt = f.readFileSync ('./ process.txt ','utf8 '); // node

26 //var txt = f.readFileSync ('./ jingyesi.txt ','utf8 '); // node

27 // http ://www.chinesetolearn.com/famous -chinese -poem -%E9%9D%9C%E5%A4%9C%E6%80%9D-jing -ye-

si-quiet -night -thoughts -%E6%9D%8E%E7%99%BD-li-bai -lyrics -pinyin -english -translation -

bright -moon -mountain -moon -shan -yue -ming -yue -chuang -be/

28 //var txt = f.readFileSync ('./namen.txt ','utf8 '); // node

29

30 var respace = /\s+/g;

31 var repunct = /[-+/_!"?`',;.:%]/g;

32 var wrd = txt.split(respace);

33 var i;

34

35 for (i=0; i<wrd.length; i++) {

36 var or = wrd [i];

37 wrd [i] = wrd[i]. replace(repunct ,"");

38 if (i < n && or !== wrd [i]) {

39 print(wrd[i] + " - " + or);

40 }

41 }

42 print("Number of words: " + wrd.length);

43

44 var unq = wrd.sort().filter(function(el,id,ar){ return id===0 || el !== ar[id -1];});

45 for (i=0; i < n && i<unq.length; i++) {

46 print(unq[i]);

47 }

48 print("Used words: " + unq.length);

49 /* zum testen

50 var x = " Radar ";

51 print (x);

52 x = x.trim();

53 print (x);

54 x = x.rev();

55 print ('>'+x+'<');

56 */

57 var pal = unq.sort().filter(function(el,id,ar){ return el.length > 1 && el.rev() === el;

});

58 for (i=0; i < n && i<pal.length; i++) {

59 print(pal[i]);

60 }

61 print("Palindroms: " + pal.length);

62 }());

63

64 function print(x) {

65 console.log(x);

66 }

(http://homepages.uni-regensburg.de/~brf09510/js/beispiele/string/str.js)

3.2.3. HTML:. In HTML müssen Eingaben in Formularen erfolgen. Sie werden dann aus der Umgebunggeholt. Formular und Eingabeelemente haben Namen, deren Werte in JavaScript benutzt werden.Das folgende Beispiel demonstriert Eingaben und berechnet Blutalkoholkonzentrationen:

1 <! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01// EN"

2 "http ://www.w3.org/TR/html4/strict.dtd">

3 <html > 

4 <head >

5 <META http -equiv="Content -Type" content="text/html; charset=UTF -8">

6 <META http -equiv="Content -Script -Type" content="application/javascript">

7 <title >komm.html </title >

8 <script type="application/javascript"></script >

22 </head >

23 <body >

24

25 <form name="Formular" action="">

26 <p>

27 Gewicht: <input type="text" name="Gewicht" value="75" size="5"><br>

28 Alkohol im Getränk: <input type="text" name="Alkohol" value="12" size="5"><br>

29 Alkoholmenge: <input type="text" name="Menge" value="0.5" size="5"><br>

30 Zeit seit Trinkbeginn: <input type="text" name="Zeit" value="1" size="5"><br>

31 <input type="button" value="Wieviel Promille?" onclick="Prom()"><br>

32 Promille: <input type="text" name="Promille" value="?" size="50"><br>

33 </p>

34 </form >

35

36 <p>

37 <a href="http :// validator.w3.org/check?uri=referer"><img

38 src="http ://www.w3.org/Icons/valid -html401" alt="Valid HTML 4.01

39 Strict" height="31" width="88"></a>

40 </p>

41

42

43 </body >

44 </html >

(http://homepages.uni-regensburg.de/~brf09510/js/beispiele/komm/komm.html)

4. Speicher

4.1. Variable. Lange Zeit gab es in JavaScript nur eine Variablende�nition mit var. Seit ES6 existierenzusätzlich Variable mit let und const. Wie schon immer braucht man überhaupt kein Variablende�nitionen;das ist jedoch kein akzeptables JavaScript mehr!Mit var de�nierte oder implizite Variable in JavaScript lassen sich auf mehrere Arten kategorisieren.Zunächst kann man explizit und implizit deklarierte Variablen unterscheiden. Explizit werden Variable mit vardeklariert. 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 werdenauÿerhalb einer Funktion deklariert oder in Funktionen ohne Deklaration verwendet. Lokale Variable werdennur innerhalb von Funktionen mit dem Wort var deklariert und mit Funktionsende wieder gelöscht. GlobaleVariable werden eigentlich einem Objekt, dem sog. globalen Objekt, zugeordnet. Nicht deklarierte impliziteVariable sind seit ES5 deprecated und werden im strict-Modus nicht zugelassen.

4. SPEICHER 19

Variable dürfen doppelt deklariert werden. Die zweite Deklaration hat keine Wirkung. Eine zweite Initialisierungwirkt 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 Funktionsob-jekte.Skalare sind Variable für Daten, die ohne weitere innere Struktur als Einheit betrachtet werden wie Zahlenoder Strings. Arrays sind geordnete, indizierte Zusammenfassungen von Skalaren oder Objekten. Objekte sindungeordnete, nicht indizierte Zusammenfassungen, deren Elemente benannt sind. Streng genommen sind Felderspezielle Objekte mit zusätzlichen Eigenschaften und modi�zierter Syntax (eckige statt geschweifte Klammern).Variable in JavaScript sind typenlos. Der Typ gehört also nicht fest zu einer Variablen, sondern nur zumgespeicherten Wert. Er kann sich mit dem Wert jederzeit ändern. Bei Bedarf werden Werte auch implizit inandere Typen geändert.

Tabelle 1. Variable

Elementar Array Objekte FunktionenDekl. var x; var x=[]; var x={}; var x=function(){}

var x=3.14; var x=[1,"Hallo"]; var x={x:0,y:1.3};

x="Hallo"; x=[2, 3, 5, 7, 11]; x={x:0,y:1.3,r=0.4};

var x=true; x=[false, true]; x = {Hans, Peter, Frauke, Anna};

var x=undefined;

var x;var i, j, k;var y = 5;var l, m = 10;var m = 10, n = "Text";z = 15;Für var-Variable gilt hoisting : sie werden vor der Ausführung immer an den Beginn ihres De�nitionsbereichsverschoben. Das führt oft zu unklarem Code. Schreiben Sie sie besser selbst an die Stelle, wo sie die engine

sowieso hinbringt!Seit ES6 existieren zusätzlich zwei stärkere Variablende�nitionen mit let und const. Beide sind auf den um-gebenden Block beschränkt und werden mit Blockende (statt wie bei var mit Funktionsende) wieder aus demSpeicher entfernt. Mit dem Wort const wird zusätzlich verhindert, dass sich der Wert nach der Initialisierungändert.Das folgende Beispiel demonstriert das Verhalten:

1 // progs/var.js

2 // rhino:

3 if (typeof (console) === 'object ') {

4 function prnt (x) { console.log (x); }

5 } else {

6 function prnt (x) { print (x); }

7 }

8

9 var g1 = 11;

10 let g2 = 12;

11 const g3 = 13;

12

13 function DemoWithVarAndImplicit () {

14 var x = 21;

15 prnt(y); // hoisted y with value undefined

16 z = 14; prnt(z); // impicit global z with value 14

17 if (true) {

18 var x = 22; // redefinition is assignment

19 prnt(x); // 22

20 var y = 23; // redefinition is assignment

21 prnt(y); // 23

22 }

23 prnt(x); // 22

24 prnt(y); // 23

25 }


26

27 var g1 = 111; // redefinition is assignment

28 //let g2 = 121; redefinition impossible

29 // const g3 = 131; redefinition and change impossible

30 g2 = 121; // assignment possible

31 //g3 = 131; // reassignment impossible

32

33

34 function DemoWithLet () {

35 let x = 31;

36 if (true) {

37 let x = 32; // andere variable

38 prnt(x); // 32

39 }

40 prnt(x); // 31

41 }

42

43 DemoWithVarAndImplicit (); // undefined 14 22 23 22 23

44 DemoWithLet (); // 32 31

45 prnt(g1); // 111

46 prnt(g2); // 121

47 prnt(g3); // 13

48 prnt(z); // 14

Kurz:1. Unde�nierte Variable und hoisting ist zu vermeiden.2. Variable mit var funktionieren, haben aber gegenüber Variablen mit let keinen Vorteil, sondern in unüber-sichtlichen Situationen ein Verhalten, das eher zu Denkfehlern führt.3. Wenn Variablen ihren Wert nicht ändern sollen oder müssen, sollten sie mit const deklariert werden.4. Globale Variable (auÿerhalb von Blöcken) sollten so weit wie möglich vermieden werden. Werden sie wirklichbenötigt, sollte man mehrere Variable in ein Objekt mit einem beschreibenden Namen zusammenfassen.

4.2. Namen. Ein Name (identi�er) ist eine Bezeichnung für JavaScript-Programmelemente nach den fol-genden Regeln. Reservierte Wörter sind nicht erlaubt:Namen: Beginn: Buchstabe, $, _Fortsetzung: zusätzlich: Zi�ern, weitere Sonderzeichencase-sensitiv

Als Buchstabe gilt sehr liberal jeder Unicode-Buchstabe, als Zi�er jede Unicode-Zi�er (UnicodeDigit). Sonder-zeichen sind ebenfalls sehr weit gefasst als UnicodeCombiningMark, UnicodeConnectorPunctuation und format-

control-characters aus bestimmten natürlichen Sprachen. Auch Zero-width-joiner (\u200D) und Zero-width-non-joiner (\u200C)sind zugelassen. Die Aufzählung ist nur exemplarisch und nicht erschöpfend.ecma S. 123, 11.6Reservierte Wörter:break case catch class const continue debugger default delete do else export extends �nally for function if importin instanceof let new return static super switch this throw try typeof var void while with yielddavon Zukunftsmusik:await enum implements interface package private protected publiczu vermeidende Wörter (auÿer für ihren Zweck ): null true false Array Date In�nity JavaArray JavaClassJavaObject JavaPackage Math NaN Number Object String alert all anchor anchors area assign blur buttoncheckbox clearInterval clearTimeout clientInformation close closed con�rm constructor crypto decodeURI deco-deURIComponent defaultStatus document element elements embed embeds encodeURI encodeURIComponentescape eval event �leUpload focus form forms frame frameRate frames function getClass hasOwnProperty hid-den history image images innerHeight innerWidth isFinite isNaN isPrototypeOf java layer layers length linklocation mimeTypes name navigate navigator o�screenBu�ering onbeforeunload onblur onclick oncontextmenuondragdrop ondragdrop onerror onfocus onkeydown onkeypress onkeyup onload onmousedown onmousemoveonmouseout onmouseover onmouseup onreset onsubmit onunload open opener option outerHeight outerWidthpackages pageXO�set pageYO�set parent parseFloat parseInt password pkcs11 plugin prompt propertyIsEnumprototype radio reset screenX screenY scroll secure select self setInterval setTimeout status submit taint texttextarea toString top unde�ned unescape untaint valueOf windowMit var de�nierte Variable ohne Wert haben den Typ unde�ned.Unde�nierte Variable ohne Wert erzeugen beim Verwenden einen Laufzeitfehler.

4. SPEICHER 21

4.3. Konstante. const max = 100unverä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:unde�ned null Boolean String Number (reell, ganz, IEEE754).Zusammen mit dem Objekttyp sind das sechs Typen. Arrays sind einerseits spezielle Objekte und damit Ob-jekttypen, andererseits durch Spezialbehandlung in der Sprache verankert und für den Programmierer durchauseigenständig. Ähnliches gilt für Funktionen, so dass man je nach Zählweise von sechs bis acht Typen sprechenkann.

Tabelle 2. Typen

Typ Anzahl der Werte Werteunde�ned 1 unde�nednull 1 nullBoolean 2 true falseNumber 18437736874454810626 = 1.8 · 1019 Zahlen, 0, +Inf, -Inf, NaNString "", "Hallo"Object {}, {a:2,b:3,c:5}Array [], [2,3,,5]Function function(){}

Die leichte Diskrepanz zu Flanagan in der Zahlenanzahl von 1 erklärt sich wahrscheinlich damit, dass Flanagandie eine Zahl ±0 als zwei Werte rechnet.1

4.4.1. unde�ned. Jede de�nierte, aber nicht initialisierte Variable ist undefined. Dieser Wert wird vonder Engine auch in anderen Situationen, z.B. als nicht de�nierte Argumente oder Ergebnisse von Funktionenautomatisch vergeben.

4.4.2. null. null bezeichnet das Fehlen eines Wertes einer Variablen, also einen leeren Wert oder andersausgedrückt einen nichtnumerischen Nullwert. Er wird fast nie automatisch von der Engine eingetragen, sondernmuss explizit vom Programmierer benutzt werden. Die Anweisungvar x = null;

drückt also aus, dass der Programmierer eine de�nierte 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. unde�ned, null und NaN. Alle drei Werte bezeichnen einen nicht de�niertenWert und können letztlichaustauschbar für diesen Fall verwendet werden. Im allgemeinen ist unde�ned jedoch "richtiger" als die beidenanderen Werte. null sollte ausschlieÿlich für Objekte verwendet werden und NaN nur für numerische unde�nierteWerte. Beim schwachen Vergleich sind unde�ned 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 unde�nierter Wert auf Systemebene, null auf Programmebeneund NaN auf numerischer Ebene.

4.4.4. Boolean. Der Typ Boolean hat zwei Werte true und false und wird hauptsächlich in Bedingungenvon Anweisungen verwendet. Dort wird jeder nicht-Boolean Wert in einen Boolean Wert umgewandelt. Diespeziellen Werte undefined null 0 -0 NaN und "" sind false, manchmal auch falsy genannt, alle anderenWerte sind true.

4.4.5. Number. Es gibt in JavaScript nur einen einzigen numerischen Typ zum Rechnen mit 8 Byte. Es istals 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 ± 1

0 . NaN ist ein nicht berechenbaresErgebnis und wird genau in diesem Fall gespeichert, z.B. bei∞−∞. Erscheint es als Endergebnis, dann hat man

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 verschiedeneWerte (echte Zahlen, 0, +Inf, -Inf, NaN).


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 mit0x beginnende ganze Zahlen sedezimal, mit 0 beginnende ganze Zahlen oktal. Spezielle Werte werden verbalbenutzt:Number.EPSILONNumber.MIN_VALUENumber.MAX_VALUENumber.MAX_SAFE_INTEGERNumber.NaNNumber.NEGATIVE_INFINITYNumber.POSITIVE_INFINITYNaNIn�nity

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. Mitechten 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 Fehlstelleausgleichen.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 objectWrapper objectsImmutable (Primitives, insbesondere Strings) and Mutable (alle objects)

4.5. Konversionen.4.5.1. Automatische Konversionen. Konversionen werden implizit und kontextabhängig durchgeführt.

Tabelle 3. Automatische Konversionen:

Quelltyp Quellwert String Zahl Boolean Objektunde�ned "undefined" NaN false Fehlernull "null" 0 false Fehler

String leer ≡ 0 false String-Objektnicht-leer ≡ num. Wert true String-Objekt

Zahl 0 "0" ≡ false Number-Objektsubnormal "Wert" ≡ true Number-Objektnormal "Wert" ≡ true Number-Objekt∞ "Infinity" ≡ true Number-Objekt−∞ "-Infinity" ≡ true Number-ObjektNaN "NaN" ≡ false Number-Objekt

Boolean false "false" 0 ≡ Boolean-Objekttrue "true" 1 ≡ Boolean-Objekt

Objekt toString() valueOf() true ≡valueOf() toString()

NaN

Tricks:var x = "Text"+7*7; print (typeof(x)) Text49var x = 1.0*"3.14"; print (typeof(x)) 3.14var x = "1"+"1"; print (typeof(x)) 11+x erzeugt numerischen Wert aus x- -x erzeugt numerischen Wert aus x''+x erzeugt String aus xx+"" erzeugt String aus x!!x erzeugt boolean aus x

4. SPEICHER 23

!!new Boolean(false) erzeugt true, da mit new Objekt erzeugt wirdNumber(x) erzeugt numerischen Wert aus xString(x) erzeugt String aus xBoolean(x) erzeugt boolean aus x

4.5.2. Explizite Konversionen. In verschiedenen Objekten, die teilweise schon von ECMA de�niert sind,manchmal auch erst in externen Libraries (jQuery) programmiert sind, gibt es eine Reihe weiterer Konver-sionen für diverse Zwecke. So werden ganze Zahlen mit Math.floor(x), Math.ceil(x), Math.round(x) oderMath.trunc(x) erzeugt (Ecma 20.2.2).

4.5.3. Zahlenformatierungen. Zahlenformatierungen wandeln den Typ Number in den Typ String um undkönnen als Konversionen aufgefasst werden.

Tabelle 4. Zahlenformatierungen:

Konversion Objekt De�nitionimplizite Konversion ECMA 48""+value ECMA`${value}`; template strings ECMANumber.toString () Number ECMA 20.1.3.6Number.toString (radix) Number ECMA 20.1.3.6Number.toLocaleString () Number ECMA 20.1.3.4Number.toFixed (digs) Number ECMA 20.1.3.3Number.toExponential (digs) Number ECMA 20.1.3.2Number.toPrecision (prc) Number ECMA 20.1.3.5String(value) String ECMA 21.1.2Number.parseFloat(string) Number ECMA 20.1.2.12Number.parseInt(string) Number ECMA 20.1.2.13valueOf(string) ECMANumber(string) ECMAparseNumber({format:"#,###.00", locale:"us"}); jquery-numberformatter jQuery pluginformatNumber({format:"#,###.00", locale:"us"}); jquery-numberformatter jQuery pluginsprintf('format', inserts);

Das jQuery-Plugin stammt von der Webseite https://github.com/hardhub/jquery-numberformatter. Diesprintf-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-Dokumentbe-arbeitungen ist es wichtig, den Typ von Variablen und anderen JavaScript-Entities zu bestimmen. Dazu gibt esin JavaScript Sprachmittel, Bibliotheksmittel, selbstgeschriebene Tools und schlieÿlich in speziellen Bibliothekenweitere Hilfsmittel.Die fünf (seit ES6 sechs, Symbols) elementaren Datentypen sind relativ einfach analysierbar, auch wenn Pro-grammierern manchmal die Ergebnisse paradox erscheinen (typeof null ≡ object, typeof NaN ≡ number, typeof(ä�, 3), ≡ number, typeof null ≡ object, var a typeof a ≡ unde�ned)Bei Objekten ist zwischen native und host Objekten, also Objekten der eigentlichen Sprache und Objekten ausder Umgebung (dem Browser, der engine) zu unterscheiden. Die host-Objekte werden von einer dritten Instanzerzeugt und bereitgestellt.Implementierungen wird abgeraten, die Freiheit bei Host objects auszunutzen. Verboten sind hier: "undefined","boolean" "function" "number" "symbol" "string" .


Tabelle 5. Typen und Typprüfungen

Typ typeof toType instanceof inunde�ned "undefined" "undefined"

null "object" "null"

Boolean "boolean" "boolean"

true "boolean" "boolean"

Boolean(true) "boolean" "boolean"

new Boolean(true) "object" "boolean"

Number "number" "number"

3.14 "number" "number"

NaN "number" "number"

In�nity "number" "number"

Number.POSITIVE_INFINITY "number" "number"

Number("3.14") "number" "number"

new Number(3.14) "object" "number"

"" "string" "string"

"Hallo" "string" "string"

"new String (1)" "object" "string"

[ Symbol "symbol" 'symbol'

Object (non-callab.) "object" 'object'

new Number(1) "object" "number"

new String(1) "object" "string"

new Date() "object" 'date'

new A() "object" 'a'

Array() "object" "array"

[] "object" "array"

Function (callable Obj.)) "function" "function"

RegEx "object"

Host objects (non-callab.) impl.de�neddocument object htmldocument

window object window

Der Teufel steckt hier leider im Detail: Number(x) konvertiert x in eine Zahl, new Number(x) erzeugt einWrapper-Objekt mit der konvertierten Zahl, was Auswirkungen auf das typeof-Ergebnis hat.typeof ist relativ unspezi�sch (arrays und objects nicht unterschieden) und wird manchmal als irreführend odersogar falsch empfunden (typeof(null), typeof (new Number(3))).Lösung: Angus Croll diskutiert und löst das Problem im Artikelhttp://javascriptweblog.wordpress.com/2011/08/08/fixing-the-javascript-typeof-operator/

Sein Ergebnis ist die folgende Funktion zur Typprüfung:

1 var toType = function(obj){

2 return ({}).toString.call(obj).match (/\s([a-zA-Z]+)/)[1]. toLowerCase ()

3 }

Hier liefert Object.prototype.toString.call(o) oder einfacher ({}).toString.call(o) einen String mitder erwünschten Information, der von einem regexp in eine bearbeitbare Form gebracht wird. Der call verhindert,dass statt des zentralen Object.prototype.toString irgendein überschriebenes toString aufgerufen wird.

5. Rechenausdrücke (expressions)

5.1. Operatoren. Mit leichten Unterschieden orientieren sich die JavaScript-Operatoren an C.

5.2. JavaScript Ausführung. Es gibt in JavaScript drei Arten von Code: globaler Code, eval-Code undFunktionsrumpfcode. Global sind alle Anweisungen auÿerhalb von Funktionen. Ein Stringparameter der eval-Funktion wird immer als globaler Code ausgeführt. Schlieÿlich bildet der Rumpf einer Funktion ohne verschach-telte innere Funktionen Funktionscode (Funktionsrumpfcode � FunctionBody source code). Funktionscodewird einem builtin Function constructor mit allen Argumenten in Form eines Komma-separierten Strings unddarüberhinaus dem source code als zusätzlichem letzten Argument übergeben. Diese beiden Argumente heiÿenFormalParameterList und FunctionBody.

5. RECHENAUSDRÜCKE (EXPRESSIONS) 25

Tabelle 6. Operatorübersicht

Priorität Bezeichnung Operator Assoziativität1 Primary this Name String Array Object (Ausdruck)2 Left hand side . [] () →

new ←call args funct

3 Post�x ++ -- →4 Unary (Prä�x) ++ -- + - ~ ! delete typeof void →5 Multiplicative * / % →6 Additive + - + →7 Bitshift << >> >>> →8 Relational < <= > >= instanceof in →9 Equality == != === !== →10 Binary bitwise & ^ | →11 Binary logical && || →12 Conditional ?: ←13 Assignment = *= /= \%= += -= <<= >>= >>>= &= ^= |= ←14 Comma , →

Bei der Ausführung werden zwei Modi unteschieden: strict und unrestricted. Im strict Modus gibt es strictglobal code, strict eval code und strict function code. strict code wird mit der use strict directive am Anfangexplizit angegeben oder von aufrufendem Code vererbt.Ausführung von JavaScript-Code bewirkt einen neuen execution context, der auf dem stack gespeichert wird. Nurder jeweils letzte oberste EC ist der running EC. Der EC besteht aus lexical envoironment, variable environmentund this-binding.

5.3. Primary. this: thisBinding of current ECname: die jeweils zu einem Namen gehörende Variable wird von der Funktion GetIdenti�erReference mit dendrei Argumenten env (lexical environment od running EC), strict (true, false) und dem name bsestimmt.Konstante (Literale): null true false Zahlen stringsarray initializerobject initializerKlammern

5.4. Left hand side. Feld- und Objektzugri� (property access): a.b a[b]

Objekterzeugung mit new (constructor Aufruf)Funktionsaufruf

5.5. Post�x. ++ -- 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 konver-tiert, 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, dannist das Ergebnis function. Bei host-Objekten ist das Ergebnis in Grenzen implementation-de�ned.void: ein nachfolgender unary expression wird ausgewertet und statt dessen Ergebnis ein unde�ned erzeugt. DerAusdruck 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 konver-tiert, 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,

5.10. cond. ?: wie in C

5.11. Assignment. = *= /= %= += -= <<= >>= >>>= &= ^= |=

5.12. Komma. , wie in C

5.13. Math Objekt. > ecma S 330, 20.2

1 // beispiele/rechne/dice.js: 30 mal wuerfeln

2

3 var i, d;

4

5 for (i = 1; i <= 30; i++)

6 {

7 d = Math.random ();

8 d = Math.floor(1 + d * 6);

9 print (" " + d);

10 }

(http://homepages.uni-regensburg.de/~brf09510/js/beispiele/rechne/dice.js)

5.14. Number Objekt. > ecma 20.1

5.15. Date Objekt. > ecma s. 339, 20.3

1 // beispiele/rechne/heute.js: Datum und Uhrzeit

2

3 var d = new Date ();

4 print ("Heute ist " + d);

(http://homepages.uni-regensburg.de/~brf09510/js/beispiele/rechne/heute.js)

5.16. String Objekt. > ecma s 357, 21.1

5.17. eval. selten aber für js characteristisch;

5.18. 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-testing-with-assert/http://chaijs.com/guide/styles/#assert

6. Anweisungen

zahl = 42if (zahl == 42) autor = "Douglas Adams"alert ("Meldung")

6.1. Blöcke. { Anweisung; Deklaration; ... }

6.2. let- und const-Deklaration. let name, ...;

const name = ...

6.3. var-Deklaration. var name, ...;

6.4. Expression-Anweisung. Rechenausdruck;

6.5. Alternativen. if (expression) statement else statement;

if (expression) statement;

if switch

6. ANWEISUNGEN 27

6.6. Iterationen. do statement while (expression);

while (expression) statement;

forfor (var in object)forEach - eigentlich method

6.7. with. with (object)

6.8. Kleine Anweisungen. Expressions, Deklarationen (var, function),breakcontinuereturnthrowtry catch �nallydebugger'use strict';

KAPITEL 4

Arrays

Felder in JavaScript sind spezielle Objekte. Sie enthalten geordnete numerierte Sammlungen von Daten. DieDaten werden über Indizes zugegri�en. Im Normalfall beginnt die Numerierung mit 0.

1. Erzeugung

Felder können direkt durch Literale erzeugt werden:

1 var a1 = []; // leeres Feld

2 var a2 = [2, 3, 5, 7, 11, 13, ]; // homogenes Feld mit Primzahlen

3 var a3 = [2, "2", "zwei", "two", 2.0]; // inhomogenes Feld

4 var a4 = [, "voll", , "voll"]; // Inhom. Feld mit Luecken

5 var a5 = [[1, 2], [3, 4]]; // zweidimensionales Feld

6 var a6 = [{x:1, y:"value"}, "string", [1, 2], [3, 4]]; // inhom. teils mehrdim. Struktur

Kommas in der Mitte de�nieren fehlende Elemente. Ein abschlieÿendes Komma wird ignoriert.Für Felder gibt es einen Konstruktor, der zum Testen und Erzeugen dienen kann:

1 var a7 = new Array (); // leeres Feld

2 var a8 = new Array (5); // Feld mit 5 undef. Elementen

3 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 Element0 des Feldes a4 ist a4[0]. Die ersten Elemente der obigen Felder haben die Werte unde�ned, 2, 2, unde�ned,[1,2], object, unde�ned, unde�ned und 5.Bei jedem Feld hat das letzte Element die Nummer lenght-1. im Beispiel sind das die Werte unde�ned, 13 (trotzdes Kommas), 2, "voll", [3,4], [3,4], unde�ned, unde�ned und "Hans".

4. Ändern des Feldinhalts

Jedes Feldelement kann jederzeit geändert werden. Dabei wird die Länge bei Bedarf angepasst. Sie ist immerdie Anzahl der Elemente zwischen dem ersten und letzten de�nierten, selbst wenn dieses undefined ist.

1 a1 [100] = 2;

2 a2 [a2.length -1] = undefined;

3 delete a3[a3.length -1];

Nur die erste Anweisung ändert (vergröÿert) die Länge und de�niert ein Element. Die beiden folgenden Anwei-sungen löschen das jeweils letzte Element. Die letzten Element sind jetzt 2, unde�ned, unde�ned.

5. Ändern der Länge

Die Feldlänge kann jederzeit geändert werden. Nicht betro�ene Elemente bleiben dabei erhalten. Bei Bedarfwerden Elemente am Ende undefined.

1 a = [2, 3, 5, 7, 9, ]; // Feld mit 5 Elementen

2 a.length = 3; // Feld mit 3 Elementen

3 a.length = 0; // leeres Feld

4 a.length = 2; // Feld mit 2 undefined Elementen

In strict JavaScript 5.0 kann die Feldlänge vor Änderungen geschützt werden:

29

30 4. ARRAYS

1 Object.defineProperty(a, "length", {writable: false}); //

2 a.length = 0; // a bleibt unveraendert

6. Ererbte Methoden

Viele Feldmanipulationen können durch von Array ererbte Methoden durchgeführt werden.siehe ecma 400, 22.1Beispiele:

1 a = []; // leeres Feld

2 a.push("Eins"); //

3 a.push("Zwei", "Drei"); // Eins Zwei Drei

4 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 inumgekehrter Reihenfolge wieder abgerufen werden können (pop).Wie das push-/pop-Paar funktionieren unshift und shift am Anfang des Feldes. Mehrere Elemente werden beiunshift in der Textreihenfolge angefügt. Dadurch ändert sich die Reihenfolge bei Mehrfacheingaben in unshift.


2 a.unshift("Eins"); // Eins

3 a.unshift("Zwei", "Drei"); // ["Zwei", "Drei", "Eins"]

4 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 einZusatzargument gewählt.


2 a.unshift("Eins"); //

3 a.unshift("Zwei", "Drei"); // ["Zwei", "Drei", "Eins"]

4 print (a.join ());// "Zwei ,Drei ,Eins"

5 print (a.join (" und "));// "Zwei und Drei und Eins"

Das Zerlegen erfolgt mit regular expressions (eigenes Kapitel). Zwei kurze Rezepte:

1 var str = "hallo\nwie\ngeht's?";

2 var a = str.split ("\n"); // zerlegt langen String in Teilzeilen

3 var b = (a[0]).split ("/\s+/"); // zerlegt 1. Zeile in non -space -Teile

Weitere Feld-Funktionen sind concat, reverse, slice, sort, spliceHilfsfunktionen sind isArray, toString, toLocaleString, indexOf, lastIndexOfVerarbeitungsfunktionen 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ällenichtexistierender Feldelemente von unde�ned, null und anderen unterscheiden:

1 for (var i = 0; i < a.length; i++)

2 {

3 if (a [i]) {} // undefined null und non -existent

4 if (a [i] === undefined) {} // undefined und non -existent

5 if (i in a) {} // Feldelement existiert

6 }

JavaScript hat eine eigene Schleife für Felder mit fehlenden Elementen:

1 for (var i in a) {

2 print (a [i]);

3 }

Schlieÿlich kennt EcmaScript 5 eine spezielle Objektschleife

1 a.forEach (function (el, ix, ar) {print ("forEach: " + el); });

eher eine ererbte Funktion), die als Argument eine Funktion mit drei Argumenten verlangt:

1 a9.forEach (function(e,i,a) {print ("" + i + ": " + e);});

9. OBJEKTE, OBJEKTVARIABLE UND REFERENZEN 31

8. Mehrdimensionale Felder

Wie in Java sind mehrdimensionale Strukturen in JavaScript Objekte mit Feldern als Inhalt. Sie müssen vorBenutzung erzeugt werden:

1 n = 5;

2 a = [];

3 for (i = 0; i < n; i++) {

4 a [i] = [];

5 }

6

7 for (i = 0; i < n; i++) {

8 for (j = 0; j < n; j++) {

9 a [i] [j] = 1 / (i+j+1);

10 }

11 }

9. Objekte, Objektvariable und Referenzen

Anders als in C und ähnlich wie in Java sind in JavaScript alle Objektvariable lediglich Referenzen auf dieanonymen Speicherobjekte. Das hat Konsequenzen für Wertzuweisungen und Argumentübergabe in Funktionen.Die Wertzuweisung und ein aktuelles Funktionsargument erzeugen lediglich eine Kopie der Referenz auf dasselbeObjekt. Veränderungen des Zuweisungsziels oder der Funktionsargumente innerhalb der Funktion betre�en alsodie Original-Objekte.

1 if (typeof(print) === "undefined") {

2 print = function (x) { console.log (x); }

3 }

4

5 var a = [ "initial -a", "initial -a", ]; // new object

6 var b = [ "initial -b", "initial -b", ]; // new object

7 var c = a; // new reference to object in reference a

8

9 print (a);

10 print (b);

11 print (c);

12

13 b[0] = "changed -b"; // change object in b

14 c[0] = "changed -c"; // change object in a and c

15

16 print (a);

17 print (b);

18 print (c);

19

20 var d = f (a, b, c);

21

22 print (a);

23 print (b);

24 print (c);

25 print (d);

26

27 function f (x, y, z) {

28 x [1] = "changed -x"; // change object in x (and in global a)

29 // object in y and global b unchanged

30 z = [ "initial -z", "initial -z", ]; // change reference z to new local object

31 return [ "returned -nameless", ]; // new anonymous object (which after return can globally be

stored)

32 }

33

34 /* results with node beispiele/arrays/refs.js:

35 [ 'initial -a', 'initial -a' ]

36 [ 'initial -b', 'initial -b' ]

37 [ 'initial -a', 'initial -a' ]

38 [ 'changed -c', 'initial -a' ]

39 [ 'changed -b', 'initial -b' ]

40 [ 'changed -c', 'initial -a' ]

32 4. ARRAYS

41 [ 'changed -c', 'changed -x' ]

42 [ 'changed -b', 'initial -b' ]

43 [ 'changed -c', 'changed -x' ]

44 [ 'returned -nameless ' ]

45 */

(http://homepages.uni-regensburg.de/~brf09510/js/beispiele/arrays/refs.js)Funktionen, die Objekte bearbeiten, sollten also zwischen drei Fällen unterscheiden:1. Das übergebene Objekt wird in der Funktion nur gelesen und nicht verändert. (call by value)2. Das übergebene Objekt ist vor dem Funktionsaufruf erzeugt worden und soll Ergebnisse der Funktion auf-nehmen. (call by reference). Wird das Objekt nicht vor dem Funktionsaufruf erzeugt, wird lediglich der call-vy-value-Wert unde�ned übergeben, der nur lokal arbeitet.3. Das übergebene Objekt muss in der Funktion manipuliert werden, ohne dass sich die Manipulationen imOriginalobjekt niederschlagen. Die Funktion muss als erstes eine Objektkopie erstellen und die Manipulationenin der Kopie durchführen. (call by value für Objekte)

1 if (typeof(print) === "undefined") {

2 print = function (x) { console.log (x); }

3 }

4

5 var p = [];

6

7 primes (p); // call by reference

8

9 printarray (p); // call by name; don't touch

10

11 var d = diff (p); // call by name; touch copy of p

12

13 print (p);

14 print (d);

15

16 function printarray (x) {

17 x.forEach (function (el, ix, ar) { print (el); });

18 }

19

20 function primes (x) {

21 x [0] = 2;

22 x [1] = 3;

23 x [2] = 5;

24 x [3] = 7;

25 x [4] = 11;

26 }

27

28 function diff (original) {

29 var x = Array (original.length);

30 x = original.slice (0);

31 x.forEach (function (el, ix, ar) { if (ix < ar.length) { ar [ix] = ar [ix+1] - el; } });

32 x.length -= 1;

33 return x;

34 }

(http://homepages.uni-regensburg.de/~brf09510/js/beispiele/arrays/call.js)Prinzipiell gibt es viele Möglichkeiten, ein Feld a zu klonen (ein Duplikat zu erstellen). a.slice(0) ist meistdie schnellste, sogar gegenüber a.slice() ohne Argument.Eine selbstgeschriebene Schleife erreicht meist nicht die Geschwindigkeit von slice:var i=a.length; while (i--) b [i] = a [i];

Die folgende Variante von concat erstellt ebenfalls einen Klon:var clone = [].concat(a);

ES6 ermöglicht die neue Variante clone = [...a];

Alle bisherigen Methoden erstellen nur eine �ache Kopie; wer eine tiefe Kopie braucht, muss Jason verwenden:var clone = JSON.parse(JSON.stringify(a));

Die folgende Webseite vergleicht mehrere Klonvarianten in einem Clientbrowser mit eingeschalteten JavaScript:https://jsperf.com/cloning-arrays/3

KAPITEL 5

Funktionen

Funktion: Block von JavaScript-Code für eine de�nierte Aufgabe, der unter einem Namen oder einer anderenBezeichnung aufgerufen (call, invocation) und ausgeführt (execution) wird.Wichtige Begri�e: Funktion, Deklaration, Aufruf, Parameter, Argumente, Kontext, Konstruktor, Closure

1. Funktionsde�nitionen

Es gibt etwa zwei Möglichkeiten der Funktionsde�nition: bei einem function de�nition expression (fde) wirddie Funktion als Objekt in einer Variablen gespeichert, bei einem function declaration statement(fds) wird dieFunktion implizit einem Variablennamen zugewiesen. In diesem Fall gilt die Funktion als im ganzen Scopede�niert und kann auch schon vor der fds aufgerufen werden - anders als bei einer fde, wo die Variable erst abder Wertzuweisung einen Funktionswert hat.Es gibt benannte, anderweitig bezeichnete und sogar anonyme (Einmal-)Funktionen.Funktionsde�nitionen gelten als Ausdrücke mit oder ohne Namen, die auch in Variablen gespeichert werdenkö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 Scopegelten, nicht in Anweisungsblöcken.Noch einmal: fds-Funktionen müssen nicht vor ihrer ersten Verwendung deklariert werden, sondern gelten inihrem scope als deklariert.Da ein $-zeichen als Bestandteil eines Namens erlaubt ist, können auch Funktionsbezeichnungen $-Zeichenenthalten. 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 zentraleFunktionen 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 undeinem folgendem runden Klammernpaar aufgerufen.Ein möglicher Returnwert wird anschlieÿend statt des Aufrufs eingesetzt.Weitere Möglichkeiten der Funktionsaufrufs sind der Methodenaufruf, der Konstruktoraufruf und der call/apply-Aufruf.

3. Parameter und Argumente

Die Parameter einer Funktion werden in Klammern aufgeführt. Für diese Parameter werden beim Funktions-aufruf Argumente eingesetzt. Die Zuordnung erfolgt durch die Reihenfolge der Aufzählung.function f (pars) { code, der pars benutzt }

F = function (pars) { code, der pars benutzt }

Funktionen werden mit ihrem (einem ihrer) Namen und der aktuellen Argumentliste aufgerufen. Die aktuellenArgumente werden den typlosen Parametern zugewiesen.Die Argumentanzahl bei De�nition und Aufruf ist jeweils beliebig. Zuwenig aktuelle Argument führen zu unde-�nierten Parametern. Zuviele Argumente werden ignoriert.f (p); // rufe fds-Funktion f ausF (p); // rufe fde-Funktion in Variable F ausf (); // zuwenig Argumente: pars ist unde�nedf (p1, p2); // p2 wird vorläu�g ignoriertParameter und Argumente dürfen gleich heiÿen; die Regeln werden davon nicht beein�usst.Alle Argumente, auch die nicht in Parametern gespeicherten, stehen in einer feldähnlichen Objektvariablenarguments zusätzlich zur Verfügung. Diese Funktionsvariable bietet einen alternativen Argumentzugri� für alleArgumente mit und ohne Parametern.

33

34 5. FUNKTIONEN

Wie in JavaScript allgemein üblich, gibt es keinerlei Typprüfung; es wird jeder Typ übergeben und eventuellnotwendige Typprüfungen dem Progammierer überlassen.Jeder gute Programmierer schreibt in einer JavaScript-Funktion am Anfang Code für eine aus-führliche exakte Analyse der Typen aller tatsächlich vorhandenen Argumente für den vorgege-benen Zweck der Funktion.Dabei sind der Operator typeof, die Funktion toType, sowie weitere Spezialabfragen wie Array.isArray nützlich.Falls die Typerwartungen einer Funktion nicht erfüllt sind, sollte man nicht mit Fehlerende oder Exceptionsreagieren, sondern immer mit einem unde�ned Ergebnis, das vom Aufrufer einfach verarbeitet werden kann undnicht zu problematischen Programmzuständen, wie dem Einfrieren einer Webseite, führt.

4. return-Wert

return beendet eine Funktion mit oder ohne Ergebnis. Ein fehlendes Ergebnis ist unde�ned.Aufruf: var res = f (args)

5. Typanalyse von Parametern

Die Bedeutung von Parameteranalysen in JavaScript wurde oben schon herausgehoben. Hier folgt eine Übersichtder wichtigsten Methoden:1. typeof (x): "unde�ned" "object"2. instanceof3. Angus Croll: toTypehttps://javascriptweblog.wordpress.com/2011/08/08/fixing-the-javascript-typeof-operator/

4. Array.isArray ()5. Object.prototype.isPrototypeOf()

6. Ein erstes Beispiel

1 // progs/max.js: functions and arguments in js

2 // type analysis of function parameters

3 // useful: compute reductions (max , average and variance)

4

5 function max () {

6 var max = Number.NEGATIVE_INFINITY;

7 for (var i = 0; i < arguments.length; i++) {

8 if (arguments [i] > max) max = arguments [i];

9 }

10 return max;

11 }

12

13

14 print (max (1, 2, 3));

15 print (max (2, 3, 1));

16 print (max (3, 2, 1));

17 print (max (3.14 , 2.71, -3, -25, Math.exp (-1)));

18 print (max (3.14 , 2.71, -3, "25", Math.exp (-1))); // works because > converts to number

19 print (max (3.14 , 2.71, -3, "25", Math.log (-2), Math.exp (1)));

20

21 print ();

22

23 print (varianz (1, 2, 3).mw);

24 print (varianz (2, 3, 1).mw);

25 print (varianz (3, 2, 1).vr);

26 print (varianz (3.14 , 2.71, -3, -25, Math.exp (-1)).mw);

27 print (varianz (3.14 , 2.71, -3, -25, Math.exp (-1)).vr);

28 print (varianz (3.14 , 2.71, -3, "25", Math.exp (-1)).mw); // does't work because + is string

29 print (varianz (3.14 , 2.71, -3, "25", Math.log (-2), Math.exp (1)).mw); // " log (-2) == NaN

30

31 var res = varianz1 (3.14 , 2.71, -3, "25", Math.log (2), Math.exp (1));

32 print (res.mw, " ", res.vr, " ", res.sd, " ", res.n); // works because varianz1 is better

33

34 // korrigierte Stichprobenvarianz

35 function varianz () {

36 var sum = 0;

7. FUNKTIONEN ALS PARAMETER 35


38 sum += arguments [i];

39 }

40 var mw = sum / arguments.length;

41 var varianz = 0;


43 varianz += sqr (arguments [i] - mw);

44 }

45 varianz /= (arguments.length - 1);

46 var res = new Object ();

47 res.mw = mw;

48 res.vr = varianz;

49 return res;

50 }

51

52 // korrigierte Stichprobenvarianz

53 function varianz1 () {

54 var sum = 0;

55 var n = 0;


57 if (typeof arguments [i] === 'number ' && Number.isFinite (arguments [i])) {

58 sum += arguments [i];

59 n++;

60 }

61 }

62 var mw = sum / n;

63 var varianz = 0;


65 if (typeof arguments [i] === 'number ' && Number.isFinite (arguments [i])) {

66 varianz += sqr (arguments [i] - mw);

67 }

68 }

69 varianz /= (n - 1);

70 var res = new Object ();

71 res.mw = mw;

72 res.vr = varianz;

73 res.sd = Math.sqrt(varianz);

74 res.n = n;

75 return res;

76 }

77

78 function sqr (x) {

79 return x * x;

80 }

(http://homepages.uni-regensburg.de/~brf09510/js/progs/max.js)http://javascriptlint.com/online_lint.php

Es gibt kein falschen Typen; Wenn gewünscht, Typprüfungen in der Funktion7. Funktionen als Parameter

Da Funktionen in Variablen gespeichert werden können, ist es in JavaScript völlig problemlos, Funktionenauch als Parameter zu verwenden. Sie werden dann innerhalb der Funktion aufgerufen. Das ist ein häu�ger undnützlicher Mechanismus, um variable Tätigkeiten zu beschreiben und irgendwoanders im Programm ausführen zulassen. Anwendungen �nden sich in vielen Bibliotheksfunktionen, z.B. wenn Feldelemente aus Feldern bearbeitetwerden sollen.So ist der Parameter der Bibliotheksfunktion forEach für Felder eine Funktion, die Feldelemente des Feldesbearbeitet. Ihre Argumente sind das Feldelement el, sein Index ix im Feld und das ganze Feld ar.var a = []; . . .a.forEach(function(el,ix,ar){print(ix, el);});

In event-driven Programmen werden für verschiedene Ereignisse sog. call-back Funktionen de�niert, die von derengine bei Eintreten der events aufgerufen werden. Beispiele: nodejs bei Tastatureingaben, alle Benutzer- undSystemaktionen im clientside JavaScript.

1 // beispiele/function/map.js

36 5. FUNKTIONEN

2

3 if(print === undefined){function print(){var s="",i,t;for(i in arguments){t=arguments[i];s+=t+"

"}console.log(s)}}

4

5 var a = ["anna", 2, 3, "peter", 5, ];

6

7 var b = mapNumbers (function (x) { return x*x;}, a);

8

9 print (a);

10 print (b);

11

12 function mapNumbers (f, a) {

13 var b = [];

14 if (Array.isArray (a)) {

15 a.forEach

16 ( function (el, ix, ar) {

17 if (typeof el === "number") {

18 b.push (f (el));

19 } else {

20 b.push (el);

21 }

22 }

23 );

24 }

25 return b;

26 }

(http://homepages.uni-regensburg.de/~brf09510/js/beispiele/function/map.js)In diesem Beispiel wird eine Quadrat-Funktion an die Funktion map übergeben, die ihrerseits die übergebeneFunktion in der Arbeitsfunktion von forEach aufruft. Der Aufruf der Quadrat-Funktion erfolgt also letztlicherst in forEach. Die in forEach aufgerufene Arbeitsfunktion braucht trotzdem Zugri� auf die Variable b vonmap. Hier wird ein wesentlicher Mechanismus von closures sichtbar.

8. De�nition (die zweite)

Mit dem Funktionskonstruktor wird eine Funktion durch Angabe ihrer Bestandteile in Stringform de�niert:var f = new Function ("a", "b", "return a+b;");

Allgemeiner:var f = new Function (p1, p2, ... body);

Wie in anderen Sprachen wurden λ-Funktionen in JavaScript unter dem Namen arrow function expression (afe)eingeführt:(p1, p2, ... ) => { body }

Bei genau einem Argument dürfen die runden Klammern entfallen.p => { body }

Bei genau einem Rechenausdruck als Anweisung dürfen die geschweiften Klammern entfallen.(p1, p2, ... ) => expression

In diesem Fall muss ein im Ausdruck erzeugtes Objekt mit runden Klammern versehen werden:(p1, p2, ... ) => ({key: value, ...})

9. Aufruf (die zweite) und this

Eine Funktion kann mit vier Varianten aufgerufen werden: als Funktion, als Methode, als Konstruktor und mitcall/apply.Jeder aufgerufenen Funktion wird ein Objekt zugeordnet. Dieses Objekt wird innerhalb der Funktion mit thisbezeichnet. Die Kurzsprechweise bezeichnet vor allem die Bedeutung von this innerhalb der aufgerufenen Funk-tion.Bei einer Funktionsde�nition wird noch kein Code ausgeführt. Funktionscode wird erst nach einem Aufruf einerFunktion aktiv.

9.1. Direkte Funktionsaufrufe. Eine Funktion wird dem globalen Objekt zugeordnet. Innerhalb derFunktion bezeichnet this das globale Objekt.

1 // beispiele/function/max.js

2

9. AUFRUF (DIE ZWEITE) UND THIS 37


"}console.log(s)}}

4

5 function max (a, b) {

6 // this is rarely used in such functions

7 print ("tx", this.xxx);

8 print ("ty", this.yyy);

9 if (a > b) return a;

10 return b;

11 }

12

13 print ("m", max (2, 3));

14 print ("m", max (2, -3));

15

16 var xxx = "hallo";

17

18 print ("m", max (2, -3));

(http://homepages.uni-regensburg.de/~brf09510/js/beispiele/function/max.js)

9.2. Methodenaufrufe. Eine Funktion ist property des ihr zugeordneten Objekts. Ihr Aufruf erfolgtdurch diese property des Objekts. Innerhalb der Funktion bezeichnet this das aufrufende Objekt.

1 // beispiele/function/kreis.js

2


"}console.log(s)}}

4

5 var k = {

6 x: 1,

7 y: 2,

8 r: 3,

9 area: function () {

10 return this.r * this.r * Math.PI;

11 }

12 };

13

14 print (k.area ());

15

16 k.r = 25;


(http://homepages.uni-regensburg.de/~brf09510/js/beispiele/function/kreis.js)

9.3. Konstruktoraufrufe. Die Funktion wird mit new aufgerufen und erzeugt das zugeordnete Objekterst neu. Die Hauptaufgabe der Funktion ist die Gestaltung dieses neuen Objekts this.

1 // beispiele/function/ctor.js

2


"}console.log(s)}}

4

5 function kreis(x, y, r) {

6 this.x = x;

7 this.y = y;

8 this.r = r;

9 this.area = function () {

10 return this.r * this.r * 3.14;

11 }

12 }

13

14 kreis.prototype.peri = function () {

15 return 2 * this.r * 3.14;

16 }

17

18 var k = new kreis (1, 2, 3);


38 5. FUNKTIONEN

20 print (k.peri ());

(http://homepages.uni-regensburg.de/~brf09510/js/beispiele/function/ctor.js)

9.4. call und apply. Jede Funktion ist auch ein Objekt mit den beiden Methoden call und apply, diediese Funktion aufrufen. Das erste Argument von call/apply ist ein explizit bestimmbares Objekt. Bei call sinddie nachfolgenden Argumente die Aufrufargumente der Funktion, bei apply ist das zweite Argument ein Feldmit diesen Argumenten.

10. Funktionen als Objekte

10.1. Properties von und in Funktionen. Funktionen werden in JavaScript als Objekte aufgefasst.Ihr mit typeof ermittelter Typ ist "function". fds haben die Stellung von Funktionsliteralen, die in Funkti-onsvariablen gespeichert werden können. Die JavaScript-engine erzeugt aber auch hier sofort das zugehörigeFunktionsobjekt.Als Objekte haben Funktionen Properties und Methoden. Einige haben wir schon kennengelernt. Sie sind imStandard im Functionobjekt beschrieben (ecma 19.2).Auÿerhalb der Funktion können die folgenden Properties benutzt werden:Methoden: apply, bind call isGenerator toSource toStringFelder: length name arguments (arity) prototype length nameInnerhalb einer Funktion existieren Informationen über die Aufrufumgebung:arguments (arity) caller length name displayName

11. 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

12. 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 zugegri�en 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 strict";

3 function print (x) { console.log (x); }

4 function pr (n) {

5 var s = "Hallo " + n;

6 var prIt = function () { print (s); }

7 prIt ();

8 }

9 pr ("Peter");

10 pr ("Rita");

11 }());

(http://homepages.uni-regensburg.de/~brf09510/js/beispiele/closures/hallo1.js)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.

14. BEISPIELE 39

1 (function () {

2 "use strict";

3 function print (x) { console.log (x); }

4 function pr (n) {

5 var s = "Hallo " + n;

6 var prIt = function () { print (s); }

7 return prIt

8 }

9 var p = pr ("Peter");

10 // Mit p kann jetzt die Funktion prIt aufgerufen werden

11 // Die Variable s existiert also noch:

12 p ();

13 // Das pr-Ergebnis kann auch direkt aufgerufen werden:

14 (pr ("Rita")) ();

15 // Die Variable s existiert also sogar noch zweimal:

16 p ();

17 }());

(http://homepages.uni-regensburg.de/~brf09510/js/beispiele/closures/hallo2.js)

13. Funktionen und Objekte

Funktionen sind Objekte mit Prototyp, der sogar prototype heiÿt.Methoden: Funktionen, gespeichert in propertyMethodenverkettung - method chaining methode, die Objekt zurückgibt.Prototyp de�niert call() und PropertiesFunction() Konstruktor kann z.B. dynamische Funktionen erzeugen.var summe = new Function ("x", "y", "return x+y;");Andere Schreibweise: Funktionsliteralvar Summe = function (x, y) return x+y;Wertzuweisung einer Funktion a eine Eigenschaft eines Objektes: Funktion wird zur Methode.In der Funktion ist dann this das Objekt dessen Eigenschaft sie ist.array Arguments[] enthält die Argumente, auch die ev. überzähligen.

14. Beispiele

KAPITEL 6

Objekte

Jeder nicht elementare Datentyp (unde�ned, null, Boolean, Number, String) in JavaScript ist ein Objekt. Dasgilt auch für Felder und Funktionen. Objekte übernehmen die Leistung von C-Strukturen genauso, wie die vonKlassen in der objektorientierten Programmierung.Objekte sind zunächst ungeordnete Sammlungen von Properties, die jederzeit ergänzt, gelöscht und modi�ziertwerden können.Properties sind entweder Datenproperties oder Accessproperties. Alle Properties werden mit einem String (key)bezeichnet, der häu�g spziell ein legaler JavaScript-Name ist (Beginn mit $, _ Unicode-Buchstabe, Fortsetzungzusätzlich mit Zi�ern und speziellen Sonderzeichen). In diesem Spezialfall kann der key ohne Gänsefüÿchngeschrieben werden.Datenproperties bestehen aus Namen (key) und Wert, sowie Attributen.Accessproperties bestehen aus getter, setter und Attributen.Die Werte (value) einer Property sind von beliebigem Typ. Sie können auch Objekte, Felder oder Funktionensein. Das sichert den Anschluÿ an die objektorientierte Programmierung. Neben Namen und Wert haben dieProperties zusätzliche Attribute (writable, enumerable, con�gurable), die dem Programmierer eine genauereSteuerung des Zugri�s ermöglichen.Felder sind spezielle Objekte, deren Properties zusätzlich geordnet und indiziert sind. Der Index eines Feldele-mentes dient als key.Objekte können wie in C als statische struct de�niert und verwendet werden. Objekte können wie in JavaMethoden enthalten oder als Instanzen dynamischer Klassen verwendet werden. Objekte dienen aber auch wiein 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 // progs/objs.js

2

3 if (print === undefined) { function print () { var s, i; s = ""; for (i = 0; i < arguments.

length; i++) s += arguments [i]; console.log (s); } }

4 if (quit === undefined) { function quit () { process.exit(); } }

5

6 (function () {

7 "use strict";

8 print ("Hallo");

9

10 var e = {}; // leeres Objekt

11 var k = { x:2, y:3, r:1, }; // Datenobjekt (Kreis)

12 var k1 = { x:2, y:3, r:1, area: function () { return this.r*this.r*3.14; }, };

13 // Objekt mit Methoden (Kreis)

14 var s = { "hans":undefined , "peter":undefined , "fritz -johann":undefined , };

15 // Stringsammlung (nur keys wichtig)

16 var s1 = { "leo":"089 -27881723", "julian":"0044 -376 -267398", "wilhelm -jakob":"0941 -26738", };

17 // associative array (Telefonliste)

18 pr (e);

19 pr (k);

20 pr (k1);

21 print (k1.area());

22 pr (s);

23 pr (s1);

24

25 quit();

26 }());

27

28 function prkeys (x) {

29 var keys = Object.keys (x);

30 print (keys);

41

42 6. OBJEKTE

31 }

32

33 function prdata (x) {

34 var keys = Object.keys (x);

35 for (var e in keys) {

36 print ("" + e + ":" + keys[e] + ":" + x[keys[e]]);

37 }

38 }

39

40 function pr (x) {

41 print (x);

42 prkeys (x);

43 prdata (x);

44 }

(http://homepages.uni-regensburg.de/~brf09510/js/progs/objs.js)

1. Erzeugung von Objekten

Objekte können direkt durch Literale erzeugt werden.

1 var o1 = {};

2 var o2 = {x: true , y: 1, z: "Hallo", o: o1};

3 var o3 = {};

4 o3.p = "Hallo";

5 var o4 = {name: "Mayer", vorname: "Peter", gdatum: new Date (2001 , 3, 30), }; // 0: Januar ,

3: April

Objekte können durch einen Funktionsaufruf erzeugt werden Objekterzeugende Funktionen heiÿen manchmalFactories. Funktionen, die nur der Objekterzeugung dienen, werden Konstruktoren genannt und müssen mitder new-Anweisung aufgerufen werden. Die enstandenen Objekte bekommen durch ihren Konstruktor vomProgrammierer de�nierte Grundproperties und ihren Kontruktor als Prototyp.Beispiel für eine Factory:

1 function k1 () { var r={}; r.m = "Hallo"; return r; } //

2 var o = k1 (); //

Mit new kann (und sollte) ein Konstruktoraufruf explizit formuliert werden:

1 function k2 () { this.m = "Hallo"; } //

2 var o = new k2 (); //

Viele JavaScript-Objekte verfügen über Konstruktoren:

1 var o5 = new Object ();

2 var o6 = new Array ();

3 var o7 = new Date (2017 , 0, 1);

4 var o8 = new RegExp ("js");

Ein schöneres Konstruktor-Beispiel für Punkte in der Ebene:

1 var o9 = new point (2, 3);

2

3 function point () {

4 this.x = 0;

5 this.y = 0;

6 if (arguments.length >= 1) { this.x = Number (arguments [0]); }

7 if (arguments.length >= 2) { this.y = Number (arguments [1]); }

8 }

2. Prototypen von Objekten

JavaScript benutzt statt Vererbung ein Prototyp-Konzept. Jedes Objekt hat ein zugeordnetes anderes Objektals Prototyp. Das gilt auch für die Prototyp-Objekte selbst, so dass eine Kette von Prototyp-Objekten entsteht.Diese Kette endet mit unde�ned oder null als letzten Prototypobjekt einer Kette. Die Properties der direktenoder indirekten Prototypen können in jedem Objekt mitverwendet werden.Alle Objekt-Literale haben dasselbe Prototyp-Objekt, nämlich Object.prototype. Dieses Objekt hat selbstkeinen Prototyp mehr, sein Prototyp ist unde�ned.Objekte, die mit new von einem Konstruktoraufruf erzeugt werden, haben den Wert der prototype-Propertyder Konstruktorfunktion als Prototyp. So haben mit new Object(), new Array(), new Date(), new RegExp()

4. ACCESSORS 43

oder new k2() erzeugte Objekte jeweils Object.prototype, Array.prototype, Date.prototype, RegExp.prototypeoder k2.prototype als Prototyp-Objekt. Als Konsequenz haben mit new Object() erzeugte Objekte denselbenPrototyp, wie Objektliterale.Prototypen existieren in jedem Objekt explizit oder implizit. In Konstruktoren sind die Prototypen explizit in derProperty .prototype gespeichert. In anderen Objekten existiert engine-abhängig eine Property (z.B. _proto_),die dem Programmierer nicht zur Verfügung steht.Die direkt in einem Objekt gespeicherten Properties heiÿen objekteigene (own) properties. Properties ausPrototyp-Objekten sind geerbte Properties.Die Funktion Object.create erzeugt ein neues Objekt, bei dem explizit der Prototyp als erstes Argument ange-geben wird.

1 var o10 = Object.create ({x:0, y:0, }); // Punkt

2 var o11 = Object.create ({x:0, y:0, }, {r:{ value :1}}); // Kreis

3 var o12 = Object.create (null); // Objekt ohne Prototyp

In den ersten beiden Beispielen werden die Properties x und y geerbt, im zweiten Beispiel kommt zusätzllichdie own property r dazu.Mit Konstruktoren werden Prototyp-Properties wie folgt gespeichert:

1 function Circle (r) { if (isFinite (r)) { this.r =r; } else { this.r = 1; } }

2 Circle.prototype.x = 0;

3 Circle.prototype.y = 0;

4

5 var c1 = new Circle ();

6 var c2 = new Circle (2);

7 print (c1.x, c1.y, c1.r);

8 print (c2.x, c2.y, c2.r);

3. Manipulieren der Objekt-Properties

Objekt-Properties sind Werte, die über ihren Namen verwendet werden. Der Name ist ein String, der ohneGänsefüÿchen geschrieben werden kann, wenn er den JavaScript-Namensregeln folgt. Er wird mit einem Punktan den Objektnamen angefügt. Diese Schreibweise kann kaskadiert werden, wenn der Property-Wert wieder einObjekt ist.Der Property-Namens-String kann auch als Feldindex geschrieben werden.

1 var o = { get phi () { return Math.atan2 (this.y, this.x); } };

2 // seltsam unvollständiges Objekt mit getter

3 pr (o); // schau mer's mal an, phi ist NaN

4 o.x = 3; // x trifft ein

5 o["r"] = 5; // soll das ein vielleicht Kreis werden?

6 o.area = function () { return Math.PI * this.r * this.r; }

7 // property function area()

8 pr (o);

9 o.y = 4; // langsam wird's komplett

10 pr (o);

11

12 Object.defineProperty (o, "R", {

13 set: function (d) { var D = this.R; D = d/D; this.x *= D; this.y *= D; },

14 get: function () { return Math.hypot (this.x, this.y); },

15 enumerable: true // default: enumerable = configurable = false

16 }); // neuer accressor R

17 pr (o);

18 o.R = 1; // und sein Test

19 pr (o);

20 delete o.r; // r ist vielleicht unnötig

21 pr (o);

22 // delete o.R; // unmöglich , da R nicht configurable

23 delete o.phi;

24 pr (o);

(http://homepages.uni-regensburg.de/~brf09510/js/progs/objsman.js)

4. Accessors

44 6. OBJEKTE

1 // progrs/acc.js

2 function point(x, y) {

3 this.x = x;

4 this.y = y;

5 }

6

7 point.prototype = {

8 get r() {

9 return Math.hypot (this.x, this.y);

10 },

11 set r(r) {

12 let rold = Math.hypot (this.x, this.y);

13 let f = r / rold;

14 this.x *= f;

15 this.y *= f;

16 },

17 get phi() {

18 return Math.atan2 (this.y, this.x);

19 },

20 set phi(p) {


22 this.x = rold * Math.cos (p);

23 this.y = rold * Math.sin (p);

24 },

25 get phid() {

26 return 180 * Math.atan2 (this.y, this.x) / Math.PI;

27 },

28 set phid(p) {

29 p *= Math.PI / 180;


31 this.x = rold * Math.cos (p);

32 this.y = rold * Math.sin (p);

33 },

34 };

35

36 let p = new point (3, 4);

37 print (p, p.x, p.y, p.r, p.phi , p.phid);

38 p.r = 10;


40 p.phi = 1;


42 p.phid = 60;


JavaScript-Objekte können neben direkten Properties auch berechenbare Properties haben, die genauso, wiedirekte Properties verwendet werden. Sie werden im Objektprototyp als getter- und setter-Funktionen mit demProperty-Namen de�niert. Bei Benutzung können ein oder mehrere direkte Properties geändert werden.(http://homepages.uni-regensburg.de/~brf09510/js/progs/acc.js)

createprototypegetter setterVererbungFehlerdeletehasOwnPropertyenumerate properties and iterate for inproperty attributesobject attributes prototype class extensibkleJSON serializeObject methods thString toLocaleString toJSON valueOfKlassen: nicht explizit; ähnliche ObjekteErforschung unbekannter Objekte (die von anderen, vielleicht nicht-selbstgeschriebenen Programmteilen erstelltwurden):

4. ACCESSORS 45

for (var key in o) var val = o [key];o.hasOwnProperty("key")if ("key" in o)Object.keys und array.forEach gibt es seit ES5.Object.keys(o).forEach(function(key)console.log(key);)

KAPITEL 7

Exceptions

throw catch �nally Error

47

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 de�nieren Produk-tionen, Wiederholungen und Alternativen.RE-Grammatik: ES9 5.1.2, A8, B1.4IsRegExp: ES9 7.2.8Literale: ES9 11.8.5, 12.2.8Constructor: ES9 18.3.21Strings: ES9 21.1RegExp: ES9 21.2, B2.5

2. De�nition

De�nition eines RE:var pattern = new RegExp ("RE"); Konstruktorde�nition (auch mit Stringvariablen)var pattern = new RegExp ("RE", "gim");

var pattern = /RE/ direkte De�nition (ES9 11.8.5)var pattern = /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' ]


[ 'i', index: 12, 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

49

50 8. REGULAR EXPRESSIONS

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 Tre�er von Muster p in String s[ 'i', 'e', 'e', 'i', 'e', 'o', 'a', 'a' ]

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 Schreibweisewerden sie an den schlieÿenden Schrägstrich angehängt.g: globale Suche (nicht nur der erste Tre�er)i: case-insensitive Suchem: mehrzeilige Suche statt Stringsuche (ändert ^ und $)s: dotAll �ag: ein dot (.) matcht druckbare Zeichen. Mit dotAll match er auch Newlines, also wirklich alles.u: full Unicode: surrogate pairs werden korrekt behandelt, sonst nur BMP (base multilinugual plane)y: Sticky: Der match muss an einer durch lastIndex festgelegten Stelle im String erfolgen(Die Perlmodi�kationen 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 Zirkum�ex\. sucht Punkte

Eckige Klammern de�nieren Zeichenklassen und ihre Komplemente.[aeiou] sucht englische Vokale[abc] sucht die ersten drei Kleinbuchstaben[^abc] sucht alles andere[a-fA-F] sucht Sedezimalzi�ern[-^] sucht Minuszeichen und Zirkum�ex

Merke: − als Bindestrich steht immer als erstes.^ als Zirkum�ex 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-Zi�er ([0-9_])\D

Spezielle Positionen im String werden durch die Symbole ^$ bezeichnet.^ Stringanfang oder Zeilenanfang$ Stringende oder Zeilenende

1Byte order mark, Unicode space separator, ES 7.2, 7.3

9. REGEXP-PROPERTIES 51

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 minimalFragezeichen hinter Wiederholungszeichen?? 0, 1+? ≥ 1*? ≥ 0{n}? n-mal{n,}? ≥ n{n,m}? n ≤ x ≤ m

Vorsicht:var s = "Drei Chinesen"

var pg = /[aeiou]+/ig greedyvar pn = /[aeiou]+?/ig non-greedys.match(pg) �ndet eis.match(pn) �ndet e und i getrennt

7. Alternativen

| trennt AlternativenAlternativen werden von links nach rechts ausgewertet. Also wirkt a|ab anders als ab|aIm ersten Fall ist schon a im String "ab" ein Tre�er.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 Tre�ern können die Teilmuster getrenntverwertet werden.\i (i > 0) verweist auf den Teiltre�er 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) Tre�er: zweimal ei"Drei Chinesen".match(p) kein Tre�er: erste Vokalgruppe ei wiederholt sich nicht

9. RegExp-Properties

p.source Quell-String des RegExpp.lastIndex Stringposition, wo die nächste Suche beginnen mussp.dotAll() true, falls s-�ag gesetztp.flags() string with �ag-Wertenp.global true, falls g-�ag gesetztp.ignoreCase true, falls i-�ag gesetztp.multiline true, falls m-�ag gesetztp.sticky true, falls y-�ag gesetztp.unicode true, falls u-�ag gesetzt

52 8. REGULAR EXPRESSIONS

10. RegExp-Methoden

p.compile() deprecatedp.exec(s) Match mit Array-Resultatp.test(s) Suche mit boolean-Resultatp.toSource() not standardp.toString() Regular expression object als Stringp.match(s) all matches as arrayp.matchAll(s) all matches as iteratorp.replace(s, r) replace matches in s with rp.search(s) Index of �rst match or -1p.split(s) split s to partial string in an array

11. String-Methoden

s.endsWith()

s.includes()

s.indexOf()

s.match()

s.search()

s.split()

s.startsWith()

12. 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

13. Übersicht

/body/�agsAssertion | Atom | Atom Faktor

Atom Bedeutung

Unicode auÿerˆ$\. ∗ +?()[] { } |. Unicode auÿer neuer Zeile\0 \u0000\n n > 0 nte gespeicherte Gruppe\f\n\r\t\v\cL SteuerzeichenˆL\xxx Codepoint xx16\uxxxx Codepoint xxxx16\̂ \$ . . . \| verbotene Unicodes\ < ZWJ > Unicode zero width joiner\ < ZWNJ > Unicode zero width non joiner\d\s\w Zi�er/Leerraum/Wort\D\S\W keine Zi�er/Leerraum/Wort[Menge] Zeichenmenge [aeiou][Bereich] Zeichenbereich [A−Z][̂ ] Komplementmenge [̂ aeiou][−ˆ] Menge aus − undˆ(Gruppe ) zu speichernde Gruppe(?:Gruppe ) Gruppe ohne Speicherung

Assertion Bedeutung

ˆ String- oder Zeilenanfang$ String- oder Zeilenende\b Wortgrenze vor Position\B Nicht-Wortgrenze vor PositionA(?=group ) matches A only when followed by groupA(?!group ) matches A only when not followed by group(?<=group )A matches A only when preceded by group(?<!group )A matches A only when not preceded by group

Faktor non-greedy Bedeutung

∗ ∗ ? 0 ≤ x < ∞+ +? 1 ≤ x < ∞? ?? 0 ≤ x ≤ 1{n} {n}? x = n{n,} {n,}? n ≤ x < ∞{n,m} {n,m}? n ≤ x ≤ m

Flag Property Bedeutung

g global nach Tre�er weiteri ignoreCasem multiline ˆ$ Zeilen- statt Stringbezogens dotAll der dot (.) matcht auch NLu unicode Unicode incl surrogate pairsy sticky matcht exakt bei lastIndex

Variable Programm Bedeutung

\1 r.exec(s)[1] Tre�er Gruppe 1\2 r.exec(s)[2] Tre�er Gruppe 2. . .\13 r.exec(s)[13] Tre�er Gruppe 13. . .

/U

W

W

�

KAPITEL 9

Module

import, export, Moduldateien

53

KAPITEL 10

Zusammenfassung des strict JavaScript

1. Umschalten

Ein ganzes Programm oder eine Funktion (und deren innere Funktionen) kann im strict mode ausgeführt werden.Die Anweisung ist ein String-Ausdruck:"use strict";

Der strict mode ist aktiv, wenn1. global oder in einer Funktion der sog. directive prologue (die Folge von expression statements am Anfang)die "use strict"; Anweisung enthält.2. immer in Modulen3. immer in class

2. Einschränkungen im strict mode

Unde�nierte Variable sind verboten und lösen exceptions aus. Insbesondere werden keine globale Variable mehrdurch Tippfehler erzeugt.In erkannten Fehlersituationen wird immmer eine Exception ausgelöst.arguments und Funktionsargumente sind verschiedene Variable. (Ändern der Werte von arguments ändert nichtmehr die benannten Argumente!). Weiter sind arguments.caller und arguments.callee verboten.Funktionsdeklarationen (fds) in Blöcken cind verboten. Funktionen in Blöcken müssen in Variablen als fdesgespeichert werden.this in normalen Funktionen ist unde�ned (und nicht das globale Objekt).with ist komplett verboten.eval ist reserviert.Weitere reservierte Wörter: implements, interface, let, package, private, protected, public, static, yield.Variable und Funktionen können nicht mehr entfernt werden.var x; function f...; delete x; delete f;

Oktalzahlen und Escape-zeichen sind verboten.read-only kann nicht überschrieben werden.getter können nicht überschrieben werden.undeletable kann nicht gel�scht werden. (delete Object.prototype;)

55

KAPITEL 11

JavaScript: Probleme und Seltsamkeiten

1. eval

JavaScript kann zur Laufzeit einen beliebigen String freier Herkunft, also auch aus Eingabefenstern einer Web-seite, als JavaScript-Code betrachten und 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

2. Seltsame Ergebnisse

1 java -jar rhino -1.7.9. jar

2 Rhino 1.7.9 2018 03 15

3 js> []+[];

4 ''

5 js> []+{};

6 [object Object]

7 js> {}+[];

8 0

9 js> {}+{};

10 NaN

11 js> Array (16).join('wat' - 1) + ' Batman '

12 NaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaN Batman

13 js>

1 node.exe

2 > []+[];

3 ''

4 > []+{};

5 '[object Object]'

6 > {}+[];

7 0

8 > {}+{};

9 NaN

10 > Array (16).join('wat' - 1) + ' Batman '

11 'NaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaN Batman '

12 >

siehe JS 12.8.3 The Addition Operator 6.2.4.1 getvalue 7.1.1 toprimitive 7.1.1.1 OrdinarytoprimitiveDie linken geschweiften Klammern können ein Objekt und ein leerer Codeblock sein. Im zweiten Fall bleibt nurder unäre + Operator, der eine Zahl liefert und toNumber() erzeugt. Mit leerem Feld wird 0 und mit leerenObjekt NaN erzeugt.

3. Viele gleichzeitige Wahrheiten

Frage: Kann if (a == 1 && a == 2) { } jemals true sein und ausgeführt werden?Ja, wenn a ein Objekt ist und eine Funktion toString oder valueOf enthält, die einen wechselnden Wert 1 unddanach 2 zurückliefert, der im Vergleich verwendet wird (nur ein Beispiel).

57

KAPITEL 12

EcmaScript seit 2011

1. EcmaScript 5 (2011, ES5)

Nach der (schlechten) Erfahrung mit dem verunfallten ES4 wurde diese Modi�kation zwar umfangreich, abersehr vorsichtig vorgenommen.http://kangax.github.io/compat-table/es5/

• Klärungen unklarer Punkte• accessors• re�exion• property attributes• Array manipulations• JSON• strict mode

1 Getter/Setter accessors

2 Mehr Kommas in Listen {a:1, y:1, } {1, 2, 3, ]

3 Reservierte Worte als Propertynames {if:1, for:2, }

Object.create, de�neProperty, de�neProperties, getPrototypeOf, keys, seal, freeze, perventExtensions, isSealed,isFrozen, getOwnPropertyDescriptor, getOwnPropertyNamesArray.isArray, indexOf, lastIndexOf, every, some, forEach, map, �lter, reduce, reduceRight, sortStrings.trim, Property access: "Hans"[0]Date.toISOString, now, toJSONFunction.prototype.bindJSONImmutable globals unde�ned, NaN, In�nityapply permits array like objects apply({}, {0:1, 1:2, length:2})

parseInt accespts leading zerosFunction prototype not enumerableArguments toStringTag is "Arguments"Zero width chars in identi�ers var _\u200c\u200d = true;unreserved words abstract boolean byte char double �nal �oat goto int long native short synchronized transientvolatileEnumereable properties can be shadowed by non-enumerablesthrow functions have proper this valuesNeu im strict mode:

1 reserved words

2 "this" is undefined in funchttp:// kangax.github.io/compat -table/es6/tions

3 "this" is not coerced to object in primitive methods

4 "this" is not coerced to object in primitive accessors

5 legacy octal is a SyntaxErrorhttp:// kangax.github.io/compat -table/es6/

6 assignment to unresolvable identifiers is a ReferenceError

7 assignment to eval or arguments is a SyntaxError

8 assignment to non -writable properties is a TypeError

9 eval or arguments bindings is a SyntaxError

10 arguments.caller removed or is a TypeError

11 arguments.callee is a TypeError

12 (function (){}).caller and (function (){}).arguments is a TypeError

13 arguments is unmapped

14 eval() can't create bindings

15 deleting bindings is a SyntaxError

16 deleting non -configurable properties is a TypeError

17 "with" is a SyntaxError

18 repeated parameter names is a SyntaxError

59

60 12. ECMASCRIPT SEIT 2011

19 function expressions with matching name and argument are valid

2. EcmaScript 6 (2015, ES6)

ES6 ist eine Sprachänderung, die sehr tief in die Sprachstrukturen eingreift. Es fühlt sich wie eine neue Sprachean. Einige der Vorschläge von ES4 wurden aufgegri�en und realisiert. Ein Schwerpunkt lag auf der Ertüchtigungvon JavaScript für groÿe Programmierprojekte.http://kangax.github.io/compat-table/es6/

• Module• Klassen• block scope• iterators• generators• promises• destructuring• proper tail calls• Maps• Sets• arrays of binary numeric values• Unicode supplemental chars (strings, regexp)• built ins fpr subclassing• let, const: Blockscope-Variable• Arrow function (λ-Funktionen)• Argument-Default-Werte (function(x=2, x=3, s="Hans")=• Rest-Parameter als echtes Feld (function(a, b, ...rest))• Destructuring Assignment• Computed object keys• __proto__

• Template string (`x = ${x}`

• Spread operator• for-of• Set Weak Set• Map• Weak Map• Re�ect• Class• RegExp //u //y• Array.from Array.of• String.prototype.includes, startsWith endsWith• Object.assign• Symbols• Number.isSafeInteger• Math.hypot• Promises• Subclassing

tagged template literal

3. EcmaScript-2016 (ES 7)

Mit ES7 beginnt eine neue Bezeichnungskonvention: ES7 keiÿt o�ziell EcmaScript-2016. Ab jetzt sind jährlicheUpdates der Sprache geplant.

• Potenz als Operator• Array.prototype.includes

1 Array.prototype.includes ( searchElement [ , fromIndex ] )

2 ArrayBuffer.transfer () (spec)

3 Object.observe ()

4 x ** y x **= y

6. ECMASCRIPT-2019 (ES10) 61

4. EcmaScript-2017 (ES8)

• Async (promise returns)• Shared Memory (neues Speichermodell, Parallele Ausführung)• Atomics• Language Enhancements• Library Enhancements• Object.values, .entries, .getOwnPropertyDecriptors

1 String.prototype.padStart( maxLength [ , fillString ] )

2 String.prototype.padEnd( maxLength [ , fillString ] )

3 Object.values(o)

4 Object.entries(o)

5 Object.getOwnPropertyDescriptors(o)

6 Mehr Kommas in Listen: function f (x, y, z, ) {}; f (x, y, z, );

7 async function f () {} // wie generator functions

8 shared memory , atoms


asynchroneous iteration (AsyncIterator protocol, async generators)dotAll in regular expressionsnamed capture groups in regular expressionsUnicode property escapes in regular expressionslook behind assertions in regular expressionsrest parameterspread operator support for object properties


Array.prototype.sort required to be stableArray.prototype.flat

Array.prototype.flatMap

Object.fromEntries

String.prototype.trimStart

String.prototype.trimEnd

JSON.stringify returns wellformed UTF-8Function.prototype.toString returns original source text (or placeholder)Syntax updates: U+2028, Line separator in JSONSyntax updates: U+2029, Paragraph separator in JSON

KAPITEL 13

OMFG

1. Gehen Sie woanders hin, hier gibt es nichts zu sehen!

https://medium.com/javascript-non-grata/the-super-surrogates-of-javascript-862460199915

2. JavaScript-Theologie

https://blog.fefe.de/?ts=a43bddf0

https://pbs.twimg.com/media/DZcCUAvXUAAdjqQ.jpg:large

3. jQuery loswerden

https://www.heise.de/developer/artikel/Technische-Schulden-jQuery-entfernen-4471469.html

63

KAPITEL 14

Debugger

1. Firebug

InstallierenStartenBedienung

65

KAPITEL 15

Wie geht das in JavaScript

1. Typenanalyse in Funktionen

In Funktionen müssen die Argumente oft auf ihren Typ untersucht werden. Der o�ensichtliche Weg ist typeof.Dabei werden allerdings viele zu di�erenzierende Fälle nicht unterschieden.Insgesamt gibt es einige Problemfälle.Die Verwendung nicht-existierender Variabler führt zu einem Programmabbruch. Das stimmt jedoch nicht beinicht-exisitierenden Properties in Objekten.null gilt als Objekt.Arrays haben den Typ "object".Die einfache Frageif (x == unde�ned)!erzeugt bei nicht existierenden Variablen einen Programmabbruch wegen der nicht existierenden Variablen.Dieser Abbruch wird mit typeof vermieden:if (typeof (x) == "unde�ned")!Damit kann allerdings nicht mehr zwischen undefined und nicht existierenden Variable unterschieden werden.typeof:

Tabelle 1. Typanalyse

unde�ned null boolean number string object array functiontypeof \"undefined" \"object" "boolean" "number" "string" \"object" \"object" "function"

instanceof

isPrototypeOf()Ein Spezialfall ist die häu�g notwendige Abfrage auf einen numerischen Wert:function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n); }

siehe https://stackoverflow.com/questions/18082/validate-decimal-numbers-in-javascript-isnumericDie Abfrage nach einem ganzzahligen Wert erfolgt in der Library: Number.isInteger(value)

2. assoziative Arrays

Objekteobjekt.propertyobject

”property”

3. objektorientiertes JavaScript

4. Globale Variable im strict mode

In JavaScript gibt es keinen Ersatz für static Variable aus C oder C++/Java-Klassen. Die einzige Möglichkeitsind globale Variable. this in Funktionen im strict mode ist immer unde�ned. Also bleibt nur die Möglichkeit,deklarierte globale Variable zu verwenden:

1 var global;

2 function f () {

3 "use strict";

4 if (global === undefined) {

5 global = { info: "f needs this string", second: 3.14, };

6 ...

7 }

8 }

67

68 15. WIE GEHT DAS IN JavaScript

Eine elegante Möglichkeit, den globalen Namensraum explizit in eine Funktion einzuschleuÿen, ist die Übergabean eine stricte Funktion im Aufruf:

1 function f (allglobals) {

2 "use strict";

3 allglobals.newglobal = { ... };

4 }

5 } (this)

Um den globalen Namensraum nicht zu verschmutzen, sollten globale Variable sparsam verwendet werden. EineMöglichkeit dazu ist es, in einem (1) globalen Objekt mehrere benötigte Variable zu speichern, wie im Beispielangedeutet.

5. Diakritische Zeichen

Im Unicode ist es mühsam, alle diakritischen Zeichen zu identi�zieren. Eine elegante Lösung ist die Verwendungeines normalisierten Strings:

1 (function (){

2 "use strict";

3 const str = "Crème Brulée";

4 console.log (str);

5 let x = str.normalize('NFD').replace (/[\ u0300 -\ u036f]/g, "");

6 console.log (str);

7 console.log (x);

8 }());

Zunächst werden alle diakritischen Zeichen in zwei Unicodepoints umgewandelt, der zweite ist jeweils ein Com-bining Mark. Diese Combining Marks bilden eine kompakte Gruppe, die mit einem RegExp entfernt werdenkann.

KAPITEL 16

JavaScript-Varianten

Einschränkungen.Sehr streng: JavaScript: The Good Parts, Douglas Crockford, Mai 2008, ISBN 978-0-596-51774-8ADsafe, JavaScriptlintdojox.secureCaja, CajitaFBJavaScriptMicrosoft Websandbox

69

KAPITEL 17

Technik und Interna

1. Verschiedene JavaScript Grammatiken

lexikalische ES7syntaktische ES 11 12 13 14numerische Grammatik ES 9regular expression ES 15.10JSON ES 15.12.1

71

KAPITEL 18

Clientseitiges JavaScript

Beispiel von Peter Trueb: https://www.pi2e.ch/scroll/

1. Übersicht

2. Einbettung von JavaScript in HTML

1. Als Content im Script-Element.2. Als externe Datei im src-Attribut des Script-Elements3. 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 darfman 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 die Elemente div und span, sowie die Attribute id und class bereit. Sie haben in HTMLkeine Wirkung und können von auÿerhalb benutzt werden, z.B. von CSS oder JavaScript. id ersetzt das ältereund wesentlich schlechter deklarierte name-Element.1. Element div: neutral, d.h. für den Browser ohne Bedeutung (auÿer einer neuen Zeile vor und nach demElement, die mit CSS und JavaScript vermieden werden kann). Benutzt in CSS und JavaScript.2. Element span: neutral. Für CSS und JavaScript. Der Name suggeriert, dass span content und andere Elementeenthalten kann, die gemeinsam CSS-Formatierungen bekommen.3. Attribut id: globales Attribut, d.h. darf in jedem Element stehen und damit jedes Element bezeichnen.Eindeutiges Attribut, d.h. jeder id-Wert darf im gesamten Dokument nur einmal vorkommen. Jedes Elementkann also mit seiner id eindeutig aufgefunden werden. Seit HTML5 darf der id-Wert mit Zi�ern beginnen.4. Attribut name: Älterer Vorgänger von id. Nicht in allen Elementen erlaubt. Nicht notwendig eindeutig:Abhängig von der HTML-Seite kann eine Suche nach einem name-Wert mehrere Elemente liefern, die dann vonJavaScript auch verarbeitet werden sollten.5. Attribut class: Eher für CSS konzipiert. Kann für Style-Änderungen mit JavaScript benutzt werden. Globalseit HTML5.Eventhandler-Attribute tragen Funktionen als Eventhandler ein.Formulare dürfen zur Eingabe verwendet werden.

3. De�nitionen der clientseitigen Schnittstellen

EcmaScript de�niert hier nichts!Hauptakteure: W3C, BrowserherstellerJavaScript point of view: document object, window objectW3C point of view: HTML (HTML Nightly), XHTML, DOM, CSSProgrammers point of view: direkt mit Browser- und Betriebssystemabhängigkeiten oder mit jQuery und anderenLibraries.Es ist sehr mühsam � wenn auch nicht mehr so schlimm wie vor etwa 10 Jahren �, die fehlende Standardisierungdurch eigene Recherchen über die Browser, die verschiedenen Betriebssysteme und die verschiedenen JavaScript-Engines zu ersetzen. Die einfachste Regel ist, nicht alle features zu verwenden und Experimente mit dem Codedurchzuführen. Die oft mangelhafte Dokumentation erleichtert die Arbeit nicht unbedingt.Eine wertvolle und mit viel Liebe und Arbeit zusammengestellte Übersicht stammt von David Flanagan. DieseArbeit sollte ein JavaScript-Programmierer durch Kauf seines Buches honorieren; als Gegenleistung kann erhier alle komplizierten Details schnell �nden. Leider veraltet dieses Buch gerade und eine Neuau�age ist nichtin Sicht.ImWeb liefern die Seiten https://www.w3schools.com/, https://wiki.selfhtml.org/ und https://developer.mozilla.org/wertvolle Informationen. , ,

73

74 18. CLIENTSEITIGES JavaScript

Abbildung 1. Zusammenspiel zwischen Hardware, OS, Browser und JS bei Webseiten ausHTML, CSS und JS

4. JavaScript und HTML

Mit dem HTML-Element <script>, mit Event-Handlern und mit dem JavaScript-Protokoll wird JavaScript-Code in HTML-Dokumente eingebunden. Insgesamt sind das vier Methoden, die am Anfang dieses Textes schonkurz erläutert wurden:

5. WINDOW OBJECT 75

1. direkt ausgeführter JavaScript-Code als Content in <script>-Elementen.2. nach dem Laden ausgeführter JavaScript-Code aus einer JavaScript-Datei, die als src-Attribut eines <script>-Elements angegeben wird.3. asynchron in Event-Handlern angegebener JavaScriptCode.4. asynchron mit JavaScript-Code, der in URLs durch das Protokoll javascript: gekennzeichnet ist.Die Ausführung erfolgt im Normalfall synchron. Dann führt der Browser den JavaScript-Code aus, wenn er ihnbeim Parsen des HTML-Dokuments sieht. Während der Ausführung von JavaScript ist der Browser blockiert,er setzt seine Arbeit nicht fort, bevor der JavaScript-Code vollständig ausgeführt ist. Die Manipulation desHTML-Dokuments erfolgt mit document.write; dabei wird der erzeugte Text statt des <script>-Elements indas Dokument eingefügt.Asynchrone (asynchroneos) und verzögerte (deferred) Ausführung muss explizit mit den boolschen Attributenasync und defer gewählt werden. Der JavaScript-Code darf dann kein document.write mehr enthalten. DieBearbeitung des HTML-Dokuments durch der Browser wird fortgesetzt. Mit defer wird die Ausführung desJavasciptcodes 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 ausge-führt, ohne dass der Browser blockiert wird. Anders als deferred Code erfolgt seine Ausführung so schnell wiemöglich (also bei Mehrkernprozessoren auch gleichzeitig). Das HTML-Dokument muss noch nicht ganz kom-plett 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-Argumentwird 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 Arbeitfort; document.write verboten.4. Durch Events ausgelöster (event driven) JavaScript-Code wird immer asynchron dann ausgeführt, wenn dieentsprechenden Events auftreten. Sie stammen vom Benutzer durch Eingaben, vom Browser durch Statusände-rungen des Dokuments oder vom der Hardware durch Timerablauf.Zu jedem vom Programmierer gewünschten Event muss der auszulösende JavaScript-Code als Eventhandlerregistriert werden. Dazu schreibt der Programmierer den Code einfach im HTML-Dokument in die Eventat-tribute. Bei Timern wird der Code beim Starten der Timer registriert. Alternativ kann der JavaScript-CodeEvenhandler direkt registrieren.5. In JavaScript gibt es derzeit kein Threadmodell; JavaScript-Code kann also nicht parallel ausgeführt werden.Somit führt der Browser niemals zwei Events gleichzeitig aus. Die Timerroutine wird nie ausgelöst, wenn schonein anderer Eventcode läuft.6. In HTML5 sind sogenannte Webworkers geplant, die parallele Ausführung durch den Browser erlauben. Auchhier kann der JavaScript-Code nicht selbst parallele Programmierung organisieren. Webworkercode hat keinenZugri� aus das window- und document-Objekt. Er kann nur im Hintergrund "embarrassing parallele Arbeitenerledigen, das sind im HPC-Jargon Tätigkeiten, die auÿer eigenen keinerlei andere Variable beein�ussen unddurch keinerlei anderen Code beein�usst werden.

5. window object

Im Clientside JavaScript ist das window-Objekt das zentrale globale Objekt. Es stellt Properties und Methodenzur Manipulation der Browserfensters bereit. Zwei Properties window und self sind Referenzen auf sich selbstund können zur Verdeutlichung des Codes verwendet werden. Man kann also location (globale Property)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 nichtmehr. 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) de�niert.Die einzigen De�nitionen wurden von den Browserherstellern erstellt und sind vielleicht auf deren Webseitenzu �nden. Der JavaScriptprogrammierer sollte das window-Objekt nur in den Teilen benutzen, die alle Browsergemeinsam und identisch de�nieren.W3C versucht im HTML5-Standard eine De�nition:http://www.w3.org/html/wg/drafts/html/master/browsers.html#window

window; Rückreferenz auf das globale Objektself; Rückreferenz auf das globale Objektframes


document; Referenz auf das document Objekt im Fenster

name;

location; Dokument-URLhistory; Browser-Historynavigator; Browser-Hersteller und Versionscreen; Bildschirmdetails

alert(); Messagebox; wegzuklickenconfirm(); Messagebox; Antwort mit ok oder abortprompt(); Messagebox; String als Antwort

onerror(); Exception handler

locationbar;

menubar;

personalbar;

scrollbars;

statusbar;

toolbar;

status;

void close();

closed; Window geschlossen?void stop();

void focus();

void blur();

void setTimeout(); Einmaliges Event nach fester Zeitvoid setInterval(); Wiederkehrendes Event in festen Zeitabständen

Values aller id-Attribute im HTML-Dokument sind Properties des Window-Objekts und dienen zum direktenZugri� auf die zugehörigen Elemente, wenn das Window-Objekt über eine solche Property noch nicht verfügt(veraltet!).Values aller erlaubten name-Attribute im HTML-Dokument sind ebenfalls Properties des Window-Objekts. Daname nicht zwingend eindeutige Werte haben muss, kann sich hinter der Property ein Feld verbergen (veraltet).length; top; opener; parent; frameElement; WindowProxy open(optional DOMString url = "about:blank", op-tional 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ührtexternal;

applicationCache;

// user prompts void alert(messageString); Dialogboxboolean con�rm(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 nachAblauf einer festgelegten Zeit oder regelmäÿig aufgerufen werden.Die location-Property enthält die URL des Dokuments und erlaubt durch Überschreiben das Umlenken desDokuments. 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 � daherder Name � und ist ein Objekt mit dem Namen des Webbrowsers (appName), dem Hersteller und der Versiondes Browsers (appVersion) (), dem HTTP-Header USER-AGENT (userAgent) und dem Betriebssystem imHintergrund (platform).Die document-Property enthält ein Objekt zum Zugri� auf das Dokument selbst.

9. ZUGRIFF AUF HTML-ELEMENTE 77

6. document object

Das document-Objekt ist nirgendwo verbindlich (d.h. standardisiert oder genormt) de�niert. Die einzigen De-�nitionen werden von den Browserherstellern erstellt und sind vielleicht auf deren Webseiten zu �nden. DerJavaScriptprogrammierer sollte das document-Objekt nur in den Teilen benutzen, die alle Browser gemeinsamund identisch de�nieren.W3C versucht im folgenden Entwurf (draft) eine De�nition: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. Document Object Model

Datum Titel Status2017-12-07 DOM 4.1 Nighly draft2017-09-14 Intersection observer Nighly draft2015-02-03 Server-Sent Events Nighly draft2017-09-05 Shadow DOM Nighly draft2016-08-04 UI Events Nighly draft2016-05-17 DOM Parsing and serialization Nighly draft2015-11-19 DOM4 Standard2012-09-20 DOM Parsing and Serialization Draft2012-09-06 DOM Level 3 Events Speci�cation Last Call Draft2008-12-22 Element Traversal Speci�cation Standard2004-04-07 DOM Level 3 Load and Save Speci�cation Standard2004-04-07 DOM Level 3 Core Speci�cation Standard2004-01-27 DOM Level 3 Validation Speci�cation Standard2003-01-09 DOM Level 2 HTML Speci�cation Standard2000-11-13 DOM Level 2 Core Speci�cation Standard2000-11-13 DOM Level 2 Events Speci�cation Standard2000-11-13 DOM Level 2 Style Speci�cation Standard2000-11-13 DOM Level 2 Traversal and Range Speci�cation Standard2000-11-13 DOM Level 2 Views Speci�cation Standard1998-10-01 DOM Level 1 Standard

8. Der DOM-Baum

Das Dokument wird vom DOM-Parser des Browsers gelesen, analysiert und interpretiert und am Ende imSpeicher durch den sog. DOM-Baum dargestellt. Die Ausgabe des Dokuments auf dem Bildschirm (oder ev. aufPapier beim Ausdruck) erfolgt aus diesem Baum. Es ist dieser Baum, der von JavaScript manipuliert werdenkann. 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

node; Result-Objekt aus dem DOM-Baum, das ein eindeutiges Element kennzeichnet.nodeList; Result-Objekt, das mehrere Elemente aus dem DOM-Baum in Form einer array-ähnlichen Strukturkennzeichnet.for (var i = 0; i < nodeList.length; i++) { ... nodeList [i] ... } typische Schleife zur Verarbei-tung aller nodes eines nodeList.


document.getElementById("id"); Der String bezeichnet einen eindeutigen id-Wert eines Dokument-Elements.Dieser node im DOM-Baum wird zurückgeliefert. Sind fehlerhafterweise mehrere gleiche id-Werte vorhanden,erscheint mur das erste Element mir dieser id. Ist die gesuchte id gar nicht vorhanden, erscheint null.document.getElementsByName("name"); Der String bezeichnet einen mehrdeutigen name-Wert von name-Attributen in Dokument-Elementen.document.getElementsByTagName("tag");

document.getElementsByClassName("class");

document.querySelector("css");

document.querySelectorAll("css");

document.all[] veraltet

Achten Sie auf den Singular und Plural in getElement und getElements!Der letzte Aufruf wie auch jQuery benutzt die CSS-Selectorsprache.<br> siehe http://www.w3.org/TR/css3-selectors/#selectorsMit einer Referenz auf ein HTML-Element bekommt man Zugri� auf andere Elemente relativ zu dem referiertenElement. In DOM-Sprache stellt eine solche Referenz einen Knoten (node) dar, von dem mehrere Achsen aus-gehen. Diese Achsen bieten Suchrichtungen mit denen man andere Teile des Dokuments erreichen kann. Es sindchild- parent- descendant-or-self- ancestor-or-self- descendant- ancestor- following- preceding- following-sibling-preceding-sibling- self- attribute- und namespace-Achsen.http://www.georgehernandez.com/h/xComputers/XML/XSL/Media/XPathAxes.gif

var id = document.getElementById("id");

id.parentNode

id.childNodes

id.firstChild

id.lastChild

id.nextSibling

id.previousSibling

id.nodeType numerischer Wert zwischen 1 und 12Der nodeType bedeutednodeType === 1 Element-KnotennodeType === 2 Attribut-KnotennodeType === 3 Text-Knoten (der content)nodeType === 4 CDATA-sectionnodeType === 5 Entity-ReferenznodeType === 6 Entity-KnotennodeType === 7 Processing unstructionnodeType === 8 Kommentar-KnotennodeType === 9 Dokument-Knoten (ganz auÿen)nodeType === 10 Dokumenttyp-KnotennodeType === 11 Dokument-Fragment-KnotennodeType === 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.parentNode

Die Baumstruktur des DOM-Trees wird durch die folgenden Properties o�engelegt. Der Inhalt besteht nich ausallen Daten in allen Achsen, sondern nur aus den Elementdaten::id.children[]

id.firstElementChild

id.lastElementChild

id.nextElementSibling

id.previousElementSibling

id.childElementCount = id.children.length

Attribute können bequem mit ihrem Namen bezeichnet werden. Ihr Wert kann gelesen oder verändert werden.

10. EINGABE 79

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 modi�ziert werden kann.id.innerHTML Content als HTML-Markupstringid.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ügtid.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 entferntid.replaceCild(neu, i)) neu ersetzt child i

10. Eingabe

Formulare sind HTML-Elemente, die wie alle anderen bearbeitet werden können. Ihre child-Elemente erlaubenjedoch Eingaben, die mit Event-Handlern in JavaScript bearbeitet werden können. Die Event-Handler stehen alsEvent-Attribute im HTML-Dokument oder werden mit immer noch Browser-spezi�schen Aufrufen eingetragen.<body onload="function(){}">

id.onclick=function(){}

id.addEventListener("click", function(){});

id.attachEvent("click", function(){}); IE < 9

Eine Übersicht über die genormten Events bietethttps://www.w3.org/TR/uievents/

In HTML5 sind die folgenden Multimedia-Events dazugekommen - sie beginnen nicht mehr mit on:canplay canplaythrough durationchange emptied ended loadaddata loadadmetadata loadstart pause play playingprograss ratechange seeked seeking stalled suspend timeupdate volumechange waitingcached noupdate checking obsolete downloading progress error updateready

KAPITEL 19

jQuery

jQuery ist eine JavaScript-Bibliothek. Sie steht unter der wenig restriktiven MIT-Lizenz, einer kurzen Software-Lizenz. Im wesentlichen darf man mit Produkten unter der MIT-Lizenz alles tun, solange man das Original-Copyright und den Lizenz-Hinweis in jedem Exemplar der Software beibehält.Da Manipulationen des HTML-Dokumentes mit JavaScript-Mitteln relativ aufwendig sind und teilweise auchheute noch browserabhängig sind, wenn auch weniger, als am Anfang des Jahrhunderts, wurde eine QueryLibrary 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 ein Objekt zurück, deren Methoden sofortaufgerufen werden können).jQuery bearbeitet die gelieferten Dokument-Objekte.jQuery bearbeitet e�zient Objektmengen (mehr als ein Objekt).jQuery hat eine eigene ready()-Funktion die nach dem Laden des Dokumentes aufgerufen wird.jQuery stellt zusätzlich Hilfsfunktionen, weitere E�ekte und Ajax-Abfragen bereit.jQuery verhindert nicht die Benutzung anderer Bibliotheken (soweit diese nicht jQuery verhindern).jQuery-2 und die letzte Version von jQuery-1 sind identisch; jQuery-2 ist aber kürzer, schneller und e�zienter,da ältere Browser wie IE-5/6/7 nicht mehr unterstützt werden.Das aktuelle jQuery-3 ist weitgehend kompatibel zu früheren Versionen. Ältere Browser werden jedoch nichtmehr unterstützt (IE). De�nitiv veraltete Funktionen sind nicht mehr verfügbar (load, unload, error).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>

<script type="text/javascript" src="jQuery.min.js"></script>

1. jQuery Core

jQuery de�niert eine zentrale globale Zugri�sfunktion jQuery(). Da in JavaScript das $-Zeichen als Buchstabegilt, 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 mitjQuery.noConflict();

ausgeschaltet werden.Es wird empfohlen, immer die lange Variante zu verwenden, auch wenn in Texten über jQuery und in freierWildbahn die kurze meist bevorzugt wird.siehe http://api.jQuery.com/jQuery/#jQuery3Man kann eine eigene jQuery-Abkürzung de�nieren:var jq = jQuery.noConflict();

jq(document).ready(handler);

Es gibt mehrere Aufruftypen:jQuery(selector); CSS-selector zur De�nition einer ElementmengejQuery(selector, context);

jQuery(element-object); wrapper

81

82 19. JQUERY

jQuery(document-object); wrapperjQuery(window-object); wrapperjQuery(html); Erstellung eines html-Elementes - Einfügung getrenntjQuery(handler); Funktion handler wird nach Laden des Dokumentes aufgerufenjQuery(); Leeres Objekt erzeugenjQuery(HTML);

Die Funktion $() von jQuery hat dieselbe Leistung wie document.querySelectorAll() und darüberhinausden Vorteil, mit allen auch älteren Browsern, zu funktionieren. Ihr Ergebnis, ein Mengenobjekt, ist leichterverwendbar als die NodeList.

2. Start

Kein onload-Ereignis mehr; kollidiert mit jQuery.$( document ).ready( handler )

$().ready( handler ) (this is not longer recommended)

$( handler )

Die angegebene Handler-Funktion wird genau dann einmal ausgeführt, wenn das Dokument geladen und dasDOM bereit für JavaScript ist.Da der Handler zur Ausführung registriert wird, darf man nur Funktionen übergeben, nicht etwa JavaScript-Anweisungen.jQuery ist nicht nur eine Funktion, sondern auch ein Objekt. Dieses Objekt bietet eigene Leistungen. Eine davonist die Verzögerung der Handler bis nicht nur das DOM fertig ist, sondern bis die gesamte Dateisammlung geladenist.$.holdReady( true );

Hier wird nicht $() aufgerufen, sondern die (von $() verschiedene) Funktion holdReady() aus dem $-Objektaufgerufen.

3. jQuery-Zugri� in das HTML-Dokument mit Selektoren

Selektoren orientieren sich an CSS3 (siehe https://www.w3.org/TR/2011/REC-css3-selectors-20110929/#selectors)und an XPATH (siehe https://www.w3.org/TR/1999/REC-xpath-19991116/#axes).

3.1. XPATH-Achsen. Das HTML-Dokument wird vom Browser als Baum dargestellt und gespeichert.Die konkrete Vorstellung dieser Baumstruktur erleichtert den Umgang mit dem Dokument. Wenn ein Referenz-knoten n innerhalb dieser Baumstruktur bekannt ist, kann man im Baum ausgehend von diesem Knoten weitereTeile adressieren. Stellen Sie sich Achsen ausgehend von n aus vor, auf denen man weitere Baumteile erreicht.Die Achsen sind:

child: -Achse: Alle children des Referenzknotens (eine Ebene tiefer)descendant: -Achse: Alle Nachkommen (beliebig viele Ebenen tiefer bis zu den Blättern)parent: -Achse: parent der Referenzknotens (eine Ebene)ancestor: -Achse: Alle Vorfahren (beliebig viele Ebenen höher bis zur Wurzel)following-sibling: -Achse: Nachfolgende Geschwister (alle)preceding-sibling: -Achse: Vorhergehende Geschwister (alle)following: -Achse: Alle nach dem Refenrenzknoten im Dokument stehenden Knoten (auch im ancestor-

und child-Bereich)preceding: -Achse: Alle vor dem Refenrenzknoten im Dokument stehenden Knoten (auch im ancestor-

und child-Bereich)attribute: -Achse: Attribute des Referenzknotens (nichtleer nur bei Elementknoten)namespace: -Achse: namespace-Knoten des Referenknotens (nichtleer nur bei Elementknoten)self: -Achse: genau der Referenzknotendecendant-or-self: -Achse: klarancestor-or-self: -Achse: klar

Das gesamte Dokument mit Ausnahme von Attributen und Namespaces wird durch die fünf Achsen ancestor,descendant, following, preceding und self disjunkt unterteilt, d.h. die Teile überlappen sich nicht und ihreVereinigung ergibt das gesamte Dokument.

6. JQUERY UND FORMULARE 83

3.2. CSS. * allesE Element EE F Element F, wenn es descendant von E istE > F Element F, wenn es direktes child von E istE: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 istE[a] E, wenn Attribut a gesetztE[a="value"] E, wenn Attribut a auf value gesetztE[a~="value"] E, wenn Attribut a als space-Liste mindestens einmal value hatE[a|="value"] E, wenn Attribut a als hyphen-Liste value am Anfang hatE[a*="value"] E, wenn Attribut a value als substring hatE[a^="value"] E, wenn Attribut a value als Anfang hatE[a$="value"] E, wenn Attribut a value als Ende hatE[a!="value"] E, wenn Attribut a nicht oder nicht mit value existiertDIV.class Class selectorE#id ID selectorE,F Alle E und alle FE+F F after EE~F Alle F preceded by E:animated

:button :checkbox :checked :file :header :hidden :image :input :last :parent :password :radio :reset :selected :submit :visible

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

http://www.w3.org/TR/selectors/#selectors

3.3. XPATH.

4. Manipulation des HTML-Dokuments

append...

5. Eventmodell

5.1. Events. 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 valueof 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-Seiteenthä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) undattr() 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

84 19. JQUERY

http://stackoverflow.com/questions/13247058/jquery-attr-vs-prop

7. Weitere jQuery-Leistungen

Anweisungen: jQuery.each()Strings: jQuery.trim(),Info: jQuery.browser, jQuery.isXMLDoc

8. Plugins

9. Bibliotheken, die auf jQuery aufbauen

jQuery UIjQuery Tools (�owpower)jQWidgetsWijmojQuery mobile

10

KAPITEL 20

jsglmatrix

glmatrix ist eine JavaScript-Bibliothek. Sie steht unter der wenig restriktiven MIT-Lizenz, einer kurzenSoftware-Lizenz. Im wesentlichen darf man mit Produkten unter der MIT-Lizenz alles tun, solange man dasOriginal-Copyright und den Lizenz-Hinweis in jedem Exemplar der Software beibehält.http://glmatrix.net/docs/module-glMatrix.html

85

KAPITEL 21

JSON

JSON (JavaScript Object Notation data interchange format) wurde 2001 erstmalig de�niert. Die De�nitionwurde 2006 als RFC4627 standardisiert und 2009 im ECMA-262-5 aufgenommen. Mit ECMA-404 existiert eineigener (dünner) Standard für JSON. Konkurrierend wird JSON von IETF als RFC7158/7159 undRFC8259-2017 weiter gep�egt. ECMA-404 und RFC8259 sind (sollten sein) identisch.JSON dient zum Austausch von Daten in Textform. Der Austausch der Daten kann zwischen Programmenaller (vieler) Sprachen erfolgen. JSON de�niert die Austausch-Syntax. Über die Semantik müssen Sender undEmpfänger einer Meinung sein, sich absprechen oder andere Spracheigenschaften irdendwo beachten.Ein JSON-Text besteht aus Unicode-Zeichen. Die sechs Zeichen []{}:, und die drei Wörter null, false undtrue bilden Metainformationen.Ein JSON-Text de�niert Objekte, Arrays, Numbers und Strungs, sowie die drei Werte null, false und true.Objekte: { string : value, string : value, ... ]

Arrays: [ value, value, ... ]

Number: (-?)(0|([1-9][0-9]*))(.[0-9]+)?([eE][+-]?[0-9]+)?String: "([^"\]|(\["\/bfnrtu]))*"In JavaScript kann jedes Datum als JSON-Text kodiert werden und wieder in einem Variableninhaltgespeichert werden. Eigentlich dient es dem Austausch, es kann überraschenderweise auch zur bequemenDe�nition von Variablenwerten verwendet werden.Das JSON-Objekt (ES9, 24.5) � nicht zu verwechseln mit einem als JSON-Text kodiertem Objekt � ermöglichtdie bequeme Verwendung von JSON-Texten in JavaScript.Es enthält die Funktionen parse und stringify, die wenig überraschend genau das tun, was ihr Name sagt.

87

KAPITEL 22

AJAX

Ajax � eigentlich AJAX geschrieben � heiÿt zunächst Asynchroneous JavaScript and XML. Es ist neben demälteren CGI ein Weg, um mit dem Server zu kommunizieren.Anders als bei CGI erfolgt diese Kommunikation asynchron, damit ist gemeint, dass der Client im Hintergrundeinen Serverkontakt aufbaut und die Antwort verarbeitet, ohne dass der Benutzer das wahrnimmt. Bei CGIwird ein Formular übertragen und die Antwort in einer neugeladenen Webseite dargestellt.Wegen der Serverkontakts reicht der clientseitige Programmteil nicht mehr aus; der Serverkontakt benötigt aufdem Server einen Partner, der die Anfrage beantwortet.Dieser Partner ist sowohl bei Ajax, als auch bei CGI-Kontakten ein vom Server aufgerufenes Programm, dasmit dem Server über die CGI-Schnittstelle kommuniziert. Diese Schnittstelle ist schon sehr alt (1993, NCSA �nicht NSA) und wird heute immer noch fast unverändert verwendet. Heute gilt die De�nition im RFC3875.

1. Die CGI-Schnittstelle

https://tools.ietf.org/html/rfc3875

Fast-CGI: https://fastcgi-archives.github.io/FastCGI_Specification.htmlSimple-CGI http://python.ca/scgi/protocol.txtCGI (Common Gateway Interface) ist eine einfache Schnittstelle, über die ein Webserver mit einem von ihmaufgerufenen Programm Daten austauscht. Dieses Programm holt vom Webserver die Clienteingaben ab,verarbeitet sie und gibt dem Webserver die erzeugten Antworten zurück.Hier wird nicht beschrieben, wie ein Webserver für CGI installiert und kon�guriert werden muss. JederStudent und Mitarbeiter der Universität Regensburg mit seinem Account bbbnnnnn kann auf denLinux-Servern rex1 und rex2 im Verzeichnis /homepages/bbbnnnnn/public_html/ Webseiten anlegen. DieVerzeichnisrechte müssen drwx--x--x und die Dateirechte -rw-r--r-- sein. Diese Webseiten stehen im Webunter der Adresse http://homepages.uni-regensburg.de/~bbbnnnnn/ abrufbar bereit. Zusätzlichgewünschte Webserverkontakte müssen im Rechenzentrum beantragt und genehmigt werden (Herr Finger,1546). Danach können die Webseiten Serverkontakt aufnehmen. Der Apache-Server ruft die CGI-Programmeim Verzeichnis http://homepages.uni-regensburg.de/~bbbnnnnn/cgi-bin auf. Dieses Verzeichnis und alledarin stehenden CGI-Programme müssen die Dateirechte drwx--x--x haben.Nehmen wir ab jetzt an, Ihr Webserver ist korrekt kon�guriert und Ihre CGI-Programme werden aufgerufenund sind arbeitsfähig.CGI-Programme können in jeder Sprache geschrieben werden (C, C++, Java, JavaScript, Perl, Python,PHP. . . )Prinzipiell erfolgt der Datentransport zwischen Webserver und CGI-Programm über Umgebungsvariable, überstdin und über stdout. Es ist Aufgabe des Webservers, diese Daten vom Client zu beziehen und weiterzuleitenund die Antworten des CGI-Programms an den Client zurückzusenden.Das CGI-Programm muss die von ihm benötigten Informationen aus den Umgebungsvariablen holen. MitHTTP-Post übertragene Daten mit genau CONTENT_LENGTH Bytes werden in stdin gelesen. AlleVerschlüsselungen, insbesondere URL-encryption, müssen dekodiert werden.Die Verarbeitung der erhaltenen Daten darf beliebig komplex sein und z.B. Datenbankzugri�e enthalten.Client-bezogene Sitzungen können aufgebaut werden.Das CGI-Programm sollte natürlich die Resourcen der Webservers nicht aus- oder sogar überlasten und darf

die Sicherheit und Integrität des Webservers nicht gefährden. Schreiben Sie keine fehlerhaften undabstürzenden CGI-Programme (idealerweise ohne segmentation faults)! Schreiben sie keine CGIs, die dieeingegebenen Clientdaten direkt ausführen, da ein böswilliger Client dann Dateien und Datenbankinhaltelöschen könnte oder Schadcode auf dem Server unterbringen könnte. Alle Clienteingaben müssen untersuchtwerden, ob sie ausschlieÿlich für den gewünschten Zweck erfolgen.Schlieÿlich werden vom CGI die Antworten an den Client in stdout dem Webserver zur Weiterleitung an denClient anvertraut.Die Antwort des CGI muss am Anfang eine Informationszeile an den Webserver gefolgt von einer Leerzeileenthalten:

89

90 22. AJAX

print "Content-type: text/html\n\n";

Der Rest den Antwort sollte in irgendeiner vernünftigen Websprache formatiert sein, z.B. HTML, XML,JSON. . .Der Client muss in der Lage sein, diese Antwort korrekt zu verarbeiten.Für den Apache-Webserver �nden Sie eine Beschreibung inhttps://httpd.apache.org/docs/2.4/howto/cgi.html

KAPITEL 23

Weitere Anwendungen

1. JavaScript und XML

http://www.html-world.de/program/xml_5.php

91

KAPITEL 24

HTML und CSS

HTML-Pretty-Printer:https://www.10bestdesign.com/dirtymarkup/

93

Inhalt

95

Inhaltsverzeichnis

Kapitel 1. Vorwort 31. Kursinhalt 32. Literatur 33. Originalliteratur 34. Internet 3

Kapitel 2. Allgemeines 51. Geschichte und Begri�e 52. Zusammenspiel mit anderen Produkten insbesondere Browsern 63. Eigenschaften von JavaScript 74. Werkzeuge 85. CIP-Pools 12

Kapitel 3. Sprachgrundlagen (Core-JavaScript) 151. Struktur 152. Kommentare 153. Kommunikation 164. Speicher 185. Rechenausdrücke (expressions) 246. Anweisungen 26

Kapitel 4. Arrays 291. Erzeugung 292. Feldlänge 293. Feldzugri� 294. Ändern des Feldinhalts 295. Ändern der Länge 296. Ererbte Methoden 307. Iterationen 308. Mehrdimensionale Felder 319. Objekte, Objektvariable und Referenzen 31

Kapitel 5. Funktionen 331. Funktionsde�nitionen 332. Aufruf 333. Parameter und Argumente 334. return-Wert 345. Typanalyse von Parametern 346. Ein erstes Beispiel 347. Funktionen als Parameter 358. De�nition (die zweite) 369. Aufruf (die zweite) und this 3610. Funktionen als Objekte 3811. JavaScript: style für gute Funktionen 3812. lexical scope, closure 3813. Funktionen und Objekte 3914. Beispiele 39

Kapitel 6. Objekte 411. Erzeugung von Objekten 422. Prototypen von Objekten 42

97

98 INHALTSVERZEICHNIS

3. Manipulieren der Objekt-Properties 434. Accessors 43

Kapitel 7. Exceptions 47

Kapitel 8. Regular Expressions 491. Allgemeines 492. De�nition 493. Verwendung 494. Flags 505. Zeichen und Zeichenklassen 506. Wiederholung 517. Alternativen 518. Gruppen 519. RegExp-Properties 5110. RegExp-Methoden 5211. String-Methoden 5212. String-Member 5213. Übersicht 52

Kapitel 9. Module 53

Kapitel 10. Zusammenfassung des strict JavaScript 551. Umschalten 552. Einschränkungen im strict mode 55

Kapitel 11. JavaScript: Probleme und Seltsamkeiten 571. eval 572. Seltsame Ergebnisse 573. Viele gleichzeitige Wahrheiten 57

Kapitel 12. EcmaScript seit 2011 591. EcmaScript 5 (2011, ES5) 592. EcmaScript 6 (2015, ES6) 603. EcmaScript-2016 (ES 7) 604. EcmaScript-2017 (ES8) 615. EcmaScript-2018 (ES9) 616. EcmaScript-2019 (ES10) 61

Kapitel 13. OMFG 631. Gehen Sie woanders hin, hier gibt es nichts zu sehen! 632. JavaScript-Theologie 633. jQuery loswerden 63

Kapitel 14. Debugger 651. Firebug 65

Kapitel 15. Wie geht das in JavaScript 671. Typenanalyse in Funktionen 672. assoziative Arrays 673. objektorientiertes JavaScript 674. Globale Variable im strict mode 675. Diakritische Zeichen 68

Kapitel 16. JavaScript-Varianten 69

Kapitel 17. Technik und Interna 711. Verschiedene JavaScript Grammatiken 71

Kapitel 18. Clientseitiges JavaScript 731. Übersicht 732. Einbettung von JavaScript in HTML 733. De�nitionen der clientseitigen Schnittstellen 73

INHALTSVERZEICHNIS 99

4. JavaScript und HTML 745. window object 756. document object 777. DOM 778. Der DOM-Baum 779. Zugri� auf HTML-Elemente 7710. Eingabe 79

Kapitel 19. jQuery 811. jQuery Core 812. Start 823. jQuery-Zugri� in das HTML-Dokument mit Selektoren 824. Manipulation des HTML-Dokuments 835. Eventmodell 836. jQuery und Formulare 837. Weitere jQuery-Leistungen 848. Plugins 849. Bibliotheken, die auf jQuery aufbauen 8410. 84

Kapitel 20. jsglmatrix 85

Kapitel 21. JSON 87

Kapitel 22. AJAX 891. Die CGI-Schnittstelle 89

Kapitel 23. Weitere Anwendungen 911. JavaScript und XML 91

Kapitel 24. HTML und CSS 93

Inhalt 95

100 INHALTSVERZEICHNIS

Erstellt mit LATEX und TTH:TTH-Seite:http://hutchinson.belmont.ma.us/tth/

https://www.ctan.org/texarchive/support/tth/dist

javascript dipl. math. f. braun - homepages.uni-regensburg.debrf09510/kurs_info/js/js.pdf · 6 2....

Documents