Taking HTML Further with Javascript

Taking HTML Further with Javascript.

Once you've built your HTML pages, you might need them to do something a little more interactive on the client-side (that is, in the visitor's web browser). How can you do that? Javascript is the answer.

How Does Javascript Work?

To add Javascript to your HTML, you simply insert it between <script> tags (or refer to the .js file that contains it, also using script tags). Overall, Javascript is quite a C-like language, but manages to be relatively simple in spite of it.

The Javascript you write should have functions that are tied to events on the page, meaning that when the visitor does something with your page, the Javascript executes.

Here are some events that you can use to trigger Javascript functions:

onload. Runs the code when the page loads.

onclick. Runs when the mouse is clicked. You can also use ondblclick for a double-click.

onmouseover. Runs when the mouse pointer is over a certain part of the page.

onkeypress. Runs when you press a specific key on the keyboard.

onchange. Runs when the contents of part of a form changes.

onblur. Runs when you press the tab key to switch between part of a form.

onsubmit. Runs when the form's submit button is pressed.

What are these events useful for? All sorts of things. The onmouseover function, for example, can be used to rewrite parts of the page's code when the user hovers over something – useful for providing pop-up help 'tooltips'. Onkeypress lets you give the user keyboard shortcuts to do things on your web page. Onblur and onsubmit can be used very effectively to spot errors in a user's form input, and let the user know how to correct them before they're ever even sent back to the server.

Once you know which event you want to tie some Javascript to, you have to say so in your code. You can do this in one of two ways. The first way is to directly attach it to the HTML element in question, like this:

<form onsubmit="javascript:submitCheck();">

This works well, but has the disadvantage of polluting your HTML with Javascript function names. The second, better, way, is to do it like this in the Javascript itself:

onload = function() { }

This creates a function directly from an event (in this case, the onload event), without ever touching the HTML itself.

Javascript Commands.

Here's a quick reference to the most useful commands in Javascript.

alert. Pops up a dialog box giving the user a message. Useful, but sometimes considered annoying – it might be better to put the message on the page instead.

confirm. Gives the user an alert box, but with buttons for Yes and No. Useful for asking 'are you sure?'

document.write. Writes things into the current HTML document. Often-used, but not the best way of doing things.

getElementByID. Allows you to get an HTML element (that is, a tag) using its ID and manipulate it. Very useful for changing the text contained within tags, or their background colours, but can be used to do just about anything.

Math.random. Produces a random number

navigator.userAg. Returns the name of the web browser. Useful to check if a certain browser is being used, although it's often better to check for functions instead of browsers and decide which code to run that way.

parseInt. Looks through some text and gives you only the numbers from it.

window.location. Allows you to change the current URL that the web browser is at, as if the user had clicked a link.

var. Defines variables.

For more on Javascript, take a look at www.javascriptkit.com.

Javascript's Problems.

The biggest problem Javascript has is that it just doesn't work on all browsers: if you thought HTML support was erratic between them, wait until you start using Javascript. This will often put you in the position of having to check whether a function is available on the browser the code is running in (using an if statement), and then running some alternative code as a workaround if it doesn't. In most cases, this isn't as big a problem as it might seem, but it still requires you to have some knowledge of each browser's limits, and do more testing than you would otherwise need to do.

Javascript is also, unfortunately, a pain to test and debug, as most browsers don't give you any sort of reason why your code didn't run – if it's wrong, they just ignore it.