jQuery part 1: the web

By Andrew Clifford

Basic web technologies do not fully meet the demands of modern websites.

If you are involved in any sort of website or web application development, you will come across references to jQuery. If you look it up, it describes itself as "a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development". This article is for anyone who does not understand what that means.

Let's start with a quick recap on how the web works.

Typically you enter a website address in a browser on your PC, such as Internet Explorer. The website address identifies a server on the internet and a file to be retrieved from the server. The browser sends a request to the server for that file. The server returns the file, either reading it from disk or generating it dynamically. Your browser displays the returned file. The file can contain links to other web addresses, which your browser will retrieve as new pages when you click on the links.

Files displayed by the browser are written in hypertext markup language (HTML). This is full of special codes between <'s and >'s, and describes the text to be shown on the browser and how it should be displayed.

This is where it gets more complicated. HTML supports many different types of structure, such as paragraphs, headings, tables and lists. However, the default formatting of these is too plain to be presentable these days.

HTML has additional codes which can be used to layout the web page and apply visual styles. Adding these formatting codes directly into the HTML makes the HTML harder to write, difficult to change, and very hard to keep consistent.

To overcome this problem, HTML pages can use separate cascading style sheet (CSS) files. CSS files contain definitions of format which can be referenced within an HTML page. For example, I might decide that I want to make everything important on my web page stand out in red and bold. I can define a CSS class called "important", and then reference this in my HTML for important text. Nearly all websites use HTML with CSS-based layout and style rather than writing the formatting into the HTML.

HTML with CSS can produce very elegant websites, but there are still problems.

To achieve the effect you want in CSS you often have to add extra structures to the HTML. For example, you might want an area of text with a border with rounded corners, rather than the default square corners. You can use CSS to place a rounded corner image at the edge of your text, but only to one corner. To get all four rounded corners, you have to add extra HTML structures so that you have a container for each. This sort of manipulation of the HTML to get the format you want, even with CSS, undermines the idea of separating the formatting from the content.

HTML and CSS also have a very limited range of dynamic behaviour. People expect elegant animations, drop-down menus, rich forms, drag-and-drop, and all manner of functionality not supported by HTML and CSS.

Next week I will cover how JavaScript, and jQuery in particular, overcomes these problems with plain HTML and CSS formatting.

Subscription