js in one pic.opml

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<opml version="1.0">
    <head>
        <title>javascript in one pic</title>
        <ownerName>rainy</ownerName>
    </head>
    <body>
        <outline text="javascript in one pic">
            <outline text="Identifier">
                <outline text="Case-sensitive">
                    <outline text="a != A"></outline>
                </outline>
                <outline text="start with: letters, _,  $">
                    <outline text="letters: [ascii, unicode]"></outline>
                </outline>
                <outline text="key words">
                    <outline text="break; case; catch; continue; default; delete; do; else; finally; for; function; if; in; instanceof; new; return; switch; this; throw; try; typeof; var; void; while; with"></outline>
                </outline>
                <outline text="Reserved words">
                    <outline text="Nonstrict">
                        <outline text="class; const; enum; export; extends; import; super;"></outline>
                    </outline>
                    <outline text="'use strict'">
                        <outline text="implements; interface; let; package; private; protected; public; static; yield;"></outline>
                    </outline>
                </outline>
                <outline text="Variables">
                    <outline text="var a; // local"></outline>
                    <outline text="a = 123; // global"></outline>
                </outline>
            </outline>
            <outline text="comments">
                <outline text="// single line"></outline>
                <outline text="/* multi-line comments */"></outline>
            </outline>
            <outline text="Data type">
                <outline text="Number [Primitive like]">
                    <outline text="typeof">
                        <outline text="'number'"></outline>
                    </outline>
                    <outline text="value">
                        <outline text="0"></outline>
                        <outline text="1.2"></outline>
                        <outline text="045"></outline>
                        <outline text="0x56"></outline>
                        <outline text="0.314e2"></outline>
                        <outline text="NaN"></outline>
                    </outline>
                    <outline text="Number()">
                        <outline text="parseInt(&quot;2.7&quot;, 10); 	 // 2">
                            <outline text="parseInt('10', 2); // 2"></outline>
                        </outline>
                        <outline text="parseFloat('2.5'); 		 // 2.5"></outline>
                        <outline text="isNaN(parseFloat('a')); // true"></outline>
                    </outline>
                    <outline text="+-*/%"></outline>
                    <outline text="&lt;, &lt;=, &gt;, &gt;=, !=, =="></outline>
                </outline>
                <outline text="String [Primitive like]">
                    <outline text="typeof">
                        <outline text="'string'"></outline>
                    </outline>
                    <outline text="value">
                        <outline text="&quot;Hello&quot;"></outline>
                        <outline text="'World'"></outline>
                    </outline>
                    <outline text="String()/toString()">
                        <outline text="var a = 8; a.toString(2); // '1000'"></outline>
                    </outline>
                    <outline text="immutable">
                        <outline text="var a = 'ABC'; a[0]; 				// 'A' a[0] = 'D'; a; 					// 'ABC'"></outline>
                        <outline text="var a = 'abc'; a = a + 'd'; a; 					// 'abcd'"></outline>
                    </outline>
                    <outline text="+"></outline>
                    <outline text="&lt;, &lt;=, &gt;, &gt;=, !=, =="></outline>
                </outline>
                <outline text="Boolean [Primitive like]">
                    <outline text="typeof">
                        <outline text="'boolean'"></outline>
                    </outline>
                    <outline text="value">
                        <outline text="true"></outline>
                        <outline text="false"></outline>
                    </outline>
                    <outline text="Boolean()">
                        <outline text="number">
                            <outline text="Boolean(0); 			// false"></outline>
                            <outline text="Boolean(NaN); 		// false"></outline>
                            <outline text="Boolean(!0); 			// true"></outline>
                        </outline>
                        <outline text="string">
                            <outline text="Boolean(''); 			 // false"></outline>
                            <outline text="Boolean('*'); 		 // true"></outline>
                        </outline>
                        <outline text="object">
                            <outline text="Boolean(null);       // false"></outline>
                            <outline text="Boolean({}); 			 // true"></outline>
                        </outline>
                        <outline text="undefined">
                            <outline text="Boolean(undefined);// false"></outline>
                        </outline>
                    </outline>
                </outline>
                <outline text="Undefined [Primitive like]">
                    <outline text="typeof">
                        <outline text="'undefined'"></outline>
                    </outline>
                    <outline text="value">
                        <outline text="undefined"></outline>
                    </outline>
                    <outline text="undefined != Not defined">
                        <outline text="undefined == undefined; 	// true var a; a == undefined; 				// true console.log(d); 				// Error"></outline>
                    </outline>
                </outline>
                <outline text="Object (basic)">
                    <outline text="typeof">
                        <outline text="'object'"></outline>
                    </outline>
                    <outline text="{}">
                        <outline text="var p = {   name: 'Ad',   'age': 24 };"></outline>
                        <outline text="var q = {}; q.name = 'Bob'; q.age  = 24;  console.log(q.name);				 // 'Bob' console.log(q['age']);				 // 24"></outline>
                    </outline>
                    <outline text="new Object()">
                        <outline text="var p   = new Object(); p.sayHi = function(){   console.log('Hi!'); } p.sayHi(); 					// 'Hi!'"></outline>
                    </outline>
                    <outline text="Null //[Primitive like]">
                        <outline text="typeof">
                            <outline text="'object'"></outline>
                        </outline>
                        <outline text="value">
                            <outline text="null"></outline>
                        </outline>
                        <outline text="&quot;undefined object&quot;">
                            <outline text="null == undefined; // true"></outline>
                        </outline>
                    </outline>
                </outline>
                <outline text="Function (basic)">
                    <outline text="typeof">
                        <outline text="'function'"></outline>
                    </outline>
                    <outline text="create">
                        <outline text="var a = function(arg1, arg2){   //func body; }"></outline>
                        <outline text="function a(arg1, arg2){   //func body; }"></outline>
                        <outline text="(function(arg1,arg2){   //func body; })"></outline>
                    </outline>
                    <outline text="inside function">
                        <outline text="arguments">
                            <outline text="// by order">
                                <outline text="var f = function(x, y){   console.log('x: ' + x + ', y: ' + y); }; var x = 'x', y = 'y'; f(x, y);					 // x: x, y: y f(y, x);					 // x: y, y: x"></outline>
                            </outline>
                            <outline text="undefined">
                                <outline text="var f = function(x){   console.log(x); }; f();							// undefined"></outline>
                            </outline>
                            <outline text="arguments">
                                <outline text="var f = function(){   console.log(arguments); }; f(3,2,1);						// { '0': 3, '1': 2, '2': 1 }"></outline>
                            </outline>
                        </outline>
                        <outline text="return"></outline>
                    </outline>
                </outline>
            </outline>
            <outline text="Tips"></outline>
            <outline text="Operators">
                <outline text="+-*/%">
                    <outline text="casting">
                        <outline text="+">
                            <outline text="string &gt; number &gt; boolean">
                                <outline text="'1'+2"></outline>
                                <outline text="3+'4'"></outline>
                                <outline text="'5'+false"></outline>
                                <outline text="6+true"></outline>
                            </outline>
                        </outline>
                        <outline text="-">
                            <outline text="number &gt; string &gt; boolean">
                                <outline text="'1'-2"></outline>
                                <outline text="3-'4'"></outline>
                                <outline text="'5'-false"></outline>
                                <outline text="6-true"></outline>
                            </outline>
                        </outline>
                    </outline>
                </outline>
                <outline text="++a a-- a+=1 a-=1"></outline>
                <outline text="compare">
                    <outline text="&gt;, &gt;=, &lt;, &lt;="></outline>
                    <outline text="==, !=">
                        <outline text="			// only value"></outline>
                    </outline>
                    <outline text="===, !==">
                        <outline text="		 // both value &amp; type"></outline>
                    </outline>
                    <outline text="casting">
                        <outline text="a &gt; b; 	// a - b &gt; 0"></outline>
                    </outline>
                </outline>
                <outline text="! &amp;&amp; ||">
                    <outline text="!true; 			// false"></outline>
                    <outline text="true &amp;&amp; false; 	// false"></outline>
                    <outline text="false || true; 	// true"></outline>
                </outline>
            </outline>
            <outline text="Scope">
                <outline text="Execution context">
                    <outline text="global">
                        <outline text="+-------------+           +-----------------------+
|Node         +------+    |Execution Context      |
+-------------+      |    +-----------------------+
|global = {   |      +--&gt; |[Variable Object] = {  |
|             |      |    |                       |
|};           |      |    |  variables            |
+--------------      |    |                       |
                     |    |  data                 |
                     |    |                       |
                     |    |  functions            |
+--------------      |    |                       |
|Browser      +------+    |  objects              |
+-------------+           |                       |
|window = {   |           |  ...                  |
|             |           |                       |
|};           |           |};                     |
+-------------+           +-----------------------+
"></outline>
                    </outline>
                    <outline text="context stack">
                        <outline text="+-----------------------------------+                          
|function b() // create new context +-----+                    
+-----------------------------------+     |                    
|Variable Object = {                |     |   +---------------+
|  arguments = ...;                 |     |   |               |
|                                   |     |   |               |
|                                   |     |   |               |
|};                                 |     |   |               |
|Scope chain =                      |     |   |       .       |
| +-------------------------------+ |     |   |       .       |
| |global                         | |     |   |       .       |
| |  +---&gt; f = 'no';              | |     |   |               |
| |  |                            | |     |   |               |
| |  +---&gt; function a()           | |     |   |               |
| |           +---&gt; f = 'ye'      | |     |   +---------------+
| |           |                   | |     +-&gt; |function b     |
| |           +---&gt; function b()  | |         +---------------+
| |                    +---&gt;      | |         |function a     |
| |                    |          | |         +---------------+
| |                    +---&gt;      | |         |global context |
| |                               | |         +---------------+
| +-------------------------------+ |           Context Stack  
|this = {Object owns b};            |                          
+-----------------------------------+           http://rainy.im
"></outline>
                    </outline>
                </outline>
                <outline text="Scope chain">
                    <outline text="+--------------------------------------------+
|Scope Chain                                 |
+--------------------------------------------+
+-+global [Variable Object]                  |
| |                                          |
| +-&gt; var x;                                 |
| |                                          |
| | &lt;---------------+                        |
| |                 +                        |
| +-&gt; function a() [Variable Object]&lt;+       |
| |      +                           |       |
| |      |                           |       |
| |      +--&gt; var x;                 |       |
| |      |                           |       |
| |      |                           +       |
| |      +--&gt; function b() [Variable Object] |
| |                                          |
| | &lt;---------------+                        |
| |                 +                        |
| +-&gt; function c() [Variable Object]&lt;+       |
| |      +                           |       |
| |      |                           |       |
| |      +--&gt; var x;                 |       |
| |      |                           |       |
| |      |                           +       |
| |      +--&gt; function d() [Variable Object] |
| |                                          |
| v                                          |
|                                            |
+--------------------------------------------+
"></outline>
                </outline>
                <outline text="Closure">
                    <outline text="   +-------------------+      +-----------------+
   |Execution context  |  +---+[Scope chain]    |
   +-------------------+  |   +-----------------+
+&gt; | var x = 100;      |  |   |[Function inc]   |
|  | var inc1 = inc(); +--+   |  +              |
|  | var inc2 = inc(); +--+   |  +-&gt; x;         |
|  |                   |      |  |              |
|  | inc1();           |      |  +-&gt; [Function] |
|  | inc1();           |      |        +        |
|  | inc2();           |      |        +-&gt; x++; |
|  | inc1();           |      |                 |
|  | inc2();           |      +-----------------+
+--+ x;                |          http://rainy.im
   |                   |                         
   +-------------------+                         
"></outline>
                </outline>
            </outline>
            <outline text="Reference type">
                <outline text="Function">
                    <outline text="typeof">
                        <outline text="'function'"></outline>
                    </outline>
                    <outline text="properties">
                        <outline text="f.length;"></outline>
                    </outline>
                    <outline text="as value (callback)">
                        <outline text="var api = function(){   return {     name: 'rainy',     age: 24   }; }; var handler = function(d){   console.log('Name: '+d.name+', Age: '+d.age); }; var request = function(api, callback){   callback(api()); };  request(api, handler);	// Name: rainy, Age: 24"></outline>
                    </outline>
                    <outline text="methods">
                        <outline text="apply/call/bind">
                            <outline text="// func.apply(thisObj, [arg1, arg2, ...]); // func.call(thisObj, arg1, arg2, ...); // func.bind(thisObj, arg1, arg2, ...); // about thisObj, see `Scope`"></outline>
                            <outline text="var sayHi = function(name){   console.log('Hello, ' + name + '!'); }; sayHi.call(this, 'rainy');					// Hello, rainy! sayHi.apply(this, ['rainy']);				// Hello, rainy! sayHi.bind(this, 'rainy')();				// Hello, rainy!"></outline>
                        </outline>
                    </outline>
                </outline>
                <outline text="Array">
                    <outline text="typeof">
                        <outline text="'object'"></outline>
                    </outline>
                    <outline text="var a = [1, 2, '3', [4, true]];"></outline>
                    <outline text="var a = new Array(1, 2, '3', [4, true]);"></outline>
                    <outline text="properties">
                        <outline text="a.length; 			  // 4"></outline>
                    </outline>
                    <outline text="methods">
                        <outline text="a[0] == 1;             // true"></outline>
                        <outline text="a[3][1] == true;       // true"></outline>
                        <outline text="a.slice(0, 2);         // [1, 2]"></outline>
                        <outline text="a.indexOf(1); 			// 0"></outline>
                        <outline text="a.push({}); 	 			// return a.length(Mod)"></outline>
                        <outline text="a.pop();   				// return popped element(Mod)"></outline>
                        <outline text="a.join('-'); 				// ?">
                            <outline text="a.toString() == a.join(',');"></outline>
                            <outline text="var s = 'a,b,c,d'; s.split(','); // ['a', 'b', 'c', 'd']"></outline>
                        </outline>
                        <outline text="a.concat(['a', 'b']);	// VS push()"></outline>
                        <outline text="map/reduce">
                            <outline text="// arr.map(callback, thisObj)  /* callback = function(element, index, arr){  *   return element to the same pos of (returned)arr;  * };  */  [55, 44, 33, 22, 11].map(function(e, i, arr){   return e/(arr.length-i); });								// [ 11, 11, 11, 11, 11 ];"></outline>
                            <outline text="// arr.reduce(callback, init);  /* callback = function(prev, curr, index, arr){  *   curr walk through   *     arr.slice(init != undefined ? 0 : 1, arr.length);  *   prev cache last returned value start with:   *     (init != undefined ? init : arr[0]);  * };  */  [55, 44, 33, 22, 11].reduce(function(p, c, i, arr){   return p + c/(arr. length-i); }, 55);						// 0; "></outline>
                        </outline>
                        <outline text="filter/some/every"></outline>
                        <outline text="shift/unshift/sort/reverse/splice">
                            <outline text="// will change the array"></outline>
                        </outline>
                    </outline>
                    <outline text="iteration">
                        <outline text="for(var i = 0; i &lt; a.length; i++){   console.log(a[i]); }"></outline>
                        <outline text="a.forEach(function(ele){   console.log(ele); });"></outline>
                    </outline>
                </outline>
                <outline text="Object (OOP)">
                    <outline text="root of everything."></outline>
                    <outline text="Constructor">
                        <outline text="function Person(name){   this.name = name;   this.sayHi= function(){     console.log('Hi ' + this.name + '!');   }; };  var p1 = new Person('Ad'); var p2 = new Person('Bob');  p1.name							// 'Ad' p2.sayHi();						// 'Hi Bob!'  p1.constructor === Person		// true p1 instanceof Person			// true p1.sayHi == p2.sayHi			// false"></outline>
                    </outline>
                    <outline text="prototype chain">
                        <outline text="function Person(){}; Person.prototype.name = 'Person';  var p1  = new Person(); var p2  = new Person(); p2.name = 'rainy';  console.log(p1.name);					// 'Person' console.log(p2.name);					// 'rainy'">
                            <outline text="Person">
                                <outline text="name">
                                    <outline text="'Person'"></outline>
                                </outline>
                            </outline>
                            <outline text="p1 = new Person();">
                                <outline text="prototype"></outline>
                                <outline text="age">
                                    <outline text="24"></outline>
                                </outline>
                            </outline>
                            <outline text="p2 = new Person();">
                                <outline text="prototype"></outline>
                                <outline text="name">
                                    <outline text="'rainy'"></outline>
                                </outline>
                            </outline>
                        </outline>
                        <outline text="p1 instanceof Person						// true p1.age = 24;  p1.hasOwnProperty('name');				// false Person.hasOwnProperty('name');		// true  p1.hasOwnProperty('age');				// true 'name' in p1								// true 'age' in Person							// false"></outline>
                        <outline text="// All properties on the prototype are shared among instances Person.prototype.friends = ['Ad', 'Bob'];  p1.friends.pop();						// 'Bob' console.log(p2.friends);				// ['Ad']  // Combine constructor &amp; prototype function Person(){   this.friends = ['Ad', 'Bob']; }; Person.prototype.name = 'Person';	"></outline>
                    </outline>
                    <outline text="Inheritance">
                        <outline text="prototype chain">
                            <outline text="function Father(){}; Father.prototype.familyName = 'Good';  function Child(){}; Child.prototype = new Father();  var c = new Child(); console.log(c.familyName);				// 'Good'"></outline>
                        </outline>
                        <outline text="constructor">
                            <outline text="function Father(){   this.familyName = 'Good'; };  function Child(){   Father.call(this); };  var c = new Child(); console.log(c.familyName);					// 'Good'"></outline>
                        </outline>
                    </outline>
                </outline>
            </outline>
            <outline text="Flow control">
                <outline text="if">
                    <outline text="if(cond){   state1; }else if(cond2){   state2; }else{   state3; }"></outline>
                    <outline text="false ? a : b"></outline>
                </outline>
                <outline text="switch">
                    <outline text="switch (day) {   case MON:     break;   case TUE:     break;   case WEN:     break;   default: }"></outline>
                </outline>
                <outline text="while">
                    <outline text="do {   state1; } while(cond)"></outline>
                    <outline text="while(cond){   state1; }"></outline>
                    <outline text="break; continue"></outline>
                </outline>
                <outline text="for">
                    <outline text="for(var i = 0; i &lt; len; i++){   state1; }"></outline>
                    <outline text="for(var k in Obj){   // if Obj.hasOwnProperty(k){     console.log('Obj[' + k + '] = ' + Obj[k]);   // } }"></outline>
                </outline>
                <outline text="try/catch/finally">
                    <outline text="var a = {}; try{   a.f(); }catch(e){   console.log(e instanceof TypeError);    // true   (function(){ 		console.log('a.f()');				  // 'a.f()'    })(); }finally{   console.log('always');					  // 'always' }"></outline>
                </outline>
            </outline>
        </outline>
    </body>
</opml>