home

Javascript

What? Javascript is a dynamic scripting language that is prototype-based and allows HTML to do lots of clever stuff. Like Javafigtree, it has nothing really to do with Java ;-)

Why? HTML will still look as good, but won't do as much.

Would you? Yes. You have to use it to get the job done. Hint: Don't tell people that it is slow, scrappy and a poor-mans Actionscript. They don't like it. Seriously, they really don't. I said it once .... I didn't get away with.

I practice Javascript every day. Rather than look at it as a language, I look at it as part of HTML: a tool to do a job, not something to romance over. With over 300 new frameworks are released every second* it's difficult to know which one to choose. Some of them are really very good. Node.js, which takes the once client-side Javascript to the server, being the very best of them. Backbone.js (MVC for JS) and Meteor.js are well worth a prod. There are many Libraries out there that simplify Javascript and allow the developer to execute some pretty astonishing visuals. Prototype and Mootools are excellent, but have fallen far short in popularity to the 'I'm clever I am' sounding Jquery. The easiest way to execute Javascript is in a browser's developer tool. Chrome has excellent tools baked in, but my affection for Firefox and Firebug wins (even though the consol reads right to left).

A simple example:

Use the Firefox consol

Times table using a for loop

1
2
3
4
var a = ' n';
var b = 12;
for (var i=0; i < 10; i++)
	{a += b + ' x ' + i +" = " + b*i + " n";}

OOP

Javascript is an Object Oriented language, so to create an object in it, you can simply use this:

1
var name = 'Jon'

You can develop it further by adding methods to the object. This example is presented with Literal namespacing:

1
2
3
4
5
6
7
8
9
var name = {
name: 'Jon Smith',
address: 'London',
sayName: function() {
return this.address;
}
}

name.name + " comes from " + name.sayName();

This is a very clean, very pretty way of presenting an object.

We are likely to want to develop multiple people. Rather than creating an object for each person and repeat the code, we can create a function to create this object for us.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var createPerson = function(name,address) {
return {
name: name,
address: address,
sayHi: function() {
return "Hi There";
}
};
};

var person1 = createPerson ("John Smith","London");
var person2 = createPerson ("Paul Jones","Cambrdge");

person1.name + " " + person2.address

However, things start to get a bit messy when you try and extend it. Personally, if you are going to use OOP, you have to extend and share properties to make it worth it. It can be done and here is an example. This example is presented with Constructor namespacing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var ParentClass = function() {
this.name = "John Smith";
this.address = "Cambridge";
};
/* after declaring the objects name and address, we introduce the prototype */
ParentClass.prototype = {
getName:function() {
return this.name;
},
getAddress:function() {
return this.address;
},
setName:function(str) {
this.name = str;
},
setAddress:function(str) {
this.address = str;
}

};
/* Here we introduce the first child class. It inherits the properties of the Parent class.*/
/* However here, we overwrite the address, but keep the name */
var SubClass1 = function() {
this.address = "London";
}
/* Here we introduce the second child class. It inherits the properties of the Parent class.*/
/* However here, we overwrite the name, but keep the address */
var SubClass2 = function() {
this.name = "Joe Bloggs"
}
extend(SubClass1, BaseClass);
extend(SubClass2, BaseClass);	
var base = new BaseClass();
var sub1 = new SubClass1();
var sub2 = new SubClass2();
/* here we spit it out to the Firebug consol */
base.getName() + " " + base.getAddress() + " " + sub1.getName() + " " + sub1.getAddress() + " " + sub2.getName() + " " + sub2.getAddress() ;

Seriously. Life is to short for something this ugly. If you want to extend object in JS, use Underscore.js

.. or as I discovered much later, Jquery does it even better

home

Rohan Leach .... thoughtful