Object Oriented JavaScript

javascript.gifJavascript has invaded my life. And I like it.

I have developed web applications for quite some time, writing Javascript off an often unnecessary tool that simply added frills. Over the course of this year - with the birth of the Ajax hype - I realize my error. I began inserting javascript all over hell's half acre and raving about its sweetness. I've grown in a year.

As I develop more javascript-rich web applications for my amusement and my job, I am constantly seeking better ways to structure both data and code. It wasn't until a month ago that I really began to dig into the Prototype and Script.aculo.us code (rather than simply using it) and began to grow aware of what was actually going on. Object Oriented Javascript.

I think it is important to note (so I don't look like a complete nitwit) that I was aware that Javascript had this capability a couple of months back before I picked up and started using the afore mentioned Javascript libraries...I just had no drive to learn it and spot where it was being used. I have seen the light and it is good.

What are its benefits? Well, pretty much the same applies to Javascript that applies to any other programming language...OOP helps increase organization and reduce un-needed redundancy. And best of all? It helps prevent dual-declared functions and variables. That is the reason I chose to begin my quest for OO-JS familiarity.

I had gone hunting at a few other sites that claimed to be good references (obviously) of OO-JS, but they lacked the topic of inheritance, which is the real strength of any OOP Language. The most helpful article I found on the topic was at WebReference. They discuss the use of prototype (Not the Javascript Library). Here's a quick excerpt, but I'd suggest you read the article for yourself!

Excerpt from WebReference

JavaScript:
  1. function Person() {
  2.       this.name = "Rob Roberson";
  3.       this.age = 31;
  4. }
  5.  
  6. function Employee() {
  7.       this.dept = "HR";
  8.       this.manager = "John Johnson";
  9. }
  10.  
  11. Employee.prototype = new Person();
  12.  
  13. var Ken = new Employee();

Ken is in the prototype chain of Employee, Person, and Object.

Check it out. Use it. You'll like it. You're applications will like it. Oh, and it may prove useful to check out some Javascript Coding Conventions.

Discuss This Article


6 Responses to “Object Oriented JavaScript”

  1. pingback pingback:
    BorkWeb » Blog Archive » Ajax; Templating; and the Separation of Layout and Logic

    [...] I have often mentioned my process of expanding my proficiency of Ajax. Through my journey I have made a number of wrong turns and hit my share of stumbling blocks. All of that has been a learning experience and I’m learning still. I began fiddling with XMLHttpRequest as many do - blissfully ignorant of the many frameworks that exist to make Ajax super easy. My code was bloated with some neat…’features’ (pronounced: bugs). [...]

    Reply to this comment.
    1
  2. AvatarKrzysztof

    something has been spoiled with your decorative links at the end of your blog - I had to ‘view source’ to retrieve them!

    Reply to this comment.
    2
  3. AvatarMatt
    Author Comment

    Should be all fixed now :) Thanks for the heads up!

    Reply to this comment.
    3
  4. AvatarJeroen

    For people that are interested in a Java/C#-style OOP in JavaScript, I have created a small shareware library. You can download it at http://software.antrix.nl/

    Reply to this comment.
    4
  5. pingback pingback:
    BorkWeb » Geeks, Nerds and Dweebs

    [...] I’m proud of my Geekiness. I’ll be the first to call myself a geek, but what really irks me is when I proclaim myself as one, my family immediately replies with a “nahhh…you’re not a geek,” in a comforting tone. I’ve worked hard to be obsessive over random things (Star Wars, Warcrack, Programming, etc)…let me have my cake and eat it too :) [...]

    Reply to this comment.
    5
  6. AvatarUselessPickles

    I’d like to challenge Jeroen with my object-oriented framework at http://www.uselesspickles.com/blog/the-class-library/ :).

    Reply to this comment.
    6

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview:

 (4443) - javascript object size (35) - jquery oop (31) - oo js (28) - jQuery object oriented (23) - object oriented jquery (16) - jquery oo (13) - javascript size of object (10) - My Object Oriented Javascript Tools (9) - oo jquery (7) - javascript test for object (7) - javascript object length (7) - javascript length of object (5) - object oriented javascript jquery (5) - javascript (5) - jquery object orientation (5) - javascrip object (5) - Object-Oriented JavaScript download (5) - js object size (5) - javascript oop (5) - javascript oop jquery (4) - object size javascript (4) - object length javascript (4) - oop jquery (4) - object-oriented jquery (4) - javascript length of an object (4) - javascript get object size (4) - javascript size of an object (4) - javascript object exists (4) - test object javascript (4) - javascript jquery oop (4) - Object-Oriented JavaScript pdf (3) - javascript prototype OOP (3) - jquery class layout oop (3) - jQuery object oriented Javascript (3) - size of object javascript (3) - javascript test object (3) - size of javascript object (3) - javasript oo (3) - object oriented javascript (3) - check object in javascript (3) - javascript OOP pdf (3) - jquery object oriented programming (3) - javascript test if object exists (3) - Check Object existence in javascript (3) - javascript object orientation structure (3) - javascript oo framework (3) - My Object Oriented Javascript Tool (2) - javascript jquery object oriented (2) - oop js (2) - length of objects Javascript (2) - jQuery Class Object Oriented (2) - if object exist javascript (2) - to check the javascript object exsists or not (2) - jquery oop plugin (2) - js object length (2) - javascript check existence object (2) - object oriented javascript protected (2) - javascript make OOP library (2) - OO and jquery (2) - size of an object javascript (2) - learning oo js (2) - javascript object oriented plugins (2) - oo javascrip (2) - javascript object.length (2) - javascript size of objects (2) - application oriented title using java (2) - prototype if object exists (2) - javascript length objects (2) - object oriented javascript inheritance super (2) - oo in js (2) - javascript object.size (2) - My Object Oriented Javascript Tools. (2) - javascript struct (2) - javascript oo programming (2) - download Object-Oriented JavaScript pdf (2) - jscript test for object (2) - javascript check object exists (2) - javascript test for existence of object (2) - struct javascript (2) - how to check object in javascript (2) - OOP with jQuery (2) - js oop (2) - javascript check object (2) - Javascript check for existence (2) - javascript check object attribute exists (2) - javascript check object size (2) - prototype test element exists (2) - test objects in javascript (1) - existence of object javascript (1) - javascript elements test (1) - check existence of html element by js (1) - checking for existence of javascript object (1) - benefits of oop javascript (1) - check object attribute exist javascript (1) - learn oo javascript (1) - js cursor object (1) - checking the class of an element in js (1) - how to check length of object in javascript (1) - test defined object javascript (1) - javascript length object size (1) - javascript check object for a member (1) - how to check element exist or not in prototype.js (1) - how to test an element existence in jquery (1) - scriptaculous check element existence (1) - javascript test for object found (1) - object oriented javascript pdf download (1) - ie js object size (1) - prototype exists javascript (1) - javascript check is node (1) - get object elements length javascript (1) - testing for existance of an element in javascript (1) - checking existence of element prototype (1) - javascript test auf object (1) - jquery object is exists (1) - check for existence of object in javascript (1) - jquery object exists (1) - checking if object instance exists java (1) - javascript testing for an element (1) - javascript testing for existences of function (1) - test element available javascript (1) - object.cursor javascript (1) - javascript classes oo (1) - checking for existence of a object in javascript (1) - js test for object (1) - javascript object class pdf (1) - javascript check exists object attribute (1) - javascript cursor object (1) - javascript .length objects (1) - javascript is object test (1) - learning javascript object oriented (1) - learning javascript object oriented programming (1) - test if object exist javascript (1) - javascript checking for object existence (1) - javascript check object defined (1) - javascript object length size (1) - how to check object existence in javascript (1) - javascript how to find objects size (1) - javascript checking the existence of an object (1) - check the object.size in javascript (1) - javascript test element is defined (1) - java script existence of an object (1) - get object size javascript (1) - js object.attribute (1) - Javascript oop super (1) - javascript check if object is defined (1) - javascript check size of an object (1) - existance of object in javascript (1) - object.length jscript (1) - javascript test for existing element (1) -