What's New
Dev Tools
Site Map

HTML / WebPage Structure

This page is not intended to be an HTML tutorial, rather, it is intended to describe some aspects of HTML that need to be understand to do JavaScript coding.  The following topics are covered:

1. How to Include JavaScript on a WebPage

1.1 Including JavaScript in HTML Document

Broadly, JavaScript code can be included in HTML in the following ways:

<HR WIDTH="&{barWidth};%" ALIGN="LEFT">
<HR WIDTH="&{computeWidth()};%" ALIGN="LEFT">

Specifying JavaScript within the <script> tags is now shown.

JavaScript is generally included in the Head section of the HTML Page:

JavaScript statements ...

However, JavaScript can be included in the body, if the script is needed to generate contents in the page.

JavaScript statements...

You can include an unlimited number of <SCRIPT> tag sets in the document. In this way, some JavaScript can be used to help generate the page (in the <BODY>) while other JavaScript can be invoked later to react to user input (in the <HEAD>).

1.2 Executing JavaScript immediately after Page is Loaded

To review, JavaScript in the Body will execute as soon as the code is encountered while the page loads. JavaScript in the HEAD will execute when explicitly invoked from somewhere in the body (e.g. a button's onClick event may invoke JavaScript in the HEAD).

Sometimes, you want JavaScript to execute when the page is fully loaded (i.e. when all page objects including images, Java applets, etc. are fully loaded). This is done by specifying an onLoad event in the BODY tag:

<BODY onLoad="setValue('edit')">

In this case, the JavaScript function setValue is invoked (with arg 'edit') as soon as the page is done loading.

1.3 Including JavaScript from a Separate File

The actual JavaScript does not have to be included in the HTML document itself. JavaScript can be stored in an external file with a "JS" extension and included in the HTML document, as shown:

<SCRIPT LANGUAGE="Javascript" SRC="the_script.js"> </SCRIPT>

The external file includes only JavaScript statements (i.e. HTML tags like <script>, </script> are not included in this external file). In the above example, the script is assumed to be in the same directory as the HTML but a URL or file directory location can be specified, as appropriate. When using Navigator, you cannot use Windows notation for a file directory location (i.e. "c:\html\the_script.js"). Instead, use the browser file notation (e.g. "file:///C|/html/the_script.js") for Navigator (IE supports either).

Placing code in external files provides a good way of sharing code amongst pages (i.e. writing reusable functions). Using SRC also provides one level of indirection for someone trying to view the JavaScript code with "View Source". However, a curious web surfer can simply type in the URL specified in the SRC attribute to directly view the JavaScript.

2. Using HTML to Enhance JavaScript Output

HTML tags could be included in JavaScript output statements inside quotes:

 document.writeln("number is" + i + "<br>");

In addition, JavaScript provides a number of built-in functions to add HTML formatting to your output.

// make my_string blink (adds appropriate HTML tags)

Some other notable formatting functions are bold(), fontcolor("color") , italics().

3. Generating HTML elements from JavaScript

In the following example, a button and then a bar are generated using JavaScript:

document.write('<INPUT TYPE="button" VALUE="Confirm Order"
NAME="Confirm" onClick="confirmOrder()">')
document.write("<HR WIDTH=" + barWidth + "% ALIGN='LEFT'>") 

In generating the bar, the width value is supplied by the JavaScript variable barWidth. Alternatively a straight number (like 80%) could have been specified, if desired.

Note: remember that when you generate form elements (like those above), the JavaScript should be placed (or invoked) within the <form> tag set in the HTML. (IE can be more tolerant on this point). The JavaScript itself (within the <form>) must be inside its own <script> tag set.

... back to Development Tools Page

Copyright 1997-2019, Woodger Computing Inc.