jQuery part 2: JavaScript

By Andrew Clifford

JavaScript overcomes the limitations of plain HTML and CSS websites, but is difficult to do well.

Last week I covered how the basic web technologies of HTML and CSS can produce elegant websites, but do not fully meet the requirements for the levels of dynamic behaviour that people expect.

The limitations of HTML and CSS are:

• It is not always possible to achieve the desired layout and styling using CSS without modifying the underlying HTML. This complicates the HTML and makes it harder to maintain, and means that changes to format have to be made in more than one place.
• HTML and CSS have few capabilities for dynamic behaviour, though it is possible to create simple pop-up boxes and drop-down menus using CSS alone. More complicated effects, such as animated displays, are not possible.
• HTML and CSS do not alter how the browser behaves. For example, there is nothing in HTML to warn you if you have made changes to text on a form, and then accidentally cancel the changes rather than commit them.
• HTML and CSS do not alter how the browser retrieves data from the server. For example, with plain HTML you can not build a form that carries out address lookup using a postcode; you would need the user to enter the postcode on one form, and then present a whole new page for them to select an address.

These limitations can be overcome using JavaScript. JavaScript is a programming language supported by all major browsers. JavaScript scripts are typically written in separate files, and referenced by the HTML file, similar to how CSS files are referenced.

JavaScript can modify how the browser behaves. It can:

• Dynamically modify the structure of the HTML within the browser, so that more advanced CSS-based formatting can be applied without modifying the simple structure of the HTML created by the server.
• Respond to events in the browser, such as mouse clicks, and create animated effects such as moving or fading areas of the page.
• Read data on HTML forms as it is entered, so that forms can be validated before they are submitted.
• Retrieve data directly from the server without bringing up a new page, for example to lookup a set of addresses for a postcode that has been entered.

JavaScript is very powerful, but it introduces a load of new problems. JavaScript is difficult to do well. Different browsers work differently, providing subtly different ways to interact with the HTML and with the user.

As well as these basic problems, the whole approach to writing JavaScript is hard. If you want to modify the structure, you have to navigate through the HTML to find the parts you need to modify. If you want to modify the behaviour of the browser, you have to create code to respond to specific events, and then navigate through the HTML and attach the code to the bits of the page that can trigger the events. This is hard on a complicated page, where you may want to combine multiple events and multiple modifications.

Next week I will cover how jQuery overcomes these problems with JavaScript.

Subscription