Web programming

Units WEB1P and WEB2P

Client side programming with JavaScript and DHTML

Introduction

Previously, we have focused on server-side programming. This is where the bulk of the development of major websites is done. However, there are a number of things that can be done on the client side to improve the user experience. Clearly, anything that happens on the client side is dependent on facilities and features provided by the user's browser. However, modern browsers such as Microsoft Internet Explorer and Mozilla Firefox provide an extensive range of features that allow the HTML that makes up a web page to be manipulated and made dynamic.

The three technologies that make up Dynamic HTML (DHTML) are:

  1. HTML
  2. JavaScript (formally called ECMAScript)
  3. Cascading Style Sheets (CSS)

Using a Document Object Model (DOM) for an HTML page, it is possible to manipulate the page, using JavaScript to make things happen and CSS to control how things look.

HTML

If you don't know what HTML is, read a basic tutorial or consult the full specification.

There is also a stricter version called XHTML. Read the W3Schools tutorial for more information.

JavaScript

JavaScript is a scripting language for web pages. It enables functionality to be performed by the user's browser as programmed by code in a web page.

Features to focus on include:

Document Object Model (DOM)

DOM is a way of describing an HTML or XML document as a tree structure. A web browser will interpret changes to the structure of a document (including adding nodes) as changes to the document, and will update the user's view of the document accordingly. It thus provides a way (in conjunction with JavaScript) to change what a user sees in their web browser window.

Cascading Style Sheets (CSS)

CSS is a notation for specifying the presentation of a document. Although it is not specific to HTML, that is the language with which it is most associated.

Dynamic HTML (DHTML)

Exercises

If you can't think of some problems of your own to which these technologies might be applied, try some of these (admittedly rather elderly) exercises.

 

Last updated by Prof Jim Briggs of the School of Computing at the University of Portsmouth

 
The web programming units include some material that was formerly part of the WPRMP, WECPP, WPSSM and WEMAM units.