Fri, Nov 25, 2016 3:49:07 PM

ECMAScript6-practice-001/Arrow_functions/Arrow_functions-001.js

@@ -4,9 +4,9 @@ const odds = nums.filter(num => num % 2 !== 0);
 
 const evens = nums.filter((num) => {return num % 2 === 0})
 
-console.log2('nums			',nums)
-console.log2('odds			',odds)
-console.log2('evens			',evens)
+console.logger('nums			',nums)
+console.logger('odds			',odds)
+console.logger('evens			',evens)
 
 var adder = {
 	base : 1,
@@ -40,17 +40,17 @@ var adder = {
 
 }
 
-console.log2('adder.add(1)			',adder.add(1));
-console.log2('adder.addThruCall(2)			',adder.addThruCall(2));
-console.log2('adder.addThruArg(3)			',adder.addThruArg(3));
-console.log2('adder.addThruArg(4)			',adder.addThruArg(4));
+console.logger('adder.add(1)			',adder.add(1));
+console.logger('adder.addThruCall(2)			',adder.addThruCall(2));
+console.logger('adder.addThruArg(3)			',adder.addThruArg(3));
+console.logger('adder.addThruArg(4)			',adder.addThruArg(4));
 
 var param = 'size';
 var config1 = {
   [param]: 12,
   ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
 };
 
-console.log2('config1			',config1); 
+console.logger('config1			',config1); 
 
 

ECMAScript6-practice-001/Class-declaration/Class-declaration-001.js

@@ -0,0 +1,134 @@
+class Polygon {
+	constructor (height,width){
+		this.height = height;
+		this.width = width;
+	}
+	get area(){
+		return this.calcArea();
+	}
+	calcArea(){
+		return this.height * this.width
+	}
+}
+
+const square = new Polygon(10, 10);
+
+console.logger('square.area 		',square.area);
+
+class Point {
+	constructor (x,y){
+		this.x = x;
+		this.y = y;
+	}
+	static distance(a,b){
+		const dx = a.x - b.x;
+		const dy = a.y - b.y;
+
+		return Math.sqrt(dx*dx + dy*dy)
+	}
+}
+
+const p1 = new Point(5, 5);
+const p2 = new Point(10, 10);
+
+console.logger('Point.distance(p1, p2)			',Point.distance(p1, p2));
+
+class Animal{
+	constructor(name){
+		this.name = name
+	}
+	speak(){
+		console.logger(this.name + ' makes a noise.');
+	}
+}
+
+class Dog extends Animal{
+	speak(){
+		console.logger(this.name + ' barks.');
+	}
+}
+
+var d = new Dog('Mitzie');
+d.speak();
+
+function AnimalP (name) {
+  this.name = name;  
+}
+
+AnimalP.prototype.speak = function () {
+  console.logger(this.name + ' makes a noise.');
+}
+
+class DogP extends AnimalP {
+  speak() {
+    console.logger(this.name + ' barks.');
+  }
+}
+
+var d = new DogP('Mitzie');
+d.speak();
+
+
+var AnimalQ = {
+  speak() {
+    console.logger(this.name + ' makes a noise.');
+  }
+};
+
+class DogQ {
+  constructor(name) {
+    this.name = name;
+  }
+  speak() {
+    console.logger(this.name + ' barks.');
+  }
+}
+
+Object.setPrototypeOf(DogQ.prototype, AnimalQ);
+
+var d = new DogQ('Mitzie');
+d.speak();
+
+class Cat {
+	constructor(name){
+		this.name = name;
+	}
+	speak(){
+		console.logger(this.name + ' makes a noise.');
+	}
+}
+
+class Lion extends Cat{
+	speak(){
+		super.speak();
+		console.logger(this.name + ' roars.');
+	}
+}
+var l = new Lion('Lion');
+l.speak();
+
+class PointC {
+	constructor(x,y){
+		this.x = x;
+		this.y =y;
+	}
+	toString(){
+		return '(' + this.x + ', ' + this.y + ')';
+	}
+}
+
+class ColorPoint extends PointC {
+	constructor(x,y,color){
+		super(x,y);
+		this.color = color;
+	}
+	toString(){
+		return super.toString() + ' in ' + this.color;
+	}
+}
+
+let cp = new ColorPoint(25, 8, 'green');
+console.logger('cp.toString()		',cp.toString()); // '(25, 8) in green'
+
+console.logger(cp instanceof ColorPoint); // true
+console.logger(cp instanceof PointC); // true

ECMAScript6-practice-001/Object-literals/Object-literals-001.js

@@ -0,0 +1,116 @@
+var a;
+console.logger("The value of a is " + a); // The value of a is undefined
+
+console.logger("The value of b is " + b); // The value of b is undefined
+var b;
+try{
+	console.logger("The value of c is " + c); // Uncaught ReferenceError: c is not defined
+}catch(error){
+	console.logger('Error          ',error.message);
+}
+
+
+let x;
+console.logger("The value of x is " + x); // The value of x is undefined
+
+try{
+console.logger("The value of y is " + y); // Uncaught ReferenceError: y is not defined
+let y;
+}catch(error){
+console.logger('Error          ',error.message);
+}
+
+
+if (true) {
+  var x1 = 5;
+}
+console.logger('x1 is ',x1);  // x is 5
+
+if (true) {
+  let y1 = 5;
+}
+
+try{
+console.logger('y1 is ',y1);
+}catch(error){
+	console.logger('Error          ',error.message);	
+}
+
+console.logger('########## Variable hoisting #########');
+
+/**
+ * Example 1
+ */
+console.logger(x2 === undefined); // true
+var x2 = 3;
+
+/**
+ * Example 2
+ */
+// will return a value of undefined
+var myvar = "my value";
+
+(function() {
+  console.logger(myvar); // undefined
+  var myvar = "local value";
+})();
+
+
+/**
+ * Example 1
+ */
+var x3;
+console.logger(x3 === undefined); // true
+x3 = 3;
+
+/**
+ * Example 2
+ */
+var myvar = "my value";
+
+(function() {
+  var myvar;
+  console.logger(myvar); // undefined
+  myvar = "local value";
+})();
+
+
+
+console.logger('########## Function hoisting #########');
+
+
+/* Function declaration */
+
+foo(); // "bar"
+
+function foo() {
+  console.logger("bar");
+}
+
+
+/* Function expression */
+try{
+	baz(); // TypeError: baz is not a function	
+}catch(error){
+	console.logger('Error          ',error.message);
+}
+
+
+var baz = function() {
+  console.logger("bar2");
+};
+
+
+var myObject = {  
+  ['myString']: 'value 1',
+  get myNumber() {
+    return this._myNumber;
+  },
+  set myNumber(value) {
+    this._myNumber = Number(value);
+  }
+};
+
+console.logger(myObject.myString); // => 'value 1'  
+myObject.myNumber = '15';  
+console.logger(myObject.myNumber); // => 15  

ECMAScript6-practice-001/index.html

@@ -11,6 +11,8 @@
 			<div id="log"></div>
 		</pre>
 		<script src="logger.js"></script>
-		<script src="Arrow_functions/Arrow_functions-001.js"></script>
+		<!--<script src="Arrow_functions/Arrow_functions-001.js"></script>-->
+		<!--<script src="Class-declaration/Class-declaration-001.js"></script>-->
+		<script src="Object-literals/Object-literals-001.js"></script>
 	</body>
 </html>

ECMAScript6-practice-001/logger.js

@@ -4,7 +4,7 @@
     }
     var old = console.log;
     var logger = document.getElementById('log');
-    console.log2 = function () {
+    console.logger = function () {
         var args = Array.prototype.splice.call(arguments,0);
         var messages = args;
         for(var i = 0;i < messages.length;i++){

ExtJS-javascript-practice-target/Portal-Module/Component-Portal/app.js

@@ -7,11 +7,12 @@ Ext.onReady(function() {
 });
 Ext.application({
 	name : 'Portal',
-	appFolder : 'Component-Portal/app',
+	appFolder : 'app',
 	requires : ['Portal.store.GridExtComponentStore'],
 	autoCreateViewport: true,
 	controllers : ['GridExtComponentController',
-				   'DynamicFormExtController'],
+				   'DynamicFormExtController',
+				   'Common.controller.CommonExtController'],
 	views : ['Main'],
 	init : function(){
 		this.setDefaultToken('component-portal');

ExtJS-javascript-practice-target/Portal-Module/Component-Portal/app/controller/DynamicFormExtController.js

@@ -13,8 +13,6 @@ Ext.define('Portal.controller.DynamicFormExtController',{
         				var dynamicFormExtComponent = me.getDynamicFormExtComponent();
         				var component = [{
                                                 xtype : 'dynamicFormExtComponentView',
-                                                //height : screen.availHeight - 260,
-                                                height : screen.availHeight - 345,
                                                 itemId : 'dynamicFormExtComponentView'
                                         }];
         				dynamicFormExtComponent.remove(0);

ExtJS-javascript-practice-target/Portal-Module/Component-Portal/app/controller/GridExtComponentController.js

@@ -13,7 +13,6 @@ Ext.define('Portal.controller.GridExtComponentController',{
         			var gridExtComponent = me.getGridExtComponent();
         			var component = [{
                                         xtype : 'gridExtComponentView',
-                                        height : screen.availHeight - 345,
                                         itemId : 'gridExtComponentView'
                                     }];
         			gridExtComponent.remove(0);

ExtJS-javascript-practice-target/Portal-Module/Component-Portal/app/view/Main.js

@@ -4,7 +4,7 @@ Ext.define('Portal.view.Main',{
 	layout : {
 		type : 'vbox'
 	},
-	requires : ['Portal.view.header.HeaderView','Portal.view.footer.FooterView','Portal.view.content.ContentView'],
+	requires : ['Common.view.header.HeaderView','Common.view.footer.FooterView','Portal.view.content.ContentView'],
 	items : [{
 				xtype : 'headerView'
 			},{

ExtJS-javascript-practice-target/Portal-Module/Component-Portal/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+	<head lang="en">
+	 	<meta charset="utf-8"/>
+	    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+	    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+	    <title>Ext JS 5.1.1 Practice Target</title>
+        <link rel="stylesheet" type="text/css" href="/extjs 5.1.1/css/theme/ext-theme-classic-all-debug.css"/>
+        <link rel="stylesheet" type="text/css" href="/css/style.css"/>
+	</head>
+	<body>
+		<script type="text/javascript" src = '/extjs 5.1.1/ext-all-debug.js'></script>
+		<script type="text/javascript">
+        Ext.Loader.setConfig({
+            enabled: true
+        });
+        Ext.Loader.setPath('Ext.ux', '../../extjs 5.1.1/ux');
+        Ext.Loader.setPath('Common', '../common');
+    	</script>
+        <script type="text/javascript" src = 'app.js'></script>
+	</body>
+</html>