Saturday, March 17, 2007

Fiddling with JavaScript

Lately I have been working on my thesis and have got in touch with dojo ajax toolkit and JavaScript. I have been doing some coding in JavaScript from time to time but it was often very simple code with few functions and mostly no objects take part in it. But now in my thesis-application, I'm handling all client/server communication with ajax and it requires a lot of javascripting. It took me hours to understand dojo.event.connect/bind and the way how objects work in javascript. So here are some findings and notes:

Defining JavaScript object

  • private variables are declared with the 'var' keyword inside the object, and can only be accessed by private functions and privileged methods.
  • private functions are declared inline inside the object's constructor (or alternatively may be defined via var functionName=function(){...}) and may only be called by privileged methods (including the object's constructor).
  • privileged methods are declared with this.methodName=function(){...} and may invoked by code external to the object.
  • public properties are declared with this.variableName and may be read/written from outside the object.
  • public methods are defined by Classname.prototype.methodName = function(){...} and may be called from outside the object.
  • prototype properties are defined by Classname.prototype.propertyName = someValue
  • static properties are defined by Classname.propertyName = someValue

Default argument value in function


If you omit an argument in function call you can set it to default value this way:

function myFunc(arg1, arg2) {
arg1 = arg1 || "myDefaultValue";
arg2 = arg2 || 0;
}
It's like function myFunc(arg1="myDefaultValue, arg2=0) {..} in PHP. But be aware, that "or"(||) test is not correct in every case, because calling a function with null or "" argument will set an argument to the default value.
More about javascript function arguments can be found here.

Iterate through object properties/functions


To find out what properties/functions object has, you can use this snippet:
var msg = "";
for (var p in object) {
msg += p + "=" + typeof(object[p]) + " ";
}
alert(msg);

dojo way

  • Don't try to bind form with dojo.io.bind, instead use dojo.io.FormBind.
  • If you send json data in dojo.io.bind({..., content: {..}}) use proper mimetype: "text/json"
  • You can't connect event on function called in other object. You can only connect events on functions called from executing object
  • The event connect isn't connecting the functions rather it's connecting the methods called on the objects. This way, you can invoke connected function/method on a object1.method() call without invoking it on object2.method() call. So if you want to invoke e.g. dojo after advice on load handler defined in dojo.io.bind you have to do it this way:
    dojo.io.FormBind({
    ...
    load: function(type, data, evt) { handler.formResponse(type, data, evt); }
    });
    dojo.event.connect("after", handler, "formResponse", doAfterAdvice);


Credits:
OOP in JS

No comments: