Professional JavaScript

<META>

This tag in HTML 4.0 provides a way of setting the default scripting language for an HTML document, and the default style definition language. The syntax is:

<META http-equiv="Content-Script-Type" content="text/JavaScript">
<META http-equiv="Content-Style-Type" content="text/JavaScript">

Since JavaScript is already the default, and Internet Explorer doesn't support JSSS, they're not of much use yet. Netscape 4.0 ignores the tag variants.

Events

HTML events are the main way JavaScript improves its interactivity with the user. An event is just a piece of input to the browser, usually from the user. Event handlers are bits of JavaScript code that execute in response to events.

An event model describes how events are created and moved around by the software. The HTML 4.0 standard calls events relating to HTML intrinsic events. These are the browser events of most interest. The components of the HTML event model are:

Special conditions causing events to occur.
Special attributes in HTML tags for each event.
Scripts to handle each event.
A JavaScript host object that a given event acts on.
Control passed temporarily to the JavaScript interpreter when an event occurs.
Data accompanying the event.

From the scriptwriter's point of view, only components 3, 4, and 5 require any JavaScript code.

Creating Handlers

There are two ways to create JavaScript for HTML events: via HTML tags and via JavaScript host objects.

<HTML><HEAD><SCRIPT>
var shouts = 0;

function shout(obj)
{
  alert('What? Just: "' + this.value + '"\n\nLOUDER !!');
}
</SCRIPT></HEAD>
<BODY>
Shouting page. Type away, then hit the TAB key.<BR>

<FORM NAME="shouter"> First shout:
<INPUT TYPE="text" NAME="first" ONCHANGE="this.value='LOUDER !!!';return true;">
<BR> Second shout:
<INPUT TYPE="text">
<BR> Last shout:
<INPUT TYPE="text" NAME="last">
</FORM>

<SCRIPT>
document.shouter[1].onchange=shout;
document.shouter.last.onchange=shout;
</SCRIPT></BODY></HTML>

In this example there are three HTML text fields, all with onChange event handlers. Since HTML tag attributes are case insensitive, ONCHANGE could have been written onchange or onChange. In documentation, the convention is to use onChange, as will be done from here on. In JavaScript code, the equivalent property must be lowercase - onchange, except Netscape 4+ will allow onChange as well. Later in this section the implications of this handler are described. For now, run the example and see for yourself, or just note the syntax.