COM271, Week 1

JavaScript for Client-side Programming

Syllabus | Table of Pages | Assignments | References and Useful Links

Programming Within Web Pages

The need for web page programming: By the mid 1990s, web developers realized that it was possible to include programming logic within the structure of a web page. By making the browser reactive to various states of the mouse or keyboard (i.e., a mouse click, a mouse pointer hovering over part of the page, a key stroke), and by exposing parts of the page to a programming language, the way in which the page was displayed, and indeed some of the actual content of the page, could be altered in a useful way. For example, a page could now be made sensitive to a mouse click over a button, changing the appearance of the button by swapping images from a "normal" button to an image that looked like the button had been depressed ("active" button). Of more use, a programming language could expose (make available to itself) the values that had been entered into html form boxes (e.g., the name typed into a box for entering last names, or a number entered into boxes for area code and telephone numbers). The values could be evaluated to see whether they were letters or numbers, or even to determine whether they matched expected patterns (the pattern for a phone number of XXX-XXX-XXXX numbers), and messages could be composed to advise a form user of potential missing values or errors. But because there were myriad ways to do this, developers at the W3C sought a means to build a common programming language. This was the need behind JavaScript.

Origins: JavaScript started as a programming language for use in Netscape browers; originally it was called LiveScript. Early in its development, it was renamed JavaScript, an unfortunate confusion with Sun Microsystems' general purpose programming language, Java; Sun and Netscape jointly announced the langage as a "complement" to both html and Java in December 1995. To promote compatibility, Netscape submitted JavaScript to the European Computer Maufacturer's Association (ECMA) in 1996 and a standardize version (ECMA-262) was released in June 1997. When people refer to JavaScript today, they really mean ECMAScript, but that's not nearly as easy to remember. The fifth edition "ECMA-262 Standard" (1999) is available online as a pdf from http://www.ecma-international.org/publications/standards/Ecma-262.htm. It's not light reading, but it does explain everything (Powers, 2007, p. 2-3).

JavaScript + CSS = DHTML: JavaScript works by tying into both html structure and CSS attributes. We will get you familiar with this in due time. You use it to create dynamic effects, meaning that JavaScript can make a web page react to use of the mouse or keyboard. Specifically, it can respond to mouse or keyboard events (a mouse hover, for example) by alterning CSS or html values. These values include any style attribute (e.g., background-color, visibility) as well as html values (e.g., the source file for an image tag). That is, colors can be changed, and images can be swapped. JavaScript can also open and move new windows, allowing a user to create and drag-and-drop windows (say, a convenient pop-up calendar or a useful calculator). When used this way, the combination of JavaScript and CSS is called Dynamic HTML, or just DHTML. Remember not to confuse this use of dynamic with the meaning dynamic web page (where the content is data-base driven, meaning the content itself is dynamic).

Two Examples

Simple rollover effects: I can't think of a reason to do this, but here are two buttons, each made of a simple paragraph containing text, and each with an initial CSS style for background-color. Each paragraph also contains a bit of JavaScript. The javacript contains an event handler (onMouseOver) and an instruction to change a single CSS property (background-color) for a specified element (i.e., one with an html id). If you roll your mouse over the button on the left, the button on the right changes. If you roll your mouse over the button on the right, it changes. This illustrates the ability of one element to change another, or itself.

Make the other button red

Make this button red

Here is the html with embedded JavaScript:

<p class="button" id="red" onmouseover="document.getElementById('green').style.backgroundColor='#900';", onmouseout="document.getElementById('green').style.backgroundColor='#090';">Make the <em>other</em> button red</p>
<p class="button" id="green" onmouseover="document.getElementById('green').style.backgroundColor='#900';", onmouseout="document.getElementById('green').style.backgroundColor='#090';"<Make <em>this</em> button red</p>

Simple form evaluation: We'll take a look at several ways in which JavaScript can be used in client-side form validation. That is, we'll have the browser check the form before allowing it to send the form back to the server for further processing. Here's a really simple form that will only work if you enter letters into the Name box:

Enter your name in this box, please

Reference