OO Javascript help

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
incubusor
Forum Newbie
Posts: 3
Joined: Sun Jun 01, 2008 11:51 am

OO Javascript help

Post by incubusor »

Hey, Javascript newbie here. I have been trying to figure out how JQuery, Prototype and other frameworks go about making JS more OO like. I understand the $ function, but can't figure out how to add methods to it. I'm starting off with a simple example.

Code so far...

Code: Select all

function $() {
    var elements = new Array();
    for (var i = 0; i < arguments.length; i++) {
        var element = arguments[i];
        if (typeof element == 'string')
            element = document.getElementById(element);
        if (arguments.length == 1)
            return element;
        elements.push(element);
    }
    return elements;
}
 
Element.extend {
    hide: function() {
        this.style.display = 'none';
    },
    show: function() {
        this.style.display = '';
    }
}
 
window.onload = function() {
     $('myTestElement').hide(); //isn't working
}
 
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: OO Javascript help

Post by VladSun »

There are 10 types of people in this world, those who understand binary and those who don't
incubusor
Forum Newbie
Posts: 3
Joined: Sun Jun 01, 2008 11:51 am

Re: OO Javascript help

Post by incubusor »

Interesting read, however, I'm trying to avoid using JQuery or any other framework. I was starting from scratch to figure this out.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: OO Javascript help

Post by Eran »

You are using OO syntax that is not a part of Javascript natural syntax. You may have seen it used in the frameworks you mentioned, but it is only available there since they add their own custom syntax.

Javascript uses prototypical inheritance instead of class based inheritance. You can read a little about it here - http://phrogz.net/js/Classes/ExtendingJ ... asses.html
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: OO Javascript help

Post by VladSun »

You may look to the jquery JS source to get the idea.
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Re: OO Javascript help

Post by Kieran Huggins »

If you just want to make your own classes with methods, you can do so like this:

Code: Select all

// define the class
function Bookmark(){
  // define class variables
  var name = null
  var uri = null
 
  // define a class method
  function print_link(){
    return '<a href="' + this.uri + '>' + this.name + '</a>'
  }
}
 
// then use it
google = new Bookmark
google.name = "Google"
google.uri = 'http://google.com'
 
google.print_link() // returns '<a href="http://google.com">Google</a>'
Post Reply