Here’s one I hadn’t seen, via Ajaxian:

  window.onbeforeunload = function () {
  // This fucntion does nothing.
  // It won't spawn a
  // confirmation dialog
  // but it will ensure that
  // the page is not cached
  // by the browser.
  }

Just having an unbeforeunload event handler — regardless of whether or not it actually does anything, regardless of whether or not you spawn a dialog box or not, even if the entire function declaration consists entirely of just { } — just defining an event handler will prevent the page from being cached — ever. As a matter of fact, even if you allow page caching, the page will be not be cached. Having an onbeforeunload event means the page will be re-built every single time it is accessed. Javascripts will re-run, server-side scripts will be re-run, the page will be built as if the user was hitting it for the very first time, even if the user got to the page just by hitting the back or forward button.

Ajaxian

technorati tags:javascript, caching, ajaxian

I screwed up, and I learned: don’t try to write to a table’s innerHTML property.

# A table’s innerHTML property should never be used to modify a table, although you can use it to write an entire table or the content of a cell.# If DOM Core methods document.createElement and element.appendChild are used to create rows and cells, IE requires that they are appended to a tbody element, whereas other browsers will allow appending to a table element (the rows will be added to the last tbody element).# There are a number of other convenience methods belonging to the table interface that can be used for creating and modifying tables.

Gecko DOM Reference:Examples - MDC

Rather than risk a little slowdown with DOM methods (I was creating potentially hundreds of rows and cells), I just used a div and injected a full table into that. But, I learned my lesson.

technorati tags:innerhtml, dhtml, ajax

There’s also been discussion in the blogosphere about window.onload, DOMContentLoaded, and defer. In short, the window.onload event fires after all of the page’s content has been loaded: DOM, images and all. But what if you want to execute your script when just the DOM loads, without waiting for everything else?

Yahoo! (well, Dean Edwards did first with their latest YUI release.

What’s the best way to do this? Well, I’ve been handling this on a case-by-case basis.

• Can my script wait until window.onload fires? If it can, then I’ll use that. Why? There’s no need for the extra overhead of polling when I can wait for the window.onload hook. (Now, I’ll probably use YUI’s onContentReady
• Do I need to work with an element as soon as it’s in the DOM? I had been handling this by placing a >script< block directly after the element in my markup. It works, but it’s not as clean as YUI’s onAvailable method, which I’ve been using more and more often as I’ve gotten further into using the YUI library. In this case, polling the DOM makes sense and my markup remains a little cleaner.

Encapsulating these events with a library may not seem like the most intuitive thing to do (after all, most of the things these libraries encapsualte are one-liners or quick functions that are fairly easy to write). However, a library like YUI brings you more options than the code you write yourself, and, ultimately, those options lead to cleaner, quicker, more responsive code.

technorati tags:yui, dom, events, oncontentready

Yes, JavaScript is Object oriented. In fact, the only way you’ll move beyond very simple scripts is if you move beyond procedural JavaScript into using and building your own JavaScript objects. There’s no better way to solve many common front end programming problems than by building an object and taking advantage of its properties and methods.

Starting out with Object Oriented JavaScript can be a little daunting, though. (It’s tough to find a good spot to get started and learn some good practices). Never fear! Here’s the very article I used to learn Object Oriented JavaScript. It’s a pretty solid resource for a beginner, and will put you well on your way to learning how to think of JavaScript as something much more than a series of one-liners and functions.

technorati tags:objectorientedjavascript, oop, javascript, oo