Intro to OOP
Objectives
Practice
More Info.

What is an Object?

We have been exposed to using both primitive (int, float, boolean, char) and reference (String, Array) type variables. Reference variables are those on which methods can be called. Until now, we have worked with a limited knowledge of reference type variables. Object oriented programming is the process of creating your own reference type variables.

An object is a representation of any real world thing. For example, civil engineers working on simulating traffic flow might need to represent cars and traffic lights. Game designers might need to represent missals and attackers. Cell phone developers often need to reference dates, times and locations (GPS coordinates). Each of these items would be an object. In OOP, programmers create files for each object and then put the files together to make a full program.
Object Design

Objects have two main parts – properties and actions. Properties qualities that an object possesses and actions are things that the object can do. The designer of an object needs to determine what properties and actions the objects of the class will need to perform the necessary jobs. In the case of the car object that the civil engineers need, we might store properties of make, model, year, color, and number of passengers. Meanwhile, each car will need to move forward, backward, stop and turn (both right and left). We often use something called UML (Unified Modeling Language) to display the design of a class. UML is a comprehensive set of rules for designing and modeling, but will only use a subset of this information. In a basic UML diagram, we will need to state the variables with types (properties) and the methods with return types and parameters (actions). So, for our car class, the resulting UML diagram looks as follows:
Car
String color;
String make;
String model;
int year;
int numPassengers;
move(float distance);
turn(float degrees);
stop();

JavaScript Objects

Objects in JavaScript are created using the name/value pairings. A name value pairing sets a property name to its values. Values for strings should be encased in quotes, while boolean and numeric values should not. Similar to CSS, names and values are separated by colons. Subsequent properties are separated by commas. All pairs are enclosed in curly braces to denote the start and end of the object. var today={"month":10, "day":31, "year":2015};
To output information from the created object, use the dot(.) operator. Any property of the object can be accessed by using the objectName(variable).propertyName. So, to output the month of the above date: document.write(today.month);
This process can prove to be tedious if we are creating a large number of objects. In this case, we can create a special method called a constructor. The purpose of a constructor is to give values to all of the variables of an object. A constructor uses the keyword this to refer to the object being created. When creating a constructor method, the name of the method should be the name of the object and it should take parameters for all properties that need to be set. function Date(month, day, year){ this.month=month; this.day=day; this.year=year; }
Constructors are called using the keyword new and are assigned to a variable. When this happens, the varible is created as an object with the properties defined in the constructor and the values that are sent in as parameters. This method of creating an object allows variables to be used as property values if desired. var today = new Date(10, 31, 2015);
The process of outputting an object in a certain format can also be accomplished by creating a function. It would be repetitive to keep having to refer to the properties of the date object individually to output a date in the standard format (mm/dd/yyyy). So, by adding another variable to the constructor, we can define a method that allow us to output the date in the format we want. function Date(month, day, year){ this.month=month; this.day=day; this.year=year; this.toString = function(){ return month+"/"+day+"/"+year; } }
This method can then be called from a created object. var today=new Date(10,31,2015); document.write(today.toString());