Tutorials Bugs Masterclass Free stuff Test pages Proposals

Basic concepts

Advanced concepts

RichInStyle.com HTML 4 guide - Scripts

Contents

Introduction

Including scripts in HTML

NOSCRIPT

Events

Script types

The events

Introduction

Scripting is incredibly important on the world wide web - without it, the web would be a different experience. HTML's role in scripting is relatively limited, but what it does do is to act as a facilitator - it permits the use of scripts in HTML.

HTML essentially has two roles; firstly, in allowing scripts to react to certain events, and secondly in allowing scripts to be included in HTML.

Including scripts in HTML

The SCRIPT element is used to include scripts within HTML documents. E.g.:

<SCRIPT type="text/javascript">
document.write('Hello world');
</SCRIPT>

From an HTML point of view, the SCRIPT element is extremely simple. There are really only a very few points of note:

  1. The type attribute - this is required; usually set to "text/javascript"
  2. Scripts may be hidden from older browsers using the comment delimiters:

    <SCRIPT type="text/bananascript">
    <!--
    banana.size=12;
    -->
    </SCRIPT>

    Although the number of browsers that would otherwise render the content is minuscule, it is still worth including them. Note also that to avoid errors in the language, the comment close tag must be hidden from the script parser. E.g.,:

    <SCRIPT type="text/javascript">
    <!--
    bean.cost=12;
    // -->
    </SCRIPT>

  3. The language attribute; although this is deprecated, it is still useful for hiding new scripts from old browsers. E.g.:

    <SCRIPT language="javascript1.2" type="text/javascript">
    <!--
    bean.cost=12;
    // -->
    </SCRIPT>

  4. The defer attribute; e.g., <SCRIPT defer> - this indicates that the SCRIPT will not generate any content and therefore that the browser can continue rendering without considering the SCRIPT
  5. The src attribute. This allows scripts to be kept in external files. However, whereas Javascript support was introduced in Netscape 1.5, src was not implemented until 3.0; equally, IE 3.0 and 3.01 do not support src; subsequent versions do.

NOSCRIPT

The NOSCRIPT element is used to provide alternate content for browsers that are not currently supporting script. E.g.,

<SCRIPT type="text/javascript">
Script here
// -->
</SCRIPT>
<NOSCRIPT>
</NOSCRIPT>

Events

Certain actions (such as mouse clicks) generate an event. HTML allows these to be reacted by scripting languages by its use of the ONxxxx event handlers.

Script types

Since there is no way of declaring the type of scripting languages used on attributes (e.g., onload), if you use the intrinsic events, you must set the default script type for the document.

This is best done by setting the Content-Script-Type HTTP header to the desired value, but failing that, you can set a header equivalent:

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

If you fail to set a default script type and use the intrinsic events, your document is WRONG.

The events

Name Applies to
onload FRAMESET or BODY Means completely loaded
onunload FRAMESET or BODY Means completely loaded
onclick most elements
ondblclick most elements
onmousedown most elements mouse is pressed down over an element
onmouseup most elements mouse is released over an element
onmouseover most elements mouse is moved over an element
onmousemove most elements mouse is moved while over an element
onmouseout most elements mouse moved away from an element
onfocus LABEL, INPUT, SELECT, TEXTAREA, BUTTON Element has focus through tabbing to it or by being given it by the mouse
onblur LABEL, INPUT, SELECT, TEXTAREA, BUTTON Element has focus through tabbing to it or by being given it by the mouse
onkeypress most elements key is pressed and released over an element
onkeydown most elements key is pressed down over an element
onkeyup most elements key is released over an element
onsubmit FORM when form is submitted
onreset FORM when form is submitted
onselect INPUT and TEXTAREA applies when text in a text field is selected
onchange INPUT, SELECT and TEXTAREA Control loses focus having had its value changed prior to losing the focus.

For example, <INPUT onclick="f()">. Thus the script is contained within the attribute - in this instance a JavaScript function call.

The next section of this HTML tutorial deals with forms.