Object oriented javascript

911 views

Published on

This presentation will starts with an Introduction to object-oriented programming. And presentation main objective is to create javascript object and parse it in different way.

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
911
On SlideShare
0
From Embeds
0
Number of Embeds
112
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Object oriented javascript

  1. 1. Object-Oriented JavaScript (OOP-JS) Presented By Md.Shah Jalal Software Engineer @ EVOKNOW jalalbd@mail.com jalalbd.wordpress.com 1
  2. 2. Presentation GOAL JavaScript has strong object-oriented programmingcapabilities, even though some debates have taken place due to the differences in object-oriented JavaScript compared to other languages. This presentation will starts with an Introduction to object-oriented programming. And presentation mainobjective is to create object and parse it in different way. 2
  3. 3. TerminologyClass Defines the characteristics of the Object.Object An Instance of a Class.Property An Object characteristic, such as color.Method An Object capability, such as walk.Constructor A method called at the moment of instantiation.Inheritance A Class can inherit characteristics from another Class.Encapsulation A Class defines only the characteristics of the Object, a method defines only how themethod executes.Abstraction The conjunction of complex inheritance, methods, properties of an Object must be ableto simulate a reality model.Polymorphism 3 Different Classes might define the same method or property.
  4. 4. JavaScript is an object oriented language, but JavaScript does not use classes. JavaScript is prototype based, not class based. ? Prototype-based programmingPrototype-based programming is a style of object-oriented programming inwhich classes are not present, and behavior reuse (known as inheritance inclass-based languages) is accomplished through a process of decorating existingobjects which serve as prototypes. This model is also known as class-less,prototype-oriented, or instance-based programming. 4
  5. 5. Core ObjectsJavaScript has several objects included in its core;for example, there are objects like Math, Object,Array, and String. The example below shows howto use the Math object to get a random numberby using its random() method. alert(Math.random());https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects 5
  6. 6. Accessing Object PropertiesobjectName.propertyNamevar message = "Hello World!"; //string Objectvar x = message.length; // 12 Accessing Objects MethodsobjectName.methodName()var message = " Hello world!";var x = message.toUpperCase(); //HELLO WORLD! 6
  7. 7. Creating a Direct Instancevar person = Object.create(null);Object.defineProperty(person, name, { value: Mikhail , writable: true , configurable: true , enumerable: true })Object.defineProperty(person, age, { value: 19 , writable: true , configurable: true , enumerable: true })Object.defineProperty(person, gender, { value: Male , writable: true , configurable: true , enumerable: true }) 7
  8. 8. Creating a Direct Instancevar person = Object.create(null);person[name] = Jyoti;person[age] = 25;person [gender] = Male;alert("Name : "+ person.name+" Age : "+person.age+" Gender : "+person.gender);person.name = Jalal;person.age = 26;person.gender = Male;alert("Name : "+ person.name+" Age : "+person.age+" Gender : "+person.gender);alert(Object.getOwnPropertyNames(person)); // name,age,gender // arrayalert(Object.getOwnPropertyNames(person).length);// 3 8
  9. 9. Creating a Direct Instanceperson = new Object();person.firstname = "John";person.lastname = "Doe";person.age = 50;person.eyecolor = "blue";Alternative syntax (using object literals):person = { firstname :"John", lastname : "Doe", age : 50, eyecolor : "blue“ };alert(person.firstname + " is " + person.age + " years old."); 9
  10. 10. Creating a Direct Instancevar person = { first_name : Shah , last_name : Jalal , age : 19 , gender : Male , get name() { return this.first_name + + this.last_name } , set name(new_name) { var names names = new_name.trim().split(/s+/) this.first_name = names[0] || this.last_name = names[1] || } }alert(person.name);person.name = Rushow Khan;alert(person.name); 10
  11. 11. Custom Objectsfunction Person(gender){ this.gender = gender; alert(Person instantiated);}var person1 = new Person(Male);var person2 = new Person(Female);//display the person1 genderalert(person1 is a + person1.gender); // person1 is a Malealert(person2 is a + person2.gender); // person1 is a Female 11
  12. 12. Use The Method sayHello() for the Person Classfunction Person(gender){ this.gender = gender;}Person.prototype.sayGender = function(){ alert(this.gender);};var person1 = new Person(Male);var genderTeller = person1.sayGender;person1.sayGender(); // alerts MalegenderTeller(); // alerts undefinedalert(genderTeller === person1.sayGender); // alerts truealert(genderTeller === Person.prototype.sayGender); // alerts truegenderTeller.call(person1); //alerts Male 12
  13. 13. Object.create methodcreate a foo object that has a name property and asayHello function:var foo = { name: "foo", sayHello: function() { alert("hello from " + this.name); } };foo.sayHello(); // hello from foo 13
  14. 14. Use Object.create to make a bar object that has foo as its prototype, and add a sayGoodbye function to it:Object.create methodvar bar = Object.create(foo);bar.sayGoodbye = function() { alert("goodbye from " + this.name); }bar.sayHello(); // hello from foobar.sayGoodbye(); // goodbye from foo 14
  15. 15. Using an Object Constructorfunction person(firstname,lastname,age,eyecolor){ this.firstname = firstname; this.lastname = lastname; this.age = age; this.eyecolor = eyecolor;}myFather = new person("John","Doe",50,"blue");alert(myFather.firstname + " is " + myFather.age + " years old."); 15
  16. 16. JavaScript for...in Loopfunction myFunction(){ var x; var txt=""; var person = {fname:"John",lname:"Doe",age:25}; for (x in person) { txt=txt + person[x]; alert(txt); }}myFunction(); 16
  17. 17. Multi dimensionalperson = { firstname:"John", business:{ a:{ s:"software", h:"hardware", e:"electronics" }, b:"garments" c: ["A", "B", 2, 3] } };alert(person.firstname); // Jhonalert(person.business.a.s); // softwarealert(person.business.b); // garmentsalert(person.business.c[2]); // 2console.log(person); 17
  18. 18. Summary Javascript object is nothing but a special type of data which have property and method whereproperty can be a special type of data who can hold object/array etc. 18
  19. 19. Reference:http://www.w3schools.com/js/js_objects.asphttps://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScripthttps://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objectshttps://developer.mozilla.org/en-US/docs/JavaScript/A_re-introduction_to_JavaScripthttp://www.adobe.com/devnet/html5/articles/javascript-object-creation.htmlhttp://killdream.github.com/blog/2011/10/understanding-javascript-oop/ 19

×