Your SlideShare is downloading. ×
16. Advanced JavaScript - Web Front-End
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

16. Advanced JavaScript - Web Front-End


Published on

JavaScript and Object Oriented Programming …

JavaScript and Object Oriented Programming
Telerik Software Academy:
The website and all video materials are in Bulgarian

JavaScript OOP
- Constructors
- Properties
- Functions
- Inheritance
- Polymorphism
- Extending Prebuilt JavaScript Objects
Prototype Object
Inheritance and Polymorphism in JavaScript
Extending Prebuilt JavaScript Objects

Published in: Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • Defining a ClassDefining and calling Methods in a ClassDefining a Sub-ClassCalling the Super-Class constructor from a Sub-ClassOverriding Methods of a Super-Class in a Sub-ClassCalling a Super-Class method from a Sub-Class
  • Transcript

    • 1. Advanced %JavaScriptSvetlin NakovManager Technical Traininghttp://nakov.comTelerik Software
    • 2. Table of Contents JavaScript OOP  Constructors  Properties  Functions  Inheritance  Polymorphism  Extending Prebuilt JavaScript Objects 2
    • 3. JavaScript OOPProperties, Functions, Inheritance
    • 4. JavaScript OOP The current design of the JavaScript language, did not fully implement the object-oriented paradigms  There are various implementations of object- oriented programming techniques being used on the Web today Primary goals of OOP  Encapsulation  Polymorphism  Inheritance 4
    • 5. Defining Classes The simplest way is to use the built-in Object data type In JavaScript, objects are implemented as a collection of named properties (key-value pairs) JavaScript allows the creation of any number of properties in an object at any time  They are dynamic – do not have to be pre-defined in an object declaration or constructor var student = new Object; "Doncho Minkov"; student.grade = 3; 5
    • 6. Defining a Class with Constructors A new JavaScript class is defined by creating a function (serving as constructor)  When used with the new operator, a function serves as a constructor for that class  Internally, JavaScript creates an Object, and then calls the constructor function function Student() { = "Doncho Minkov"; this.grade = 3; } var student = new Student; 6
    • 7. Defining a Class with Constructors (2) When defining a constructor function, we can make many objects with the same properties function Student(name, grade) { = name; this.grade = grade; } var doncho = new Student("Doncho Minkov", 3); var pesho = new Student("Pesho Peshov",2 ); var stamat = new Student("Stamat Geshov",4); 7
    • 8. Class Functions We can add a functions (methods) to the class at any time defining-classes.html function Student(name, grade) { = name; this.grade = grade; this.sayHello = function() { alert("Hi! I am " +; } } var doncho = new Student("Doncho Minkov", 3); doncho.sayHello(); 8
    • 9. Prototype Object
    • 10. Object Prototypes We can use the prototype object to add custom properties / methods to classes  That is reflected on all instances of the class How to use the prototype object?  Simply reference the keyword prototype on the object before adding the custom property function Circle() { } Circle.prototype.pi = 3.14159; 10
    • 11. Object Prototypes (2) Adding a function to a class at runtime using the prototype object prototype-object.html function Circle() { } Circle.prototype.pi = 3.14159; Circle.prototype.radius = 5; Circle.prototype.calculateArea = function () { return this.pi * this.radius * 2; } var circle = new Circle(); var area = circle.calculateArea(); alert(area); // 31.4159 11
    • 12. Prototype Object to Add Functionality to Build-in Classes Dynamically add a function to a built-in class at runtime using the prototype object: Array.prototype.showMax = Attaching a method function () { to the Array class var max = this[0]; for (var i = 1; i < this.length; i++) { if (max < this[i]) { max = this[i]; } } return max; } var array = new Array(9, 1, 11, 3, 4); var max = array.showMax(); alert(max); // 11 12
    • 13. Inheritance andPolymorphism in JavaScript
    • 14. Inheritance in JavaScript To inherit a class in JavaScript you should set the prototype object of the subclass to the superclass class: inheritance.html function Person(name) { = name; = function () { alert("Hi! I am " +; } } This way we say that the Student function Student(name, grade) { class will have all = name; the functionality of this.grade = grade; the Person class } Student.prototype = new Person(); 14
    • 15. Polymorphism in JavaScript Polymorphism = ability to take more than one form (objects have more than one type)  A class can be used through its parent interface  A child class may override some of the behavior of the parent class polymorphism.html Student.prototype = new Person(); Teacher.prototype = new Person(); var array = new Array( new Teacher("Gana","Math"), new Student("Gosho",3), new Person("Pesho"), new Teacher("Mara","Literature")); for (var i = 0; i < array.length; i++) { array[i].talk(); } 15
    • 16. Advanced %JavaScript курсове и уроци по програмиране, уеб дизайн – безплатно BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране – Телерик академия форум програмиране, форум уеб дизайн уроци по програмиране и уеб дизайн за ученици ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET програмиране за деца – безплатни курсове и уроци ASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC безплатен SEO курс - оптимизация за търсачки алго академия – състезателно програмиране, състезаниякурсове и уроци по програмиране, книги – безплатно от Наков курс мобилни приложения с iPhone, Android, WP7, PhoneGap уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop Дончо Минков - сайт за програмиране free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране безплатен курс "Качествен програмен код" безплатен курс "Разработка на софтуер в cloud среда" C# курс, програмиране, безплатно
    • 17. Exercises Implement a class Human, having name, gender, address, telephone number  It should have a methods for introducing himself (ex. "Hi I am …!", "I am … years old!") Implement classes Student and Parent inheriting the Human class  A Student should have  State holding where s/he studies, a list of his/her marks  A method to count the average of their marks  A method for adding/removing a mark  A Parent should hold a list of all his children(Student objects) and a method to yell at a concrete of his children 17
    • 18. Free Trainings @ Telerik Academy "Web Design with HTML 5, CSS 3 and JavaScript" course @ Telerik Academy  Telerik Software Academy  Telerik Academy @ Facebook  Telerik Software Academy Forums 