JavaScript enables us to use a special trick to turn any returned value into a boolean. For example, this can be very helpful for running browser feature detection scripts like the one below.

Testing for the HTML5 Canvas

if ( !!document.createElement("canvas").getContext ){
   //run code for browsers that support canvas
}

In this example, document.createElement("canvas") creates dummy element that, if HTML5 is supported, inherits all the methods from the Canvas element. By testing for a Canvas method like .getContext, not .getContext() - this runs code, we can check if the real Canvas exists and is supported.

Here, the first negation converts the .getContext test result (whatever the data type might be) to a boolean. The second negation changes the boolean again to give the proper result.

Testing Negative Cases

If the value is null, undefined, false, "", or 0, then the first negation converts it to true. The second negation changes it to false.

Testing Positive Cases

If the value is object, true, "ANY VALUE” or 1, then the first negation converts it to false. The second negation changes it to true.

If you need to quickly benchmark some code in firefox (maybe chrome too) try the following function to make you life easier…

function benchmark(name, fn, n) { 
   console.time(name); 
   for(var i = 0; i < n; i++) 
      fn(); 
   console.timeEnd(name);  
}

…where name is an arbitrary test name, fn is the function you want to test, and n is the times to run the function.

Here’s a simple method to iterate over an object for its attribute names. To get 1st level keys in an JSON object:

for(var key in json){
     /* useful code here */     
     console.log(key);
}

or you can use hasOwnProperty like

for (var key in json) {
     if (json.hasOwnProperty(key)) {
          /* useful code here */
          console.log(key);
      }
}

Declared Arguments

Usually, we provide an argument list when declaring a JavaScript function. Therefore, creating a function that checks for the existence of an argument is pretty simple. For example:

function popup (url, framename, attr) {
    if (!url) url = '';
    if (!framename) framename = 'MyPopup';   
    if (!attr) attr = "width=800px,height=600px";
   
    window.open(url, framename, attr);   
    return false;
};

Unlimited Arguments

However, in some cases you might want to accept an unknown number of arguments. For this case, JavaScript provides an array-like object corresponding to the arguments passed to the function called arguments. For Example:

function unlimited (){
    for( var i = 0; i < arguments.length; i++ ) {
        alert("Argument [" + i + "]: " + arguments[i]);
    }    
}

Just finished working on the new release of JSL (JavaScript Loader). Please take a look and send me any bugs :-)

Update: jQuery Plugin

HTML5 WG has implemented an input or textarea attribute feature named “placeholder.” It acts similar to suggestive pre-populated input text that clears on element focus.

While developing jQuery’s Simple Clearfield I discovered a way to test for the browser’s support of the placeholder attribute. Here’s the code:

function placeholder_support (){

     var i = document.createElement('input');

     return 'placeholder' in i; // returns true if supported

}

After going crazy trying to dynamically push objects into an JavaScript array I hit another wall. Dynamic object property names. For example, how do you dynamically write myObject.dynamicName?

Well, after much googling I remembered that magical function eval(). The best way, so far, to write dynamic property names is to parse,eval(), a string name into the property definition. For example:

myObject = [];
propertyName="crazyHorse";
propertyValue="David"; 
eval("myObject."+propertyName+"='"+propertyValue+"'");
alert(myObject.crazyHorse);
// Alerts "David"

I just finished uploading a jQuery plugin called relCopy. It spawned from the need to duplicate form fields with specific needs. Try the Demo or Read the Docs. Also visit the the jQuery Plugin page.

These browser transport methods are being exploited to include or link to base64 encoded images. Some of the methods being developed are trying to replace image calls in css sprites. The concept is that an embeded base64 image would be more accessible. Others, like the guys at cappuccino.org, are trying to achieve single files that combine css/images/JavaScript inside JavaScript. The purpose is highly compressed, both minified and gzipped, JavaScript files that save bandwidth. These could then be distributed and cached nicely among CDNs.

These methods are great in theory, but concern me when it comes to graceful degradation, accessibility, and availability. How would users without JavaScript, MHTML, or Data URL protocols view these dependent websites… More to come.