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 21:18] 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 296: | Zeile 394: | ||
See [[dojo]] | See [[dojo]] | ||
+ | |||
+ | ===== Using Javascript from the Command Line == | ||
+ | |||
+ | See [[jrunscript]] | ||
+ | |||
+ |