16. Advanced JavaScript - Web Front-End


Published on

JavaScript and Object Oriented Programming
Telerik Software Academy: http://html5course.telerik.com
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

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
  • 16. Advanced JavaScript - Web Front-End

    1. 1. Advanced %JavaScriptSvetlin NakovManager Technical Traininghttp://nakov.comTelerik Software Academyacademy.telerik.com
    2. 2. Table of Contents JavaScript OOP  Constructors  Properties  Functions  Inheritance  Polymorphism  Extending Prebuilt JavaScript Objects 2
    3. 3. JavaScript OOPProperties, Functions, Inheritance
    4. 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. 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; student.name= "Doncho Minkov"; student.grade = 3; 5
    6. 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() { this.name = "Doncho Minkov"; this.grade = 3; } var student = new Student; 6
    7. 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) { this.name = 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. 8. Class Functions We can add a functions (methods) to the class at any time defining-classes.html function Student(name, grade) { this.name = name; this.grade = grade; this.sayHello = function() { alert("Hi! I am " + this.name); } } var doncho = new Student("Doncho Minkov", 3); doncho.sayHello(); 8
    9. 9. Prototype Object
    10. 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. 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. 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. 13. Inheritance andPolymorphism in JavaScript
    14. 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) { this.name = name; this.talk = function () { alert("Hi! I am " + this.name); } } This way we say that the Student function Student(name, grade) { class will have all this.name = name; the functionality of this.grade = grade; the Person class } Student.prototype = new Person(); 14
    15. 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. 16. Advanced %JavaScript курсове и уроци по програмиране, уеб дизайн – безплатно BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране – Телерик академия форум програмиране, форум уеб дизайн уроци по програмиране и уеб дизайн за ученици ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET http://academy.telerik.com програмиране за деца – безплатни курсове и уроци 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. 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. 18. Free Trainings @ Telerik Academy "Web Design with HTML 5, CSS 3 and JavaScript" course @ Telerik Academy  html5course.telerik.com Telerik Software Academy  academy.telerik.com Telerik Academy @ Facebook  facebook.com/TelerikAcademy Telerik Software Academy Forums  forums.academy.telerik.com