Tag Archives: OOP

Methods & Properties with Javascript OOP

Note: This isn’t quite OOP. It’s actually called the “module pattern”.

If you come from a language such as Python, PHP, or Java, you’re used to having public and private methods and variables. In Javascript this is possible too, but it’s not nearly as straight-forward. To make this happen, you usually need to wade through Javascript’s prototype inheritance. However, there is another way.

Step 1: Create your class.

function MyClass(somevar) {
}

Now that your class is created, you can instantiate an instance of it by doing the following:

var x = new MyClass(123);

Step 2: Public Methods and Properties

To expose properties and methods to the public, you need to attach them to an object and return it. Some people will attach to this, but I prefer to create a new object called self and return that. It keeps me from getting confused with what this scope I’m in. One thing to remember, is that anything inside of your class that isn’t in a function gets executed as soon as you create a new instance of it.

function MyClass(somevar) {
	var self = {};
 
	// Check to make sure somevar is defined and then
	// assign it to the my_property public property.
	if(somevar === undefined) { somevar = false; }
	self.my_property = somevar;
 
	// A public method!
	self.alert_loop = function(count) {
		if(count === undefined) { count = 1; }
		for(var i = 0; i < count; i++) {
			alert(self.my_property);
		}
	};
 
	return self;
}

You’ll see that we have two things exposed here: my_property and alert_loop. To access them, do this:

var x = new MyClass("Hi!");
alert(x.my_property); // Alerts "Hi!"
x.alert_loop(2); // Alerts "Hi!" twice

Step 3: Private Methods and Variables

Creating private methods and variables is very easy using this method Javascript OOP. All you do is not attach the variable or method to the self object.

function MyClass(somevar) {
	var self = {};
 
	/* Private */
	var loop_max = 2;
	function add_numbers(x,y) {
		return x + y;
	}
 
	/* Public stuff */
 
	if(somevar === undefined) { somevar = false; }
	self.my_property = somevar;
 
	self.alert_loop = function(count) {
		if(count === undefined) { count = 1; }
		for(var i = 0; i < count; i++) {
			alert(self.my_property);
		}
	};
 
	self.alert_numbers = function() {
		for(var i = 0; i < loop_max; i++) {
			alert(add_numbers(i,i+1));
		}
	};
 
	return self;
}

And to use it:

var x = new MyClass("Hi!");
x.add_numbers(1,2); // Will fail.
alert(x.loop_max);  // Will fail.
x.alert_numbers();  // works!

Conclusion

That’s it! Using this style of OOP in Javascript is easy to learn and easy to understand. If you have any questions, drop a comment and I’ll get back to you.

Epiphany of Development

I’ve been doing web development for a long time.  I made my first (crappy) web page in 6th grade using the then awesome Geocities.  After that, I graduated to Front Page express.  Throughout my development career, I’ve had a series of epiphanies that have brought my skills to the next level.  Bold entries are where they happened.

  • 1998 – First web page - I knew that the internet existed, but it never dawned on me to actually create content.  I didn’t realize it at the time, but this simple act has been the anchor for the rest of my life.
  • 1999 – Discover Front Page (Express) - With my new found web skills, I started to use more advanced WYSIWYG editors.  Frontpage is hardly advanced, but it allowed me to separate my menus from my content using frames.  It opened up numerous paths for me to take.
  • 1999 (late) – Dreamweaver – Not super important, but discovering Macromedia Dreamweaver really changed how I did web pages.  I stopped using frames to make menus and started using layers.  Little did I know that layers were actually “<div>” tags that were positioned by CSS.
  • 2000 – Flash – Flash was still rather immature at this point, however it showed me what could truely be accomplished on the web.  No longer did menus have to be boring images and text links.  We could have tweening!  It was around this time that I build my first web page with heavy flash components.
  • 2001 – Discover PHP, HTMl, and CSS - This was a big year for me.  I discovered PHP, HTML, and CSS all at the same time.  I had no idea how any of these worked though.  At the time, PHP was well beyond my grasp.  CSS and HTML seemed do-able though.
  • 2003 – HTML + CSS  Zen - I was a junior in high school at this point, and had been appointed to wor on the school’s web site.  Actually, it was the entire district’s domain.  My brain had matured enough for me to make a web site BY HAND using nothing more than HTML and CSS.  I still didn’t understand programming, but using markup languages like HTML and CSS because second nature to me.
  • 2004 – Servers – Around this time I discovered that I could make servers on my own!  Not really code them persay, but rather run server software.  I’m pretty sure my first server was an FTP server so that I could share files with my friends.  It was tedious though, since I was still using 56k dial-up at the time.
  • 2005 (Early) – First Computer Science Course - The biggest eye opener ever.  I never realized how deep the rabbit hole went.  I was only learning assignmen, logic, loops and a few other things, but it made my thirst for knowledge inquentiable.  I started to learn C++ here.
  • 2005 (Late) – Assembly Language & C - Taking a course in SPARC assembly and a bit of C is an eye opener for every Computer Science student.  You’re pretty much at the bottom of the rabbit hole, and you spend the rest of your career climbing back out.  Coding in low level languages made me a much better programmer though, because it forced me to think.
  • 2006-2007 – School & Languages - These years were spent diving into new languages, learning new programming styles and domains, and generally having a good time.  I didn’t spend a lot of time doing web development, but I did teach myself how to make a web server in Python.  Not especially helpful, but still fun.
  • 2008 – PHP, MySQL, LAMP - I had already learned Linux in 2006-2007, however I never really dove into Linux as a server.  That was at least, until I found out (again) about PHP.  Turns out PHP needed Apache to run.  And all the fun PHP stuff also needed a database server  (MySQL).  I set up a PHP + Apache + MySQL server and went from there.  It was at this time that I started development on the first edition of Wrestling Addix.  I made my own CMS for it (bad idea) and in general the site worked fine, however it was a bear to maintain.  I decided that the next version would use a pre-built CMS so that my life would be easier.
  • 2009 – Ajax, WordPress, OOP, CMS – This year I’ve learned lots of stuff.  Most of it revolved around web development though.  I’ve learned to bend WordPress to my will (it runs this site).  I’ve learned how to use Ajax to make my web apps for responsive.  I’ve learned how to use Object Oriented Programming in my web sites, and how using a CMS WILL make your life easier.