├── README.md
├── _config.yml
├── assets
    ├── ajax.jpg
    ├── available-screen-size.png
    ├── browser-object-model.png
    ├── console.error.png
    ├── console.log.png
    ├── console.warn.png
    ├── console_dir.png
    ├── console_log.png
    ├── console_table.png
    ├── css-dom-tree.png
    ├── deepcopy.png
    ├── event-flow.png
    ├── html-dom-tree.png
    ├── javascript-stages.png
    ├── message.json
    ├── rendering-process.png
    ├── rendering.png
    ├── screen-size.png
    ├── singleton-pattern.png
    ├── star.png
    ├── web-page-size.png
    ├── window-inner-size.png
    └── window-outer-size.png
├── es6
    ├── async-in-es6.js
    └── es6-features.js
└── files
    ├── closures.html
    ├── create-html-elements.html
    ├── datatypes.html
    ├── dom-manipulation.html
    ├── functions.html
    ├── iife-pattern.html
    ├── miscellaneous.html
    ├── namespace.html
    ├── objects.html
    ├── prototype.html
    └── regexp.html


/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman


--------------------------------------------------------------------------------
/assets/ajax.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/ajax.jpg


--------------------------------------------------------------------------------
/assets/available-screen-size.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/available-screen-size.png


--------------------------------------------------------------------------------
/assets/browser-object-model.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/browser-object-model.png


--------------------------------------------------------------------------------
/assets/console.error.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/console.error.png


--------------------------------------------------------------------------------
/assets/console.log.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/console.log.png


--------------------------------------------------------------------------------
/assets/console.warn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/console.warn.png


--------------------------------------------------------------------------------
/assets/console_dir.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/console_dir.png


--------------------------------------------------------------------------------
/assets/console_log.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/console_log.png


--------------------------------------------------------------------------------
/assets/console_table.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/console_table.png


--------------------------------------------------------------------------------
/assets/css-dom-tree.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/css-dom-tree.png


--------------------------------------------------------------------------------
/assets/deepcopy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/deepcopy.png


--------------------------------------------------------------------------------
/assets/event-flow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/event-flow.png


--------------------------------------------------------------------------------
/assets/html-dom-tree.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/html-dom-tree.png


--------------------------------------------------------------------------------
/assets/javascript-stages.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/javascript-stages.png


--------------------------------------------------------------------------------
/assets/message.json:
--------------------------------------------------------------------------------
1 | {"employees":[  
2 |     {"name":"Shyam", "email":"shyamjaiswal@gmail.com"},  
3 |     {"name":"Bob", "email":"bob32@gmail.com"},  
4 |     {"name":"Jai", "email":"jai87@gmail.com"}  
5 | ]}  


--------------------------------------------------------------------------------
/assets/rendering-process.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/rendering-process.png


--------------------------------------------------------------------------------
/assets/rendering.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/rendering.png


--------------------------------------------------------------------------------
/assets/screen-size.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/screen-size.png


--------------------------------------------------------------------------------
/assets/singleton-pattern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/singleton-pattern.png


--------------------------------------------------------------------------------
/assets/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/star.png


--------------------------------------------------------------------------------
/assets/web-page-size.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/web-page-size.png


--------------------------------------------------------------------------------
/assets/window-inner-size.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/window-inner-size.png


--------------------------------------------------------------------------------
/assets/window-outer-size.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learning-zone/javascript-basics/6aefbc8d44c4fef49f3813111e14e377a2f07f66/assets/window-outer-size.png


--------------------------------------------------------------------------------
/es6/async-in-es6.js:
--------------------------------------------------------------------------------
 1 | //01. Example:- Promises
 2 | 
 3 | const delay = seconds => {
 4 |     return new Promise(resolve => {
 5 |         setTimeout(resolve, seconds * 1000)
 6 |     });
 7 | };
 8 | 
 9 | console.log("Zero seconds wait");
10 | delay(1).then(() => console.log('One seconds wait'));
11 | delay(5).then(() => console.log('Five seconds wait'));
12 | 
13 | //02. Loading data with fetch()
14 | 
15 | const getPeopleInSpace = () =>
16 |     fetch('http://api.open-notify.org/astros.json')
17 |         .then(res => res.json());
18 | 
19 | getPeopleInSpace()
20 |     .then(console.log);
21 | 
22 | //03. Async() and await()
23 | 
24 | const delay = seconds => {
25 |     return new Promise(
26 |         resolve => setTimeout(resolve, seconds * 1000)
27 |     )
28 | };
29 | 
30 | const countToFive = async() => {
31 |     console.log('zero seconds wait');
32 |     await delay(2);
33 |     console.log('Two seconds wait');
34 |     await delay(5);
35 |     console.log('Five seconds wait');
36 | }
37 | 
38 | countToFive();
39 | 
40 | //04. Async with fetch
41 | 
42 | const githubRequest = async(loginName) => {
43 |     try{
44 |         var response = await fetch(`http://api.github.com/users/${loginName}/followers`);
45 |         var json = await response.json();
46 |         var followerList = json.map(user => user.login);
47 |         console.log(followerList);
48 |     } catch(e){
49 |         console.log("Data didn't load", e);
50 |     }
51 | };
52 | 
53 | //githubRequest('eveporcello');
54 | githubRequest('pradeepkumar2');
55 | 


--------------------------------------------------------------------------------
/es6/es6-features.js:
--------------------------------------------------------------------------------
  1 | //01. Template String
  2 | 
  3 |   function print(Name) {
  4 |     console.log("Hello " + Name);
  5 |     console.log(`Hello ${Name}`);
  6 |   }
  7 |   print("Pradeep");
  8 | 
  9 | 
 10 | //02. Spread Operators
 11 | 
 12 | var firstGroup = ["C", "C++", "Java"];
 13 | var secondGroup = ["SQL", "MySQL", "BigData"];
 14 | var thirdGroup = ["Android", "Python", "Ruby", firstGroup, secondGroup];
 15 | var finalGroup = ["Android", "Python", "Ruby", ...firstGroup, ...secondGroup];
 16 | 
 17 | console.log(thirdGroup);
 18 | console.log(finalGroup);
 19 | 
 20 | 
 21 | //03. Sets
 22 | 
 23 | const sets = new Set([1, 2, 3, 4, 5]);
 24 | 	
 25 | console.log(sets.has(1)); 
 26 | console.log(sets.has(0)); 
 27 | 
 28 | 
 29 | //04. Default Parametrs
 30 | 
 31 | function add(x = 10, y = 20) {
 32 |   console.log(x + y);
 33 | }
 34 | add(30, 40);
 35 | 
 36 | 
 37 | //05. repeat()
 38 | 
 39 |     var cat = {
 40 | 		 meow(times){
 41 | 			 console.log("meow ".repeat(times));
 42 | 		 }
 43 | 	};
 44 |     cat.meow(2); 
 45 |     
 46 | 
 47 | //06. Arrow Function
 48 | 
 49 | var companyList = function(company) {
 50 |   console.log(company);
 51 | };
 52 | 
 53 | //ES-6
 54 | var companyList = company => console.log(company); //arraow function
 55 | 
 56 | companyList(["Apple", "Microsoft", "Google"]);
 57 | 
 58 | 
 59 | //07. Arrow function with 'this'
 60 | 
 61 | var person = {
 62 |   first: "Pradeep",
 63 |   actions: ["bike", "hike", "ski", "surf"],
 64 |   printActions: function() {
 65 |     var _this = this;
 66 |     this.actions.forEach(function(action) {
 67 |       var str = _this.first + " likes to " + action;
 68 |       console.log(str);
 69 |     });
 70 |   }
 71 | };
 72 | person.printActions();
 73 | 
 74 | //ES-6
 75 | var person = {
 76 |   first: "Pradeep",
 77 |   actions: ["bike", "hike", "ski", "surf"],
 78 |   printActions() {
 79 |     this.actions.forEach(action => {
 80 |       var str = this.first + " likes to " + action;
 81 |       console.log(str);
 82 |     });
 83 |   }
 84 | };
 85 | 
 86 | 
 87 | //08. Destructing Assignment
 88 | 
 89 | var phone = {
 90 |   title: "iPhone",
 91 |   price: 800,
 92 |   description: "The iPhone is a smartphone developed by Apple"
 93 | };
 94 | 
 95 | console.log(phone.title);
 96 | //ES-6
 97 | var { title, price } = {
 98 |   title: "iPhone",
 99 |   price: 800,
100 |   description: "The iPhone is a smartphone developed by Apple"
101 | };
102 | 
103 | console.log(title);
104 | 
105 | //09. Generators
106 | 
107 | /*** Calling a generator function does not execute its body immediately ***/
108 | 
109 | 	function* generator(i) {
110 | 		yield i;
111 | 		yield i + 10;
112 | 	}
113 | 	var gen = generator(10);
114 | 	console.log(gen.next().value); 
115 |     console.log(gen.next().value); 
116 |     
117 | 
118 | //10. Symbols
119 | 
120 | /*** They are tokens that serve as unique IDs. We create symbols via the factory function Symbol() ***/
121 | 
122 | 	const symbol1 = Symbol();
123 | 	const symbol2 = Symbol(42);
124 | 	const symbol3 = Symbol('foo');
125 | 
126 | 	console.log(typeof symbol1); 
127 | 
128 | 	console.log(symbol3.toString()); 
129 | 
130 | 	console.log(Symbol('foo') === Symbol('foo')); 
131 | 
132 | 
133 | // 11. Iterator
134 | 
135 | /**  The iterable protocol allows JavaScript objects to define or customize their iteration behavior. **/
136 | 
137 |   var title = 'ES6';
138 |   var iterateIt = title[Symbol.iterator]();
139 | 
140 |   console.log(iterateIt.next().value); //output: E
141 |   console.log(iterateIt.next().value); //output: S
142 |   console.log(iterateIt.next().value); //output: 6


--------------------------------------------------------------------------------
/files/closures.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Closures, Lexical Scope and Dynamic Scope</title>
 5 |   </head>
 6 |   <script>
 7 |     /***
 8 |      * A closure is the combination of a function bundled together (enclosed) with references
 9 |      * to its surrounding state (the lexical environment). In other words, a closure gives
10 |      * you access to an outer function’s scope from an inner function.
11 |      *
12 |      * Lexical Scope:- In lexical scoping free variables must belong to a parent scope.
13 |      *
14 |      * Dynamic Scope:- In dynamic scoping free variables must belong to the calling scope
15 |      *
16 |      * ***/
17 | 
18 |     var Person = function(name) {
19 |       var text = 'Hello ' + name; // Local variable
20 |       var say = function() {
21 |         // Closure makes this function private to this class
22 |         console.log("Using Closure: "+text);
23 |       };
24 |       return say;
25 |     };
26 | 
27 |     var obj = new Person('Pradeep');
28 |      obj();
29 | 
30 | 
31 |     // ---------------
32 |     // Lexical Scope
33 |     // ---------------
34 |      function add(x) {         // template of a new scope, x is bound in this scope
35 |           return function (y) { // template of a new scope, x is free, y is bound
36 |               return x + y;     // x resolves to the parent scope
37 |           };
38 |       }
39 | 
40 |       var sum = add(10);      // create a new scope for x and return a function
41 |       console.log("Using Lexical Scope: "+sum(20));         // create a new scope for y and return x + y
42 | 
43 |   </script>
44 |   <body>
45 |     Closures
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/files/create-html-elements.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Dynamically creating HTML elements using Javascript</title>
 5 |   </head>
 6 |   <body>
 7 |     <div id="container">The text above has been created dynamically.</div>
 8 |     <script>
 9 |       document.body.onload = addElement;
10 | 
11 |       function addElement() {
12 |         var newDiv = document.createElement('div');
13 |         var newContent = document.createTextNode('Hi there and greetings!');
14 |         newDiv.appendChild(newContent);
15 |         var currentDiv = document.getElementById('container');
16 |         document.body.insertBefore(newDiv, currentDiv);
17 |       }
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/files/datatypes.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>DataTypes in JS</title>
 5 |   </head>
 6 |   <script>
 7 |     /**
 8 |     * Six data types that are primitives:
 9 |     *   Boolean
10 |     *   Null
11 |     *   Undefined
12 |     *   Number
13 |     *   String
14 |     *   Symbol (new in ECMAScript 6):- “Symbol” value represents a unique identifier.
15 |     *  and Object
16 |     *
17 |     **/
18 |     // ---------------
19 |     // Dynamic typing
20 |     // ---------------
21 |     var val = 10;             console.log("type of val: "+typeof(val)); // Number
22 |         val = 10.20;          console.log("type of val: "+typeof(val)); // Number
23 |         val = 'Hello World';  console.log("type of val: "+typeof(val)); // String
24 |         val = true;           console.log("type of val: "+typeof(val)); // Boolean
25 |         val = null;           console.log("type of val: "+typeof(val)); // Object
26 |         val = undefined;      console.log("type of val: "+typeof(val)); // Undefined
27 | 
28 | 
29 |     var obj = new Object();   console.log("type of obj: "+typeof(obj)); // Undefined
30 |     var n;                    console.log("type of n: "+typeof(n));     // null datatype
31 | 
32 |     console.log("type of x: "+typeof(x));     // null datatype
33 | 
34 |     // --------------
35 |     // let vs var
36 |     // --------------
37 |     
38 |      function varTest() {
39 |       var x = 1;
40 |       if (true) {
41 |         var x = 2;  // same variable!
42 |         console.log("var: Inside value of x: "+x);  // 2
43 |       }
44 |       console.log("var: Outside value of x: "+x);  // 2
45 |     }
46 |     varTest();
47 | 
48 |   
49 |     function letTest() {
50 |       let x = 1;
51 |       if (true) {
52 |         let x = 2;  // different variable
53 |         console.log("let: Inside value of x: "+x);  // 2
54 |       }
55 |       console.log("let: Outside value of x: "+x);  // 1
56 |     }
57 |     letTest();
58 | 
59 |     // ----------
60 |     // Symbols
61 |     // ----------
62 | 
63 |     // id is a new symbol
64 |     let id = Symbol();   console.log("Type of id: "+typeof(id));
65 | 
66 |     // id is a symbol with the description "id"
67 |     let id1 = Symbol("id");
68 |     let id2 = Symbol("id");
69 | 
70 |     console.log("Is id1 == id2: "+(id1 == id2));
71 |   </script>
72 |   <body>
73 |     DataTypes in JavaScript
74 |   </body>
75 | </html>
76 | 


--------------------------------------------------------------------------------
/files/dom-manipulation.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>DOM Manipulation in JS</title>
  5 |   </head>
  6 |   <body>
  7 |     <div id="divId" class="main">DOM Manipulation in JavaScript</div>
  8 |     <br /><br />
  9 |     <button onclick="scrollWin()">Click me to scroll</button>
 10 |     <br /><br />
 11 | 
 12 |     <button onclick="removeHandler()">Remove EventListener</button>
 13 | 
 14 |     <p id="demo"></p>
 15 | 
 16 |     <ul id="items"></ul>
 17 |   </body>
 18 |   <script>
 19 |     document.getElementById('divId').innerHTML = "<section><p>DOM Manipulation in JavaScript <a href='https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents' target='_blank'>Manipulating documents</a></p></section>"; //Assigning new value
 20 | 
 21 |     var str = document.getElementsByTagName('div').value; //Get div value
 22 | 
 23 |     var str = document.getElementsByClassName('main').value; //Get div value using class "main"
 24 | 
 25 |     document.getElementById('divId').style.color = 'red'; //Applying css style to div
 26 | 
 27 |     console.log('innerWidth: ' + window.innerWidth);
 28 |     console.log('innerHeight: ' + window.innerHeight);
 29 |     console.log('outerWidth: ' + window.outerWidth);
 30 |     console.log('outerHeight: ' + window.outerHeight);
 31 |     console.log('hasOwnProperty: ' + window.hasOwnProperty);
 32 |     console.log('title: ' + window.document.title); // The document title
 33 |     console.log('body: ' + window.document.body); // The body element
 34 |     console.log('URL: ' + window.document.URL); // Window URL
 35 |     console.log('all: ' + window.document.all); // all
 36 |     console.log('documentElement: ' + document.documentElement); // documentElement
 37 | 
 38 |     // window.scrollTo()
 39 |     function scrollWin() {
 40 |       window.scrollTo({
 41 |         top: 100,
 42 |         left: 100,
 43 |         behavior: 'smooth'
 44 |       });
 45 |     }
 46 | 
 47 |     // window.onload
 48 |     window.onload = function() {
 49 |       console.log('window.onload(): Window onload function called !');
 50 |     };
 51 | 
 52 |     document.querySelector('body').innerHTML; // Get the Content
 53 |     document.querySelector('body').outerHTML; // Get the Content with html tag
 54 |     console.log('className(): ' + document.querySelector('#divId').className); // Get the class name
 55 |     console.log('classList(): ' + document.querySelector('#divId').classList); // Get all class name in array
 56 |     console.log('attributes(): ' + document.querySelector('#divId').attributes); // Get the attributes
 57 | 
 58 |     // querySelectorAll()
 59 |     document.querySelectorAll('.main p'); // Get all elements matching specified selectors(s);
 60 | 
 61 |     // querySelector()
 62 |     document.querySelector('.main a'); // Get the main element matching specified selectors(s);
 63 |     //document.querySelector('a').hasAttribute('target');
 64 |     //document.querySelector('a').setAttribute('target', '_blank');
 65 |     document.querySelector('.main').style.color = 'green';
 66 |     document.querySelector('.main').style.backgroundColor = 'blue';
 67 |     document.querySelector('body').classList.add('.new-class'); // Append new class
 68 |     document.querySelector('body').classList.toggle('.new-class');
 69 |     document.querySelector('body').classList.contains('.new-class');
 70 |     document.querySelector('.main').style.cssText = 'padding: 1em; color: white; background-color: red;';
 71 | 
 72 |     // getAttribute()
 73 |     console.log('getAttribute(): ' + document.getElementById('divId').getAttribute('class'));
 74 | 
 75 |     // setAttribute()
 76 |     document.querySelector('.main').setAttribute('style', 'padding: 2em');
 77 | 
 78 |     // addEventListener()
 79 |     document.addEventListener('click', function() {
 80 |       document.getElementById('divId').innerHTML = 'Updated Text on click !';
 81 |     });
 82 | 
 83 |     // removeEventListener()
 84 |     document.querySelector('body').addEventListener('mousemove', getCoords);
 85 | 
 86 |     function getCoords() {
 87 |       document.getElementById('demo').innerHTML = 'X coords: ' + event.clientX + ', Y coords: ' + event.clientY;
 88 |     }
 89 | 
 90 |     function removeHandler() {
 91 |       document.querySelector('body').removeEventListener('mousemove', getCoords);
 92 |     }
 93 | 
 94 |     // appendChild()
 95 |     var arr = ['One', 'Two', 'Three', 'Four', 'Five'];
 96 |     for (var i = 0; i < 5; i++) {
 97 |       var node = document.createElement('li'); // Create a <li> node
 98 |       var textnode = document.createTextNode(arr[i]); // Create a text node
 99 |       node.appendChild(textnode); // Append the text to <li>
100 |       document.getElementById('items').appendChild(node); // Append <li> to <ul> with id="demo"
101 |     }
102 | 
103 |     // replaceChild()
104 |     var textnode = document.createTextNode("Six");
105 |     var item = document.getElementById("items").childNodes[0];
106 |     item.replaceChild(textnode,item.childNodes[0]);
107 | 
108 |     // removeChild()
109 |     var list = document.getElementById("items");   // Get the <ul> element with id="items"
110 |     list.removeChild(list.childNodes[1]); 
111 | 
112 |     // CloneNode()
113 |     let clone = document.querySelector('#items').cloneNode( true );
114 |     clone.setAttribute( 'id', 'newId' ); // Set new Id
115 |     document.getElementById('items').appendChild(clone);
116 |     
117 |     // insertBefore()
118 |     var newItem = document.createElement("li");
119 |     var textnode = document.createTextNode("One");
120 |     newItem.appendChild(textnode);
121 |     var list = document.getElementById("items");
122 |     list.insertBefore(newItem, list.childNodes[0]);
123 |     
124 |   </script>
125 | </html>
126 | 


--------------------------------------------------------------------------------
/files/functions.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Types of functions in JavaScript</title>
  5 |   </head>
  6 |   <script>
  7 |     // ----------------------
  8 |     // Hoisting functions()
  9 |     // ----------------------
 10 | 
 11 |     var expression = function(name) {
 12 |       console.log('Hi ' + name);
 13 |     };
 14 |     expression('Pradeep');
 15 | 
 16 |     /* * 
 17 |      *  Curray function
 18 |      *
 19 |      *  Currying is a process in functional programming in which we can transform a function with multiple arguments 
 20 |      *  into a sequence of nesting functions. It returns a new function that expects the next argument inline.
 21 |      * 
 22 |      * */
 23 |     function multiply(a) {
 24 |       return function(b) {
 25 |         return function(c) {
 26 |           return a * b * c;
 27 |         };
 28 |       };
 29 |     }
 30 |     console.log('Curray function: ' + multiply(1)(2)(3)); // 6
 31 | 
 32 |     /**
 33 |      *  Arrow Function()
 34 |      * 
 35 |      *  An arrow function expression is a syntactically compact alternative to a regular function expression, 
 36 |      *  although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function 
 37 |      *  expressions are ill suited as methods, and they cannot be used as constructors.
 38 |      * 
 39 |      * **/
 40 |      
 41 |      var materials = [
 42 |         'Hydrogen',
 43 |         'Helium',
 44 |         'Lithium',
 45 |         'Beryllium'
 46 |     ];
 47 |     console.log('Arrow Function: ' + materials.map(material => material.length));
 48 | 
 49 |     const addition = (x, y) => { return x + y };
 50 |     console.log('addition: ' + addition(10, 20));
 51 | 
 52 |     /**
 53 |      *   Constructor Function()
 54 |      * 
 55 |      *   The Function constructor creates a new Function object. Calling the constructor directly can 
 56 |      *   create functions dynamically, but suffers from security and performance issues to eval. 
 57 |      *   However, unlike eval, the Function constructor creates functions which 
 58 |      *   execute in the global scope only.
 59 |      *  
 60 |      * **/
 61 | 
 62 |      var sum = new Function('a', 'b', 'return a + b');
 63 |      console.log('sum: ' + sum(10, 20)); // 30
 64 | 
 65 |      /**
 66 |       *   unescape() Function
 67 |       *   
 68 |       *   Note:- The unescape() function was deprecated in JavaScript version 1.5. Use decodeURI() or decodeURIComponent() instead.
 69 |       * 
 70 |       * **/
 71 | 
 72 |         var url = "https://www.google.co.in/?gfe_rd=cr&ei=VmKuWJ_EAcqBoAOrwZ2YDg";
 73 |         var url_esc = escape(url);
 74 |         var url_unesc = unescape(url);
 75 | 
 76 |         console.log('escape URL: ' + escape(url));    
 77 |         console.log('unescape URL: ' + unescape(url));  
 78 | 
 79 |     /***
 80 |      *  Callback function()
 81 |      * 
 82 |      *  A callback is a function that is to be executed after another function has finished executing.
 83 |      * 
 84 |      *  A callback function is a function passed into another function as an argument, which is then 
 85 |      *  invoked inside the outer function to complete some kind of routine or action.
 86 |      *  
 87 |      ***/
 88 |         
 89 |         function greeting(name) {
 90 |             alert('Hello ' + name);
 91 |         }
 92 |         function processUserInput(callback) {
 93 |             var name = prompt('Please enter your name: ');
 94 |             callback(name);
 95 |         }
 96 |         processUserInput(greeting);
 97 | 
 98 |   </script>
 99 |   <body>
100 |     <h1>Types of functions in JavaScript</h1>
101 |   </body>
102 | </html>
103 | 


--------------------------------------------------------------------------------
/files/iife-pattern.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>IIFE Design Patterns in JS</title>
 5 |   </head>
 6 |   <script>
 7 |     /***
 8 |      * An immediately-invoked function expression (or IIFE, pronounced "iffy") is a JavaScript programming
 9 |      * language idiom which produces a lexical scope using JavaScript's function scoping.
10 |      * Immediately-invoked function expressions can be used to avoid variable hoisting from within blocks,
11 |      * protect against polluting the global environment and simultaneously allow public access to methods
12 |      * while retaining privacy for variables defined within the function.
13 |      *
14 |      * ref: https://en.wikipedia.org/wiki/Immediately-invoked_function_expression
15 |      * ***/
16 | 
17 |     //IIFE - syntax
18 | 
19 |     (function() {
20 |       // statements
21 |     })();
22 | 
23 |     // Example
24 |     (function(window) {
25 |       'use strict';
26 |       function Person(name, address) {
27 |         this.name = name;
28 |         this.address = address;
29 |       }
30 | 
31 |       Person.prototype.sayHello = function() {
32 |         console.log(this.name + ' says hello');
33 |       };
34 | 
35 |       window.Person = Person;
36 |     })(window);
37 | 
38 |     function init() {
39 |       var PersonObj = new Person('Pradeep', 'Bangalore');
40 |       PersonObj.sayHello();
41 |       console.log(PersonObj);
42 |     }
43 | 
44 |     init();
45 |   </script>
46 |   <body>
47 |     IIFE Design Patterns
48 |   </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/files/miscellaneous.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Miscellaneous features in JavaScript</title>
  5 |   </head>
  6 |   <body>
  7 |      <h1 id='divId'></h1>
  8 |   </body>
  9 |   <script>
 10 | 
 11 |       /**
 12 |        * ---------------------------------
 13 |        *   HTML Collections vs NodeLists
 14 |        * ---------------------------------
 15 |        * 
 16 |        *   An HTMLCollection is a list of nodes. An individual node may be accessed by either ordinal index or the 
 17 |        *   node’s name or id attributes. Collections in the HTML DOM are assumed to be live meaning that they are 
 18 |        *   automatically updated when the underlying document is changed.
 19 |        * 
 20 |        *   A NodeList object is a collection of nodes. The NodeList interface provides the abstraction of an ordered 
 21 |        *   collection of nodes, without defining or constraining how this collection is implemented. NodeList objects 
 22 |        *   in the DOM are live or static based on the interface used to retrieve them
 23 |        * 
 24 |        * **/
 25 | 
 26 |        /**
 27 |         * ------------------
 28 |         *  var this = self
 29 |         * ------------------
 30 |         *   
 31 |         *  self is being used to maintain a reference to the original this even as the context is changing. It's a 
 32 |         *  technique often used in event handlers (especially in closures).
 33 |         *  
 34 |         * **/
 35 | 
 36 |         var obj = {
 37 |             outFunction: function() {
 38 |                 console.log('(this == obj): '+(this == obj)); // true
 39 |                 var self = this;
 40 |                 function innerFunction() {
 41 |                     console.log('(this == obj): ' + (this == obj)); //false
 42 |                     console.log('(self === obj): ' + (self === obj)); //true
 43 |                 }
 44 |                 return innerFunction;
 45 |             }
 46 |         }
 47 |         // This code will return inner function and won't execute it 
 48 |         var inner = obj.outFunction();
 49 |         inner(); // Invoke inner function 
 50 | 
 51 |         /**
 52 |          * ---------------------------
 53 |          *  append() vs appendChild()
 54 |          * ----------------------------
 55 |          * 
 56 |          *  The main difference is that appendChild() is a DOM function meanwhile append() is a JavaScript function.
 57 |          * 
 58 |          * **/
 59 |  
 60 |           var text = document.createTextNode('Miscellaneous features in JS');
 61 |           document.getElementById("divId").appendChild(text);
 62 |           document.getElementById("divId").append(' Example !!!');
 63 | 
 64 |         /**
 65 |          * ------------------------------
 66 |          *   dot notation vs brackets
 67 |          * ------------------------------
 68 |          * 
 69 |          *   1) Square bracket notation allows the use of characters that can't be used with dot notation:
 70 |          *       var foo = myForm.foo[]; // incorrect syntax
 71 |          *       var foo = myForm["foo[]"]; // correct syntax
 72 |          *
 73 |          *   2) square bracket notation is useful when dealing with property names which vary in a predictable way:
 74 |          *       for (var i = 0; i < 10; i++) {
 75 |          *          someFunction(myForm["myControlNumber" + i]);
 76 |          *       }
 77 |          *
 78 |          *   3) Square bracket notation allows access to properties containing special characters and selection of 
 79 |          *      properties using variables
 80 |          *       var foo = myResponse.bar.Baz; // incorrect syntax
 81 |          *       var foo = myResponse["bar.Baz"]; // correct syntax
 82 |          * 
 83 |          * 
 84 |          * * */
 85 | 
 86 |        
 87 | 
 88 |         /**
 89 |          * -------------------
 90 |          *   async vs  defer
 91 |          * -------------------
 92 |          * 
 93 |          * 
 94 |          *  <script src=script.js/>
 95 |          * 
 96 |          *     The HTML file will be parsed until the script file is hit, at that point parsing will stop and a request 
 97 |          *     will be made to fetch the file. The script will then be executed before parsing is resumed.
 98 |          * 
 99 |          *  <script async src="script.js"/>
100 |          *   
101 |          *     async downloads the file during HTML parsing and will pause the HTML parser to execute it when it has 
102 |          *     finished downloading.
103 |          * 
104 |          *  <script defer src="script.js"/>
105 |          * 
106 |          *     defer downloads the file during HTML parsing and will only execute it after the parser has completed. 
107 |          *     defer scripts are also guaranteed to execute in the order that they appear in the document.
108 |          *    
109 |          * **/
110 | 
111 | 
112 |         /**
113 |          * -------------------------------
114 |          *   async() vs await() in ajax
115 |          * -------------------------------
116 |          * 
117 |          * 
118 |          *   An async() function can contain an await() expression, which pauses the execution of the async() function and waits for the passed 
119 |          *   Promise's resolution, and then resumes the async() function's execution and returns the resolved value.
120 |          * 
121 |          * **/ 
122 |          function resolve() {
123 |             return new Promise(resolve => {
124 |                 setTimeout(() => {
125 |                 resolve('resolved after await() !!!');
126 |                 }, 2000);
127 |             });
128 |          }
129 | 
130 |          async function asyncCall() {
131 |             console.log('async() function calling !');
132 |             var result = await resolve();
133 |             console.log(result); // expected output: 'resolved'
134 |          }
135 |         asyncCall();
136 | 
137 |         /* *
138 |          *  --------------------
139 |          *   Request​.headers
140 |          * --------------------
141 |          * 
142 |          *   The headers read-only property of the Request interface contains the Headers object associated with the request.
143 |          *   
144 |          * **/
145 |           var myRequest = new Request('flowers.jpg');
146 |           var myHeaders = myRequest.headers; // Headers {}
147 |           
148 |           var myHeaders = new Headers();
149 |           myHeaders.append('Content-Type', 'image/jpeg');
150 | 
151 |           var myInit = { 
152 |             method: 'GET',
153 |             headers: myHeaders,
154 |             mode: 'cors',
155 |             cache: 'default' 
156 |           };
157 | 
158 |           var myRequest = new Request('flowers.jpg', myInit);
159 |           myContentType = myRequest.headers.get('Content-Type'); 
160 |           console.log('Request​.headers: ' + myContentType); // returns 'image/jpeg'
161 |           
162 |         /**
163 |          * -------------------------
164 |          *  JavaScript Error Types
165 |          * -------------------------
166 |          * 
167 |          *   1) EvalError:-      Creates an instance representing an error that occurs regarding the global function eval().
168 |          *   2) InternalError:-  Creates an instance representing an error that occurs when an internal error in the JavaScript 
169 |          *                       engine is thrown. E.g. "too much recursion" 
170 |          *   3) RangeError:-     Creates an instance representing an error that occurs when a numeric variable or parameter is 
171 |          *                       outside of its valid range.
172 |          *   4) ReferenceError:- Creates an instance representing an error that occurs when de-referencing an invalid reference.
173 |          *   5) SyntaxError:-    Creates an instance representing a syntax error that occurs while parsing code in eval().
174 |          *   6) TypeError:-      Creates an instance representing an error that occurs when a variable or parameter is not of a valid type.
175 |          *   7) URIError:-       Creates an instance representing an error that occurs when encodeURI() or decodeURI() are passed invalid parameters.
176 |          * 
177 |          * 
178 |          *   Examples:-
179 |          * 
180 |          *   constt syntax = 'val' //SyntaxError
181 |          *   
182 |          *   const booleanVal = true;
183 |          *   booleanVal.slice(-1);    //TypeError
184 |          * 
185 |          *   const name = receivedName; //ReferenceError
186 |          * 
187 |          *   'string'.repeat(-1); //RangeError
188 |          * 
189 |          *    decodeURIComponent('%'); //URIError
190 |          * **/
191 | 
192 |          /**
193 |           * ------------------------------
194 |           *   ViewState vs SessionState
195 |           * -------------------------------
196 |           * 
197 |           *   View State
198 |           *   
199 |           *     – Maintained at page level only.
200 |           *     – View state can only be visible from a single page and not multiple pages.
201 |           *     – Information stored on the client’s end only.
202 |           *     – View state will retain values in the event of a postback operation occurring.
203 |           *     – View state is used to allow the persistence of page-instance-specific data.
204 |           *
205 |           *   Session State
206 |           *         
207 |           *     – Maintained at session level.
208 |           *     – Session state value availability is in all pages available in a user session.
209 |           *     – Information in session state stored in the server.
210 |           *     – In session state, user data remains in the server.  The availability of the data is 
211 |           *       guaranteed until either the user closes the session or the browser is closed.
212 |           *     – Session state is used for the persistence of user-specific data on the server’s end.
213 |           *
214 |           * **/  
215 | 
216 |           // unshift() :- The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.
217 |             var arr = [1, 2, 3];
218 | 
219 |             console.log(arr.unshift(4, 5)); // expected output: 5
220 |             console.log('unshift(): ' + arr); // expected output: Array [4, 5, 1, 2, 3]
221 |             
222 |          // shift() :- The shift() method removes the first element from an array and returns that removed element. 
223 |             var arr = [1, 2, 3];
224 |             var firstElement = arr.shift();
225 | 
226 |             console.log('shift(): ' + arr);  // expected output: Array [2, 3]
227 |             console.log('firstElement: ' + firstElement); // expected output: 1
228 | 
229 |         /**
230 |          * -----------------------------------
231 |          *  firstchild vs firstelementchild
232 |          * -----------------------------------
233 |          * 
234 |          *   <ul id="myList">
235 |          *       <li>Coffee</li>
236 |          *       <li>Tea</li>
237 |          *   </ul>
238 |          *
239 |          *   var list = document.getElementById("myList").firstElementChild.innerHTML;
240 |          *   console.log('firstElementChild: ' + list); //Coffee
241 |          * 
242 |          *   
243 |          *   firstchild
244 |          * 
245 |          *   <ul id="myList"><li>Coffee</li><li>Tea</li></ul>
246 |          *   
247 |          *   var list = document.getElementById("myList").firstChild.innerHTML;
248 |          *   console.log('firstChild: ' + list); //Coffee
249 |          * 
250 |          *  Note:- If you add whitespace before the first li element, the result will be "undefined".
251 |          * **/  
252 | 
253 |          /**
254 |           * -----------------
255 |           *  History Object
256 |           * -----------------
257 |           * 
258 |           * **/
259 |             window.history.back();          // Goes to the previous page in session history
260 |             window.History.forward()        // Goes to the next page in session history
261 |             window.History.go()             // Loads a page from the session history, identified by its relative location to the current page
262 |             window.History.pushState()      // Pushes the given data onto the session history stack with the specified title and, if provided, URL
263 |             window.History.replaceState()   // Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL
264 | 
265 |         /**
266 |          *   ---------------------------
267 |          *    Shallow Copy vs Deep Copy
268 |          *   ---------------------------
269 |          *  
270 |          *   Shallow copy is a bit-wise copy of an object. A new object is created that has an exact copy of the values in the original object. 
271 |          *   If any of the fields of the object are references to other objects, just the reference addresses are copied i.e., only the memory address is copied.
272 |          * 
273 |          *   A deep copy copies all fields, and makes copies of dynamically allocated memory pointed to by the fields. A deep copy occurs when an object is copied
274 |          *   along with the objects to which it refers.
275 |          * 
276 |          * **/
277 | 
278 | 
279 |          /**
280 |          *
281 |          *    ----------------------
282 |          *      Variable Shadowing
283 |          *    -----------------------
284 |          *
285 |          ***/
286 |           var x = 4;
287 |           function example() {
288 |               var x = 5; // x is shadowing the outer scope's x variable
289 |           }
290 | 
291 |          
292 |          /**
293 |           *    -------------------
294 |           *       Yield Keyword
295 |           *    -------------------
296 |           *
297 |           *  The yield keyword is used to pause and resume a generator function (function* or legacy generator function).
298 |          **/
299 | 
300 |           function* foo(index) {
301 |             while (index < 5) {
302 |             yield index++;
303 |             }
304 |           }
305 | 
306 |           const iterator = foo(0);
307 |           console.log(iterator.next().value); // expected output: 0
308 |           console.log(iterator.next().value); // expected output: 1
309 | 
310 | 
311 |         /**
312 |           *    ------------------- 
313 |           *       await Keyword
314 |           *    -------------------
315 |           *   
316 |           *   The await operator is used to wait for a Promise. It can only be used inside an async function.
317 |           * 
318 |          **/
319 | 
320 |             function resolveAfter2Seconds(x) { 
321 |               return new Promise(resolve => {
322 |                 setTimeout(() => {
323 |                   resolve(x);
324 |                 }, 20000);
325 |               });
326 |             }
327 | 
328 |             async function f1() {
329 |               var x = await resolveAfter2Seconds(10);
330 |               console.log(x); // 10
331 |             }
332 |             f1();
333 | 
334 | 
335 |          /**
336 |           *   -----------------     
337 |           *     in Operator
338 |           *   -----------------
339 |           *
340 |           *  The "in" operator returns true if the specified property is in the specified object or its prototype chain.
341 |           *
342 |           **/
343 |               
344 |             var car = {make: 'Honda', model: 'Accord', year: 1998};
345 | 		        console.log('make' in car);	// expected output: true
346 | 
347 | 
348 |         /** 
349 |           *  -----------------------
350 |           *    instanceof Operator
351 |           *  -----------------------
352 |           *
353 |           *  The instanceof operator tests whether the prototype property of a constructor appears anywhere in the prototype chain of an object.
354 |          **/
355 | 
356 |             function Car(make, model, year) {
357 |               this.make = make;
358 |               this.model = model;
359 |               this.year = year;
360 |             }
361 |             var auto = new Car('Honda', 'Accord', 1998);
362 | 
363 |             console.log(auto instanceof Car);  // expected output: true
364 |             console.log(auto instanceof Object); // expected output: true 
365 |   </script>
366 | </html>
367 | 


--------------------------------------------------------------------------------
/files/namespace.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Namespace in JS</title>
 5 |   </head>
 6 |   <script>
 7 |     var MYNAMESPACE = MYNAMESPACE || {};
 8 | 
 9 |     MYNAMESPACE.MessageClass = function(msg) {
10 |       this.value = msg;
11 |       this.getMessage = function() {
12 |         return this.value;
13 |       };
14 |     };
15 | 
16 |     var obj = new MYNAMESPACE.MessageClass('Pradeep');
17 |     console.log("Hello "+obj.getMessage());
18 |   </script>
19 |   <body>
20 |     Namespace in JavaScript
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/files/objects.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Objects in JS</title>
  5 |   </head>
  6 |   <script>
  7 |     var Person = {}; //Object creation
  8 | 
  9 |     var Person = { name: 'Pradeep', address: 'Bangalore' }; //Object key value pair
 10 | 
 11 |     console.log('Access Object using key: ' + Person.name); //Access Object value using key
 12 | 
 13 |     var Person = [
 14 |       { name: 'ABC', address: 'INDIA' }, //Array of Objects
 15 |       { name: 'XYZ', address: 'USA' },
 16 |       { name: 'PQR', address: 'UK' }
 17 |     ];
 18 | 
 19 |     console.log( 'Name: ' + Person[2].name + ' and Adress: ' + Person[2].address ); //Access Object value using key
 20 | 
 21 |     var CarClass = new Object();
 22 |     CarClass.company = 'Ford';
 23 |     CarClass.model = 'Mustang';
 24 |     CarClass.year = 1969;
 25 | 
 26 |     console.log('Car Model: ' + CarClass.model);
 27 | 
 28 |     CarClass['company'] = 'Jaguar';
 29 |     CarClass['model'] = 'Jaguar Land Rover';
 30 |     CarClass['year'] = 1933;
 31 | 
 32 |     console.log('Car Model: ' + CarClass.model);
 33 | 
 34 |     /**
 35 |         Multiple ways of creating object in javascript
 36 |     **/
 37 | 
 38 |     // ----------------------
 39 |     // Object() constructor
 40 |     // ----------------------
 41 | 
 42 |     // Store an empty Object object in d
 43 |     var d = new Object();
 44 |     var d = new Object(null);
 45 |     var d = new Object(undefined);
 46 |     console.log('Using Object() constructor: ' + typeof d);
 47 | 
 48 |     // ------------------
 49 |     // Object.create()
 50 |     // ------------------
 51 |     var a = Object.create(null);
 52 |     console.log('Using Object.create(): ' + typeof a);
 53 | 
 54 |     // ---------------------
 55 |     // bracket's syntactig
 56 |     // ---------------------
 57 |     var b = {};
 58 |     console.log('Using Bracket: ' + typeof b);
 59 | 
 60 |     // -----------------------
 61 |     // function constructor
 62 |     // -----------------------
 63 |     var Obj = function(name) {
 64 |       this.name = name;
 65 |     };
 66 |     var c = new Obj('Pradeep');
 67 |     console.log('Using function constructor: ' + c.name);
 68 | 
 69 |     // --------------------
 70 |     // ES6 class syntax
 71 |     // --------------------
 72 |     class myObject {
 73 |       constructor(name) {
 74 |         this.name = name;
 75 |       }
 76 |     }
 77 |     var e = new myObject('Pradeep');
 78 |     console.log('ES6: ' + e.name);
 79 | 
 80 |     // --------------------
 81 |     // Singleton pattern
 82 |     // --------------------
 83 |     var sp = new function() {
 84 |       this.name = 'Pradeep';
 85 |     }();
 86 |     console.log('Using Singleton Pattern: ' + sp.name);
 87 | 
 88 |     console.log('Object length: ' + Object.length); // 1
 89 | 
 90 | 
 91 |     /** 
 92 |       Object Clone in JS
 93 | 
 94 |       Deep copy by performance: ( best to worst )
 95 | 
 96 |         1) Reassignment "=" (string arrays, number arrays - only)
 97 |         2) Slice (string arrays, number arrays - only)
 98 |         3) Concatenation (string arrays, number arrays - only)
 99 |         4) Custom function: for-loop or recursive copy
100 |         5) jQuery's $.extend
101 |         6) JSON.parse (string arrays, number arrays, object arrays - only)
102 |         7) Underscore.js's _.clone (string arrays, number arrays - only)
103 |         8) Lo-Dash's _.cloneDeep
104 |     **/
105 |         
106 |     var oldObject = [{object:'a'}, {object:'b'}];
107 |     var newObject = JSON.parse(JSON.stringify(oldObject));
108 |     var newObject = Object.assign({}, oldObject);
109 | 
110 |     console.log('Cloned Object: '+ newObject[0].object); // a
111 |   </script>
112 |   <body>
113 |     Objects in JavaScript
114 |   </body>
115 | </html>
116 | 


--------------------------------------------------------------------------------
/files/prototype.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Prototype in JS</title>
 5 |   </head>
 6 |   <script>
 7 |     /***
 8 |      * JavaScript does not support multiple inheritance. 
 9 |      *
10 |      * Inheritance of property values occurs at run time by JavaScript searching 
11 |      * the prototype chain of an object to find a value. Because an object has a 
12 |      * single associated prototype, JavaScript cannot dynamically inherit from more 
13 |      * than one prototype chain.
14 |      *
15 |      ***/
16 | 
17 |     // Example: Person Class
18 |     function PersonClass(name, address) {
19 |       this.name = name;
20 |       this.address = address;
21 |     }
22 | 
23 |     PersonClass.prototype.message = function() {
24 |       //Using prototype to add new function to class Person
25 |       console.log(this.name + ' says Hello !');
26 |     };
27 | 
28 |     function init() {
29 |       var Obj = new PersonClass('Pradeep', 'Bangalore'); //Person Object
30 |       console.log(Obj.message());
31 |     }
32 | 
33 |     init(); //function call
34 |   </script>
35 |   <body>
36 |     Prototype in JavaScript
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/files/regexp.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Regular-Expression in JS</title>
 5 |   </head>
 6 |   <script>
 7 |     // ---------------
 8 |     // Using search()
 9 |     // ---------------
10 | 
11 |     var str = 'Information Technology & Management';
12 |     console.log('Using search(): '+ str.search(/Technology/i)); // This method searches a string for a specified value and returns the position of the match
13 | 
14 |     // -----------------
15 |     // Using replace()
16 |     // -----------------
17 | 
18 |     console.log('Using replace(): '+'12-30-45'.replace(/-/g, ':')); // 12:30:45
19 | 
20 |     // ---------------
21 |     // Using match()
22 |     // ---------------
23 | 
24 |     var re = /\w+\s/g;
25 |     var str = 'Information Technology & Management';
26 |     var arr = str.match(re); // if the match found, return the match as an array
27 |     console.log('Using match(): '+arr);
28 | 
29 |     // --------------
30 |     // Using exec()
31 |     // --------------
32 |     // It searches a string for a specified pattern, and returns the found text as an object.
33 | 
34 |     console.log('Using exec(): '+/Technology/.exec('Information Technology & Management'));
35 | 
36 |     // ---------------
37 |     //  Using test()
38 |     // ---------------
39 | 
40 |      var str = 'Regular Expression in JavaScript';
41 |      var patt = new RegExp('in');
42 |      var res = patt.test(str); // This method returns true if it finds a match, otherwise it returns false.
43 |      console.log('Text found in string? '+ res);
44 |   </script>
45 |   <body>
46 |     Regular Expression in JavaScript
47 |   </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------