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