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[
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
document.write("Hello net.")
</SCRIPT>
</HEAD>
<BODY>
That's all, folks.
</BODY>
</HTML>
]]>
Example 1 page display.
Hello net. That's all folks.
Code Hiding
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:
<![CDATA[
<!-- Begin to hide script contents from old browsers.
script tags and statements
// 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>
<BODY>
<BR>
All done.
</BODY>
]]>
Example 2 page display.
All done.
The HEAD tag
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.
Example 3: a script with two functions.
<![CDATA[
<P><HEAD>
<SCRIPT language="JAVASCRIPT">
function PrintRow(name, age, birthday) {
document.write("<TR> <TD>", name, "</TD> <TD>", age, "</TD> <TD>", birthday, "</TD> </TR>\n");
}
function output(head,level,string) {
document.write ("<H",level,">",head,"</H",level,"><P>",string,"<P>")
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P></P><TABLE table border cellpadding=5>
<SCRIPT>
<!--- hide script from old browsers
PrintRow("Fred", 27, "June 17");
PrintRow("Tom", 24, "March 13");
PrintRow("Rebecca", 25, "November 30");
output ("Make Me Big",1,"Make me ordinary.")
// end hiding from old browsers3 -->
</SCRIPT>
</TABLE>
<P>
Thanks.
</BODY>
]]>
Example 3 results.
Thanks.
Quotes
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:
<![CDATA[
<INPUT TYPE="button" VALUE="Press Me" onClick="myfunc('astring')">
]]>