About Me

Curriculum Vitae

A brief list of my current skill set

Bloggybits

Tabs vs Spaces and Why You Should Always Use Tabs
Monday, 4th March 2013, 19:51

Spaces are bad, just real bad

Why you should ban Amazon's Cloud IPs
Thursday, 27th December 2012, 14:50

And how to do it in nginx, Merry Christmas Amazon

Building Better jQuery DOM Inserts
Thursday, 20th December 2012, 15:18

Break it down baby

SEO Companies - Don't Waste Your Money
Wednesday, 12th December 2012, 16:16

Spammers by any other name

Pulse Width Modulation and How 1-bit Music Works
Wednesday, 5th December 2012, 23:34

Beep beep multi-channel!

Making PDFs from HTML on your webapp in CentOS
Thursday, 29th November 2012, 14:00

Not as easy as it should be

Some Days I Wish For an Async String.replace
Monday, 19th November 2012, 12:59

MinnaHTML to the rescue!

Object Oriented Programming for Javascript Dummies - Part 2
Tuesday, 6th November 2012, 15:33

OOP it up to the OOPballs

Object Oriented Programming for Javascript Dummies - Part 1
Tuesday, 30th October 2012, 16:01

Not using OOP? Are you mad?

Strange Windows Errors and a Bowser in My Event Log
Wednesday, 24th October 2012, 11:10

It's like my own DailyWTF round-up!

Why Do People Come Here?
Monday, 15th October 2012, 15:47

They come to look at porn!

Idiot thinks Raspberry Pi Unsuitable for Education
Tuesday, 2nd October 2012, 15:24

Dumbest thing I've read since...

Upgrading to PostgreSQL 9.2 on CentOS 5
Tuesday, 25th September 2012, 14:52

It's easy as PI!

Fare Ye Well Work Email You Have Served Me Well
Monday, 17th September 2012, 14:36

Cause of death too much spam

Forest Racer - A HTML5 Game in Under 13K
Tuesday, 11th September 2012, 20:46

Including all assets, but only when zipped

Projects and Sillyness

MAME Cabinet Diary

How I built my own arcade cabinet

Loading Screen Simulator

I don't miss the ZX Spectrum, I still use it!

The Little Guy Chat Room

It's a Pitfall inspired chat room

GPMad MP3

A fully featured MP3 player what I wrote

GP Space Invaders

My first little emulator

GP32 Development Page

Some info and links about this cute little handheld

Disney Nasties

Uncensored images, you must be 18 to view them

Minna's World

The cuttest fluffy puppy in the world

Diary of a Hamster

Learn about how hamsters think, first hand

Utilities

Time Calculator

A simple little online utility for working out how many hours to bill a client

A Few Links

Object Oriented Programming for Javascript Dummies - Part 1
Tuesday, 30th October 2012, 16:01

One thing quite a lot of programmers just don't get is OOP, aka Object Oriented Programming. I'm not sure why, it's very easy, there really isn't much to it once you grasp the thing. But many don't, which is a shame because even in a language like Javascript that lacks proper classes and inheritance, it is an extremely useful concept.

So here we go, the first of a two part tutorial that should take anyone who understands the basics of programming, and get them to grasp the basics of OOP.

First, a history lesson, we need to understand the roots of object based programming. If you don't know why you should do something, you'll never really know how to do it properly.

We'll be using a bit of C/C++ here, just because that's where a lot of concepts have their origins, even if they might not have been the first examples. C shares some syntax with Javascript, so you should be able to follow it easy enough.

Variables

The earliest computers had states, which evolved into registers. These were (and still are) like hands used for counting on, with a limit as to how high you could count on them. At some point though, you run out of hands and need to write down the numbers somewhere, which is were memory comes in.

On a slightly higher level of thought, we have a variable. This is an abstract concept, sometimes they only exist for a short period of time and are assigned to a specific register in the CPU. Other times they are stored in memory locations, and often they move backwards and forwards between memory and the registers.

But we all know that one variable stores one value, whether that be a number, character or string.

    char *strName = "Minna";
int intAge = 14;
char *strBreed = "Finnish Lapphund";
char *strAnimal = "Dog";

But obviously in this day and age, having four variables to represent one thing, is annoying. Not least because when you call a function you have to pass an awful lot of parameters:

    printInfo(strName, intAge, strBreed, strAnimal);

So, in the C language, someone decided to use structures.

Structures

A structure is a collection of variables stored as members of an object, so the above becomes:

    struct animal
{
char *strName;
int intAge;
char *strBreed;
char *strAnimal;
};

struct animal Minna;

Each of our original variables is now a member of the structure. Putting aside the fact we just created a structure but haven't assigned any data from it, just look at what we pass to a function now:

    printInfo(&Minna);

Because structures in C are stored in contiguous memory, if you pass the address where the start of it is stored, it's very predictable to know where each member of the structure is as an offset from the start address.

Let's Go Javascript!

At this point, we can stop with C in our history lesson and move on to Javascript, where a lot of people spend their time these days. Our object above in JS becomes:

    var objMinna = {
strName: "Minna",
intAge: 14,
strBreed: "Finnish Lapphund",
strAnimal: "Dog"
};

And obviously we can call a function with it like so:

    printInfo(objMinna);

There is always a danger, especially in a language as fast and loose as Javascript, in which you can call a function with the wrong arguments. Say we like the function name printInfo so much, we want to use it whenever we need to print some info about our object. But clearly here we can only do it if the object has the same format as above, and we can't have multiple functions called printInfo, can we?

We could probably do this if we were still in C, it is after all a strongly typed language, but Javascript flies loose in this world.

Member Functions

Actually, in JS, we can because one of the beauties of OOP is functions and objects are not separate entities, they become one entity. So we rewrite our above object in a different way:

    function animal(strName, intAge, strBreed, strAnimal)
{
this.strName = strName;
this.intAge = intAge;
this.strBreed = strBreed;
this.strAnimal = strAnimal;
}

animal.prototype.printInfo = function()
{
console.log(this.strName + " is " + this.intAge " years old");
}

And now we have an animal object that we can use like so:

    var objMinna = new animal("Minna", 14, "Finnish Lapphund", "Dog");

objMinna.printInfo();

Since the printInfo function is a property of the animal object, we can call it on that object. All functions are passed a "this" parameter which refers to the object they are operating on. If no object exists then this refers to a single global object, because it always has to refer to something.

What You Have Hopefully Learnt

In this first of two parts, hopefully you now know why we use objects and have an insight into possible uses for them. Basically, if you have a variable or a group of variables which work with specific functions, you should be grouping them all up into an object.

Here are a few things I use objects for, and this excludes jQuery client side stuff which heavily relies on OOP based objects:

  • Information about a user, with functions for getting and setting parameters such as their index in databases, permissions on what they are allowed to do, along with functions for attempting to authenticate them
  • Creating and maintaining a connection to a database, and executing commands on that database
  • Storing information which is written to and from XML
  • Caching database query results, passing through queries when they miss, returning cached results when they hit
  • Delivering specific webpages

Some of these are essentially flat objects, with no inheritance. What is inheritance I hear you cry? Well that is what we'll talk about next week in the second and final part.

Comments

Add Your Own Comment