June 2010 Edition
Computer Science Department, University of Cape Town
| MSc-IT Study Material June 2010 Edition Computer Science Department, University of Cape Town |
Table of Contents
Web browsers were originally designed to interpret HTML with two primary purposes: to render documents marked up in HTML to an acceptable level of quality, and, crucially, to be able to follow hyperlinks to resources. As the Web grew, so did the demand for more sophisticated Web content. Among many other extensions, graphics, forms, and tables were added to the HTML standard. With the exception of forms, there is nothing in HTML that supports interaction with the user. Given the ubiquity of Web browsers, and the effort which millions of ordinary people have put into learning to use them, they provide an almost universal starting point for interacting with complex systems, particularly commercial, Internet based systems. Hence the need for sophisticated interaction facilities within Web browsers.
The main means for providing interactivity within HTML documents is the JavaScript programming language. HTML documents can include JavaScript programmes that are interpreted (i.e. run) by the Web browser displaying the Web document. In a real sense, JavaScript allows a Web document to interact with its environment — that is, with the browser that is displaying it. Ultimately, it lets the Web document become more interactive, to the user's benefit.
For example, the following message could be given to a user when they submit a form with a missing field:
The above message can be shown with the following JavaScript code.
<SCRIPT>
window.alert('Error with form: You forgot to fill in the billing address!')
</SCRIPT>The JavaScript code is contained within the <SCRIPT> and </SCRIPT> tags. Everything between those tags must conform to the JavaScript standard (the standard itself is an ECMA International standard, called ECMAScript). The above statement is an instruction to the browser requesting that an alert box display the message "Error with form: You forgot to fill in the billing address!".
This unit will later cover another way to include JavaScript in HTML documents. It is worth noting for now that the <SCRIPT> tag can include a language attribute to ensure the browser interprets the enclosed commands as JavaScript, since other languages have, in the past, been used (such as VBScript, which is no longer used in new websites, and is supported by very few browsers). For simplicity, we will use the attribute's default value (of JavaScript) by omitting the attribute from the <SCRIPT> tag.
While programming is covered in the programming module of this course, JavaScript differs from Java in some important areas which we will quickly review. JavaScript objects are covered in more detail in later chapters, so we will not go into any great depth here.
In Java, all functions must belong to a class, and for this reason are called methods. In JavaScript, a function does not have to belong to a particular object at all. When a function does, however, it is often called a method. Functions and methods are both implemented in the same way, using the function keyword. All methods are functions, but not all functions are methods.
Unlike Java, JavaScript does not contain the idea of classes. Instead, JavaScript has constructors, which are a special kind of function that directly creates objects. These constructor functions define the state variables which each object holds and initialises their values. These variables are often called the object's properties. Constructor functions also supply objects with their methods.
In JavaScript, functions are themselves a special kind of object called Function Objects. Function Objects can be called just as normal functions in other languages, but because they are objects they can themselves be stored in variables and can be easily passed around as, say, arguments to other functions. They can also contain properties of their own.
Constructor functions have a special Prototype property which is used to implement inheritance, as will be explained later in the chapter on objects. Constructor functions are called using the new keyword when creating objects.
JavaScript communicates with its environment by calling methods on objects representing components of that environment, such as an object representing the window the HTML document is displayed in, an object representing the document itself, and so on. Ignoring the server side at present, we conceptually have a browser that interacts with a window, which interacts with a document, which is itself the user interface. JavaScript allows the user interface to be programmed. This is accomplished by providing the means, in JavaScript, for a user to interact with a system via the document rendered in the browser window, as depicted below.
A user may request a document via an URL; a Web server delivers the document to a Web browser which not only displays it, but also executes any interactive elements.