jQuery is an open source javascript library which makes it simple to transverse and manipulate the dom tree, and provides event handling and animiations, as well as a large community for support and plugins.  I will provide a few examples in an upcoming blog. Developers have been asking Microsoft for jQuery like dom processing, and instead of Microsoft writing their own, they decided to use jQuery as is.

This is great news, and the first time (as far as I know) that Microsoft have done this and embraced open source technology as part of its product platform.  I personally think this is a great move, one of the things I like about java is the fact the community make use of all the open source software out there, not try to compete with them, now is Microsoft adopting the same pattern?

Microsft intend to provide Visual Studio intellisense, provide support, and in the future will provide Asp.net toolbox controls which use JQuery and server side helper methods for asp.net MVC.

Check out: jQuery blog, Scott Hanselman’s Blog.

Chrome looks slick, Google have dared to make their browser look that bit smarter than the competition, which is simple to use, and yet very familiar.  However it does feel a little light on features compared to the other browsers in the market, e.g. you cannot organise your bookmarks.  But then this is just a beta version of the browser and I’m sure those standard browser features will be in the finished release.  I can see google chrome acting as a continer for multiple types of applications.

The first thing you notice about chrome is just how fast it is, is is due in part to its new open source javascript engine called V8.  V8 is a new JavaScript engine specifically designed for fast execution of large JavaScript applications. In several benchmark tests, according to Google, V8 is many times faster than JScript (in Internet Explorer), SpiderMonkey (in Firefox), and JavaScriptCore (in Safari). If your web application is bound by JavaScript execution speed, using V8 instead of your current JavaScript engine is likely to improve your application’s performance. How big the improvement is depends on how much JavaScript is executed and the nature of that JavaScript. For example, if the functions in your application tend to be run again and again, the performance improvement will be greater than if many different functions tend to run only once.

Google believes as we create more complex javascript applications in our browsers, there is a need for a faster javascript runtime which none of the competition can provide.  Google believe that in the future Chrome may become more than a browser, they describe it as a platform for running web applications.  Could this be the seed of the first online operating system?

There are a number of features which make this browser stand out (although IE* will rival some of them),

• the “Omnibar” allows you to use one bar for everything including the address bar, search box, history etc.
• Every time you create a new tab you get a number of thumnails dispalyed which show your most visited sites, bookmarks and recently closed tabs
• Dynamic tabs – this is way cool. You can simply drag a tab out of the browser and create a new instance of the Chrome browser, then can drag tabs between the browsers.  This is great, normally I have a few browsers open, and its a great idea to be able to organise your tabs in this way.
• Incognito mode – private browsing, np trace that you have been on a site – not sure why you would need this
• Simple downloads, now you don’t have another window popping up every time you download a file, it is now part of the main browser.

I really like this browser, however it has a way to go before it becomes my main browser.  I am a fan of FireFox because of its extensibility, I would miss my Delicious bookmarks, my developer tools, my colour picker & CSS helpers (to name but a few plugins). However I believe my wife will love this browser simply due to its speed.

Google is on to a winner here, I believe, with a bit of work,  it will eat into the Internet Explorer market share, and the Firefox market share to a slightly lesser extent.  I know that it is far from perfect, bookmark management, plugins and addons being the big things missing for me, but then again this is just a piece of beta software…

Ok, to start lets take a simple bit of JavaScript and a bit of field markup.

<script  type="text/javascript">
function FieldHighlighter(object,highlight){
if(highlight){
object.style.background="#ffffaa";
}else{
object.style.background="#ffffff";
}
}
</script>
<input type="text" id="txtName" onfocus="FieldHighlighter(this,true);" onblur="FieldHighlighter(this,false);" />

That’s it, time to go home?  Well, not quite.  In a past life, this is how I would have written JavaScript (and when push comes to shove, I would probably have my first stab of a JavaScript function like this).  My biggest  criticism of this code is that the input control on the page is determining the functionality expressed on the page, and if I have 5 controls on the page, all having similar functionality, I need to markup each control.

This may be prone to error, and if I decide to change how my page will function (e.g. add an effect when the mouse rolls over the control), I will now need to update each control, on each page where my new functionality is required.  Now if only we had a single place to put the functionality…

I have written a standard JavaScript class to provide an extender for a form control.  The first thing you will notice is there is a LOT more code to write, first I create the object, then add the OnInit method to the objects prototype, then I have to do all the event wire up.

function FieldFocusExtender(highlightStyle,unHighlightStyle,controlToExtend){
this.HighlightStyle=highlightStyle;
this.UnHighlightStyle=unHighlightStyle;
this.ControlToExtend=controlToExtend;
this.OnInit();
};
FieldHighlighterExtender.prototype.OnInit = function(){
var control = document.getElementById(this.ControlToExtend);
var that = this;
removeHighlight();
if(control!=null){
control.addEventListener('focus',highlight,true)
control.addEventListener('blur',removeHighlight,true)
}else{
//Throw exception
var err = new Error();
err.message = "ControlToExtend cannot be resolved.";
err.name = "ArgumentException";
throw err;
}
function highlight(object){
control.style.background=that.HighlightStyle;
}
function removeHighlight(object){
control.style.background=that.UnHighlightStyle;
}
}

Why bother?  Well, I have now written all my implementation code in one place, I have written code that has been tested in isolation of my page, therefore when I add this extender to my page I can be sure that the extender will function as expected.   Sounds like good programming practice, doesn’t it?  Oh yea, and this is how easy is it to use my extender:

<input type="text" id="txtName"  />
…
<script type="text/javascript">
var extender = new FieldFocusExtender("fieldFocusOn","fieldFocusOff","txtName");
</script>

I want to point out a few things about the code before I continue. …

• I updated the class to use CSS rather than just changing the background colour – makes my textboxes prettier!
• I have styled the methods to look a similar to the methods I use server side, e.g. OnInit.  This introduces landmarks a server side developer should recognise.
• You will notice a  strangle looking line “var that=this;”, let me explain:  when you create a function inside another function as I have done above, the variable this is bound  to the global object rather than the outer function (as would be expected).  This is a bug in JavaScript, and to get around this bug, the convention is to create a variable called ‘that’, which will work in the inner functions.

And finally, I will update this control to use some of the features of the Asp.net Ajax framework:


///Create a namespace
Type.registerNamespace("AjaxRamble.Controls");
//Create the class
AjaxRamble.Controls.FieldFocusExtender=function(highlightStyle,unHighlightStyle,controlToExtend,hasFocus){
AjaxRamble.Controls.FieldFocusExtender.initializeBase(this);
this._focusedStyle=highlightStyle;
this._unFocusedStyle=unHighlightStyle;
this._controlToExtend=controlToExtend;
this._hasFocus=false;
this.OnInit();
this.set_hasFocus(hasFocus||null);
}
//Create the prototype
AjaxRamble.Controls.FieldFocusExtender.prototype ={
get_focusedStyle:function(){
return this._focusedStyle;
},
set_focusedStyle:function(value){
this._focusedStyle=value;
},
get_unFocusedStyle:function(){
return this._unFocusedStyle;
},
set_unFocusedStyle:function(value){
this._unFocusedStyle=value;
},
get_controlToExtend:function(){
return this._controlToExtend;
},
set_controlToExtend:function(value){
this._controlToExtend=value;
},
get_hasFocus:function(){
return this._hasFocus;
},
set_hasFocus:function(value){
if(value===true){
$get(this._controlToExtend).focus();
this._hasFocus=value;
}else if(value===false){
if(this._hasFocus){
$get(this._controlToExtend).blur();
this._hasFocus=value;
}
}
},
OnInit: function(){
var control = $get(this._controlToExtend);
var that = this;
if(control!=null){
control.addEventListener('focus',highlight,true)
control.addEventListener('blur',removeHighlight,true)
}else{
//Throw exception
var err = new Error();
err.message = "ControlToExtend cannot be resolved.";
err.name = "ArgumentException";
throw err;
}
if(!that._hasFocus){
removeHighlight();
}else{
highlight()
}
function highlight(){
Sys.UI.DomElement.removeCssClass(control,that._unFocusedStyle);
Sys.UI.DomElement.addCssClass(control,that._focusedStyle);
that._hasFocus=true;
}
function removeHighlight(){
Sys.UI.DomElement.removeCssClass(control,that._focusedStyle);
Sys.UI.DomElement.addCssClass(control,that._unFocusedStyle);
that._hasFocus=false;
}}
}
//Register the class with the ajax runtime
AjaxRamble.Controls.FieldFocusExtender.registerClass("AjaxRamble.Controls.FieldFocusExtender");

Now that’s what I call code bloat, my 4 line function has turned into a 60+ line monster!!

I have taken my extender code I wrote in my second code example, and transformed it into a class which can be wrapped in a server control in the Asp.net Ajax framework.   Looks pretty similar to my second example doesn’t it,   well it should, it uses the basic OO pattern of the second example, with a few ajax library calls added for good measure.   And (for now) we use the new object in a similar manner as before…

<input type="text" id="txtName"  />
…
<script type="text/javascript">
var extender2 = new AjaxRamble.Controls.FieldFocusExtender("fieldFocusOn","fieldFocusOff","txtName");
</script>

The third code example shows the 4 steps needed to build a class in Asp.net ajax:

1. Create the namespace – Simply define the namespace to be used by ajax framework

2. Create the class – Standard JavaScript pattern.  There is a method call to initialise base ( AjaxRamble.Controls.FieldFocusExtender.initializeBase(this);), we add this by default to all the asp.net ajax classes becasuse we do not define the object inheritance as part of the constructor function, instead t is defined later (see step 4)

3. Decorate the prototype with the methods (define the object interface)  – Standard JavaScript pattern.  Note, the use of the pattern get_x and set_x(value).  This pattern for patterns is used by the asp.net ajax framework to associate webcontrol properties with the properties on the JavaScript class.  More on that in  another blog.

4. Register the class with the ajax runtime – defines the class within the ajax framework.  Where a class inherits from another class, the base class is specified in this method, e.g. AjaxRamble.Controls.FieldFocusExtender.registerClass( “AjaxRamble.Controls.FieldFocusExtender”,AjaxRamble.Controls.BaseExtender );

So, after completing this, I have got to ask, is it worth it?  I have taken a simple JavaScript function, and transformed it into a monster, but in doing so I have a new extender object which I can test once, saving some testing in the applications which I use it.  I have one place to ensure my code works cross browser (not shown here), and I have the ability to add functionality that does not exist in the current html controls once (the hasFocus() property in my example, which is not available to standard html controls).   So yes, I believe this approach to JavaScript works well (although some may argue the JavaScript implementation is not the greatest – but that’s for another day).

The Asp.net ajax extensions are not as feature rich as most of the other JavaScript frameworks,  it is more bloated than some of the other libraries, and because it is a Microsoft product may be poo-pooed by some development communities.  However, I work in a company who’s developers are all “server-side” Asp.net application developers, all the development staff are comfortable with C#, but most believe JavaScript is a dirty word due to misunderstanding the language.  I like the Microsoft ajax implementation because it has familiar landmarks (methods, constructs and objects) which server-side developers  can easily get to grips with, also it can be wrapped with server side controls, allowing developers to use the features without worrying about the client side implementation.

On the other hand – I have been developing web applications for 8+ years, using classic ASP, JSP, PHP and Asp.net, so I am in the fortunate position where I don’t need a server-side tag to add a client side feature, be it field validation or manipulating the DOM.  Because of this I hope to look at jQuery as an alternative to Asp.net ajax extensions for my own applications, giving me a chance to compare and contrast the two libraries.

The King is dead long live the King!!

For a long time there was only one book you should buy if you wanted to know everything there was to know about JavaScript, and that was David Flanagan’s weighty tomb “Javascript: The definitive guide“. 

However this book, now in its 5th edition, has become a bit of a monster, the first half of the book covering everthing from langage structure to creating modules, from scripting Java to scripting the browsers Document Object Model (DOM).  The second half of the book is an api reference for language.

Now a newcomer has entered the ring to fight for the title of “THE JavaScript book”.  Javascript: The Good Parts is written by Douglas Crockford, a Senior Software Architect at Yahoo, and is described as one of the most knowledgable people on the planet when it comes to JavaScript.  Douglas is also the author of JSON, and object notation language for javascript, which I will cover in another article.

The book could not be more different form the Definitive Guide, weighing in at only about 150 pages it is a lightweight compared to Flanagan’s Book.  The content is also somewhat different.  Out goes anything not relating to Javascript language: DOM, Java, xml, browsers, cookies etc, and instead Crockfords book concentrates on JavaScript itself, detailing objects, methods, arrays and regular expressions. The book is an easy read, replacing lengthy descriptions of a feature with a succinct  & coherrent desctiption that explains the features, with an example usually provided to hammer home the description.

As the title suggests the books deals with what Crockford  describes as the “Good Parts”, but to know the Good parts one most also know what is bad (sounds like a quote from some bad movie).  Crockford also deals with this by descibing what is generally bad about the language, and how to use the language itself to overcome some of these bad (and awful) features, e.g. using javascript modules to truely encapsulate objects and how to ensure there is less reliance on global variables.

This book is not really a beginners book, I cannot imagine picking up this book to learn how to hover over an image!  This book is intended to teach web developers how to write JavaScript, not just to do “this or that”, and I believe it would be a great boon to anybody starting to think about creating their own JavaScript libraries.

My last word must be, I wish more authors would take a leaf out of Crockfords book (pun intended),  his style of writing is to the point without the need of the verbosity that many writers feel they need to make their books thicker.  Not only does it take less time to read (and therefore I can spend more time playing with the technology), but also it saves a tree or two!

• 10 things… (Part 2 – Object Orientation)
• 10 things… (Part 1 – Exception Management)

This part finishes my list of things I didn’t know, it covers a few miscellaneous features about the structure of javascript which I feel are important to get the most out ofthe language.

7. Properties are stored in an array

Javascript is a very simple structured language, a javasctipt object stores its properties as an associative index, that’s an array which is accessed via an associated key rather than index integer – in a similar manner to a Hashtable or Dictionary. The example below shows a simple class, and a method to iterate through the classes properties. Note, in the example below, ALL properties are displayed, including methods (the Guitarist object is detailed in part 2).


//Create the object
var steve = new Guitarist(1,”Steve Vai”,”10000″,”Lead”);
// Iterate through the properties
for (var propertyName in steve) {
alert(propertyName + ": " + steve[propertyName]);
}


Of course we can also do the opposite, assigning a value to a object using the name of the property as the index key, which we will see in point 8.

You can see examples of this when in snippets of javasctipt which deal with the DOM, e.g. it is common to see document.forms['myForm'], to refer to the form object on a web page, which is equivalent to document.forms.myForm.

Comparing the associative array to a hashtable is not exactly accurate, the arrays can only use a string as the key, rather than an object (which you can do with “proper” hashtables) – of course if the object produced a hash in the toString()

8. Dynamic Types

Dynamic typing is a feature where the type checking is done at runtime, rather than the compiler doing it when the code is being, compiled. This provides us with a very flexible framework for building applications. Of course, “with great power comes great responsibility”, with dynamic types you loose the *safety net* of a statically typed language, you do not know until runtime if an object is built correctly, whereas a statically typed language provides feedback on errors well before an application is run.

Ok, what does all this waffle mean? Dynamic types allow us to add methods at runtime, in fact we can create objects with properties and methods at runtime.


// Dynamic Drummer
var lars = new Object();
lars.name="Lars Ulrich";
lars.play=function(){
return "dum deddy dum dum crash";
}


Or we can take a type we have created previously and extend it at runtime


//Dynamic Method
var zakk = new Musician(1,"Zakk Wylde","10000");
zakk.play=function(){
return "...pentatonic madness..."
}


I would suggest not building objects at runtime, as in the first example, it seems far too ad-hoc and prone to error, if a fully fledged object is required, you should use the prototype as in the previous part of this article. However I think extending a single instance of a class with a method could prove useful, or even extend all they objects of a specific type could be useful at runtime(by extending the objects prototype).

9. Duct Typing

Duck typing is a variation of Dynamic Types in which an object’s current methods and properties determines its type, rather than its inheritance from an interface or class.

“If it walks like a duck and quacks like a duck, I would call it a duck.”, James Whitcomb Riley

In Javascript, types are checked at runtime, where as statically typed languages check the types at compile time, and it is the runtime type checking which allows us to duck type in JavaScript. So what does this all mean? Answer, duck typing allows an object to be passed in to a method that expects a certain type even if it doesn’t inherit from that type. All it has to do is support the methods and properties the method will call.

I’m not sure how I plan to use Duck Typing yet – I just think it is a neat feature.

10. Javascript Frameworks

And finally… I only discovered recently that there were JavaScript frameworks have been released to make the whole experience of developing with JavaScript simpler, or more familiar at least. My main focus will be using the Asp.Net ajax extensions because that’s what I use in work, however there are a lot more powerful, and fully featured extensions out there.

• Rico
• Yahoo User Interface Library
• Prototype
• Qooxdoo
• Dojo
• MooTools
• jQuery
• script.aculo.us
• Asp.net Ajax
• Spry
• DED|Chain
• Mochikit

I guess all these hope to empower us developers, to aid us creating Web 2.0, with such features as simplified DOM scripting, Cross-Browser compatibility, Ajax functionality and control galleries, it seems silly not to use them. Of course all these great features do come with trade offs, the main one being download speed (some less featured frameworks having faster download speed), oh yea, then you need to learn how to use the libraries. Have fun trying to select a framework, you may get a few tips here, but I think the best option is to pick one or two and play with them.

I hope to spend some time playing with jQuery, because it looks pretty simple to use and I could find a lot of controls that are implemented with it. It will be interesting to see how Asp.net Ajax and jQuery “Co-habituate”.

OK enough of my musings, the first thing to check out is how to create a class using Javascript.

4. You can create classes in Javascript


function Musician(id, name, salary){
//public
this.Id=id;
this.Name=name;
//private
var _salary = salary;
var _rehabDays = 0;
//public methods
this.InRehab=function(daysInRehab){
if(arguments[0]==null){
_rehabDays++;
}else{
_rehabDays = _rehabDays + daysInRehab;
}
}
this.CalculateBonus = function(){
var bonusRate = 0.05;
if(IsGoodEmployee()){
bonusRate=bonusRate + 0.05;
}
return _salary * bonusRate;
}
//private methods
IsGoodEmployee = function(){
if(_rehabDays<5){
return true;
}else{
return false;
}
}
}

A javascript function can act in one of two ways,

1. var stevie = Musician()                //as a procedural function declaration
2. var joe = new Musician();        //as a constructor

Generally a function will simply return a variable – in the case above an undefined variable is returned from the function (in our case there is no value returned from the function, therefore stevie==’undefined’), however the new keyword causes the function to create a new instance of the Musician class an assign it to joe.

A class contains both fields and methods, both of which may be public or private. The this keyword creates a class level variable that is available to all instances of the class and is public to the class.  The var keyword creates a private which is only available inside the class, if someone trys to access a variable of this type from outside the class the variable will be returned as undefined.

So is that it then?  No, not quite.

The problem lies in the memory allocated as each new class is created. Each time a class is created any methods which are part of the class are created in memory, this differs significantly from normal OO languages where a method is only ever created once in memory. Allocating memory to a method for each instance of a class can be quite expensive in programming terms, but there is a way around this – prototypes.

5. Prototypes – an object template

Prototype is a property on the base JavaScript object which is a child of all objects. It is used to create properties and methods for all instances of an object. It is used to create classes with public methods. In the next example, I take the Musician object and redefine it using the prototype.


function Musician(id, name, salary){
//public
this.Id=id;
this.Name=name;
this.Salary = salary;
this.RehabDays = 0;
}

Musician.prototype.IsGoodEmployee = function(){
if(this.RehabDays<5){
return true;
}else{
return false;
}
}

Musician.prototype.InRehab=function(days){
if(arguments[0]==null){
this.RehabDays++;
}else{
this.RehabDays = this.RehabDays + days;
}
}

Musician.prototype.CalculateBonus = function(){
var bonusRate = 0.05;
if(this.IsGoodEmployee()){
bonusRate=bonusRate + 0.05;
}
return this.Salary * bonusRate;
}

I have updated the Musician class to add prototype methods to the class. I have found that by adding the prototype methods, it is harder to keep variables private, the prototypes cannot access the private variables, so severely reduces the usability of private variables. One way around this is to have a naming convention for “private” variables, e.g. this._name; were the underscore denotes that the variable is private and should not be used directly – not great I agree, but it’s the best there is at the minute.

Although at first it seems strange to define a class, then its methods separately, I guess it is similar to creating and abstract class, then creating the concrete implementation. In a future blog I will show how to use the shorthand class notation to create a prototype class.

6. Javascript has Object Inheritance and Polymorphism

The final thing I didn’t know about Javascript (relating to object orientation) was that you could create a proper class model. Javascript gives the ability to create class hierarchies and to have polymorphic methods. In my last example in this blog, I have subclassed the Musician class and overridden the CalculateBonus() function. My thinking for this method was that a guitarist should get a bigger bonus because not only must a guitarist be a good musician, he/she must look cool too!!

//1. Create the base class - see the Musician example earlier

//2. Create the sub class
function Guitarist(id, name, salary,type){
this.Type = type; //lead or rhythm
Musician.apply(this,arguments);
}

//3. Set the subclass prototype to use the base class methods
Guitarist.prototype=new Musician();

//4. Override any methods (or add methods)
Guitarist.prototype.CalculateBonus = function(){
var bonusRate = 0.1;
if(this.IsGoodMusician()){
bonusRate=bonusRate + 0.1;
}
return this.Salary * bonusRate;
}
Guitarist.prototype.Strum = function(){
return "C Major";
}

//5. Ensure the constructor of the subclass is correct
Guitarist.prototype.constructor = Guitarist;

In the example I have sub-classed the Musician and created a Guitarist class.
1. The first step is to create the base class – you can see this in one of the earlier examples in this blog.

2. Next I have created the constructor function. This is created in a similar manner to the previous class except the last line of the constructor calls the base classes constructor. Note, I could have just as easily been more declarative when providing the argument collection, the example above is equilivant to “Musician.apply(this,[id, name, salary]);” were I am specifying the arguments individually. Also note, if there were no arguments to pass to the base constructor, I could have used the call method (Musician.call(this);).

3. Then I set the prototype of my new class to the base class – when a method is executed, the Javascript runtime will check if the method exists on the current object, if not, the runtime will then check the objects prototype. This provides a similar experience to class inheritance, even though the mechanics are somewhat different.

4. The next step allows us to override methods and to create methods on our sub class. In the example I have overridden the CalculateBonus method, giving the Guitarist a bigger bonus, and added a new method, Strum();

5. Finally we need to point our subtype’s prototype constructor to the correct type, (remember out subclass prototype is simply a clone of Musician, if we were to check the property Guitarist.prototype.constructor, we would be returned “Musician”). So all we nee to do is set the constructor to the correct type (Guitarist in this example.)

Ok so that’s it – there we have it you can create object models in Javascript, just like you do in Java or C# or whatever – I know there are other OO languages out there, I couldn’t be bothered listing them ALL! Finally in this article I will provide the test harness I used when writing this, just for completeness. Note, I have used the Assert code from part one of this article to create my test method, and I have been lazy by putting my asserts into one test method, but you get the idea.

function TestMusicians(){
var zakk = new Musician(1,"Zakk Wylde","10000");
Assert(zakk.CalculateBonus()==1000,"Bonus Should be 1000 (10%)");
zakk.InRehab(4);
Assert(zakk.CalculateBonus()==1000,"Bonus Should be 1000 (10%)");
zakk.InRehab(); //add another sick day - 5 in total
Assert(zakk.CalculateBonus()==500,"Bonus Should be 500 (5%)");
var steve = new Guitarist(1,"Steve Vai","10000","Lead");
Assert(steve.CalculateBonus()==2000,"Bonus Should be 2000 (20%)");
steve.InRehab(10);
Assert(steve.CalculateBonus()==1000,"Bonus Should be 1000 (10%)");
alert("Test Passed");
}

Generally my 10 items have generally fallen into two categories, Exception (Error) Handling and Object Orientated Programming, with a few other bits and pieces thrown in for good measure…

1.  You can catch Exceptions

One of the first things that struck me when I started to look once more at javascript was the ability to catch exceptions in a similar manner to my favorite languages, C# and Java (Favorite because they are the only ones I ever learned!).  I have always thought that I was at the mercy of the browser when exceptions occured in my javascript.


function HandleException(){
try{
var a=null;
a.prop
return 1/0;
}
catch(ex){
alert(ex.name + ": " + ex.message);
if(ex.stack!=null){
alert(ex.stack);    //Firefox only
alert(ex.description);    //IE only
}
}
}

In this code snippet an exception is thrown when trying to access a property on a null object.  Depending on your browser the exception object will have different properties, e.g. the stack property in firefox, or the description property in Internet Explorer.

2. You can throw Exceptions

Not only can you catch exceptions in Javascript, but you can also throw them.  Our javascript can now check parameters, properties, data, and respond to the caller in a manner similar we have been used to on the server.  Below is an example of creating our own Exception.  I have created a simple method to act as a code assertion in a similar manner to xUnit or debug statement, and called it from the second method.

function Assert(isTrue, message){
if(!isTrue)
{
var err = new Error();
err.message = message;
err.name = "AssertionException";
throw err;
}
}

function TestAssert(){
try{
Assert(1==1,"This message should not be displayed");
Assert(1==2,"This message should be displayed");
}catch(ex)
{
alert(ex.message);
}
}


The first method simply creates a new error object which will be thrown is the isTrue argument is false.  The second method uses the try/catch construct to display an error message if an exception is thrown.

3. You can manage exceptions in one place

The third thing I didn’t know was you can catch all exceptions in one place.  I always thought you were at the mercy of your browser.  Javascript provides a mechanism of handling unhandled exceptions in a similar manner to using the Global.asax in Asp.Net applications to catch exception not delt with lower in the stack.  The code below shows how to write an exception handler and attach it to the window object.

function errorHandler (message, url, lineNumber) {
var outputMessage =
"Message: " + message +
"\nURL: " + url +
" (ln: " + lineNumber + ")";
alert (outputMessage);
}

//Attach to window
window.onerror = errorHandler;

The event handler takes three arguments, the error message, the url and the linenumber.  The example above simply rolls a error message and presents it to the user in an alert.  However this method could be used to  ignore errors, display an error message on screen, redirect the user, or even log the error to the server via an Ajax call.

In part two of this post I will discuss the next three things i didn’t know about Javascript, creating objects, prototypes and object inheritance

Even though this blog is titled “Ajax Ramble” I will try to cover a number of technologies (probably mostly UI, and generally Microsoft).  I enjoy technology and want to share my experiences in learning new things, if nothing more, it will be a notebook of learnings and ideas.

Just as I write this I see the autosave function of wordpress and think “Thats cool!”.

Within the next few days I hope to upload my first proper blog, “10 things I didn’t know about about Javascript”.

(I told you this was a ramble)