Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
|
becki:linux:javascript [2010-02-09 18:16] becki |
becki:linux:javascript [2011-03-21 17:04] (aktuell) becki |
||
|---|---|---|---|
| Zeile 1: | Zeile 1: | ||
| - | [[:becki:|Home]] | ||
| ====== Javascript ====== | ====== Javascript ====== | ||
| + | ===== Links == | ||
| + | |||
| + | [[http://de.selfhtml.org/javascript/objekte/|Selfhtml]] - [[https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide|JavaScript 1.5 Guide]] - [[https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference|JavaScript 1.5 Reference]] - [[https://developer.mozilla.org/en/Gecko_DOM_Reference|Gecko DOM Reference]] - [[http://msdn.microsoft.com/en-us/library/ms533050%28VS.85%29.aspx|M$ HTML and DHTML Reference]] - [[Dojo]] - [[html5]] - [[jrunscript]] | ||
| + | |||
| ===== Variables == | ===== Variables == | ||
| ==== var Keyword == | ==== var Keyword == | ||
| Within functions always prefix variables with ''var'', otherwise they become global! See [[http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/modules-and-namespaces|Avoid Global namespace]] | Within functions always prefix variables with ''var'', otherwise they become global! See [[http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/modules-and-namespaces|Avoid Global namespace]] | ||
| + | |||
| + | ===== Strings == | ||
| + | |||
| + | A string can be an instance of the ''String'' class or a string literal. [[https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Objects#String_Object|More]] | ||
| + | |||
| + | ==== String Literals == | ||
| + | |||
| + | There is no difference between ''%%'A string'%%'' and ''%%"A string"%%'' [[https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Values%2c_Variables%2c_and_Literals#String_Literals|More]] | ||
| + | |||
| + | A string literal is temporarely converted into a ''String'' object as soon as you apply methods of ''String'' class to the string literal. | ||
| + | |||
| + | ==== Creating Strings == | ||
| + | |||
| + | <code javascript> | ||
| + | var s1 = "foo"; //creates a string literal value | ||
| + | var s2 = new String("foo"); //creates a String object | ||
| + | </code> | ||
| + | [[https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Objects#String_Object|More]] | ||
| + | |||
| + | ==== String Concatenation == | ||
| + | |||
| + | <code javascript> | ||
| + | var a= "al" + "pha" // a == "alpha" | ||
| + | a += "bet" // a = "alphabet" | ||
| + | </code> | ||
| + | |||
| + | ==== String Comparison == | ||
| + | |||
| + | FIXME Because Strings are ojects, String comparison is the same as object comparison :?: | ||
| + | |||
| + | ==== String Methods/Property == | ||
| + | |||
| + | String length: ''var len = mystring.length;'' | ||
| + | |||
| + | [[https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Objects#String_Object|All string methods]] | ||
| + | |||
| + | ===== Arrays == | ||
| + | |||
| + | An Array is an instance of the ''Array'' class. [[https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Arrays|More]] | ||
| + | |||
| + | ==== Creating Arrays == | ||
| + | |||
| + | <code javascript> | ||
| + | var arr= new Array(element0, element1, ..., elementN); | ||
| + | var arr= [element0, element1, ..., elementN]; | ||
| + | |||
| + | var arr= new Array(arrayLength); | ||
| + | var arr= []; | ||
| + | </code> | ||
| + | |||
| + | ==== Array Methods/Property == | ||
| + | |||
| + | Array length: ''var len = myarray.length;'' | ||
| + | |||
| + | [[https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Arrays#Array_methods|Array Methods]] | ||
| ===== Objects and Inheritance ===== | ===== Objects and Inheritance ===== | ||
| + | ==== Object creation == | ||
| + | === The classic Java-like way == | ||
| + | <code javascript> | ||
| + | function Point(x, y) {this.x=x; this.y=y;} | ||
| + | Point.prototype.toString = function() {return "("+this.x+"/"+this.y+")";} | ||
| + | Point.prototype.shift = function(dx, dy) {this.x+=dx; this.y+=dy;} | ||
| + | |||
| + | var p = new Point(3,4); | ||
| + | document.write("p:"+p.toString()); | ||
| + | </code> | ||
| + | |||
| + | === The closure way == | ||
| + | |||
| + | (closures see below) | ||
| + | <code javascript> | ||
| + | function makePoint(x, y) { return { | ||
| + | toString: function() {return "("+x+"/"+y+")";} | ||
| + | shift: function(dx, dy) {x+=dx; y+=dy;} | ||
| + | };} | ||
| + | |||
| + | var p = makePoint(3,4); | ||
| + | document.write("p:"+p.toString()); | ||
| + | </code> | ||
| + | |||
| + | FIXME | ||
| + | * This variant is to be verified | ||
| + | * Does this cause overhead? | ||
| + | * What about inheritance? | ||
| + | |||
| + | === Object literals == | ||
| + | |||
| + | FIXME | ||
| + | |||
| + | ==== Object cloning == | ||
| + | |||
| + | Objects are [[http://www.thescripts.com/forum/thread718427.html|passed by refernce]] => Something like a copy constructor is necessary: | ||
| + | |||
| + | <code javascript> | ||
| + | function Point(x, y) {this.x=x; this.y=y;} | ||
| + | Point.prototype.clone= function() {return new Point(this.x, this.y);} | ||
| + | Point.prototype.toString= function() {return "("+this.x+"/"+this.y+") ";} | ||
| + | |||
| + | var p = new Point(3,4); | ||
| + | var pr = p; // a reference to p | ||
| + | var q = p.clone(); // a new Point instance with the same coordinates as p | ||
| + | p.x= 9; p.y=-2; // change content of p | ||
| + | document.write("p:"+p.toString()+ "pr:"+pr.toString()+ "q:"+ q.toString()); | ||
| + | // result: p:(9/-2) pr:(9/-2) q:(3/4) | ||
| + | </code> | ||
| + | |||
| + | ==== Object Comparison == | ||
| + | |||
| + | FIXME | ||
| + | |||
| ==== Defining Methods ==== | ==== Defining Methods ==== | ||
| === Method definition inline inside of the constuctor === | === Method definition inline inside of the constuctor === | ||
| Zeile 16: | Zeile 128: | ||
| </code> | </code> | ||
| - | Seems to cause overhead, see http://phrogz.net/JS/Classes/OOPinJS.html | + | * Seems to cause overhead, see [[http://phrogz.net/JS/Classes/OOPinJS.html|OOP in JS, Part 1 : Public/Private Variables and Methods]] |
| + | * This is callad a privileged method (which has access to private methods, see below) | ||
| === External method definition and link to object inside of the constructor == | === External method definition and link to object inside of the constructor == | ||
| Zeile 47: | Zeile 160: | ||
| Seems to be the **best** solution :-) | Seems to be the **best** solution :-) | ||
| - | ==== Access Types ==== | + | ==== Public Access == |
| <code javascript> | <code javascript> | ||
| Zeile 82: | Zeile 195: | ||
| </code> | </code> | ||
| - | Private methods seem to be only possible as inline constructor functions, but those seem to cause overhead. | + | ==== Public Access == |
| - | ==== Object creation == | + | Private methods are possible as inline constructor functions: |
| - | The classic Java-like way: | ||
| <code javascript> | <code javascript> | ||
| - | function Point(x, y) {this.x=x; this.y=y;} | + | function MyClass() { // The constructor |
| - | Point.prototype.toString = function() {return "("+this.x+"/"+this.y+")";} | + | var privateVariable= 10; // A private instance variable |
| - | Point.prototype.shift = function(dx, dy) {this.x+=dx; this.y+=dy;} | + | var privMeth1= function {...} // A private method |
| - | + | fuction privMeth2 {...} // private method (shortcut) | |
| - | var p = new Point(3,4); | + | var that= this; // To make this available for priv methods |
| - | document.write("p:"+p.toString()); | + | } |
| </code> | </code> | ||
| - | The closure way: (closures see below) | + | Notes: |
| - | <code javascript> | + | * Private methods possibly cause overhead, compared to the prototype way of public methods |
| - | function makePoint(x, y) { return { | + | * ''this'' seems only to be accessible in private methods by the ''that'' workaround variable above |
| - | toString: function() {return "("+x+"/"+y+")";} | + | * Public methods defined with the (recommended) ''prototype''-way doesn't seem to have access to private mehtods. You need privileged methods (see above) for that. |
| - | shift: function(dx, dy) {x+=dx; y+=dy;} | + | |
| - | };} | + | |
| - | var p = makePoint(3,4); | + | Sources & more information: |
| - | document.write("p:"+p.toString()); | + | * [[http://javascript.crockford.com/private.html|Private Members in JavaScript]] |
| - | </code> | + | * [[http://phrogz.net/JS/Classes/OOPinJS.html|OOP in JS, Part 1 : Public/Private Variables and Methods]] |
| - | FIXME | + | ==== Inheritance == |
| - | * Second variant is to be verified | + | |
| - | * Does second method cause overhead? | + | |
| - | * What about inheritance with 2nd method? | + | |
| - | ==== Object cloning == | + | FIXME see JS Guide 1.5 and dynWidget.js |
| - | Objects are [[http://www.thescripts.com/forum/thread718427.html|passed by refernce]] => Something like a copy constructor is necessary: | + | ==== Misc == |
| - | <code javascript> | + | * [[http://dojotoolkit.org/book/dojo-book-0-4/part-3-dojo-programming-model/global-dojo-objects|Using objects to simulate a namespace]] |
| - | function Point(x, y) {this.x=x; this.y=y;} | + | |
| - | Point.prototype.clone= function() {return new Point(this.x, this.y);} | + | |
| - | Point.prototype.toString= function() {return "("+this.x+"/"+this.y+") ";} | + | |
| - | var p = new Point(3,4); | + | ===== Constants == |
| - | var pr = p; // a reference to p | + | |
| - | var q = p.clone(); // a new point whit the same coordinates as p | + | |
| - | p.x= 9; p.y=-2; // change content of p | + | |
| - | document.write("p:"+p.toString()+ "pr:"+pr.toString()+ "q:"+ q.toString()); | + | |
| - | // result: p:(9/-2) pr:(9/-2) q:(3/4) | + | |
| - | </code> | + | |
| - | ==== Inheritance == | + | ''const'' is mentioned in the [[https://developer.mozilla.org/en/JavaScript/Guide/Values%2c_Variables%2c_and_Literals#Constants|Mozilla guide]] but dosen't work with Rhino version :?: and probabaly neither with IE |
| - | FIXME see JS Guide 1.5 and dynWidget.js | + | ===== Events == |
| - | ==== Misc == | + | For event handling see: [[https://developer.mozilla.org/en/DOM/element#Event_Handlers|Mozilla]] & [[http://de.selfhtml.org/javascript/sprache/eventhandler.htm|Selfhtml]] |
| - | * [[http://dojotoolkit.org/book/dojo-book-0-4/part-3-dojo-programming-model/global-dojo-objects|Using objects to simulate a namespace]] | + | See also Dojo [[dojo#events]] |
| - | ===== Events ===== | ||
| ==== Get the Source of the Event ==== | ==== Get the Source of the Event ==== | ||
| <code javascript> | <code javascript> | ||
| Zeile 158: | Zeile 255: | ||
| </code> | </code> | ||
| Event handler for value input fields | Event handler for value input fields | ||
| - | For event handling see: [[http://developer.mozilla.org/en/docs/DOM:element#Event_Handlers|Mozilla]] & [[http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onchange.asp|Micro$oft]] | ||
| ===== Closures == | ===== Closures == | ||
| Zeile 278: | Zeile 374: | ||
| ===== Ajax == | ===== Ajax == | ||
| + | ==== Links == | ||
| - | * [[http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html|Basic principles]] from [[http://www.ibm.com/developerworks/views/web/libraryview.jsp?search_by=Mastering+Ajax|Mastering Ajax series]] at IBM developerWorks | + | [[http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html|Basic principles]] from [[http://www.ibm.com/developerworks/views/web/libraryview.jsp?search_by=Mastering+Ajax|Mastering Ajax series]] at IBM developerWorks - [[http://www.twilightuniverse.com/projects/sack/|Simple AJAX Code-Kit]] - [[http://www.jibbering.com/2002/4/httprequest.html|Raw cross browser code]] |
| - | * [[http://www.jibbering.com/2002/4/httprequest.html|Raw cross browser code]] | + | |
| - | * [[http://www.twilightuniverse.com/projects/sack/|Simple AJAX Code-Kit]] | + | |
| ==== Sending JSON to Server == | ==== Sending JSON to Server == | ||
| Zeile 287: | Zeile 382: | ||
| To convert any javscript value to a JSON string, use json2.js at [[http://www.json.org/js.html|json.org]] | To convert any javscript value to a JSON string, use json2.js at [[http://www.json.org/js.html|json.org]] | ||
| - | FIXME look in http://www.ibm.com/developerworks/views/web/libraryview.jsp?search_by=Mastering+Ajax | + | ==== Todo / Pending == |
| + | |||
| + | * Check [[ibm>web/library/wa-aj-ajaxcomm/|Various client-server communication mechanisms in an Ajax-based web application]] | ||
| + | * Comet allows a web server to push data to a browser. [[wp>Comet_(programming)|Wikpedia article]] Introduction: [[http://www.developer.com/java/ent/article.php/3756841|Pushing Data to the Browser with Comet]] Manual: [[http://www.webreference.com/programming/javascript/rg28/|Comet Programming: Using Ajax to Simulate Server Push]] | ||
| ===== Cookies == | ===== Cookies == | ||
| Zeile 294: | Zeile 392: | ||
| ===== Dojo Toolkit == | ===== Dojo Toolkit == | ||
| - | ==== Links == | ||
| - | [[http://www.sitepen.com/blog/series/dojo-quick-start-guide/|Quick start]], [[http://docs.dojocampus.org/quickstart/index|Tutorial]], [[http://docs.dojocampus.org/manual/index|Reference]], [[http://dojocampus.org/explorer/|Feature explorer]] (incomplete?), [[http://o.dojotoolkit.org/book/dojo-book-0-9/hello-world-tutorial|hello world (outdated)]] [[http://dev.aol.com/dojo|Dojo Lib from AOL's CDN]] | + | See [[dojo]] |
| + | |||
| + | ===== Using Javascript from the Command Line == | ||
| - | ==== Old == | + | See [[jrunscript]] |
| - | * [[http://dojotoolkit.org/docs|Official Documentation]] | ||
| - | * Charting: | ||
| - | * [[http://www.lightstreamer.com/dojoDemo.htm|Chart Demo]] | ||
| - | * Version 0.9.0 lacks charting, use v.0.4 instead! ([[http://dojotoolkit.org/book/dojo-porting-guide-0-4-x-0-9/widget-subsystem-changes|charting status for 0.9]]) | ||