SCRIPT

contents introduction reference index previous next

HTML 4 - User's Guide
The SCRIPT element

Contents:

1. SAMPLES: 1.1 Using a JavaScript function
1.2 Built-in properties and methods
1.3 More ...

2. USAGE: 2.1 Scripting languages
2.2 The placement of the SCRIPT elements
2.3 Event handling attributes

3. SYNTAX

3.1 General format
3.2 Attributes

3.2.1 The usual attributes
3.2.2 The event handling attributes
3.2.3 The default scripting language

3.3 Contents

1. SAMPLES

1.1 Using a Javascript function

<HTML>
<HEAD>
    <TITLE>JAVASCRIPT - COMPUTE</TITLE>
    <SCRIPT>
       function compute(f)
       { f.store.value=f.first.value
                      +f.op.value
                      +f.second;
         f.result.value=eval(f.store.value); }
    
    </SCRIPT>
    <STYLE>
       form.border {border: thin solid #00AA00;}
       b.red {color: red;}
    </STYLE>
</HEAD>
<BODY>
<FORM class="border">
   <TABLE>
     <TR><TD><TD><b class="red">CALCULATOR</b>
     <TR><TD><TD> 
     <TR><TD>First Operand <TD><INPUT type="text" name="first">
     <TR><TD>Operator<TD><INPUT type="text" name="op" value="+" 
                          size="1" maxlength="1">
     <TR><TD>Second Operand <TD><INPUT type="text" name="second">
     <TR><TD>Result<TD><INPUT type="text" name="result">
     <TR><TD><TD><INPUT type="hidden" name="store">
     <TR><TD><TD><BUTTON type="button" name="compbutton" value="COMPUTE"
           onclick="compute(this.form)">COMPUTE</BUTTON>
     <TD><BUTTON type="reset" name="resetbutton" value="RESET">RESET</BUTTON>
   </TABLE>
</FORM>
</BODY></HTML>

To see how the page is displayed, please click here

Defining a function

A function is defined in the content of a <SCRIPT> element. Here, the SCRIPT element is placed within the <HEAD> element contents; the function is then defined for later common use.

In the function definition:

  function compute (f) {
     ...
  }

- 'function' is a key word to be used as is, to define a function

- 'compute' is the function name, assigned by the user

- 'f', within the parentheses is an argument

.	there can be 0, 1 or more arguments (if more than 1, they are comma separated)
.	the data type of the argument is not specified, it will be whatever the argument passed to the function will imply.

- the script language code (Javascript here) is placed within the curly braces { . . .}

The script that makes up the function body, is composed of 2 statements, each terminated by a semi-colon:
f.store.value=f.first.value + f.op.valuein this case, +f.second.value; and
f.result.value=eval(f.store.value);

Names in an object-oriented language reflect the hierarchy of the objects.

Here we must cope with the difficulty of two (meta) languages that designate the same things with different words:

-	HTML that deals with elements and attributes
-	an object oriented language such as JavaScript deals with objects and properties (the latter still different from style sheet properties)

Things are as simple as this:
- HTML elements are objects
- HTML attributes are the properties of these objects

With this in mind, we cannot get confused.

A term such as "f.store.value" refers to a document object (i.e. an element in the HTML document). It denotes a value property (i.e. an attribute named 'value') pertaining to a store object (i.e. an element so named - cf. infra), contained in an f object:

-	as was said, f is whatever is passed as an argument to the function; but we are going to see right now that to make sense, this must represent the <FORM> element defined in our document
-	store is the element named "store", i.e. with attribute name="store", contained in the f element; looking at the document, we see that 'f' must be the FORM element to have a "store" element in it.
-	value, the "value" property of the INPUT element named "store", represents the "value" attribute of this element -- generally speaking the value of this property (i.e. the text assigned to it) is what you see on INPUT controls that are not HIDDEN (as the "store" element precisely is, so that you cannot see, but you can see the value of the "value" attributes of the other INPUT elements)

You can see that "store", "first", "op", "second" and "result" are names (as specified by the name attributes) of the <INPUT> elements defined in the <FORM> element. As INPUT elements, they all have a "value" attribute, whether they are set in the HTML page or not (actually, only the "op" INPUT element has its "value" initially set)

The value property of an INPUT element is a character string. In the first and second objects they are the values that you type in the corresponding text field.

The expression: f.first.value + f.op.value + f.second.value;
represents the three strings of characters contained in the three input fields named "first", "op" and "second", joined by a "+" sign. When used with strings of characters, the "+" sign specifies a concatenation, i.e. the strings joined by the "+" are attached together. So, if the three concerned INPUT fields are, for example:

the above expression will evaluate to "153%27"
The first script line, which is an assignment statement, assigns the "153%27" string to the f.store.value property.

In the second script line: f.result.value=eval(f.store.value);
to the right of the "=" sign is the eval function; this is one of the so called built-in functions of the JavaScript language. The eval function carries out the arithmetic operation stated by the string of characters 153%27 assigned to the f.store.value property.
The left handside represents the f.result.value property, which is assigned the result returned by the eval function (by the way, 153%27 is 153 modulo 27, the remainder of the division of 153 by 27)

Calling the function

The compute function is assigned to the onclick attribute of a BUTTON element which has the "button" type:

     <TR><TD><TD><BUTTON type="button" name="compbutton" value="COMPUTE"
           onclick="compute(this.form)">COMPUTE</BUTTON>

"this" is a reserved word which means "the current element" (here, the BUTTON element where the word is encountered); this.form stands for "the form element" where the BUTTON is. So the compute function is passed the <FORM> element as the argument.
The onclick attribute defines the script which is run when the element is clicked. So, when the BUTTON is clicked, the compute function is called.

Operation

In the form you are going to display, please, enter a number into each of the fields marked "First operand" and "Second operand", and if so desired, modify the operation sign in the Operator control; then click the COMPUTE button. Click here to display the form.

1.2 Built-in properties and methods

This page demonstrates some of the WINDOW properties and methods:
- the location property
- the alert method
- the confirm method
- the prompt method

<HTML><HEAD><TITLE>BUILT-IN PROPERTIES AND METHODS</TITLE>
<LINK rel="stylesheet" type="text/css" href="../styles/HatayBook.css">
</HEAD>
<BODY><FORM><TABLE>
<TR><TD>Click here to see what happens<TD>
<BUTTON type="button" 
        name="myButton" value="myValue"         
        onclick="location='ILLLocation.html';">
RELOCATE</BUTTON>
<TR><TD>Click here to see another window function<TD>
<BUTTON type="button" 
        name="alertButton" value="alertValue" 
        onclick="alert('You clicked the ALERT button!')">
ALERT</BUTTON>
<TR><TD>Click here for more<TD>
<BUTTON type="button" 
        name="confirmButton" value="confirmValue" 
        onclick="if (confirm('Confirmed'))
                    {alert('GREAT!')}
                 else
                    {document.write('SHAME!')}">
CONFIRM</BUTTON>
<TR><TD>Click here for a prompt dialog box<TD>
<BUTTON type="button" 
        name="promptButton" value="promptValue"
        onclick="this.form.data.value=prompt('Please type in a value')">
PROMPT</BUTTON>
<TD><INPUT type="text" name="data">
</TABLE></BODY></FORM>

Click here to display the resulting page

Scripts are assigned to the onclick attributes of BUTTON elements. These scripts use the properties and functions location, alert, confirm and prompt which are built into the JavaScript language so that you do not have to define them before using them:

-	The location property holds the URL of the current document, so that if you change its value, this will take you to another page
-	The alert function displays a message box
-	confirm function displays a confirmation box which requests you to click on a "OK" or "cancel" button and returns the value 'true' or 'false' accordingly.
-	The prompt function displays a data entry box for you to enter data. If you enter "undefined" or click on the cancel button, it will return a null value; otherwise it returns the value you entered in the data entry box.

1.3 More ...

To see more of the JavaSript language, please refer to our User's Guide to the JavaSvript language

2. USAGE

2.1 Scripting languages

Scripts can be set down in a variety of languages: JavaScript as demonstrated in the present book, Visual Basic, TCL, etc.
More than one language can be used within the same HTML page. Authors inform the browser of the language being used through the type attribute of the SCRIPT element:
- type="text/javascript"
- type="text/vbscript"
- type="text/tcl"
- etc.
The default language is normally JavaScript, but it is good style to specify it, even if it is JavaScript.

2.2 Placement of the SCRIPT elements

Scripts are:
- either contained in <SCRIPT> elements,
- or assigned as values to event handling attributes of HTML elements

<SCRIPT> elements can be placed:
- either in the contents of the HEAD element
- or in the contents of the BODY element

Any number of SCRIPT elements can be used in either location.

SCRIPT elements in the HEAD contents hold function and variable definitions. The functions and variables can be referred to from scripts in the BODY contents.
When the HTML page is loaded, the scripts in the HEAD contents are analyzed for errors, but not run.

SCRIPT elements in the BODY contents have their scripts run as they are encountered during the loading of the page. You should exercise caution not to place scripts before the elements they reference, because these also are defined as they are loaded; so it would be an error for the scripts to reference elements that are not defined yet.

2.3 The event handling attributes

Events can be caused to occur on the HTML page by user actions such as:
- changing the value in a text field,
- clicking these fields, or buttons with the mouse
- pressing a key on the keyboard
- etc...

Such events can be handled by means of scripts assigned to the event handling attributes of some of the elements on the HTML page. Some of these attributes are:

- onclick	whose assigned script is called when its element is clicked
- onchange	whose assigned script is called when the value of its element is changed by the user
- onfocus	whose assigned script is called when its element receives focus, by the user clicking on it or arriving on it using the TAB key
- onblur	whose assigned script is called when its element loses focus by the user clicking another element or pressing the TAB key
- onmouseover	whose assigned script is called when the user lets the mouse cursor hover over its element
- onmouseout	whose assigned script is called when the user takes the mouse cursor away
-	etc...

More on the subject can be found in our User's Guide to the JavaScript language

3. SYNTAX

3.1 General format

The general format of a <SCRIPT> element is

<SCRIPT type="language"
        src="uri" charset="char_encoding"
        defer
>
       ... scripts ...

</SCRIPT>

3.2 Attributes

3.2.1 The attributes of the SCRIPT element

The attribute most usually specified for the SCRIPT elements are:

type

(optional) specifies the language used in the element contents
Some of the possible values are:

. `type='text/javascript'`	JavaScript language -- this is the default
. `type='text/vbscript'`	Visual Basic language
. `type='text/tcl'`	TCL language

- src (optional) its value is a URI that identifies the document containing the scripts pertaining to the SCRIPT element -- when this attribute is used, the contents of the element is disregarded

- charset (optional) used with the src attribute to specify the character encoding method used in the document referred to by the latter (this does not concern scripts contained in the SCRIPT element, which do not have to be encoded)

- defer (optional) specifies that the browser is not to generate the scripts contained in the SCRIPT element

3.2.2 The event handling attributes

Event handling attributes related to mouse or key action are shared by almost all of the elements. They are described as common attributes in the present document.

The other event handling attributes are:

Attribute	When the assigned script is called
onload	The element is loaded - this attribute may be used with these elements: `BODY, FRAMESET` elements
onunload	The element is unloaded - this attribute may be used with these elements: `BODY, FRAMESET`
onfocus	The element gets focus by the user navigating to it using the TAB h key, or clicking on it with the mouse - this attribute may be used with these elements: `A, AREA, INPUT, LABEL, SELECT, TEXTAREA, BUTTON`
onblur	The element loses focus by the user pressing the TAB key or clicking some where else with the mosue - this attribute may be used with these elements: `A, AREA, INPUT, LABEL, SELECT, TEXTAREA, BUTTON`
onsubmit	The user presses a SUBMIT key in the form - this attribute may be used with this element: `FORM`
onreset	The user presses a RESET key on the form - this attribute may be used with this element: `FORM`
onselect	The element is selected by the user - this attribute may be used with these elements: `INPUT, TEXTAREA`
onchange	The element has its value changed by the user - this attribute may be used with these elements: `INPUT, TEXTAREA`

3.2.3 The default scripting language

Although the default language is by default JavaScript for most of the user agents, it is recommended that HTML authors explicitly define the default language using a <META> element, placed in the HEAD contents:

<META http-equiv="Content-script-type" type="text/javascript">

3.3 Contents

The SCRIPT element:

eiher contains a set of script statements, in the language specified by its type attribute or the default language specified by a META element (the HTML specification states that there is no default for the scripting language, but user agents may help by providing one).

or has an src attribute which specifies the URI of an external file that contains script statements, in which case, the contents of the element is ignored -- the scripting language used in the file is specified by the type attribute, or the default language specified by a META element (the HTML specification states that there is no default for the scripting language, but user agents may help by providing one).

contents introduction reference index previous next

First Operand
Operator
Second Operand