javascript posts page 3

Javascript: Closures, Objects, and Timeouts

in

I recently discussed two issues with closures in Javascript. I continued to improve my menu script by fixing some IE issues, then I moved everything into objects. By moving to objects, I ran into another issue that was basically a combination of the two issues discussed in the previous article. I did not immediately realize this however, for whatever reason, and spent some time figuring it out.

The issue was with setting a timeout that calls a method of the object the timeout is set within. The method is attached to “this”, but “this” changes scope in a “setTimeout” call (“this” becomes “window”). To pass the appropriate “this”, we create a variable pointing to this and then pass it to an anonymous function that returns another anonymous function which uses are pointer to “this” to call the desired method. Since my “setInterval” was attached to an event listener, it also had to be placed inside of the double anonymous function. It looked something like this:

class.prototype.functionName = function(argElement){
    var fncThis = this;
    var callback = function(fncThis){
        return function(){
            fncThis.timeout = setTimeout(function(fncThis){ return function(){fncThis.classMethod(); };}(fncThis) ,750);
        };
    }(fncThis);
    argElement.addListenerEvent("touch", callbackMouseout, false);
}

This was the only major issue I had putting my code into objects. The last time I had tried something similar, I had given up dealing with the timeouts, but this time I had more experience. Now I have nice, reusable OO classes for suckerfish menus, etc.

Javascript: Closures, Scope, and Arrays

in

Closures are used quite frequently in Javascript for tasks such as adding event listeners or setting timeouts on function calls. Closures are where a function is passed as a parameter to a function call from another function, and variables from the calling function must be used inside the parameter function. Dealing with scope in closures can be difficult, and I’ve spent a lot of time figuring issues with them out.

An early issue I ran into with scope, and a common one, is the loss of scope of the “this” keyword in the closed function. For example, you might want to do a setInterval that references the object that created it. To do so, you can simply create a variable pointing to “this” and then use that in the closed function, like:

class.prototype.thefunction = function(){
    var fncThis = this;
    setInterval(function(){ fncThis.doSomething(); }, 1000);
}

This is also a common problem with event listeners, where “this” might be hoped to point to the element the listener is related to, but doesn’t.

Recently, I ran into a closure problem while revamping the menu script we use at Cogneato for suckerfish menus from the old MM functions to something more capable.

Continue reading post "Javascript: Closures, Scope, and Arrays"

Stearns: Internet Explorer workarounds

in

We’ve had to do a bit of work to get our site working properly in IE, mostly version 6. I’ve recently started using a conditional stylesheet just for IE6 on my own site, like:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url')?>/styleIE6.css" />
<![endif]-->

and we did the same for Stearns.

Box Model

One issue we dealt with for IE6 in the conditional stylesheet was box model issues. IE6 handles margins, padding, and borders differently than other browsers, so we compensated for this in some places. One big issue was with our floated columns: The third would float below the second on some wide pages.

Continue reading post "Stearns: Internet Explorer workarounds"

Javascript: Literal value function parameters

in

I’ve been messing around with Javascript a bit lately, creating an AJAX object just now, doing stuff for school as well. One of my classes is very much focused on Javascript. I’ve noticed JQuery and some other examples making use of a single JSONesque (javascript literal values, of which JSON is a subset) parameter for functions to allow many parameters to be entered. They are all potentially optional and can be in no particular order. Seems wonderful, especially for Javascript, where there’s no overloading of functions. This is sort of what I thought Objective C would allow, since it requires naming of all variables. Unfortunately, objective C requires them to be named as well as in the exact order, and none can be missing unless they’re optional and at the end, so it is really just a pain there. But in Javascript, this method does indeed allow what I want. So you do have to know the exact parameter names, but don’t have to remember order, and can just as easily not put in parameters if the function will operate without.

It’s rather simple to handle. I was even able to modify an already in use function to use one literal value parameter or the many that it originally used, simply by checking the arguments.length function property to see if it is one, and populating the appropriate variables if so. So to handle the properties, they are appended to the argument and accessed by the key in dot notation. Example function:

function ExampleFunction(argJson){
    document.write("Key1 = " + argJson.key1);
    document.write("Key2 = " + argJson.key2);
}
Continue reading post "Javascript: Literal value function parameters"