Object Oriented Programming (OOP) has rapidly become the programming model of choice for any serious development work. There are a number of reasons why OOP has become so popular—not the least of which is code reuse. In this article I'll show you how to apply some OOP principles to JavaScript by revisiting the menu system built in my article Pop Goes the Menu.
OOP in JavaScript is a different animal than that found in more common OOP languages like Java and C++. In those languages, you abstract out real-world objects into their component parts and then assemble them in classes. The classes become the blueprints from which you create objects. Classes include everything an object needs to "know" about itself to be fully functional. So, all properties and methods associated with an object are included in the class. Then, when you are ready to create an object (in OOP: instantiate), you make a call to a constructor—a special method that creates an "instance" of the class—an object.
JavaScript, however, doesn't support the traditional OOP concept of classes. It is more limited in that it only really supports functions and variables. You'll find that you'll have to bend some rules when writing JavaScript from an OOP perspective.
So what can you do to use OOP in JavaScript? Well, you can create functions that act like constructors and then make use of variables inside the constructors to create methods and properties. I'm often asked what the difference between a method and a function or between a property and a variable is. The simple answer is that when a function or variable is associated with an object, it is then a method or property. In other words, if you can tell an object to call some function on itself then it has called a method. Enough theory!
Create the Menu System
The menu system has the following requirements:
- Create a menu bar across the top of the screen
- Create menu objects to populate the menu bar
- Center the menu system on the screen
Before delving into the code, you should create an abstraction of your objects. The questions to ask include:
- What makes a menu a menu?
- What should a menu know how to do?
- What component parts make up a menu?
Once again, that's oversimplified but you get the general idea. Starting at the top, a menu is a (usually) rectangular area of the screen filled with a collection of menuItems related in some fashion. A menu should know how to display and position itself and, in this case, show or hide itself when necessary. A menu is usually made up of a trigger, which displays the menu when activated, and a collection of menuItems, each of which consists of a title and an action--usually a link in Web applications.
Here's the style sheet that controls the display settings for the OOP menu system:
<style>
.menu a{
color: white;
font: 10pt Verdana,sans-serif;
}
.menu a:hover{
color: yellow;
}
.trigger th{
color: white;
font: 10pt Verdana,sans-serif;
font-weight: 700;
}
.trigger{
font: 10pt Verdana, sans-serif;
color: white;
background-color: rgb(50,50,130);
position: absolute;
padding: 2px;
width: 100;
height: 15;
z-index: 2;
cursor: pointer;
cursor: hand;
}
.menu{
font: 8pt Verdana, sans-serif;
color: white;
background-color: rgb(50,50,130);
position: absolute;
top: 23;
padding: 4px;
width: 100;
visibility: hidden;
z-index: 2;
}
.menuBar{
background-color: rgb(50,50,130);
position: absolute;
top: 0;
left: 0;
height: 25;
z-index: 1;
padding: 4px;
}
</style>
The style sheet isn't particularly complex. It includes some basic hyperlink rules and the declarations for each type of menu component. The menuBar CSS class handles the display of the menuBar containing the individual menus.
|