This weekend I participated in an advanced Javascript training (and workshop, as it turns out) gratiously offered by
Frontend Force, a company specialised in professional Javascript code (not web design). That means they do stuff for browsers, for cell phones and even (if you didn't already know) for the server-side platforms running on Javascript. At this moment they are hiring for positions in Berlin (no remoting) and are looking for true IT professionals, preferably with strong Javascript knowledge. So contact them... now! They also do consulting.
The trainers were
Dawid de Rosier and
Piotr Zwolinski, both from Poland, more the former than the latter, and I have to say that I've learned quite a few new things and understood better things I already knew, just from Dawid's 6 hour presentation. The training was great also because it happened in the weekend, so I didn't have to feel guilty for skipping work from my regular job or to feel bored doing nothing in the weekend. I say 6 hour presentation because the next day we did an application in typical agile manner, working in teams and applying the things we've learned. The project can be found on the net, it is open, and it is a ... shopping cart. I know, terribly boring subject, but the code was the focus and the code was cool (at least my part, of course... :) ). The link for the project is this:
3F Commerce. But enough of that, after all the coding experience cannot be translated into a blog post, I will talk mostly about the presentation in the first day and the things I've learned there.
It should be interesting enough to get your attention that the training was about the Javascript programming language not its use in the browser. After all, Javascript is a stand alone language and, as you will see to the end of the post, used in a lot more contexts. Its roots stem from Lisp, Scheme (hence the title of the post), Self and a bit of Perl and the syntax is C like because it was cool at the time (and it still is, maybe the Perl guys should have thought of that). The name Javascript itself was used as a marketing ploy because Java was all the rage back then.
As a dynamic language its most proeminent features are the protoype based inheritance and the closure/lambda approach to variable scope. One of the most important things, if not the most, that I have learned is that each function remembers the context in which it was created. For procedural style of programming in Javascript, the context is the global one, so many people don't know or care about it. Short example:
function createMyFunction() {
var x = 11;
return function () {
alert(x);
};
}
Now if you execute
var f=createMyFunction(); f(); you get a message box with a value of 11. The x variable is remembered, even if in the scope of a function that is not longer in execution. I will show you later how you can create truly
private members of a class or function. Well, in Javascript there are no classes, only functions, but they have a different meaning from, let's say, functional programming.
First of all, we talked about the variable scope. Javascript does not have block scope. That's important. It means that if you do something like
if (condition) {
var x = 10;
}
alert(x);
you will get an alert with the value 10. The only scope is function scope in Javascript, meaning that to get the same effect as a block scope, the previous example should have looked like this:
if (condition) {
(function () {
var x = 10;
})();
}
alert(x);
and now you would get
undefined.
Then we delved into apparently obvious stuff like
var x = 'true';
if (x) alert(x == true);
The code above would display false. Why? because there is an equality between different types and they are both converted into... numbers! true gets an internal representation of the true value, while 'true' gets the value NaN, as it is not a number. And they are not equal. The condition itself is satified, because x is not empty.
With these two things explained (better than I can here) it was concluded that global variables should be avoided, while in order to do equality one should use the triple equal sign === which compares not only the values, but also the types. It is also much faster, as it doesn't try to convert anything. One good use of the normal operator == is when comparing to null. Let me exemplify:
null == null //true
undefined == null //true
0 == null // false!
This is better than using a variable as a condition of 0 would not execute an if block.
The next bit was about functions and how you can use them as classes. Here it was explained how functions remember their environment. This kind of functions are called closures. An interesting thing you need to understand in Javascript is that the closer the variable is from your execution scope in the execution hierarchy, the faster its access is. Let's take a very common function:
document.getElementById. Here is a faster version of it:
var byId = (function () {
var D = document;
return function (id) {
return D.getElementById(id);
};
})();
This is faster because byId is a closure and it gets a reference to the document (slow global variable) at its creation and remembers it in the environment. Every time you execute it, it will use the closest scope to find the variable and it will be faster. On my Internet Explorer 8, byId is faster than document.getElementById with 22%.
A very important thing to see here is that D is not accessible anywhere outside the function. Not even byId.toSource would show where D is created.
So, indeed, it is a private member of the function!A lot of stuff was discussed about random but important quirks of the language.
I've spoken a little about private members, but now I will tell you about inheritance! Yes, it is possible in Javascript, who would have thought? :) Only it is a prototype inheritance.
What are prototypes? Each function has an object that would be used to return default values for any of its instances called
prototype. It's kept as a reference, so only one prototype object for any number of instances. This prototype, as almost anything in Javascript is writable, replaceable, extendable. Let me give you a short example:
function MyClass = {};
var m = new MyClass();
alert(m.someProperty);
MyClass.prototype.someProperty = 'set';
alert(m.someProperty);
m.someProperty = 'overwritten';
alert(m.someProperty);
delete m.someProperty
alert(m.someProperty);
This code defines an empty function called
MyClass. You use it as a type and create instances of it by using the
new operator. The first alert will show
'undefined' because the instance has no
someProperty member. We then set it in the prototype and so it will be seen in any of the instances of
MyClass, so the second alert will show
'set'. Then we set the actual value directly in the object. The third alert will display
'overwritten'. Delete the value (unset it) and the fourth alert will display
'set' again.
So what about inheritance? Let me give you the short story:
function MyClass(msg) {
// optional
// ParentClass.apply(this,msg);
}
var F = new Function();
F.prototype = Parent.prototype;
MyClass.prototype = new F();
MyClass.prototype.constructor = MyClass;
Here we create a
MyClass object that inherits from
ParentClass. In its constructor we apply the
ParentClass function in the context of the
MyClass instance (if we want to), then we create a new temporary
F function in order to copy the prototype, but not whatever values are set via the constructor and we set an instance of it as the prototype for
MyClass. Then we recreate the constructor of
MyClass in its prototype, since it was overwritten.
Too fast? Let's examine what would happen when a new MyClass instance is created:
var m=new MyClass(msg);
- the instance of the F temporary class which holds any and all of the members in the prototype of ParentClass is the prototype of MyClass
the MyClass prototype is different from the ParentClass prototype, so any changes done to it are not reflected to the ParentClass prototype - the constructor of MyClass (itself) is executed in the context of the new instance which executes the constructor of ParentClass in the same context and thus sets anything that the parent class would set to its own instances
Now the new instance has all the default members an instance of the ParentClass would have and its own members or overwrites of the existing ones. Inheritance!
To end this over long post, I will give you a piece of code of a class that inherits another class, has private members, setters, getters, etc.
(function () {
// base class
Animal = (function () {
// private member
var _version = '0.9';
return function () {
// priviledged getter (public, with access to the private member)
this.getVersion = function () {
return _version;
};
// priviledged setter
this.setVersion = function (value) {
_version = value;
};
};
})();
// prototype public method (only one referenced in all instances of Animal)
Animal.prototype.MakeNoise = function () {
throw "Abstract animal class must be inherited";
};
// prototype public method
Animal.prototype.getType = function () {
throw "Abstract animal class must be inherited";
}
// child class inherits from Animal
Duck = (function () {
// private member
var _type = 'Duck';
return function () {
// call the base constructor
Animal.call(this);
// priviledged getter (no setter for _type!)
this.getType = function () {
return _type;
}
// set version using base class method
this.setVersion('1.0');
// hide base class method (emulation of protected methods.
// of course, one can use delete a.setVersion
// and then access the base method)
this.setVersion = function () {}
};
})();
// copy the base class prototype
var F = new Function();
F.prototype = Animal.prototype;
// set it as the parent prototype
Duck.prototype = new F();
// prototype public method
Duck.prototype.MakeNoise = function () {
alert('Quack!');
};
})();
var a = new Animal();
alert(a.getVersion()); // 0.9
try {
alert(a.getType()); // error, abstract getter
} catch(e) {
alert("error! (" + e + ")");
}
try {
a.MakeNoise(); // error, abstract method
} catch(e) {
alert("error! (" + e + ")");
}
a = new Duck();
a.setVersion('999'); // no effect, since setVersion was replaced with empty function
alert(a.getVersion()); // 1.0
alert(a.getType()); // 'Duck'
a.MakeNoise(); // 'Quack!'
Some more information about tools that one can use in javascript programming:
Aptana - standalone js IDE and also Eclipse plugin
Rainbow9 - javascript IDE as a web application
QUnit - unit tests for javascript
JsLint - checks the validity of your javascript code online
jsbeautifier.org - reformats javascript code
Closure Compiler - minimize javascript code
JSA - obfuscator (it's an untranslated Chinese site, just use the last button)
Xmake or Rmake - code builders
NodeJS - javascript powered server side framework
jsDocs - makes documentation (specific comment formats are required)
JS TestDriver - unit testing and integration
Persevere - makes the connection between javascript fron ends and server side databases
There are security concerns when communication between different HTML windows or frames occurs, that is why the communication is one way (from the child to the parent) and only if both windows are from the same domain.