Programming

Markup

Style & Layout

Browser scripting

Server scripting

Making money online

Javascript objects

Javascript is an object-oriented language.

An object-oriented language is a language where data types of data structures are defined by the programmer as well as their properties and the things that can be done with them.

This lesson focuses on:

• What is an object?
• Object properties
• Object methods
• Javascript's built-in objects
• Building your own objects
• Using objects

What is an object?

An object is a special data type that does not simply store a single value, but instead is an entire data structure used to represent something. For example, if you were to create an object that represents a vehicle, you can create a "Vehicle" object.

Object properties

An object's properties are the details about it. For example, a "Vehicle" object would have properties such as model, year, color, and mileage.

Object methods

An object's methods are the things that can be done with the object or the things an object can do. For example, a "Vehicle" object would have methods such as drive, reverse, open door, and park.

Javascript's built-in objects

Javascript has several built-in objects that can be used to print text, perform calculations, and more.

Some of Javascript's built-in objects:

• String

  The String object is one of the most fundamental objects in Javascript. The String object is used to print and manipulate text in several ways such as returning part of a text string, returning the length of a text string, and more.

  String object properties:

  • length

    Returns the length of a text string.

  String object methods:

  • charAt()

    Returns a character from a text string at a specified position.

  • concat()

    Joins together two or more text strings.

  • replace()

    Replaces some characters with a set of other characters in a text string.

  • toLowerCase()

    Displays a text string in lowercase letters.

• Math

  The Math object is used to perform various mathematical calculations such as returning the absolute value of a number, returning a random number, and more.

  Math object properties:

  • PI

    Returns the value of PI (3.14)

  Math object methods:

  • abs()

    Returns the absolute value of a number.

  • random()

    Returns a random number between 0 and 1.

  • min()

    Returns the lesser of two numbers.

  • max()

    Returns the greater of two numbers.

Building your own objects

Creating the object

An object is created the same way a function is created. When creating an object, the name of the function should be the name the object will be referred to as.

Syntax:

function nameOfObject(){

}

Example:

function Vehicle(){

}

The above example creates a Vehicle object.

Specifying the properties of an object

Using the "Vehicle" object example from above, we can say that some properties of this object include model, year, color, and mileage. To apply these properties to our Vehicle object, we would place them right in the object template:

function Vehicle(year, company, color, mileage){
this.year = year;
this.company = company;
this.color = color;
this.mileage = mileage;
}

Within the object template, you can assign values to the properties of the object with this.propertyName. The this keyword signifies the current instance of the object.

Specifying the methods of an object

Using the Vehicle object, we can say that some methods of it are drive, reverse, openDoor, and park. An objects methods are declared just as functions are.

Example:

function drive(numMiles){

this.mileage += numMiles;

}

The above example creates a drive() method for the Vehicle object. Using this method, we can specify how many miles to drive and add that number to the total mileage of the car.

NOTE: Methods of an object should be added to the object template!

Example:

function Vehicle(year, company, color, mileage){
this.year = year;
this.company = company;
this.color = color;
this.mileage = mileage;
this.drive = drive;
}

The above example demonstrates adding the drive() method to the Vehicle object template.

Using objects

Using Javascript's built-in objects

Instantiation

To use one of Javascript's built-in objects, you have to instantiate it using the new keyword and the objects name.

Syntax:

var aVariable = new objectName();

Example:

var aString = new String();

Using properties

To use the properties of Javascript's built-in functions, you have to use the name of the instance of the object, followed by a ., followed by the name of the property.

Syntax:

aVariable.objectProperty

Example:

var aString = "This is a text string.";

//return the length of the aString text string
//using the "length" property of the String object
document.write(aString.length);

Output:

In the above example, the "length" property of the String object is used to return the length of the aString text string.

Using methods

To use the methods of Javascript's built-in objects, you have to do so using the name of the instance of the object, followed by a ., followed by the name of the method, followed by parenthesis and the parameters that come with the method, if any.

Syntax:

aVariable.objectMethod();

Example:

var aString = "This is a text string.";

//return the first character of the aString text string
//using the charAt() method of the String object
document.write(aString.charAt(0););

//skip a line using HTML's <br />  tag
//and return the absolute value of -5
document.write("<br />" + Math.abs(-5));

Output:

In the above example, the charAt() method of the String object is used to return the first character of the aString text string, and the abs() method of the Math class is used to return the absolute value of -5.

NOTE: The Math class cannot be instantiated! Instead, the name of the class itself is used together with its properties and methods.

Using your own objects

Instantiation

To use one of your own objects, you have to instantiate it using the new keyword and the objects name, the same way as with Javascript's built-in objects.

Syntax:

var aVariable = new objectName();

Example:

var aVehicle = new Vehicle(1990, "Bord", "Green", 150,000)

Using properties

To use the properties of one of your own objects, you have to use the name of the instance of the object, followed by a ., followed by the name of the property.

Syntax:

aVariable.objectProperty

Example:

var aVehicle = new Vehicle(1990, "Bord", "Green', 150000);

//return the year of aVehicle using the
//year property of the Vehicle object
document.write(aVehicle.year);

Output:

In the above example, the "year" property of the Vehicle object is used to return the year of aVehicle.

Using methods

To use the methods of one of your own objects, you have to use the name of the instance of the object, followed by a ., followed by the name of the method, followed by parenthesis and the parameters that come with the method, if any.

Syntax:

aVariable.objectMethod();

Example:

var aVehicle = new Vehicle(1990, "Bord", "Green", 150000);

//print the number of miles driven with aVehicle
document.write(aVehicle.mileage);

//drive 5 miles with aVehicle
aVehicle.drive(5);

//skip a line and
//print the number of miles driven with aVehicle
document.write(aVehicle.mileage);

Output:

In the above example, the drive() method of the Vehicle object is used to add 5 miles to the total number of miles driven by aVehicle. The mileage is printed before and after the method is called to show the difference.

Practice

Reference

Rate this site