Chapter 13. Launching Scripts with Links

In the good old days, the humble hyperlink had a very specific job: navigation. The visitor clicked a link and went somewhere. It was as simple as that.

Even today, navigation remains the hyperlink's prime directive. However, your visitors want to do more on the Web than move from page to page. They want functionality. They want scripts and other interactive goodies. They want mini software solutions.

When you sit down to design these types of interfaces, you soon realize that something on the page has to trigger all those custom-built functions. Something clickable becomes the logical choice. HTML form buttons are an option. So are images that look like buttons. And so are hyperlinks. When you surf the Web, clicking what looks like a hyperlink might not have anything to do with navigation. It could launch a script instead.

TIP

Since navigation hyperlinks and script hyperlinks look exactly the same on the page, you can't rely on their appearance to distinguish them. Instead, use other tricks to convey the link's function to your visitors. Factors like the wording of the link and its placement in relation to other page elements help your visitors to figure out what happens when they click.

From a usability standpoint, launching scripts with hyperlinks is a risky proposition because of the potential problems the practice creates. If you aren't careful about distinguishing script hyperlinks from navigation hyperlinks, you could very easily confuse your visitors and confound their expectations about what happens when they click. On the other hand, text hyperlinks are more graceful and unassuming than most graphical buttons, and they are nowhere near as clumsy and ugly as HTML form buttons. When used in the right context, script-launching hyperlinks improve the overall look and impression of your interface, which is never bad.

One way of launching a script with a link is to create a link that goes nowhere while assigning a result to the link's onClick event, like this:

 <a href="#" onClick="doScript();">Launch the script</a> 

Okay, okay. Technically, this link goes somewhere. The number sign in the href attribute refers to the current page, so clicking this link is like clicking the Refresh button on the browser.

Why the self-referential link? Plain HTML text doesn't respond to the onClick event, but a hyperlink does. You need to give the visitor something to click, so you specify a link, but you don't want the hyperlink to go anywhere. A link that essentially refreshes the page seems like a harmless compromise.

This strategy works well enough, but it can lead to annoyances, particularly when the visitor has to scroll the page to get to the link. Clicking a self-referential hyperlink causes the browser to jump back to the top of the page, so your visitors lose their place in your text.

A better alternative is to specify a script in the href attribute itself, like so:

 <a href="javascript:doScript();">Launch the script</a> 

Doing it like this, you don't have a self-referential link, so the browser doesn't jump around the page when the visitor clicks. It's better for everyone this way. Just make sure you preface the JavaScript code in the href attribute with javascript:. Otherwise, the browser assumes that the href value is the path to a page.