G l a r i m y G l a r I m y Presentation on Object Oriented Java Script Krishna Mohan Koyya Proprietor & Principle Consultant Glarimy Technology Services.

G l a r i m y G l a r I m y Presentation on Object Oriented Java Script Krishna Mohan Koyya Proprietor & Principle Consultant Glarimy Technology Services | Benguluru | Bharat | version 1.0 | 8th October 2014 Specially designed for ThermoFisher, Bangalore, for self-learning © 2014, Glarimy. All rights reserved.

The Classroom Protocol
G l a r i m y The Classroom Protocol Few Administrative Formalities Sign in the attendance sheet, if provided Fill-in the feedback at the end of sessions, if provided Derive Maximum Value Ask questions, any time Participate in discussions and lab exercises Avoid brining personal or office work to the class room Stay away from internet while class in the session Lets Learn Together Switch-off or mute personal phones Leave/enter the class room without disturbing the class Take phone calls outside the class room Keep the class room clean and professional No cross discussions Reference Material Download from No Print/CD. Protect Environment © 2014, Glarimy. All rights reserved.

Glarimy Technology Services
About Glarimy Established in 2008 and Registered in 2010 Based out of Benguluru, Bharat (Bangalore, India) Business Interests Technology Consulting Architectural Appreciation and Review Design and Prototyping Corporate Training Software Design, Architecture and Processes RIA/Web 2.0 Technologies Standard and Enterprise Java Technologies Weekend Public Workshops One-day Executive Workshops on Saturdays Business Reach Geographies: Banguluru, Chennai, Pune, Hyderabad, Kochi and etc., Client Base: Sharp, GlobalDoc and LamResearch Partner Clients: Robert Bosch, Samsung, Cisco, Vmware and etc., © 2014, Glarimy. All rights reserved.

Krishna Mohan Koyya Career spanning across 17 years Proven Delivery
G l a r i m y Krishna Mohan Koyya Career spanning across 17 years 9 Years into Software Engineering with Cisco Systems, Wipro/Lucent and HP 6 Years as Principle Consultant and Founder of Glarimy Technology Services 1 Year as CEO at Sudhari IT Solutions, Bangalore 1 Year as HoD at Sasi Institute of Technology and Engineering, Tadepalligudem, Andhra Pradesh Proven Delivery Web 2.0: ExtJS, Dojo, Jquery Frameworks, AngularJS, HTML5, CSS3, XML Enterprise Java: Spring, Hibernate, EJB, JSF, OSGi, xUNIT family SOA & Integration: SOAP/XML, REST, AWS, ServiceMix, Camel, SI Design Patterns, Architectural Patterns, TDD Technology Expertise Enterprise Integration, Distributed Systems and Network Management Systems Object Oriented Systems Development Infrastructure, Middleware and Web Layers with Java and Javascript Academics M.Tech (Computer Science & Tech) from Andhra University, Visakhapatnam BE (Electronics & Comm. Engg) from SRKR Engg. College, Bhimavaram © 2014, Glarimy. All rights reserved.

Object Creation G l a r i m y
//Creating a simple one-time object // create a new object and name it the way you want var person = new Object(); // add attribute with a value person.name = 'Krishna'; // add another attribute with a value person.mail = // access the attributes using this operator person.show = function(){ // add a function console.log('Name: ' + this.name + ' | ' + this.mail); }; © 2014, Glarimy. All rights reserved.

Object Creation G l a r i m y
// access an attribute console.log('Name: ' + person.name); // access a function and invoke it person.show(); // add another function or attribute any time person.hello = function(salute){ console.log(salute + '! I am ' + person.name); }; // access them as normal members person.hello('Good Morning'); © 2014, Glarimy. All rights reserved.

Literal Objects G l a r i m y
//Creating a simple one-time object as a JSON literal // create a new object and name it the way you want // you can add attributes // you can add functions var person = { name: 'Krishna', mail : show : function(){ console.log('Name: ' + this.name + ' | ' + this.mail); } }; © 2014, Glarimy. All rights reserved.

Literal Objects G l a r i m y
// access an attribute console.log('Name: ' + person.name); // access a function and invoke it person.show(); // add another function or attribute any time person.hello = function(salute){ console.log(salute + '! I am ' + person.name); }; // access them as normal members person.hello('Good Morning'); © 2014, Glarimy. All rights reserved.

Object Construction G l a r i m y
//Creating an object template using a constructor function function Person(name, mail){ this.name = name; this.mail = mail; this.show = function(){ console.log('Name: ' + this.name + ' | ' + this.mail); } // Create an instance from the template var person = new Person(); // access an attribute console.log('Name: ' + person.name); © 2014, Glarimy. All rights reserved.

Object Construction G l a r i m y
// access a function and invoke it person.show(); // add another function or attribute any time person.hello = function(salute){ console.log(salute + '! I am ' + person.name); }; // access them as normal members person.hello('Good Morning'); © 2014, Glarimy. All rights reserved.

Overloaded Constructors
G l a r i m y Overloaded Constructors // Creating an object template using an overloaded constructor // Accept a JSON as constructor parameter function Person(props){ // Prevent any null-pointer exceptions props = props || {}; // Try reading the paraemters from the JSON // If a parameter is not set, it would be left as null this.name = props.name; this.mail = props.mail; this.show = function(){ console.log('Name: ' + this.name + ' | ' + this.mail); } © 2014, Glarimy. All rights reserved.

Overloaded Constructors
G l a r i m y Overloaded Constructors // Create an instance from the template // Pass all/some/no parameters in the constructor as you wish var person = new Person({ name: "Krishna", mail: }); // access an attribute console.log('Name: ' + person.name); // access a function and invoke it person.show(); // add another function or attribute any time person.hello = function(salute){ console.log(salute + '! I am ' + person.name); }; // access them as normal members person.hello('Good Morning'); © 2014, Glarimy. All rights reserved.

Access Privileges G l a r i m y
// Creating an object with access privileges function Person(props){ props = props || {}; // Create members as local, they become private var name = props.name; var mail = props.mail; // Create members with this operator, they become public this.show = function(){ // The private members being accessed here are in closure scope console.log('Name: ' + name + ' | ' + mail); } © 2014, Glarimy. All rights reserved.

Access Privileges G l a r i m y
// Create an instance from the template var person = new Person({ name: "Krishna", mail: }); // You can not access a private attribute console.log('Name: ' + person.name); // You can access a public member person.show(); // Add another function or attribute any time // They are all public, always person.hello = function(salute){ // Still, you can not access private members console.log(salute + '! I am ' + name); }; person.hello('Good Morning'); © 2014, Glarimy. All rights reserved.

G l a r i m y Prototype function Person(props){ props = props || {}; var name = props.name; var mail = props.mail; this.show = function(){ console.log('Name: ' + name + ' | ' + mail); } /* The above function actually gets translated as the following global object within JavaScript Person.prototype { constructor: Person(props){ }, ... © 2014, Glarimy. All rights reserved.

G l a r i m y Prototype Note that the name, mail and show() are not part of prototype They are only part of its constructor i.e. every object will have its own name, mail and show() */ // Next two statements is equivalant of // var person = new Person({.....}) var person = Object.create(Person.prototype); person.constructor({ name: "Krishna", mail: }); // You can actually print them console.log(Person.prototype); console.log(Person.prototype.constructor.name); © 2014, Glarimy. All rights reserved.

Prototype Chains G l a r i m y
// Creating a constructor function creates a prototype function Person(props){ props = props || {}; if(props.name != null) this.name = props.name; if(props.mail != null) this.mail = props.mail; } // Any member added to the prototype is available on all objects of it // Members added to the prototype are always public // Person.prototype.name is accessed when person.name is undefined Person.prototype.name = "Glarimy"; // Person.prototype.mail is accessed when person.mail is undefined Person.prototype.mail = © 2014, Glarimy. All rights reserved.

Prototype Chains G l a r i m y
// Person.prototype.website is accessed always as there no such property in the constructor Person.prototype.website = " // The method accesses values using this operator. // The values may be supplied by the object or its prototype Person.prototype.show = function(){ console.log('Name: ' + this.name + ' | ' + this.mail + '| URL: ' + this.website); }; // We are passing only name // The mail is left undefined var person = new Person({ name: "Krishna" }); // This method now picks name from person, others form Person.prototype person.show(); © 2014, Glarimy. All rights reserved.

Static Members G l a r i m y
function Person(props){ props = props || {}; if(props.name != null) this.name = props.name; if(props.mail != null) this.mail = props.mail; } Person.prototype.name = "Glarimy"; Person.prototype.mail = Person.prototype.website = " Person.prototype.show = function(){ console.log('Name: ' + this.name + ' | ' + this.mail + '| URL: ' + this.website); }; var person = new Person({ name: "Krishna" }); © 2014, Glarimy. All rights reserved.

Static Members G l a r i m y
person.show(); // Adding anything directly to the constructor function becomes static // Conventionally, static members are written in upper-case Person.PHONE = // Static functions also can be added Person.PRINT = function(){ console.log("Phone: " + Person.PHONE); } // Access the static members console.log(Person.PHONE); Person.PRINT(); © 2014, Glarimy. All rights reserved.

Extending Objects G l a r i m y
// Create the parent template, as usual function Person(props){ props = props || {}; this.name = props.name; this.mail = props.mail; this.show = function(){ console.log('Name: ' + this.name + ' | ' + this.mail); }; } © 2014, Glarimy. All rights reserved.

// Create the child template function Employee(props){ props = props || {}; // Call the super constructor // Pass this pointer and an array of arguments to the parent constructor Person.apply(this, [props]); // Add attributes to the child template, if any this.eid = props.eid; // Add function to the child template, if any this.display = function(){ // Access the attributes from both child and parent console.log('EmpID: ' + this.eid + ' | Name: ' + this.name + ' | ' + this.mail); }; } © 2014, Glarimy. All rights reserved.

// Overried the child's prototype with the parent object Employee.prototype = Object.create(Person.prototype); // Reset the constructor with the child's constructor function Employee.prototype.constructor = Employee; // With the above two, extending Person as Employee is completed // User parent objects, normally var person = new Person({ name: 'Krishna', mail: }); person.show(); // Create child objects var emp = new Employee({ mail: eid: © 2014, Glarimy. All rights reserved.

// Points to the parent's show() method as it is not available in the child emp.show(); // Points to the child's display() method as it is available in the child emp.display(); // Observe the prototype chain console.log(emp); // In fact, any object can be simply extended // Let's extend JavaScript's Date class with a new method Date.prototype.isSunday = function(){ if(this.getDay() == 7) return true; return false; }; // All objects of Date now will have this new method // Lets invoke it! console.log((new Date()).isSunday()); © 2014, Glarimy. All rights reserved.

G l a r i m y Reflection function Person(props){ props = props || {}; this.name = props.name; this.mail = props.mail; this.show = function(){ console.log('Name: ' + this.name + ' | ' + this.mail); }; } function Employee(props){ Person.apply(this, [props]); this.eid = props.eid; this.display = function(){ console.log('EmpID: ' + this.eid + ' | Name: ' + this.name + ' | ' + this.mail); Employee.prototype = Object.create(Person.prototype); Employee.prototype.constructor = Employee; © 2014, Glarimy. All rights reserved.

G l a r i m y Reflection // You can figure out the constructor used for creating an instance console.log(emp.constructor.name); console.log(person.constructor.name); // You can list out all members of an instance for(var i in emp){ console.log("Property name: " + i); console.log("Property type: " + typeof(emp[i])); console.log("Property value: " + emp[i]); } © 2014, Glarimy. All rights reserved.

// Overried the child's prototype with the parent object Employee.prototype = Object.create(Person.prototype); // Reset the constructor with the child's constructor function Employee.prototype.constructor = Employee; // With the above two, extending Person as Employee is completed // User parent objects, normally var person = new Person({ name: 'Krishna', mail: }); person.show(); // Create child objects var emp = new Employee({ mail: eid: // Points to the parent's show() method as it is not available in the child emp.show(); // Points to the child's display() method as it is available in the child emp.display(); // Observe the prototype chain console.log(emp); // In fact, any object can be simply extended // Let's extend JavaScript's Date class with a new method Date.prototype.isSunday = function(){ if(this.getDay() == 7) return true; return false; }; // All objects of Date now will have this new method // Lets invoke it! console.log((new Date()).isSunday()); © 2014, Glarimy. All rights reserved.

G l a r i m y Cloning // Shallow Cloning function Person(props){ props = props || {}; this.name = props.name; this.mail = props.mail; this.show = function(){ console.log('Name: ' + this.name + ' | ' + this.mail); }; } var person = new Person({ name: 'Krishna', mail: }); person.show(); //Create an exact copy of an object, by shallow-cloning var copy = {}; for(property in person) copy[property] = person[property] copy.name = "Krishna Mohan"; copy.show(); © 2014, Glarimy. All rights reserved.

G l a r i m y Packages // Create your preferred namespace or package var com = { glarimy: { js: { } }; // Attach your constructors and etc., to the package com.glarimy.js.Person = function (props){ props = props || {}; this.name = props.name; this.mail = props.mail; this.show = function(){ console.log('Name: ' + this.name + ' | ' + this.mail); © 2014, Glarimy. All rights reserved.

G l a r i m y Packages // Access the constructors using FQN var person = new com.glarimy.js.Person({ name: 'Krishna', mail: }); person.show(); console.log(com.glarimy.js.Person.prototype); console.log(person.constructor); © 2014, Glarimy. All rights reserved.

Singleton Pattern G l a r i m y
var Person = (function () { // Hold a private reference var instance; function init() { // What is being returned here is the real singleton return { name: "Krishna", mail: show: function(){ console.log('Name: ' + this.name + ' | ' + this.mail); } }; © 2014, Glarimy. All rights reserved.

// What is being returned he is the public interface return { // The actual factory method to get singleton getInstance: function () { // Create the singleton, only if it is not already done if ( !instance ) { instance = init(); } return instance; }; })(); © 2014, Glarimy. All rights reserved.

// Both ceo and employee are actually pointing to the same object var ceo = Person.getInstance(); var employee = Person.getInstance(); // They must show same results ceo.show(); employee.show(); // Though we only changing name of the ceo, // indirectly we are changing the name of employee as well ceo.name = "Krishna Mohan"; © 2014, Glarimy. All rights reserved.

// Overried the child's prototype with the parent object Employee.prototype = Object.create(Person.prototype); // Reset the constructor with the child's constructor function Employee.prototype.constructor = Employee; // With the above two, extending Person as Employee is completed // User parent objects, normally var person = new Person({ name: 'Krishna', mail: }); person.show(); // Create child objects var emp = new Employee({ mail: eid: // Points to the parent's show() method as it is not available in the child emp.show(); // Points to the child's display() method as it is available in the child emp.display(); // Observe the prototype chain console.log(emp); // In fact, any object can be simply extended // Let's extend JavaScript's Date class with a new method Date.prototype.isSunday = function(){ if(this.getDay() == 7) return true; return false; }; // All objects of Date now will have this new method // Lets invoke it! console.log((new Date()).isSunday()); © 2014, Glarimy. All rights reserved.

Glarimy Technology Services
Technologies Java: JSE, JEE, JPA, Spring, Hibernate, SOAP/XML, REST, JSF Web: HTML5, CSS3, Object Oriented JavaScript, AJAX Web 2.0: JQuery, ExtJS, Dojo, AngularJS Design and Architecture: OOAD, UML, Design Patterns, Integration Patterns Reach Karnataka: Bangalore and Mysore Tamilnadu: Chennai, Coimbatore Andhra Pradesh: Visakhapatnam, Vijayawada, Tirupati Telangana: Hyderabad Kerala: Kochi, Trivendrum Maharashtra: Mumbai, Pune Services Architectural Consulting: Development, Review, Enhancement Construction: Coding, Reviews, Refactoring Corporate Training Weekend Executive Workshops: Saturdays © 2014, Glarimy. All rights reserved.

G l a r i m y G l a r I m y Presentation on Object Oriented Java Script Krishna Mohan Koyya Proprietor & Principle Consultant Glarimy Technology Services.

Similar presentations

Presentation on theme: "G l a r i m y G l a r I m y Presentation on Object Oriented Java Script Krishna Mohan Koyya Proprietor & Principle Consultant Glarimy Technology Services."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

G l a r i m y G l a r I m y Presentation on Object Oriented Java Script Krishna Mohan Koyya Proprietor & Principle Consultant Glarimy Technology Services.

Similar presentations

Presentation on theme: "G l a r i m y G l a r I m y Presentation on Object Oriented Java Script Krishna Mohan Koyya Proprietor & Principle Consultant Glarimy Technology Services."— Presentation transcript:

Similar presentations

About project

Feedback