Javascripe Electronic Notebook
HTML/Javascript Development
by Martin E. Meserve

   Home | HTML/Javascript Development  

JavaScript®
Electronic
Notebook

Place your mouse pointer over any of the catagories above, for an active menu of their contents.

Click to view the
Resource Credits

Steves free web site templates

The HyperText Markup Language (HTML)

This web page is not ment to be a tutorial on writing web pages. There is far to much to HTML and there are many, very good, tutorials already on the net. Just do a Google search on Tutorial HTML to find all the information you can stand on the subject. A good choice might be W3 Schools For the latest HTML specifications go to W3C.

A basic web page is written in a language called HTML (HyperText Markup Language) and, as the name indicates, it's a Markup Language. Markup Languages have been around for over 30 years and were very popular as word processors. My first encounter with a markup language was with one called RunOff, that ran on the Digital Equipment Corporation PDP-11/VAX series of computers running the RSX-11M operating system.

A web browser is then a markup language processor/display. Older markup language systems used a separate program for processing and another one for display. The web browser combines the two operations. The web browser accepts HTML as input and adjusts the display based on the markers found in the HTML text file. HTML uses the left (<) and right (>) carets to enclose marker commands. When a command is encountered, it is in effect until it is shut off.

A command can be shut off implicitly, by issuing another command that overrides the previous command, or explicitly, by issuing the same command with a forward slash (/) in the marker. The simplest example of this might be the HTML marker itself. Every HTML document starts with a line that includes <HTML> as the first line in the document and </HTML> as the last.

A web browser is, of course, a lot more than a HTML processor/display program. Over the years the developers have packed a lot of features in the web browser. Although I use a simple text editor to create all of my web pages, browsers like Netscape contain an editor complete with a spell checker.

Just for example purposes, here is the text for a very simple web page. You can cut and paste the listing below into an editor, like Notepad, save it to disk with the extension .html, and then open it up with a web browser. You can also just click on this link to view it. If you do view it, notice that the lines that lines in the <HEAD> structure and the lines that are enclosed with <!-- and -->, do not show up in the browser. The lines enclosed with <!-- and --> are considered comment lines and are ignored for processing purposes. The ones in the <HEAD> structure read in and used in the background for page definition.

<HTML>
<HEAD>
<TITLE>This text winds up in the window title bar</title>

<!-- Load an external JavaScript function(s) -->
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="function.js">

<!-- Include, in line, a JavaScript function(s) -->
<script type="text/javascript">
function SomeFunction (Parameter_1, Parameter_2, ...) {
<!-- -->
<!-- JavaScript Code -->
<!-- -->
}
</script>
<style type="text/css">
<!-- Style Definitions go here -->
</style>

</head>

<!-- This defines the overall page appearance -->
<BODY ALINK="#0000FF" BACKGROUND="lightppr.gif" BGCOLOR="#EFEFEF"
LINK="#0000FF" TEXT="#000000" VLINK="#0000FF">

<!-- In this area is the web page text and pictures. It will -->
<!-- contain table constructs, lists, links, paragraphs, etc.. -->
<CENTER><H1>Level 1 Header, Centered</H1></CENTER>

<!-- This construct creates paragraph with a link that -->
<!-- will take you back to the page you just came from. -->
<P align=center>Click on
<a href="html_javascript_dev.html#Example_Return" ><B>this link</B></a>
to go back to the development description page.</P>

<!-- These definitions end the page. -->
</body>
</html>

Using JavaScript with HTML

You have undoubtedly heard references to Java® and JavaScript® by now. They are two very different languages and are used for very different purposes. There is no Java® imbeded in any of my web pages. I can develop in Java® but I don't find it necessary for this work. Again, just like the HTML section, I am not creating a tutorial. There are many fine tutorials on the net and many books available. However, I will give you some examples so that you understand a little bit about what is behind the development of what I call my JavaScript Electronic Notebook.

JavaScript® is very simply a programming language that allows you to interface directly with the displayed web page. The web page is considered an object and entities withing this object can be read/written by proper referencing. If you have some background in object oriented programming it would make it easier to understand.

There is a full suite of math and string manipulation functions allowing you to perform whatever task you need. Using the first example and expanding on it we would need to create a <FORM> structure and then give it a name. You can have multiple <FORM> structures in your web page as long as they don't overlap and they have different names. Having one, or more than one depends on your web page. On many of my web pages input data is defined at the start of the page and then used throughout the rest of the page. In that case I would use just one big <FORM> structure. However, I also have several pages that contain unrelated pieces of data. Here I create multiple <FORM> structures so that I can deal with them as separate objects. The structure of a <FORM> is below and is contained within the <BODY> structure.

<form name="Form_Name">
<!-- HTML code that contains other referenceable objects -->
</form>

To better illustrate the referencing of a <FORM> structure from a JavaScript® function, here is another HTML web page that very simply addes two numbers together. The page contains three text boxes. Two for input data and one for output data. As with the first example, you can also just click on this link to view it.

The important thing to notice here is the dotted notation used to reference the <FORM> structure objects:

document.[Form Name].[Object Name within the Form].[Object Element]

The "value" element is just one of the <FORM> structure object's elements. As another example, you could adjust the size of the text box by referenceing the "size" element:

document.Add_A_and_B.C.size = 10;

<HTML>
<HEAD>
<TITLE>This text winds up in the window title bar</title>

<!-- JavaScript function to add two numbers on the web page. -->
<!-- Note that when getting the input numbers you use the -->
<!-- built in function "parseFloat()" to insure you get the -->
<!-- number as a number, rather than a string. -->
<script type="text/javascript">
function Add_A_B() {
// Get A from the web page
Input_A = parseFloat(document.Add_A_and_B.A.value);
// Get B from the web page
Input_B = parseFloat(document.Add_A_and_B.B.value);
// Add them together
Output_C = Input_A + Input_B;
// Output the data to the web page
document.Add_A_and_B.C.value = Output_C;
}
</script>

<style type="text/css">
<!-- Style Definitions go here -->
</style>

</head>

<!-- This defines the overall page appearance. -->
<!-- The "onload" operation executes the JavaScript program -->
<!-- when the page loads. -->
<BODY ALINK="#0000FF" BACKGROUND="lightppr.gif" BGCOLOR="#EFEFEF"
LINK="#0000FF" TEXT="#000000" VLINK="#0000FF">

<!-- Put a header on the web page. -->
<CENTER><H1>Add two numbers, A and B and output C</H1></CENTER>

<!-- Create a table with three text boxes, two for input and -->
<!-- one for output. -->
<P align=center>Change the input data by clicking in the text box,
enter your numbers, and<BR>then click outside the text box. The output
data will be recalculated immediately.</P>

<form name="Add_A_and_B">
<table border=5 align=center>
 <tr>
  <th>Input A
  <th>Input B
  <th>Output C
 <tr>
  <td><input type="text" name="A" value="1" size="6" onblur="Add_A_B();">
  <td><input type="text" name="B" value="1" size="6" onblur="Add_A_B();">
  <td><input type="text" name="C" value="" size="6">
</table>
</form>

<!-- This construct creates paragraph with a link that will -->
<!-- take you back to the page you just came from. -->
<P align=center>Click on
<a href="html_javascript_dev.html#Example_Return" ><B>this link</B></a>
to go back to the development description page.</P>

<!-- These definitions than end the page. -->
</body>
</html>

JavaScript Function Libraries

The example code is very simplified. The JavaScript® is included right in the HTML code, so you only need one file for everything. This works great for small pages that don't require a lot of calculations, but when you start dealing with larger pages and lots of calculations it becomes very clumsy.

A cleaner approach is to split the HTML and JavaScript® into separate files. In the header of the HTML you can simply reference the JavaScript® file to read it in.

<!-- Load an external JavaScript function(s) -->
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="function.js">

For most of my JavaScript driven web pages I usually specify a program that is designed specifically for the current page. I then specify several libraries. These libraries contain multiple functions that I use for formatting various electronic quantities. Within my main program I only deal with an electronic value in it's basic form, like Farads or Ohms or Volts. However, for output purposes I may need to use Micro Farads or Pico Farads. With the libraries all I need to do is call one of my library functions.

I have three main libraries and a fourth that is mainly used for debugging purposes.

lib_e.js

This library contains electronic value formatting functions. For example, the function R_Scale() takes a resistance value and converts the output to Ohms, K Ohms, or M Ohms as the case may be. By default, it rounds to 3 decimal places. The function R_Format() allows me to specify the number of decimal places and whether I want the word "Ohms" or not. The "K" or "M" will still be used.

lib_m.js

This is my math library. There are a lot of built in math functions, so this is just to fill in the gaps. For example I have a rounding function where I can specify the number of decimal points and a Log base 10 function. JavaScript® only provides a natural Log function. But probably the most useful ones are the ones that convert dimensions. The function DFTtoFTIN( DFT, FRIN, F_Res ) allows me to convert Decimal Feet to Feet-Inches. The parameters allows me to control rounding to the nearest inch (FRIN) and the output resolution, i.e. the nearest 1/4, 1/8, 1/16, 1/32, or 1/64th of an inch. There are several more functions that handle other situations.

lib_c.js

This library contains functions to generate some catalog listings. Several of the web pages use the function that lists the B&W Prewound Coil Catalog.

lib_d.js

This library is usually only used during the development stage of a web page. It's handy sometimes to be able to list intermediate output from loops or calculations. The library contains functions that allow me to do this in a separate window that updates automatically as I progress in my development.

My Amateur Radio Biography

What's New On My Web Site

Contact Me

Web Site Map

Developing In HTML and JavaScript

Web Server Information

Web Browser Compatability