EGR 199: Fundamentals of Engineering JavaScript Lesson One
	Prabhaker Mateti

Table of Contents

Executive Summary
Background Information

What is JavaScript?
An Example from EGR199 Fall 1999
JavaScript is not Java
JavaScript Language Elements
JavaScript is an Object-Oriented Language
Events

Procedures
Appendix A: Acronyms
Appendix B: Further Reading Links
Achievement Test

This article is a quick tour of  JavaScript, and how it can be used in web pages. It assumes that the student is already familiar with web authoring.  It describes things to do in  a computer-lab session of one to two hours following a lecture of, say, one hour.

What is JavaScript?

JavaScript is a scripting language, a special kind of programming language that makes it easy for the programmer to manipulate (e.g., pop up, close, flash colors) windows, fill in and submit forms, and compute strings. JavaScript can tie other components together or programmed to accept user input.

Full scale learning of JavaScript is as easy/difficult as learning C++, Java or other languages.  But because of the immense popularity of web authoring,  many tools got developed and these make it easy to insert a lot of mechanically generated JavaScript code into web pages.

An Example from EGR199 Fall 1999

Scroll the Marquee Change Background Color New Marquee Old Marquee

Here is an example of JavaScript in action. Move the mouse over the elements of the table at left and see what happens!   (For now, don't mouse over the Scroll the Marquee.) In the Fall 1999, you all did a Web Design project.  The following example of JavaScript is from the associated article Creating Your Own Web Site.  Let us say that the JavaScript you used in that project was at a beginner's level. In this article, and this week's lab we will study the code of this and other examples in greater detail.

JavaScript is not Java

While the names are confusingly similar and both Java and JavaScript are languages designed to make Web pages more interactive, Java and JavaScript are two different things.  Java is full-fledged, compiled application development language.  JavaScript got the "Java" in its name because its syntax is based on Java.  In other words, most statements in both languages are written in a similar manner.  

JavaScript Language Elements

You can view the JavaScript source code of a Web page by pressing the View menu item in most web browsers. 

A variable is a container.  You assign a value to it, which it then "contains" until you change it by another assignment. JavaScript code is shown below in type writer font.  Also, because the code below is meant only as examples and not as part of this web page, you will not be seeing the effect of its execution.

var password = "open sesame";
var answer = prompt("What's the password? ", "");

alert("Aha! Your password is: " + answer);

var the_email = prompt("What's your email address?", "");

var atp = the_email.indexOf("@");

if (atp == -1)
{
   alert("Your e-mail address did not have @ signs in them!");
}


Writing your own functions

A function is a block of JavaScript that can be called when necessary.  Here are two examples.

function fahrenToCelsius(faren) {
    var temp = (faren - 32) * 5/9;
    return temp;
}

function convertTemp() {
 var temp = prompt("what temperature fahrenheit? ","50");
 var celsius = fahrenToCelsius(temp);
 alert(temp + " degrees Fahrenheit is " + celsius + " degrees Celsius."); }

Arrays
Arrays let you store lists of items and also give you access to the images, forms, and form elements of your HTML pages.  For example:

var X = new Array("hickory","dickory");

var e1 = X[0];

var e2 = X[1];

X[2] = "doc";

This creates an array called X and initializes it with two elements each a string, hickory, and dickory. The first element of the array is accessed using its index number, 0. The second element, element 1 of the array, is accessible with X[1]. You can add to an array by assigning something to a specific index of the array: in the example above, I made the third element of the array equal to "doc." Now the array contains "hickory, dickory, doc."

Associative arrays are just like the array above, except rather than using numbers to index elements in the array, you use words.

var phone_book = new Array();

phone_book["sleepy"] = "(203) 555-1234";

phone_book["happy"] = "(203) 555-2345";

var happy_number = phone_book["happy"];

JavaScript is an Object-Oriented Language

JavaScript makes web pages dynamic and interactive primary through something called the Document Object Model.  The DOM represents the HTML document as "objects."  For example if your HTML looks something like this:

<html>
<body>


<form name="myForm">
<input type="text" name="myText">
</form>

<a href="javascript:return true"
onmouseover="var t = wsulogo0.src; wsulogo0.src = wsulogo1.src; wsulogo1.src = t">
<img src="../../images/wsu-logo-xsm.gif" border="0" name="wsulogo0" ></a>


</body>
</html>

then the "document" object would contain an object called "myForm."  You can access the "myForm" object by using "document.myForm."  "myForm" contains an object called "myText," which can be accessed using "document.myForm.myText."  If we wanted to set the value of the "myText" textbox to say "hello," we would use the following JavaScript code:

document.myForm.myText.value = "hello";

Through this method, we can modify nearly every aspect of our HTML document during its presentation in the browser.

Events

Moving the mouse, typing a character, etc are all events.  The browser is made aware of events that are occurring on its screen real estate.  Our example from EGR199 uses the event onMouseOver, whose name is self-explanatory.  JavaScript has numerous events that you can make use of.

Our goal is to create a rather short web page that uses the above constructs and ideas of JavaScript that we learned.   (This is a programming exercise in a language that you are barely familiar with.  So do not despair too easily!)

Start with a new page that includes the table of the The Example from EGR199.   Make changes to this page so that the following modified behavior is evident.

1. Each time you mouse over the Change Background Color the background color of the document must change and remain changed.  The exact color it changes to is your choice.  When you run out of colors, you can cycle to an old color.
2. The switching of the two WSU logos did not use function invocations.  Make two appropriate functions, one for each  onMouseOver, and call them instead.
3. Choose two more logos of your choice from the WSU collection.  And rotate the logos among these four.
4. You will/may encounter run time errors that the browsers catch -- such as what happens when you mouse over "Scroll the Marquee."  Fix this!  Learn to be careful in coding so that these will not occur.

There are no steps listed that describe a recipe of how to accomplish the end result.  Come up with a way of doing that!

 The JavaScript code that exchanged the two WSU logos is

<a href="javascript:return true"
onmouseover="var t = wsulogo0.src; wsulogo0.src = wsulogo1.src; wsulogo1.src = t">
<img src="../../images/wsu-logo-xsm.gif" border="0"  name="wsulogo0" ></a>
<a href="javascript:return true"
onmouseover="var t = wsulogo0.src; wsulogo0.src = wsulogo1.src; wsulogo1.src = t;">
<img src="../../images/wsu_seal_green_xsm.gif" border="0" name="wsulogo1"></a>

You may want to visit the Magical MouseOver Maker (http://javascript.about.com/compute/ javascript/library/weekly/aa013100a.htm). It has a short article and a gadget on how to create the code for a mouse over effect.   See the links below for more detailed descriptions of JavaScript.

Prabhaker Mateti, Creating Your Own Web Site, EGR 199: Fundamentals of  Engineering, Oct 1999.

Thau's JavaScript Tutorial I: http://hotwired.lycos.com/webmonkey/programming/javascript/ tutorials/tutorial1.html  Recommended reading.

Thau's JavaScript Tutorial II http://hotwired.lycos.com/webmonkey/programming/javascript/ tutorials/tutorial2.html  Recommended reading after the above.

JavaScript Guide http://developer.netscape.com/docs/manuals/communicator/jsguide4/index.htm  The authoritative guide.  About 1000 pages.  Listed here for completeness.

 Turn in the printout of your HTML source of the short page you created.