Okay, so you're like me - you've heard about OOP or Object Oriented Programming and wonder what all the hOOPlah is about! So here's the straight pOOP. Okay, sorry for the stOOPid puns. I'll stop now. Honestly, I will. OOPs I did it again.

Right.

Here's the scenario: we have an online store, we want to maintain a database of our products, and we want to be able to access them. This tutorial shows how this can be done, with very simple, commented code.

Please note, that I'm not recommending that you use JavaScript to store your actual product data. For one thing, client-side JavaScript is not persistent, so your product information will disappear as soon as the browser window's closed. Your actual information would be stored in a database somewhere (like a mySQL database) which you could access via Perl or some other scripting language.

What you WOULD use JavaScript for is your presentation layer. So for example, you want people to be able to see a quick display of the products, with an image, a description etc. And maybe they should be able to quickly switch between products, perhaps using a pull-down menu. Whatever. The point of this example is to learn some object-oriented basics, not to create the next OSCommerce.



The following code shows how easy it is to create objects using JavaScript. In this example, we are dealing with two custom objects: a ProductDatabase object which would be a local mirrored copy of some (or all) of your actual product database which as mentioned above would be in mySQL or Oracle; and a Product object, which would describe one single product item.

The ProductDatabase object will then contain all your Product objects. And it will also provide tools (in OOP-speak "methods") by which you can create and manipulate those product objects. To access your individual product objects (by name), just call the ProductDatabase.getProdByName() method.

I'm not an OOP expert, so I won't lecture you on complex object-oriented programming concepts such as inheritance and prototypes. This is just the basics, folks, from someone who wants some free webhosting. However, there are just a couple of things I would like to point out about objects:

1. an object is created using a "constructor" function. Basically this is a function you define at the highest level of your code that gest used to create an instance of the object whenever it is called, and populate that object with whatever starting values you want. It's really easy. Define your object constructor like a function:


You then create an instance of that object like this:


Often, you want to give information to the object when you are creating it. You can do this with parameters, just like you would with any other function. Pass parameters to a new object like this:


And receive the parameters in the object constructor like this:


2. an object instance should be assigned to a variable, or at least stored anonymously somewhere so that you don't lose it. You can do that very simply by assigning the object to a variable like this:
var myProdObject = new Product().

Or you can put the object anonymously into an array right away like this:
my productArray[0] = new Product().

You can then get at that object later like this:
productArray[0].

3. an object can have properties associated with it. These are your attributes. In the case of the Product object below, these would be things like price, product name, product description etc... The properties get stored with the object. You can do that easily (within the object constructor) like this:
this.propertyName = value.

Here's an example:


Later, you can access these properties like this:


But you can see here that if I create another object instance using the same constructor, it will also have the same values. Look to point #2 above to see what the solution is: use parameters when you create the object and assign those values to the object's properties, like this:


And create a couple of instances like this:


So as long as you don't lose the object (ie: destroy the variable that contains that instance of the object), all its properties get "carried along" with it. You can access them later using regular "dot syntax" as in:
alert (myNewObj5.colour)

or (for the Products object in the long listing below)
alert(myProductObject.prodName).

or as per the array example above:
productArray[0].prodName.

4. an object can have methods associated with it. Basically, methods are functions that are attached to the object. Only objects that are instances of that object type would have access to that method. The method works primarily with the properties of that object (see #3 above), but can access external methods and properties, though I hear that purists frown on this sort of behaviour. OOPs!

Attach a method (function) to an object like this:
this.methodName = function() { // function goes here }

Within the function, access the properties of the object using the "this" dot notation. Here's a simple example from previous snippets:



There you go, the basics. I'm pretty much at the limit of my object-oriented know-how anyway, so best I quit with an example that puts it all together.



----------

Garmon Sutrix

 

 

 

Reply

Very nice tutorial!! That really made it all clear.

One big question though. Once you have implemented a solution like that, how would sort your 'database'? For example, how could I sort my products by price?

Chris

Reply