Advance Javascript for Coders
Download as PPTX, PDF1 like248 views
Advance JavaScript for Coders: Learn OOP in JavaScript - A Course from Eduonix, Following Slides shows the programming concepts of oop in javascript.
Ad
More Related Content
Similar to Advance Javascript for Coders (20)
More from Paddy Lock (13)
Ad
Recently uploaded (20)
Ad
Advance Javascript for Coders
- 1. OOP IN JAVASCRIPT Object-oriented programming concepts – Advance JavaScript for Coders: Learn OOP in JavaScript - A Course from Eduonix
- 2. IT ALL STARTS WITH AN "OBJECT" An object is a "thing": something that you use or interact with. For example: a car It has properties (characteristics) and methods (capabilities): Properties: like color, model, price…etc. Methods: like move forward, reverse, gear-up/down, stop…etc. The object is the heart of object-oriented programming not only in JavaScript only; but also in all OOP-aware languages like Java, C++ and others.
- 3. AN OBJECT COMES FROM A "CLASS" In order to make a new car, there must be some sort of a "blueprint" to be used in the process. For example, a 4x4 Jeep manufacture process will differ than that of a Mini-Cooper for example. There would be a different blueprint for each of them. A class to an object is like a blueprint to make a car (or any other product). You can make multiple objects from one class, all share the same properties and methods. In JavaScript, a class is not defined as in other OOP languages. JavaScript uses prototyping (discussed later)
- 4. ENCAPSULATION It refers to the ability of the object to execute its functionality without revealing any execution detail to the caller. For example, you can use the gas pedal to make a car object move forward. The specific mechanism that was used by the vehicle to actually move is completely hidden from you, the driver (the caller). In other OOP languages, encapsulation may refer to "access levels". An object may have an access level of public (everybody has access), protected (less access than public), and private (much less access). However, in JavaScript there are no access levels. Accordingly, other techniques are used to achieve the same effect (discussed later).
- 5. OBJECT AGGREGATION Aggregation refers to the use of multiple small objects to create a larger, more complex one. For example, a car is an object. But deep inside it you can find hundreds of smaller, simpler objects that – together – make up the car. Think of the steering wheel, the gear box, the brakes, the tires and so on…
- 6. INHERITANCE Alright, we have the blueprint to manufacture a generic car, but later on we are requested to make a police car. It will have all the properties and methods of a generic car (color, model, move, stop…etc) plus some more specific ones. For example, it should have a certain color (blue), the horn method will produce a siren and so on. Instead of re-creating a new car from scratch just to implelement those changes, we could create a child object from the car object. This child will inherit all the properties and methods of the parent one (inheritance). The child object can not only add new properties and methods to the ones it already inherits, but it can also change (override) those originals. For example, the top speed property of a police car should be higher than that of a normal car.
- 7. POLYMORPHISM The term "poly" means "many" while the term "morphism", from "morph", means "change". Suppose you have a car1 object, and car2 object. Car1 is a police car, and car2 is a sports car, but both of them inherit from the generic car object. Accordingly, both of them implement a method horn(). You can call the horn() method on any object of them, even if you have no idea whether the object is a police car or a sports car, either of them will execute its own implementation of the horn() method.
- 8. USING THE BROWSER'S CONSOLE The console is an excellent way to try out JavaScript code. In all major browsers (Chrome, Safari, Firefox, and Internet Explorer) it can be activated by right clicking anywhere in a page and choose inspect element as shown:
- 9. OTHER CONSOLES In Firefox (and lately in Chrome), you can install firebug (firebug lite in Chrome), which would provide a richer set of features than the built-in developer tools that ship with the browser, and it has its own console