Endsley - Basic JavaScript

Fred Endsley

Using Basic JavaScripting

This is intended as a very basic introduction to JavaScripting. Once you have an understanding of the scripting structure, you should be able to copy and use the script examples provided here for a variety of useful effects. There are also many other tutorials and scripts available on the web. My thanks to Kiyoshi Morikawa for his help in assembling some of these scripts.

For those who are already familiar with HTML, JavaScript can provide a relatively easy means for extending and elaborating custom interactive and dynamic features within a web site. Javascript is a simplified Object Oriented Programming (OOP) language which allows access to some of functions of Java, a much more difficult and complex programming language.

Object Oriented Programming lets the user define "functions" at the top of a program, and later use those functions from different places throughout the program. This is considerably more efficient, because it saves rewriting or redefining each function every time it is referred to (as is the case with 'procedural' programming like Basic or C).

Objects
Within the parameters of JavaScripting, each web page document and each item in it (links, images, buttons, forms, tables, etc.) is an object which has certain properties (specified in HTML as attributes). For example, the text color for a document could be specified or changed within a JavaScript by writing the line:

document.text = "#C82FD9"

Two important things to keep in mind about using JavaScript:

It is very case and spelling sensitive.
It doesn't work with all browsers or with older versions of Netscape and Explorer, and because Microsoft has implemented it's own different version of Java, JavaScripting can have cross-platform bugginess. Test your pages on both platforms.

Methods
Most objects have a variety of things that they can do, which are called methods. For instance, a faucet can turn on or off, be hot or cold, etc. A document can be opened with the method:

document.open( )

"Your content" can be written into a document with the method:

document.write("Your content")

Both .open( ) and .write( ) are methods of the object: document. This may seem overly simplified and redundant of functions already performed easily by HTML, but it is the basis for more enhanced control of web pages using JavaScript.

Events
"Events" trigger functions to enact as you have previously defined them. A button "event" (that is, an event triggered by pushing a button) could be partially defined by writing:

onClick = "myFunction( )"

The onClick event will run the function "myFunction( )" when the user clicks on the button object it is attached to. Other events that can trigger functions include: OnMouseOver, OnMouseOut, OnFocus, OnBlur, OnLoad, and OnUnload.

Functions
A function is defined by a variable (often the method and/or 'value' given to an object), followed by the object or activity the variable will affect. Each function must be given a unique name by the user which can be anything as long as it is a single or concatenated expression, and is spelled exactly the same each time it is referred to. A function could be written like this:

function Message (textstring) {
alert (textstring) }

In this example, I have called for a function, arbitrarily named it 'Message', given it a value (textstring) in parentheses, and specified an object/activity for it to be applied to { alert (textstring) } contained in squiggly brackets.

Functions are generally written within the <HEAD> </HEAD> section of an HTML document, surrounded by the Script tags:

<HTML>
<HEAD>
<TITLE>JavaScript Setup</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function Message (textstring) {
alert (textstring) }
</SCRIPT>
</HEAD>

At this point, JavaScript is the only scripting language recognized by browsers within the <SCRIPT > </SCRIPT> tags, so you could leave the LANGUAGE="JavaScript" attribute out. However, there could be other languages recognized in the future, so it's not a bad idea to include it.

Also, because old browsers will not understand (or see) the <SCRIPT> tags, you might want to include the "comment" tags to keep your JavaScript from showing up on the Browser as plain text. So the <HEAD> section of HTML document might look like this:

<HTML>
<HEAD>
<TITLE>JavaScript Setup</TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>

The "event" triggers are usually written within the <BODY> </BODY> section of an HTML document, often contained within "object" tags such as links, forms, etc. A simple event based on the function we have written above might be written like this:

<BODY>
<FORM>
<INPUT NAME="userEntry" TYPE=Text>
<INPUT NAME="submit" TYPE=Button VALUE="Push Me" onClick="Message(form.userEntry.value)">
</FORM>
</BODY>
</HTML>

In this case the form has two objects: the textbox and the button. When the user presses the button, the onClick event triggers the function Message (textstring). This causes an "alert" box to be displayed containing the value of the textstring entered in the textbox form "userEntry". It looks and works like this:

Please enter some text here:

There are many more complex and useful JavaScripts available here and throughout the web. Don't be shy!