COM271, Week 7

Introduction to Javascript

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

Client-side programming with JavaScript

With HTML and CSS, a developer can structure and style a web page. By adding JavaScript, you can add the flexibility of a universally supported programming language which works in all browsers. With JavaScript, you can write programs to have the browser do a number of things, including:

• Validate input forms
• Open, close, and position new browser windows
• Alter the appearance of the page using any CSS style attributes
• Add new content (usually, warning messages) to the page
• Create dynamic effects, including rollovers (image swaps) and motion effects

JavaScript works well with both html and css. It is written as part of a web page, and downloaded to the client's browser, where it provides a dynamic capability to respond to user mouse clicks and mouse movements. There is a rich array of things that JavaScript can be used for; indeed, JavaScript is the basis for ActionScript, which allows Adobe Flash pages to work (something beyond our present scope).

We'll limit our exposure to JavaScript to an outline of some of its basic characteristics and functions. Our main focus will be to acquaint you with how JavaScript is used to validate input forms before they are sent to the server. We will also look at a couple of ways to manipulate both CSS and HTML.

DHTML: The combination of Javascript with HTML and CSS is sometimes called DHTML, where the D stands for Dynamic. DHTML is dynamic in the sense that page elements can be changed. Page content (text and images) remain static, however. Truly dynamic web pages require the use of database to drive web content, the subject of COM372, Dynamic Web Design and Programming, a separate course involving PHP (server programming language) and MySQL, a database.

Here, we'll start with a few basics, and gradually work up to doing useful things. Our use of DHTML will include providing feedback to users about what they enter on an html form: was something entered into each required field; were the right kinds of things (numbers, letters) entered; and do the entries follow expected patterns, such as having the right pattern for a phone number or an email address? We will also provide visual feedback for incorrectly filled forms, as well as text to indicate errors, all constructed in a dynamic fashion using JavaScripts interpretted by the client browser.

Adding JavaScript to HTML: We won't be able to do anything until we first learn to write JavaScript into our web pages. Let's start with that. There are 4 ways to incorporate JavaScript into a web page:

1. With an HTML event handler, e.g., onclick
2. Via a pseudo-URL javascript: syntax referenced by a link (e.g., <a href="javascript:...)
3. Code with a <script> element (uses attribute type="text/javascript")
   <script type="text/javascript"></script>
   These may be used as many times as desired, placed anywhere in the document.
4. Code linked via src attribute of <script> element

We will return to JavaScript written as functions into the page's <script> element or from externally linked JavaScript files. Here are two simple ways to begin writing simple scripts on the page. Both rely on the browser having the ability to react to events:

Event handlers: JavaScript allows the browser to respond to things the user does with the mouse or keyboard, including placement of the cursor over page elements. This is supported by all contemporary browsers. Events can be bound to most elements, as we'll show next. Events are the familiar things you can do with a mouse. Each event is coupled with a response; together they are called event handlers. The names of events suggest the things users can do or things that happen because a user has taken some action:

onblur ondblclick onkeypress onmousedown onmouseover onselect

onchange onfocus onkeyup onmousemove onmouseup onsubmit

onclick onkeydown onload onmouseout onreset onunload

Here is a simple link, using the onclick event handler to display a simple box with a message.

Mouse-over here.

<a onmouseover="alert('You just moused-over me! JavaScript can recognize mouse events!');">Mouse-over here</a>

Javascript Pseudo-URL: A second way of adding a small bit of JavaScript to a page is to replace the link address with a short script (one or more lines of JavaScript) preceded by "javascript:". (This is equivalent to inserting a small bit of CSS into an element using the style attribute.) It is used sparingly.

Click here!

<a href="javascript: alert('You clicked! Yes...?');">Click here!</a>