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

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

2. Motto: My object all sublime I shall achieve in time. —W. S. Gilbert

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

4. JavaScript Objects • Objects have • a type • the type has a name • attributes • properties • behaviors • functions • in JavaScript, functions are properties, too!

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

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

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

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);

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)

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 patternis not found • starts search at startIndexif it is given • lastIndexOf(pattern[,startIndex]) • returns the beginning index of the last occurrence of pattern • returns -1 if patternis not found • starts search at startIndexif it is given

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")

12. String Substring Methods • substring(from[,to]) • returns the substring of this string starting at fromindex up to (not including) toindex • 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 fromindex up to (not including) from+nindex • 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 fromindex up to (not including) toindex • same as substring(from,to)

13. String RegExp Methods • search(regexp) • returns the index of the first occurrence of the pattern matching the of regular expression regexpwithin 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 regexpwithin this string has been replaced by string2 • if regexpuses the global modifier /…/g then all occurrences will be replaced • this string remains unchanged • match(regexp) • matches pattern(s) of regular expression regexpwithin this string • returns an array with matched substrings (see later when we discussregular expressions)

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  • sup() • returns this string wrapped into  • 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>

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);

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

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

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

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

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

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

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)

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

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);

25. Other Standard Objects • Array • mentioned already • RegExp • see later • variety of error types • Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError

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

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

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!!

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

30. Closure Example function Counting(initValue) { var count = initValue; this.inc = function () { count++; return count; } } var counting = new Counting(0); alert(counting.inc()); // outputs 1 alert(counting.inc()); // outputs 2

31. Constructor Function Example function 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 John uhStudent.uni = "UH"; uhStudent.level = "senior"; // and let's have a better output uhStudent.info = function() { return this.toString() + " " + this.level + " at " + this.uni; }; alert(uhStudent.info()); // John (24), ICS senior at UH

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() itself uhStudent.info = uhStudent.toString; uhStudent.toString = function() { return this.info() + " " + this.level + " at " + this.uni; }; // now the output is simpler alert(uhStudent); // John (24), ICS senior at UH // improved toString() doesn't work for another student var jack = new Student("Jack", 19, "LIS"); alert(jack); // Jack (19), LIS

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

34. prototype Examples Array.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

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

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

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 constructor function () Board.size = 8; Board.init = function () {…} }