Month: January 2014

As I’m sure you’re aware, if you try to log to the console in a browser like IE7 or 8 where there is no console like this:

Logging to the console

1

console.log("Hello World!");

Then it will break your script. Of course, the simple solution to this is to make sure there’s no call to the console object in your code, however during testing this can be quite tedious. At the expense of a few lines of code you can get around this by adding this at the top of your JS file:

Rejoice!

1

2

3

4

5

varc={

log:function(a){

if(typeof window.console!="undefined")console.log(a);

}

};

Firstly we create a new object called
c, and then add a method called
log which first checks if the console exists, and then calls the regular
console.log() method if it does.

You would use this the same as the console, except it’s a bit quicker to write:

Usage

1

c.log("Hello World!");

Now if you accidentally, or purposefully, leave that in your code it won’t break IE7 or 8, or any other browser which doesn’t implement the console object. You could of course add other console methods quite easily.

Because I’m lovely, here’s an already minified version of the
c object, so it takes up even less space.

Furthering on from my introduction tutorial to object literals in JavaScript, this is a slightly more advanced tutorial on how to set up delegates. A delegate is essentially a callback that one object can register for, usually receiving data from the object doing the delegating.

If the setup of the objects themselves is confusing then make sure you’ve read my introduction tutorial, but here’s a rundown of what I’ve done:

There are three objects here, the
Map object and two other objects which will be a
Map delegate. The
Map object has a property called
delegates, which will hold an array of all the delegates you add. The
Map object also has three methods:
.addDelegate(),
.removeDelegate() and
.sendDataToDelegates(). These are all pretty self-explanatory.

The two delegate objects,
MapDelegate and
AnotherDelegate both have to implement
.coordinatesChanged() which is a required method because otherwise the script will break when
Map tries to call it. You can make a method optional by first checking if it’s defined before calling it for each delegate.

As you can see, the delegate objects both implement the
.coordinatesChanged() method, but they do different things with the data (one prints the coordinates to the console, the other alerts the user with a dialog). All they care about is that the coordinates have changed and what the new coordinates are, they do their own thing with the new data.

JavaScript is a funny thing, it’s extremely powerful in helping us make amazing and interactive websites (especially coupled with the fantastic jQuery library), but it’s really difficult to keep the code tidy and structured. Enter ‘Object Literals’.

Object literals are essentially a list of key:value pairs. Each key can hold anything as a value, even another object.

A basic object literal

1

2

3

{

age:27

}

Another basic object literal

JavaScript

1

2

3

4

{

age:27,

name:"Kane Cheshire"

}

Here’s an example of passing another object literal as a value to the
born key.

An object literal's key can hold another object literal

1

2

3

4

5

6

7

8

{

age:27,

name:"Kane Cheshire",

born:{

month:"March",

year:1987

}

}

Note that the last key:value pair in an object doesn’t have a comma after, if you add a comma it will break the script in some browsers (namely IE).