Introduction


In this article we'll be taking a look at JavaScript objects, methods, attributes and detailing how OOP can help you write your own software libraries. I'm not only going to explain what objects, methods and attributes are but I'll also be showing you how to objectify your JavaScript so you'll only have to maintain one code base per functionality which will allow you to reuse your code over and over in many different projects.

What are Objects, Methods and Attributes?


An object is literally a representation of an object in real life. Every object has characteristics known as attributes, and certain abilities or functionality known as methods or procedures -- the classic example being a car.

The car object has some attributes such as make, model, color and so on. It also has some methods such as start, drive, stop and turn. If a car is an object, the JavaScript class would be the blueprints for making the object. We write classes that define what attributes and methods an object should have, and when we "instantiate" the class we initialize it and get a usable version of the object. To put it in terms of our example, we create a blueprint for the car that specifies its color, dimensions and what abilities it should have.

Simple Example


In JavaScript, everything is an object, and objects always have attributes and properties tied into them. As a quick example to how objects work, let's look at an array.

  1. arrMusic = new Array();


What that literally says is, "I want to create an Array object and name it arrMusic". Well, JavaScript has a class or "blueprint" for arrays. One of the attributes or "characteristics" of an array is its "length" -- the number of items stored in the array. You access an objects attributes by using the dot-notation of objectname.attribute.

  1. var numItems = arrMusic.length;
  2. document.write(numItems);
  3. // outputs 0 -- as the array is currently empty


The array object also has methods or "capabilities" such as toString(), which will take the values of the array and convert them into a comma separated string. You call methods in nearly the same way you would attributes -- by using the dot-notation of objectname.method(). So now let's add a few elements to our array and convert it into a string.

  1. arrMusic[0] = "Jazz";
  2. arrMusic[1] = "Rock";
  3. arrMusic[2] = "Hip-Hop";
  4.  
  5. var stringFromArray = arrMusic.toString();
  6. document.write(stringFromArray);
  7. // outputs "Jazz,Rock,Hip-Hop"


So there you go, that's an object in JavaScript. You've probably been using them all along and just didn't realize it -- now you do. Wouldn't it be cool if you could write your own, specific to what you need, and be able to call them just as effortlessly? You can, and you're about to learn how to do it.

Object Requirements and Class Blueprints


One of the most important aspects of writing a class for an object is figuring out what your object is. I know, it sounds silly but seriously -- we're often not so fortunate to be creating an object as trivial as a Car. So, let's take a look at a simple scenario.

Alright, let's say a client calls you up and he or she needs an application created. The application should have 5 buttons that a) draw a box on the screen; b) increase the size of the box; c) decrease the size of the box; d) change the color of the box; and e) remove / hide the box.

In this scenario the client is talking about manipulating an HTML element -- more specifically, they're talking about interfacing with the HTML through the DOM via a client-side scripting language. In our case that client-side scripting language is JavaScript.

All semantics aside, let's say the element will be a <div> (but, it doesn't have to be). We can create a "box" object that will be a representation of the <div> element in the browser. When we need to interface with the element we can talk to the Box object, which will control the attributes and methods of the actual element through the DOM which interfaces the web browser.

Figure 1

Collecting the Requirements


Let's recap the requirements of the scenario application.
  1. Create a box
  2. Make the box bigger
  3. Make the box smaller
  4. Change the color of the box
  5. Remove the box

As you look over these requirements, you may say to yourself "hey, I could use this functionality on half a dozen other projects". Well, what we're soon to do is package this functionality into a box object that we can reuse. If you get in the habit of programming this way you'll begin to find you have many reusable objects that can be merged together into a software library.

Determining the Blueprints for the Class


Next up, we need to determine what our Box object entails as far as attributes and methods go. So, let's examine each of the requirements and start pulling things together.

1. Create a box

What do boxes have, how can we create one? Well, we know a box has a width and height so there are 2 attributes. The box also needs a color, so that will be another. We access HTML elements via document.getElementById() so we'll have to assign it a unique ID so there we have the 4th attribute.

In this scenario those are the only attributes we need to concern ourselves with. Anything else you can think of to describe the box would also be an attribute, such as a border width, a border color, opacity and so on.

So the attributes are known, and we also know we'll need to write a method (function) to actually show the box -- think back to the car example, showing the box might be the equivalent of starting the car. We can show the box by setting the HTML <div> elements CSS display attribute to the value "block".

  1. // assuming <div id="box">
  2. // example setting display attribute -- show <div>
  3. document.getElementById('box').style.display = 'block';


We'll get into writing the actual object and methods here in a bit.

2. Make the box bigger

This is an example of a method, it doesn't describe the box, it describes what the box can do. So we need a method to make the box bigger, and that can be done by adjusting the "<div>"s CSS width and height attributes.

  1. // example setting width and height attributes
  2. document.getElementById('box').style.width = '100px';
  3. document.getElementById('box').style.height = '100px';


3. Make the box smaller

Decreasing the size of the box will work just as step #2, but instead of doing a little math to increase it we'll be doing a little math to decrease it.

4. Change the color of the box

Also an ability of the box, so we'll need to create another method to handle this functionality. We can change the color by modifying the "<div>"s CSS backgroundColor attribute.

  1. // example changing the CSS backgroundColor attribute
  2. document.getElementById('box').style.backgroundColor = 'red';


5. Remove / hide the box

Finally we'll need a method to hide the box and this can be done by setting the "<div>"s CSS display attribute to none.

  1. // example setting display attribute -- hide <div>
  2. document.getElementById('box').style.display = 'none';


Let's Continue


Alright, now that we've spent a little time learning about objects and took a closer look at the requirements of our scenario we're ready to actually create the Box object.
  • Attributes: Height, Width, Color, DOM ID
  • Methods: makeBox(), makeBigger(), makeSmaller(), changeColor(), unmakeBox()

Continue with Creating the Box Object ➜.