Using JavaScript in HTML

JavaScript can be embedded in an HTML document in two ways:

The SCRIPT tag

A script embedded in HTML with the SCRIPT tag uses the format: <SCRIPT> JavaScript statements... </SCRIPT>

The optional LANGUAGE attribute specifies the scripting language as follows:

<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.

<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: <!-- 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.

<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.

<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.



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: <INPUT TYPE="button" VALUE="Press Me" onClick="myfunc('astring')">