6.1 JavaScript Objects and Object-Oriented Programming (OOP)

1
6.1 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 dont 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
  the real-world objects in the problem domain
• 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
• Models communication between objects
• Encapsulates attributes and behaviors of objects
  by restricting their visibility to outside
  objects
• Allows to redefine the behaviors of derived
  objects - polymorphism
• 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_2cLOG2E, LOG10E
• methods
• sqrt(), sin(), cos(), tan(), atan(), exp(),
  log(), pow()
• ceil(), floor(), round(), max(), min()

9
Standard Objects String

• A string is a series of characters
• as in Java
• letters, digits, special characters
• Unicode characters
• same notation
• \n, \t, \f, \c, \", \', \\
• String constants
• can be enclosed either in "" or in ''
• 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

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 gt length
• charCodeAt(index)
• returns the Unicode value of the character at
  index
• returns NaN if index gt length
• toLowerCase()
• returns the lowercase version of the string
• toUpperCase()
• returns the uppercase version of the string
• 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

11
String Methods (cont.)

• split(pattern)
• breaks a string into token strings delimited by
  pattern
• returns an array of the tokens
• substring(from,to)
• returns the substring starting at from index up
  to to index
• ends the string returned at length-1 if to gt
  length
• fixed()
• returns this string wrapped into ltttgtlt/ttgt
• strike()
• returns this string wrapped into
  ltstrikegtlt/strikegt
• sub()
• returns this string wrapped into ltsubgtlt/subgt
• sup()
• returns this string wrapped into ltsupgtlt/supgt
• link(url)
• returns this string wrapped into lta
  href"url"gtlt/agt
• anchor(anchor)
• returns this string wrapped into lta
  href"anchor"gtlt/agt