37
6. JavaScript Objects and Object-Oriented Programming (OOP)

6. JavaScript Objects and Object- Oriented Programming (OOP)

Embed Size (px)

Citation preview

Page 1: 6. JavaScript Objects and Object- Oriented Programming (OOP)

6. JavaScript Objects and Object-Oriented Programming (OOP)

Page 2: 6. JavaScript Objects and Object- Oriented Programming (OOP)

2

Motto:

My object all sublime I shall achieve in time.

—W. S. Gilbert

Page 3: 6. JavaScript Objects and Object- Oriented Programming (OOP)

3

JavaScript & OOP

• JavaScript is object-oriented – even if you don’t realize it– there is a “global object”

• all global variables and functions are its properties

– there are predefined JS objects– you can add variables and functions to an

object's "prototype" (aka classe)– you can – and should define your own objects

Page 4: 6. JavaScript Objects and Object- Oriented Programming (OOP)

4

JavaScript Objects

• Objects have – a type

• the type has a name

– attributes• properties

– behaviors• functions• in JavaScript, functions are properties, too!

Page 5: 6. JavaScript Objects and Object- Oriented Programming (OOP)

5

Object-Oriented Design

• Uses software models that define objects similar to the real-world objects in the problem domain

• Models communication between objects• Uses classes for objects that have the same characteristics• Uses inheritance to derive a new classes of objects from

existing classes by adding their own unique characteristics• Encapsulates attributes and behaviors of objects by

restricting their visibility to outside objects• Allows to redefine the behaviors of derived objects -

polymorphism

• OOP is a natural and intuitive way to view software design

Page 6: 6. JavaScript Objects and Object- Oriented Programming (OOP)

6

Procedural vs. OOP

• Procedural programmers concentrate on writing functions– actions that perform a task are composed

within functions– a set of functions forms a program

• Object-oriented programmers concentrate on creating classes of objects– a class contains data and functions that

provide services to clients– a set of classes forms a program

Page 7: 6. JavaScript Objects and Object- Oriented Programming (OOP)

7

Advantages of OOP

• A class is to its objects as cookie-cutter is to cookies

• OOP make you think in categories• OOP make you tackle large problems in

terms of smaller sub-problems• Classes make it possible to reuse them in

other projects• With OOP, you can build much of new

software by combining existing classes

Page 8: 6. JavaScript Objects and Object- Oriented Programming (OOP)

8

Standard Objects: Math

• Math defines methods for most common mathematical calculations– the methods are very similar to those in Java

• java.lang.Math

– constants• PI, E, LN2, LN10, SQRT2, SQRT1_2, LOG2E, LOG10E

– methods• sqrt(x), exp(x), log(x), pow(x,y)• sin(x), cos(x), tan(x), atan(x)• ceil(x), floor(x), round(x), max(x,y), min(x,y)

• all these methods are static, i.e. they are called using Math. prefix– e.g., var xToYth = Math.pow(x,y);

Page 9: 6. JavaScript Objects and Object- Oriented Programming (OOP)

9

Standard Objects: String• Characters as in Java

– letters, digits, special characters– Unicode characters– same notation

• \n, \t, \f, \c, \", \', \\

• A string is a series of characters– constants

• can be enclosed either in "" or in ''

– can be created from Unicode characters using fromCharCode()• e.g., String.fromCharCode(65,66,67,68) creates "ABCD"

– concatenation operator +• any type concatenated with a string will be converted to a string• using its toString() method

– property length• holds the number of characters in the string

– strings can be compared with ==, !=, <, >, <=, >=• watch out: "aaa" > "ZZZ" because of Unicode ordering (superset of ASCII)

Page 10: 6. JavaScript Objects and Object- Oriented Programming (OOP)

10

String Methods• charAt(index)

– returns the character at index– Indices start at 0 and go to length-1– returns an empty string if index >= length

• charCodeAt(index)– returns the Unicode value of the character at index– returns NaN if index>= length

• toLowerCase(), toUpperCase()– returns the lowercase resp. uppercase version of this string

• toLocaleLowerCase() toLocaleUpperCase() – returns the uppercase lowercase resp. version of this string according to current locale

• indexOf(pattern[,startIndex])– returns the beginning index of the first occurrence of pattern– returns -1 if pattern is not found– starts search at startIndex if it is given

• lastIndexOf(pattern[,startIndex])– returns the beginning index of the last occurrence of pattern – returns -1 if pattern is not found – starts search at startIndex if it is given

Page 11: 6. JavaScript Objects and Object- Oriented Programming (OOP)

11

String Methods (cont.)• concat(string2[,...,stringN])

– appends string2 to stringN after this string and returns the concatenated string– this string remains unchanged

• split(pattern)– breaks this string into token strings delimited by pattern– returns an array of the tokens– the delimiting pattern is not part of the tokens– this string remains unchanged

• replace(pattern,string2)– returns a string where the pattern within this string has been replaced by string2– this string remains unchanged

• localeCompare(string2)– returns 1 if this string > string2, -1 if this string < string2, and 0 if the strings are

equal

– uses locale-specific ordering (e.g., "aaa" < "ZZZ")

Page 12: 6. JavaScript Objects and Object- Oriented Programming (OOP)

12

String Substring Methods• substring(from[,to])

– returns the substring of this string starting at from index up to (not including) to index– ends the string returned at length-1 if to >= length– returns "" if from >= length– if to isn't given returns the substring all the way till the end

• substr(from[,n])– returns the substring of this string starting at from index up to (not including) from+n

index– ends the returned string at length-1 if to >= length– returns "" if from >= length– if n isn't given returns the substring all the way till the end

• slice(from,to)– returns the substring starting at from index up to (not including) to index– same as substring(from,to)

Page 13: 6. JavaScript Objects and Object- Oriented Programming (OOP)

13

String RegExp Methods• search(regexp)

– returns the index of the first occurrence of the pattern matching the of regular expression regexp within this string string2

– returns -1 if the pattern doesn't occur in this string– same as indexOf(pattern), except that it uses a regular expression

• replace(regexp,string2)– returns a string where the occurrence of the pattern matching the of regular expression

regexp within this string has been replaced by string2– if regexp uses the global modifier /…/g then all occurrences will be replaced– this string remains unchanged

• match(regexp)– matches pattern(s) of regular expression regexp within this string

– returns an array with matched substrings (see later when we discuss regular expressions)

Page 14: 6. JavaScript Objects and Object- Oriented Programming (OOP)

14

String Wrapper Methods

• Don't use these, use CSS instead– link(url)

• returns this string wrapped into <a href="url"></a>– anchor(anchor)

• returns this string wrapped into <a name="anchor"></a>– bold()

• returns this string wrapped into <b</b>– italics()

• returns this string wrapped into <i></i>– fixed()

• returns this string wrapped into <tt></tt>– blink()

• returns this string wrapped into <blink></blink>– strike()

• returns this string wrapped into <strike></strike>– sub()

• returns this string wrapped into <sub></sub>– sup()

• returns this string wrapped into <sup></sup>– big()

• returns this string wrapped into <big></big>– small()

• returns this string wrapped into <small></small> – fontcolor(color)

• returns this string wrapped into <font color="color"><font>– fontsize(size)

• returns this string wrapped into <font size="size"><font>

Page 15: 6. JavaScript Objects and Object- Oriented Programming (OOP)

15

Object Number

• Constants– MAX_VALUE, MIN_VALUE, NaN– NEGATIVE_INFINITY, POSITIVE_INFINITY

• special values representing returned on overflow

– Used as static members, e.g., Number.MAX_VALUE

• Only inherited methods– toString()

• Used automatically in string concatenation or when conversion is needed• e.g., var number = 6; alert(number);

Page 16: 6. JavaScript Objects and Object- Oriented Programming (OOP)

16

Object Boolean

• Wrapper for boolean values• Don't use, it only creates confusion!

– e.g., var isFalse = new Boolean (false);

if (isFalse) {alert("isFalse is true")

} else {alert("isFalse is false")}

– will output • isFalse is true!!• because isFalse is an object • and an object within a condition corresponds to true

Page 17: 6. JavaScript Objects and Object- Oriented Programming (OOP)

17

Object Date• Represents a date with time

• Used for current time/date and date/time calculations

• Several constructors– new Date()

• creates object with current date and time according to local time (zone)

– new Date(datestring) • creates object with given date (and time)

– new Date(year,month,day) • creates object with given date

– new Date(year,month,day,hour,minute,secs,msecs) • creates object with given date and time

– new Date(msecsSince1970) • creates object with time in milliseconds after 1/1/1970 00:00:00 UTC/GMT

• Static method Date.now()

– returns number of milliseconds since 1/1/1970 00:00:00 UTC/GMT• non-standard

Page 18: 6. JavaScript Objects and Object- Oriented Programming (OOP)

18

Date Accessor Methods• getDate(), setDate(day)

– returns resp. sets the day of the month according to local time • getDay(), setDay(day),

– returns resp. sets the day of the week according to local time• getFullYear(), getMonth(), getHours(), getMinutes(), getSeconds(), getMilliseconds()

– returns the year, month, hour, minute, second, and millisecond according to local time• setFullYear(year), setMonth(month), setHours(hour), setMinutes(minute), setSeconds(sec),

setMilliseconds(msec)– sets the year, month, hour, minute, second, and millisecond according to local time

• getTime(), setTime(time)– returns resp. sets this date to the time since 1/1/1970, 00:00:00 UTC/GMT in milliseconds

• getUTCDate(), setUTCDate(day)– returns resp. sets the day (date) of the month according to universal time

• getUTCDay(), setUTCDay(day)– returns resp. sets the day of the week according to universal time

• getUTCFullYear(), getUTCMonth(), getUTCHours(), getUTCMinutes(), getUTCSeconds(), getUTCMilliseconds()

– returns the year, month, hour, minute, second, and millisecond according to universal time• setUTCFullYear(year), setUTCMonth(month), setUTCHours(hour), setUTCMinutes(minute),

setUTCSeconds(sec), setUTCMilliseconds(msec)– sets the year, month, hour, minute, second, and millisecond according to universal time

• getTimezoneOffset()– returns the time-zone offset in minutes for the current locale

Page 19: 6. JavaScript Objects and Object- Oriented Programming (OOP)

19

Date Conversion Methods• toLocaleDateString()

– returns the date portion as a string using the current locale's conventions• toLocaleTimeString()

– returns the time portion as a string using the current locale's conventions• toLocaleString()

– returns date and time as a string using the current locale's conventions• toUTCString ()

– returns date and time as a string using the universal time convention• toDateString()

– returns the date portion as a human-readable string• toTimeString()

– returns the time portion as a human-readable string• toString()

– returns a string representation

Page 20: 6. JavaScript Objects and Object- Oriented Programming (OOP)

20

Date Example

• Compute remaining time until a certain date:var start = new Date();

var end = new Date("May 15, 2010 13:31:45");

var remaining = end.getTime() - start.getTime();

// time in milliseconds

Page 21: 6. JavaScript Objects and Object- Oriented Programming (OOP)

21

Object Object

• Object is the root of the object hierarchy– constructor property

• the function that creates an object

– Methods• eval(code)

– evaluates code as JavaScript code (in the context of this object)

– (deprecated)

• toString()– returns a string representation of this object

• toLocaleString()– same as toString()

• All objects inherit from Object, i.e.:– all objects have constructor property – all objects have toString() function

Page 22: 6. JavaScript Objects and Object- Oriented Programming (OOP)

22

Object Function

• Represents a function– every JS function is a Function object

– incl. the constructor function of an object

• A function can be constructed as an object– new Function([param1,…,paramN],body)

• optional list of parameters param1,…,paramN• the last parameter is the body of the function

• Properties– caller

• who called it (non-standard)

– length• expected number of arguments

– name• (non-standard)

Page 23: 6. JavaScript Objects and Object- Oriented Programming (OOP)

23

Function Methods

• call([param1,…,paramN])– calls this function

• apply([parameters])– calls this function – parameters are passed as an Array object

• toString()– returns the source code of the function as a string

Page 24: 6. JavaScript Objects and Object- Oriented Programming (OOP)

24

Function Examples

var add = new Function("x", "y", "return x + y");

var result = add(415, 313);

// or another way

result = add.call(415, 313);

// or yet another way

var parameters = [415, 313];

result = add.apply(parameters);

function debug (name, value) {

alert (debug.caller + ": " + name + "=" + value);

}

//now the call

var someValue;

debug ("someValue", someValue);

Page 25: 6. JavaScript Objects and Object- Oriented Programming (OOP)

25

Other Standard Objects

• Array– mentioned already

• RegExp– see later

• variety of error types– Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError

Page 26: 6. JavaScript Objects and Object- Oriented Programming (OOP)

26

OOP in JS

• JS doesn't have the concept of a class• But, there is the similar concept of a prototype

– prototype contains the properties of a class of objects• as a method is also a property of the object, the prototype

contains all the methods, too!

• Unlike in Java a prototype is very dynamic– you can add a property to a prototype

• this will add the property to each object• e.g., adding a function to a prototype will add a method to all

objects of the class

Page 27: 6. JavaScript Objects and Object- Oriented Programming (OOP)

27

Simple Objects

• Objects can be constructed on the fly– syntax

• {name1:value1[,…,nameN:valueN]}• e.g.:

var c1 = {real: 1.0, imag: 0.0}

var c2 = {real: 2.0, imag: -2.0}

var sum = { real: c1.real + c1.real

, imag: c1.imag + c1.imag}

• Properties can be added to objects– syntax

• object-name.property-name

• e.g.: c1.abs = Math.sqrt(c1.real*c1.real+c1.imag*c1.imag);

– such properties are object-specific

Page 28: 6. JavaScript Objects and Object- Oriented Programming (OOP)

28

Constructing a Prototype

• A prototype is just a (constructor) function– conventions

• Name of the constructor function should start with capital letter• constructor and methods are typically in a separate file called Name.js

• Calling new with a function name– creates a prototype where the function is a constructor– creates an object of this prototype

• Object's properties are prefixed by this.– such properties are public, i.e. visible everywhere - OOP alert!!

Page 29: 6. JavaScript Objects and Object- Oriented Programming (OOP)

29

Encapsulation Via Closures

• Local variables declared in constructor using var – retain their scope and lifetime– their value can be accessed and changed by functions declared

within the constructor

• This is the closure concept• Advantage

– methods can be defined as anonymous functions– such local variables are private, i.e. inaccessible from outside– OOP: encapsulation is possible

• Problems– each object has its own copy of the anonymous functions– garbage collection / memory leaks

Page 30: 6. JavaScript Objects and Object- Oriented Programming (OOP)

30

Closure Example

function Counting(initValue) { var count = initValue; this.inc = function () { count++; return count; }}

var counting = new Counting(0);alert(counting.inc()); // outputs 1alert(counting.inc()); // outputs 2

Page 31: 6. JavaScript Objects and Object- Oriented Programming (OOP)

31

Constructor Function Examplefunction Student(name, age, major) { this.name = name; this.age = age; this.major = major; this.toString = function() { return this.name + " (" + this.age + "), " + this.major; }}

var uhStudent = new Student("John", 24, "ICS");alert(uhStudent); // John (24), ICS// let's add some properties to JohnuhStudent.uni = "UH";uhStudent.level = "senior";// and let's have a better outputuhStudent.info = function() { return this.toString() + " " + this.level + " at " + this.uni; };alert(uhStudent.info()); // John (24), ICS senior at UH

Page 32: 6. JavaScript Objects and Object- Oriented Programming (OOP)

32

Student Example refined

var uhStudent = new Student("John", 24, "ICS");uhStudent.uni = "UH";uhStudent.level = "senior";alert(uhStudent); // John (24), ICS

// now let's improve toString() itselfuhStudent.info = uhStudent.toString;uhStudent.toString = function() { return this.info() + " " + this.level + " at " + this.uni; };

// now the output is simpleralert(uhStudent); // John (24), ICS senior at UH

// improved toString() doesn't work for another studentvar jack = new Student("Jack", 19, "LIS");alert(jack); // Jack (19), LIS

Page 33: 6. JavaScript Objects and Object- Oriented Programming (OOP)

33

prototype property

• Is inherited by each object• Can be dynamically updated simply by assigning its new

properties– e.g.

• name.prototype.property = value;

• New function properties can be added, too– e.g.

• name.prototype.name = function (parameters) {body}

• Such function can use this as reference to the object

Page 34: 6. JavaScript Objects and Object- Oriented Programming (OOP)

34

prototype ExamplesArray.prototype.shuffle = function() { for (var i = this.length - 1; i >= 1; i--) { var j = Math.floor (Math.random () * (i + 1)); var jthValue = this[j]; this[j] = this[i]; this[i] = jthValue; } return this; }

var shuffled = [0,1,2,3,4,5,6].shuffle();alert(shuffled); // e.g. [6,4,0,3,1,5,2]

String.prototype.trim = function() { return = this.replace(/^\s+|\s+$/g, ""); }

var trimmed = " \n\t some text \f\n ".trim();alert(trimmed); // some text

Page 35: 6. JavaScript Objects and Object- Oriented Programming (OOP)

35

Inheritance

• Main concept– the prototype chain

• To append a SubClass to the prototype chain of SuperClass use– SubClass.prototype = new SuperClass();

• then SubClass inherits all the properties of SuperClass• including all the methods

• Numerous approaches to alleviate drawbacks, e.g.:– javascript.crockford.com/inheritance.html

– www.coolpage.com/developer/javascript/Correct OOP for Javascript.html

– mckoss.com/jscript/object.htm

• Multiple inheritance is possible• See examples later

Page 36: 6. JavaScript Objects and Object- Oriented Programming (OOP)

36

Polymorphism

• Polymorphism– a method can have different forms – depending on the type of the object

• In JS, polymorphism is automatic– simply redefine the function with the same name– Note 1: different parameter list doesn't constitute a different

function• if the function name is the same, it's the same function!

• unlike Java!

– Note 2: two properties can't have the same name• since a function is also a property, it's name must not conflict with

another property

Page 37: 6. JavaScript Objects and Object- Oriented Programming (OOP)

37

Static Members

• Simply add the member using the name of the constructor function– using the dot-notation

• e.g., Math.SQRT3 = Math.sqrt(3);• e.g., Math.sqr = function (x) {return x*x;}

• Or in within a constructorfunction ()

Board.size = 8;

Board.init = function () {…}

}