Basics
Using JavaScript
in HTML
JavaScript
can be embedded in an HTML document in two ways:
- As statements
and functions using the SCRIPT tag.
- As event handlers
using HTML tags.
The SCRIPT tag
A script embedded
in HTML with the SCRIPT tag uses the format:
<![CDATA[
<SCRIPT>
JavaScript statements...
</SCRIPT>
]]>
The optional LANGUAGE
attribute specifies the scripting language as follows: <![CDATA[
<SCRIPT LANGUAGE="JavaScript">
JavaScript statements...
</SCRIPT>
]]>
The HMTL tag,
<SCRIPT>, and its closing counterpart, </SCRIPT> can enclose any
number of JavaScript statements in a document.
JavaScript is
case sensitive.
Example 1: a simple script.
<![CDATA[ <HEAD>
<SCRIPT LANGUAGE="JavaScript">
document.write("Hello guys !!")
</SCRIPT></HEAD>
<font size="1"> That's all, folks. </font></font>
<P> <font face="Verdana, Arial, Helvetica, sans-serif" size="1"><B>Example 1 page
display.</b> </font>
<P><font face="Verdana, Arial, Helvetica, sans-serif" size="1"> Hello guys !!
That's all folks. </font>
<HR>
<font face="Verdana, Arial, Helvetica, sans-serif"><b>Code Hiding<br>
<br>
</b><font size="1">Scripts can be placed inside comment fields to ensure that
your JavaScript code is not displayed by old browsers that do not recognize JavaScript.
The entire script is encased by HTML comment tags: <XMP>
<!-- Begin to hide script contents from old browsers.
// End the hiding here. -->
]]>
Defining and Calling
Functions
Scripts
placed within SCRIPT tags are evaluated after the page loads. Functions are
stored, but not executed. Functions are executed by events in the page.
It's important
to understand the difference between defining a function and calling the function.
Defining the function simply names the function and specifies what to do when
the function is called. Calling the function actually performs the specified
actions with the indicated parameters.
Example 2: a script with
a function and comments. <![CDATA[ <HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- to hide script contents from old browsers
function square(i) {
document.write("The call passed ", i ," to the function.","<BR>")
return i * i
}
document.write("The function returned ",square(5),".")
// end hiding contents from old browsers -->
</SCRIPT></HEAD>
<BR>
<font size="1">All done. </font></font><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><B>
Example 2 page display.</b> </font>
<P> <font face="Verdana, Arial, Helvetica, sans-serif">
<SCRIPT LANGUAGE="JavaScript">
<!-- to hide script contents from old browsers
function square(i) {
document.write("The call passed ", i ," to the function.","<BR>")
return i * i
}
document.write("The function returned ",square(5),".")
// end hiding contents from old browsers -->
</SCRIPT>
<BR>
<font size="1">All done. </font></font>
<HR>
<font face="Verdana, Arial, Helvetica, sans-serif"><b>The HEAD tag<br>
<br>
</b><font size="1">Generally, you should define the functions for a page in the
HEAD portion of a document. Since the HEAD is loaded first, this practice guarantees
that functions are loaded before the user has a chance to do anything that might
call a function. </font></font>
<HR>
<font face="Verdana, Arial, Helvetica, sans-serif"><B>Example 3: a script with
two functions.</b> <XMP> <HEAD>
<SCRIPT>
<!--- hide script from old browsers
function bar() {
document.write("<HR ALIGN='left' WIDTH=25%>")
}
function output(head, level, string) {
document.write("<H" + level + ">" + head + "</H" + level + "><P>" + string)
}
// end hiding from old browsers -->
</SCRIPT></HEAD>
<SCRIPT>
<!--- hide script from old browsers
document.write(bar(),output("Make Me Big",3,"Make me ordinary."))
// end hiding from old browsers -->
</SCRIPT>
</font>
<P><font face="Verdana, Arial, Helvetica, sans-serif"> <font size="1">Thanks.
</font></font>
<P> <font face="Verdana, Arial, Helvetica, sans-serif"><B> <font size="1">Example
3 results.</font></b>
<SCRIPT>
<!--- hide script from old browsers
function bar() {
document.write("<HR ALIGN='left' WIDTH=25%>")
}
function output(head, level, string) {
document.write("<H" + level + ">" + head + "</H" + level + "><P>" + string)
}
document.write(bar(),output("Make Me Big",3,"Make me ordinary."))
// end hiding from old browsers -->
</SCRIPT>
</font>
<P><font face="Verdana, Arial, Helvetica, sans-serif"> <font size="1">Thanks.
</font></font>
<HR>
<p><font face="Verdana, Arial, Helvetica, sans-serif"><b>Quotes</b></font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Use single quotes
(') to delimit string literals so that scripts can distinguish the literal from
attribute values enclosed in double quotes. In the previous example, function
bar contains the literal 'left' within a double-quoted attribute value. Here's
another example: </font></p>
<font face="Verdana, Arial, Helvetica, sans-serif" size="1"><xmp> ]]><![CDATA[
<INPUT TYPE="button" VALUE="Press Me" onClick="myfunc('astring')">
]]>
Scripting
Event Handlers
JavaScript
applications in the Navigator are largely event-driven. Events are actions
that occur, usually as a result of something the user does. For example, a button
click is an event, as is giving focus to a form element. There is a specific
set of events that Navigator recognizes. You can define Event handlers,
scripts that are automatically executed when an event occurs.
Event handlers
are embedded in documents as attributes of HTML tags to which you assign JavaScript
code to execute. The general syntax is <![CDATA[ <TAG eventHandler="JavaScript Code">
]]> where TAG is some HTML tag and eventHandler is the name of the
event handler.
For example, suppose
you have created a JavaScript function called compute. You can cause
Navigator to perform this function when the user clicks on a button by assigning
the function call to the button's onClick event handler: <![CDATA[
<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">
]]>
You can put any
JavaScript statements inside the quotes following onClick. These statements
get executed when the user clicks on the button. If you want to include more
than one statement, separate statements with a semicolon (;).
In general, it
is a good idea to define functions for your event handlers because:
- it makes your
code modular-you can use the same function as an event handler for many different
items.
- it makes your
code easier to read.
Notice in this
example the use of this.form to refer to the current form. The keyword
this refers to the current object-in the above example, the button object.
The construct this.form then refers to the form containing the button.
In the above example, the onClick event handler is a call to the compute()
function, with this.form, the current form, as the parameter to the function.
Events apply to
HTML tags as follows:
- Focus, Blur,
Change events: text fields, textareas, and selections
- Click events:
buttons, radio buttons, checkboxes, submit buttons, reset buttons, links
- Select events:
text fields, textareas
- MouseOver event:
links
If an event applies
to an HTML tag, then you can define an event handler for it. In general, an
event handler has the name of the event, preceded by "on." For example, the
event handler for the Focus event is onFocus.
Many objects also
have methods that emulate events. For example, button has a click method that
emulates the button being clicked. Note: The event-emulation methods
do not trigger event-handlers. So, for example, the click method does not trigger
an onClick event-handler. However, you can always call an event-handler directly
(for example, you can call onClick explicitly in a script).
| Event |
Occurs when... |
Event Handler |
| blur |
User removes
input focus from form element |
onBlur |
| click |
User clicks
on form element or link |
onClick |
| change |
User changes
value of text, textarea, or select element |
onChange |
| focus |
User gives
form element input focus |
onFocus |
| load |
User loads
the page in the Navigator |
onLoad |
| mouseover |
User moves
mouse pointer over a link or anchor |
onMouseOver |
| select |
User selects
form element's input field |
onSelect |
| submit |
User submits
a form |
onSubmit |
| unload |
User exits
the page |
onUnload |
Example 4: a script
with a form and an event handler attribute.
<![CDATA[
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function compute(form) {
if (confirm("Are you sure?"))
form.result.value = eval(form.expr.value)
else
alert("Please come back again.")
}
</SCRIPT></HEAD>
</font>
<FORM>
<font face="Verdana, Arial, Helvetica, sans-serif"> <font size="2">Enter an
expression: </font>
<INPUT TYPE="text" NAME="expr" SIZE=15 >
<INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)">
<BR>
<font size="2">Result:</font>
<INPUT TYPE="text" NAME="result" SIZE=15 >
<BR>
</font>
</FORM>
<P> <font face="Verdana, Arial, Helvetica, sans-serif"><B>Example 4 page display.</b>
</font>
<P> <font face="Verdana, Arial, Helvetica, sans-serif">
<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers
function compute(form) {
if (confirm("Are you sure?"))
form.result.value = eval(form.expr.value)
else
alert("Please come back again.")
}
// end hiding from old browsers -->
</SCRIPT>
</font>
<FORM>
<font face="Verdana, Arial, Helvetica, sans-serif"> <font size="2">Enter an
expression:</font>
<INPUT TYPE="text" NAME="expr" SIZE=15 >
<INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)">
<BR>
<font size="2">Result:</font>
<INPUT TYPE="text" NAME="result" SIZE=15 >
<BR>
</font>
</FORM>
<HR>
<P> <font face="Verdana, Arial, Helvetica, sans-serif"><B>Example 5: a script
with a form and event handler attribute within a BODY tag.</b>
<!--------- Start Example Code ----------><XMP>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers
function checkNum(str, min, max) {
if (str == "") {
alert("Enter a number in the field, please.")
return false
}
for (var i = 0; i < str.length; i++) {
var ch = str.substring(i, i + 1)
if (ch < "0" || ch > "9") {
alert("Try a number, please.")
return false
}
}
var val = parseInt(str, 10)
if ((val < min) || (val > max)) {
alert("Try a number from 1 to 10.")
return false
}
return true
}
function thanks() {
alert("Thanks for your input.")
}
// end hiding from old browsers -->
</SCRIPT></HEAD>
</font>
<FORM NAME="ex5">
<font face="Verdana, Arial, Helvetica, sans-serif"> <font size="2">Please enter
a small number:</font>
<INPUT NAME="num"
onChange="if (!checkNum(this.value, 1, 10))
{this.focus();this.select();} else {thanks()}">
</font>
</FORM>
<P> <font face="Verdana, Arial, Helvetica, sans-serif"><B>Example 5 page display.</b>
</font>
<P><font face="Verdana, Arial, Helvetica, sans-serif"> <font size="1">Enter a
number in the field and then click your mouse anywhere OUTSIDE of the field.
Depending on what you enter, you will be prompted to enter another number, or
thanked. </font>
<SCRIPT LANGUAGE="JavaScript">
function checkNum(str, min, max) {
if (str == "") {
alert("Enter a number in the field, please.")
return false
}
for (var i = 0; i < str.length; i++) {
var ch = str.substring(i, i + 1)
if (ch < "0" || ch > "9") {
alert("Try a number, please.")
return false
}
}
var val = parseInt(str, 10)
if ((val < min) || (val > max)) {
alert("Try a number from 1 to 10.")
return false
}
return true
}
function thanks() {
alert("Thanks for your input.")
}
</SCRIPT>
</font>
<FORM NAME="ex5">
<font face="Verdana, Arial, Helvetica, sans-serif"> <font size="2">Please enter
a small number:</font>
<INPUT TYPE="text" NAME="num"
onChange="if (!checkNum(this.value, 1, 10))
{this.focus(); this.select();} else thanks();">
</font>
</FORM>
<HR>
<font face="Verdana, Arial, Helvetica, sans-serif">
<!---------------------------------------------------------------->
<a name="C3"></a></font><a name="C3"> <font face="Verdana, Arial, Helvetica, sans-serif"><b>Tips
and Techniques </b></font></a>
<P><font face="Verdana, Arial, Helvetica, sans-serif"> <font size="1">This section
describes various useful scripting techniques. </font></font>
<P> </p>
<font face="Verdana, Arial, Helvetica, sans-serif"><b>Updating Pages</b></font>
<P><font face="Verdana, Arial, Helvetica, sans-serif"> <font size="1">JavaScript
in Navigator generates its results from the top of the page down. Once something
has been formatted, you can't change it without reloading the page. Currently,
you cannot update a particular part of a page without updating the entire page.
However, you can update a "sub-window" in a frame separately. </font></font></p>
<b><font face="Verdana, Arial, Helvetica, sans-serif">Printing</font></b>
<P><font face="Verdana, Arial, Helvetica, sans-serif"> <font size="1">You cannot
currently print output created with JavaScript. For example, if you had the
following in a page:</font> <xmp> </font>
<P><font face="Verdana, Arial, Helvetica, sans-serif" size="1">This is some text.</font><font face="Verdana, Arial, Helvetica, sans-serif">
<SCRIPT>document.write("<P>And some generated text")</SCRIPT>]]>
And you printed it, you would get only "This is some text", even
though you would see both lines on-screen.
Using Quotes
Be sure
to alternate double quotes with single quotes. Since event handlers in HTML
must be enclosed in quotes, you must use single quotes to delimit arguments.
For example <![CDATA[ </font>
<FORM NAME="myform">
<font face="Verdana, Arial, Helvetica, sans-serif">
<INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!"
onClick="window.open('stmtsov.html', 'newWin', 'toolbar=no,directories=no')">
</font>
</FORM>
<font face="Verdana, Arial, Helvetica, sans-serif">]]>
Alternatively,
you can escape quotes by preceding them by a backslash (\).
Defining Functions
It is always
a good idea to define all of your functions in the HEAD of your HTML page. This
way, all functions will be defined before any content is displayed. Otherwise,
the user might perform some action while the page is still loading that triggers
an event handler and calls an undefined function, leading to an error.
