Most of us can agree that spawning popups with JavaScript is usually a user experience FAIL. We’ve all been to websites that opened several popup ads. That is always something to avoid. Malicious and ad-happy sites have made it necessary for browser plugins and some browsers to block JavaScript popups altogether.

But there are some examples where popups are actually necessary. The main thing to remember when it does become necessary is to make the popup window a response to a user action. Usually a popup should be triggered by a clicking a link or a button rather than opening it on page load. That way the popup is not instantly perceived as an ad and closed by your user.

When using a popup does become necessary and you have exhausted every other options including more attractive modal windows and nothing works for the user interaction, the next concern becomes what to do when the popup is inevitable blocked.

The answer may look very similar to a progressive enhancement technique, but I wouldn’t consider it one since the browsers with a popup blocker enabled are often more advanced than those without.

We’ll start out making a very normal-looking link that targets a blank window to open the site inside of. That should look something like this:

<a href="http://google.com" id="googleLink" target="_blank">Go To Google!</a>

The link will totally work on its own without the aid of JavaScript, it will just open in a new window instead of a popup. Now let’s add the JavaScript. The event listener is written in jQuery, but feel free to rewrite it using your library of choice or none at all.

$('#googleLink').bind('click', function () {
   var popUp = window.open($(this).attr('href'), 'googleWindow',
   'width=600, height=300, scrollbars, resizable');
   if (!popUp || typeof(popUp) === 'undefined') {
      return true;
   } else {
     popUp.focus();
     return false;
   }
});

Popup blockers work by redefining the window.open() function. Part of the beauty of Javascript is that you can redefine literally any variable or object. If you even wanted to redefine the document object or the window object, you actually could. So the popup blockers will typically make the window.open() function return either null or undefined, which means that we can create the popup as a variable and then test to see if the variable actually returns as anything. If it does, we can assume that the popup opened and return false so that the link doesn’t fire off. If it doesn’t, we can return true to let the link do its work.

Here is a working example of the code above:

Go To Google!

As you can see, it’s fairly easy to detect popup blockers and react to them. Be careful with your new-found power. If I haven’t made myself clear, there’s nothing worse than a site with a bunch of popups.

In JavaScript, it is often useful to have a place to set and get configuration options. You can do this by just creating an object and updating it, but a global object is less secure because anyone using Firebug can log the object and see the entire thing. A getter / setter gets around that issue because it doesn’t expose any values unless they are specifically requested.

Another advantage of using a getter / setter is that it puts variables inside the local variable scope instead of exposing them to the global variable scope. Keeping the variables in the local scope speeds up the execution of the code because there is less to parse through in the global scope.

So, let’s make a reusable getter / setter class, shall we? Our class should look something like this:

/**
* @class
* @description A reusable class that extends a basic getter / setter
*/
var getterSetter = function () {

   var items = {};

   /**
   * @function
   * @param {String} get
   * @description Gets a param option and returns it
   */
   this.get = function (name) {
      return item[name];
   };

   /**
   * @function
   * @param {String} get
   * @param {Object} value
   * @description Sets a config option
   */
   this.set = function (name, value) {
       item[name] = value;
   };

};

To use the getter / setter we just created, we just need to do something like this:

// Create a new getter/setter called "config"
var config = new getterSetter();

// Set a config item called "myOption"
config.set('myOption', 'This is my option');

// Get the config option (this will alert the message "This is my option")
alert(config.get('myOption'));

There you have it. Now you have a getter / setter that you can use across your entire application.

I tend to fall in with Coldfusion programmers from time to time and while I actually really like the language and the community, the one thing that can make working with Coldfusion and JavaScript harder is how the language returns JSON.

Typical JSON looks something like this:

{
   "firstname": "Tyson",
   "lastname": "Cadenhead",
   "favoritelanguage": "JavaScript"
}

But Coldfusion encodes structs to look more like this:

{
    "COLUMNS": ["FIRSTNAME", "LASTNAME", "FAVORITELANGUAGE"],
    "DATA": [[
        "Tyson", "Cadenhead", "JavaScript"
    ]]
}

The problem with that is that JavaScript can’t do much with that. The solution? I wrote a quick and dirty script that parses the Coldfusion JSON into the old-fashioned kind. All you need is this:

Object.prototype.parseCFJSON = function() {

   var result = [],
       data = this;

   for (var j = 0; j < data.DATA.length; j++) {
      result[j] = {};
      for (var i = 0; i < data.COLUMNS.length; i++) {
         result[j][data.COLUMNS[i].toLowerCase()] = data.DATA[j][i];
      }
   }

   return result;
};

If you include that bit of code in your script, anytime you get back a Coldfusion struct, you can simply encode it by running this:

myData = myData.parseCFJSON();

There you go... easy as pie!