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; }
	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 */
	self.my_property = somevar;
	self.alert_loop = function(count) {
	self.alert_numbers = function() {
		for(var i = 0; i < loop_max; i++) {
	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!


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.

Using JSHint with Sublime Text 2





jQuery Chaining











<ol id='mylist'>




	<li class='Mix catfood'>
	<li class='catfood'>
	<li class='Meow catfood'>


Writing Chainable Plugins/Functions




(function($) {
	$.fn.count = function() {
			var self = $(this);  //
			var theInterval = window.setInterval(function() {
				var c = parseFloat(self.text());
				self.html(c + 1);
			}, 1000);
}) (jQuery);


	<span id='test'></span>



HTML 5 Canvas: Saving to a File with PHP



Step 1: Save the canvas and POST the data

$.post("process.php", {
	imageData : data
}, function(data) {
	window.location = data;


$decodedData = base64_decode($data);
fwrite($fp, $decodedData);
echo "/canvas.png";



jQuery Map Function



	if( != -1) {
		return product;


Remove undefined from a Javascript object

I’ve been doing a fair amount of javascript programming lately, and I found myself needing to remove a nested object from an object.  Doing this is easy enough with the “delete” command, but it leaves you with annoying “undefined”s all over.  To get around that, I scoured the internet for a way to remove them easily.  Turns out that if efficiency isn’t a problem, it’s easier to drop the right objects into an array and then re-assign it.

var tmpArray = new Array();
for(el in {
     if([el]) {
} = tmpArray;

Easy and pie.

Load Javascript Dynamically With Lazy Load

One of the blessings (or plagues) or the “Web 2.0” revolution is heavy use of Javascript.  Used properly, Javascript can enhance your user experience to nearly the level of a desktop application.  Used poorly, and you’re browser is going to crash and burn.  But this post isn’t about using Javascript, it’s about loading it.

You see, a large amount of web developers don’t think about how their web page is loaded.  They think that no matter where scripts are included, its going to take the same time to load.  Actually, this is true.  What we’re after is an apparent decrease in load time.  When you include Javascript files at the top of your HTML document, as soon as the browser encounters the Javascript it will load and execute it.  The problem here is that loading a Javascript file is a blocking call in most web browsers.  What does this mean to you?  It means that while the Javascript is loading, the rest of your page isn’t.  The apparent page load time has increased.

To get around this problem, some web developers have started including their scripts as the last element in the <body> tag.  Done this way, your entire page loads on to the screen before the Javascript starts to load.  The apparent page load time as decreased.  Yes, the script will still take the same time to download and execute, but now people will see content almost immediately.

But why should you include some Javascript files if you aren’t sure the user is going to make use of them?  Enter Lazy Load.  Lazy Load allows you to easily include Javascript or CSS files on the fly.  This is especially helpful when you have large files that need to be loaded.  For instance, a sweet new carousel for your site.  It’s probably pretty large, and the user is going to have to wait for it anyways.  Using Lazy Load you can decrease your site’s apparent and actual load time.  It’s also small (~800 bytes minified), so you won’t need to worry about the footprint.  Oh, it’s really easy too…

LazyLoad.js('', function () {
     alert('foo.js has been loaded');

Javascript Net PDF Viewer



Javascript Net PDF Viewer [Google Docs]