Doncho MinkovDoncho Minkov

Telerik Mobile Development CourseTelerik Mobile Development Coursemobiledevcourse.telerik.com

Technical TrainerTechnical Trainerhttp://www.minkov.it

Table of Contents (3)Table of Contents (3) JavaScript OOPJavaScript OOP

ConstructorsConstructors PropertiesProperties FunctionsFunctions InheritanceInheritance PolymorphismPolymorphism Extending Prebuilt JavaScript Extending Prebuilt JavaScript

ObjectsObjects

2

JavaScript OOPJavaScript OOPProperties, Functions, Inheritance Properties, Functions, Inheritance

3

JavaScript OOPJavaScript OOP The current design of the JavaScript The current design of the JavaScript

language, did not fully implement the language, did not fully implement the object-oriented paradigmsobject-oriented paradigms There are various implementations of There are various implementations of

object-oriented programming object-oriented programming techniques being used on the Web techniques being used on the Web todaytoday

Primary goals of OOPPrimary goals of OOP EncapsulationEncapsulation PolymorphismPolymorphism InheritanceInheritance

Defining ClassesDefining Classes The simplest way is to use the built-The simplest way is to use the built-

in in ObjectObject data type data type In JavaScript, objects are In JavaScript, objects are

implemented as a collection of implemented as a collection of named properties (key-value pairs)named properties (key-value pairs)

JavaScript allows the creation of any JavaScript allows the creation of any number of properties in an object at number of properties in an object at any timeany time They are dynamic – do not have to be They are dynamic – do not have to be

pre-defined in an object declaration pre-defined in an object declaration or constructoror constructor

5

var student = new Object;var student = new Object;student.name= "Doncho Minkov";student.name= "Doncho Minkov";student.grade = 3;student.grade = 3;

Defining a Class with Defining a Class with ConstructorsConstructors

A new JavaScript class is defined A new JavaScript class is defined by creating a function (serving as by creating a function (serving as constructor)constructor) When used with the When used with the newnew operator, a operator, a

function serves as a constructor for function serves as a constructor for that classthat class

Internally, JavaScript creates Internally, JavaScript creates an an ObjectObject, and then calls the , and then calls the constructor functionconstructor function

6

function Student()function Student(){{ this.name = "Doncho Minkov";this.name = "Doncho Minkov"; this.grade = 3;this.grade = 3;} } var student = new Student;var student = new Student;

Defining a Class with Defining a Class with Constructors (2)Constructors (2)

When defining a constructor When defining a constructor function, we can make many function, we can make many objects with the same propertiesobjects with the same properties

7

function Student(name, grade)function Student(name, grade){{ this.name = name;this.name = name; this.grade = grade;this.grade = grade;} }

var doncho = new Student("Doncho Minkov", 3);var doncho = new Student("Doncho Minkov", 3);var pesho = new Student("Pesho Peshov",2 );var pesho = new Student("Pesho Peshov",2 );var stamat = new Student("Stamat Geshov",4);var stamat = new Student("Stamat Geshov",4);

Class FunctionsClass Functions We can add a We can add a functionsfunctions ( (methodsmethods) )

to the class at any timeto the class at any time

8

function Student(name, grade)function Student(name, grade){{ this.name = name;this.name = name; this.grade = grade;this.grade = grade; this.sayHello = function() {this.sayHello = function() { alert("Hi! I am " + this.name);alert("Hi! I am " + this.name); }}} }

var doncho = new Student("Doncho Minkov", 3);var doncho = new Student("Doncho Minkov", 3);doncho.sayHello();doncho.sayHello();

defining-classes.htmldefining-classes.html

Prototype ObjectPrototype Object

9

Object PrototypesObject Prototypes We can use the We can use the prototypeprototype object to add object to add

custom properties / methods to classescustom properties / methods to classes That is reflected on all instances of the That is reflected on all instances of the

classclass How to use the prototype object?How to use the prototype object?

Simply reference the keyword Simply reference the keyword prototypeprototype on the object before adding the custom on the object before adding the custom propertyproperty

10

function Circle() {function Circle() {}}

Circle.Circle.prototypeprototype.pi = 3.14159;.pi = 3.14159;

Object Prototypes (2)Object Prototypes (2) Adding a function to a class at Adding a function to a class at

runtime using the runtime using the prototypeprototype object object

1111

function Circle() {function Circle() {} }

Circle.prototype.pi = 3.14159;Circle.prototype.pi = 3.14159;Circle.prototype.radius = 5;Circle.prototype.radius = 5;

Circle.prototype.calculateArea = function () {Circle.prototype.calculateArea = function () { return this.pi * this.radius * 2;return this.pi * this.radius * 2;}}

var circle = new Circle();var circle = new Circle();var area = circle.calculateArea();var area = circle.calculateArea();alert(area); // 31.4159alert(area); // 31.4159

prototype-object.htmlprototype-object.html

Prototype Object to Add Prototype Object to Add Functionality to Build-in Functionality to Build-in

ClassesClasses Dynamically add a function to a built-in Dynamically add a function to a built-in

class at runtime using the class at runtime using the prototypeprototype object: object:

1212

Array.prototype.showMax = Array.prototype.showMax = function () {function () { var max = this[0];var max = this[0]; for (var i = 1; i < this.length; i++) {for (var i = 1; i < this.length; i++) { if (max < this[i]) {if (max < this[i]) { max = this[i];max = this[i]; }} }} return max;return max; }}

var array = new Array(9, 1, 11, 3, 4);var array = new Array(9, 1, 11, 3, 4);var max = array.showMax();var max = array.showMax();alert(max); // 11alert(max); // 11

Attaching a Attaching a method to the method to the ArrayArray classclass

Inheritance and Inheritance and Polymorphism in Polymorphism in

JavaScriptJavaScript

Inheritance in Inheritance in JavaScriptJavaScript

To inherit a class in JavaScript you To inherit a class in JavaScript you should set the should set the prototypeprototype object of object of the subclass to the superclass class:the subclass to the superclass class:

14

function Person(name) {function Person(name) { this.name = name;this.name = name; this.talk = function () {this.talk = function () { alert("Hi! I am " + this.name);alert("Hi! I am " + this.name); }}}}

function Student(name, grade) {function Student(name, grade) { this.name = name;this.name = name; this.grade = grade;this.grade = grade;}}

Student.prototype = new Person(); Student.prototype = new Person();

This way we This way we say that the say that the StudentStudent class class will have all will have all

the the functionality functionality of the of the PersonPerson

classclass

inheritance.htmlinheritance.html

Polymorphism in Polymorphism in JavaScriptJavaScript

PolymorphismPolymorphism = ability to take more than = ability to take more than one form (objects have more than one type)one form (objects have more than one type) A class can be used through its parent A class can be used through its parent

interfaceinterface A child class may override some of the A child class may override some of the

behavior of the parent classbehavior of the parent class

15

Student.prototype = new Person();Student.prototype = new Person();Teacher.prototype = new Person();Teacher.prototype = new Person();

var array = new Array(var array = new Array( new Teacher("Gana","Math"), new new Teacher("Gana","Math"), new Student("Gosho",3), Student("Gosho",3), new Person("Pesho"), new new Person("Pesho"), new Teacher("Mara","Literature"));Teacher("Mara","Literature"));for (var i = 0; i < array.length; i++) {for (var i = 0; i < array.length; i++) { array[i].talk();array[i].talk();}}

polymorphism.htmlpolymorphism.html

QuestionsQuestions??

QuestionsQuestions??

Advanced JavaScriptAdvanced JavaScript

16

ExercisesExercises Implement a class Implement a class HumanHuman, having , having namename, ,

gendergender, , addressaddress, , telephonetelephone numbernumber It should have a methods for introducing It should have a methods for introducing

himself (ex. "himself (ex. "Hi I am …!Hi I am …!", "", "I am … years I am … years old!old!")")

Implement classes Implement classes StudentStudent and and ParentParent inheriting the inheriting the HumanHuman class class A A StudentStudent should have should have

State holding where s/he studies, a list of State holding where s/he studies, a list of his/her markshis/her marks

A method to count the average of their marksA method to count the average of their marks A method for adding/removing a markA method for adding/removing a mark

A A ParentParent should hold a list of all his should hold a list of all his children(children(StudentStudent objects) and a method to objects) and a method to yell at a concrete of his childrenyell at a concrete of his children