The World of JavaScript

HTML is a powerful tool and has the capabilities to accomplish a lot of interesting things, however it does have limitations. There are many products and programming languages to help add to HTML to add more functionality to web pages. It is likely that you have heard of some of these: CGI, PHP, ASP, VBScript, and of course JavaScript. Each tool is designed to address different programming needs. They do all however still rely on HTML to move around through the world wide web.

You could say that the Hypertext Transfer Protocol (HTTP) is the information superhighway, and HTML represents the various "vehicles" that travel ont he superhighway. These vehicles come in numerous shapes and sizes, and they carry different types of payloads, but they all have a comon bond. HTML is the foundation of the Internet, and JavaScript was was designed to enhance that foundation. At their HTML documents by using two special tags: <script> </script>. The text that appears between these tags is to be interpreted as part of a Script program, in our case a JavaScript program, rather than as a literal information to be displayed on the screen.

Let's Begin JavaScript

The first thing you need to know is that JavaScript is not Java. But that does not mean that JavaScript is not a powerful programming language.

Java is a programming language that must be compiled before it is ran. When you compile a program, and executable file is created, and the excutable file is what you would use in Java. Java is also ran on the Server and not on the Client or Users computer.

JavaScript on the other hand is an interpreted language. This means that it is interpreted and not compiled each time it is ran. The user's browser is the interpreter. Therefore JavaScript is ran on the Client of the User's Computer and is not ran on the Server. The JavaScript is interpreted just like the HTML is interpreted by the web browser.

Scripting

To begin we need to recall HTML coding. JavaScript or any other scripting language needs to be placed between the <SCRIPT> tags in HTML </SCRIPT>. The Primary purpose of JavaScript is to generate text that will be inserted into the standard HTML text stream. JavaScript is essentially made up of a number of invisible entities, called objects, that can contain a well-defined set of capabilities. In order for JavaScript programmers to make use of these capabilities, they must call upon the services of one or more specialized functions, known as methods, within those objects. The way in which a method is invoked is for the programmer to type in the name of the object, folloed by a period or the dot operator, followed by the method name.

Let's begin with a simple script:

Isn't that simple. I know you are saying, "But I can do that with HTML, right. And yes you can, but remember this is just the beginning. Let's decipher the code:

document.write ("Hello World Wide Web!");

The object in the above code is the document. Document stands for the JavaScript Document. Write is the Method that you are accessing from the JavaScript Document object. Write is the built-in function, to write the data to the HTML text stream that the browser will interpret.

You cannot include HTML inside the <script> tags, however you can use the document.write to include HTML such as:

document.write("<h1> Welcome </h1>");

The HTML must be included inside the quotes for the text. Another way to format your JavaScript text is to include the HTML on the Outside of the <script> tags:

Conditions

Now you have learned some very basic JavaScript, now you are ready to learn some conditional statements in JavaScript. For instance every programming language has its version of an if statement. JavaScript is no different, see below:

If you need to include false statements as well:

If you look HERE for the conditional operators you can use in the conditions. We will run through an example in a few minutes.

Let's learn another topic real quick before we show an example of the if statement structure. Let's learn how to determine which browser the user is using. We will use the navigator.appName object and property. Navigator is another way of saying the browser, and appName is just asking for the Name of the browser. Since we are using client side scripting, there is no problem in determining what browser the user is using. Let's now try to determine in an If statement which browser the user is using:

Click HERE to see the results.

We can also use a pop up box (alert box), and access the status bar of the users web browser. To create a pop up box, or as VB would call it a Message Box, you will use the alert function. This a built-in function of JavaScript. So let's copy the same code, but this time will include a pop up window for each condition choice. We will also access a new object called the Window, or the current browser Window. Then the property we will access is status, meaning the status bar.

Click HERE to view the results.

Wow, we have learned a lot in such a short time, but we have also just barely scratched the surface of possiblilities of what JavaScript can do.

Roll Over (download images here)

Let's try another simple script. You may use your images, or here are some Images you can use. These are in a zip file, so you will need a zip program to unzip this file to use the images.

In order to do a rollover, you will need to use the event called onMouseOver and onMouseOut. onMouseOver, of course, is when the user places the mouse Over the object. onMouseOut is triggered when the user moves the mouse off of the object. For this we can display a blue arrow when the page loads, and a red arrow when the user places the mouse over the image of a blue arrow. If you did not download the images above, all you need are two different image files. Here is the code:

Click HERE to view the results.

Now let's review the code to make sure you understand it. First inside the script tag there are some new concepts here. The first line:
            blueArrow = new Image;
This is defining the object blueArrow as an Image object. The new keyword is reservign a space in memory for the Image object blueArrow. The next line of code I'm sure you can guess:
            blueArrow.src = "bluearrow.gif";
This is assigning the file "bluearrow.gif to the source of the Image Object blueArrow.
I am going to jump down to the image tag in the code now. The reason I am jumping all the way down there is so it will be easier to describe the actions going on in the anchor tag.
            <img src="bluearrow.gif" name="arrow" width=320 height=200>
This is simple HTML code. It is simply an image tag that is identifing an image for the page. What it is doing is defining the "bluearrow.gif" as the image that will load first, or when the page first loads. The next attribute in the line, is the name attribute. This is assigning the name "arrow" to the Image file. Of course you already know what the width and height attributes are doing.

Now we will discuss the anchor tag:
            <a href="page1.html"
                  onMouseOver= "document.arrow.src = redArrow.src"
                  onMouseOut="document.arrow.src=blueArrow.src">
OK, you may have already guessed....the onMouseOver event is being triggered when the user moves the mouse over the Image file. It is then assigning the redArrow Image Object to replace the original Image inside the image tag with the Source of the redArrow Image Object, which of course is the "redarrow.gif" file.

The onMouseOut is triggered when the user in turn moves the mouse off of the image file. It hen is replacing the redArrow Image Object with the blueArrow Image Object, which is of course "bluearrow.gif".