27. A Wee Dose of JavaScript

Just a spoonful of JavaScript...

It won't hurt...

It may make your web feel better...

Be careful! Don't gulp it!

Objectives

After this lesson you will be able to:

Describe the difference between Java and JavaScript
Understand the relationship of JavaScript to other elements of an HTML document
Write the general code for a set of JavaScript instructions
Write a command for a JavaScript "alert" message
Describe the JavaScript object model

Lesson

JavaScript offers you, the web page designer, a way to further enhance the design and functionality of your web pages. Unfortunately a complete tutorial on JavaScript is beyond the scope of this tutorial (but see some of the other references we recommend), but what we will do is give you a taste of what JavaScript can do.

Please be aware of the tremendous differences between Java, a programming langauge, and JavaScript, a scripting language. Too often people use them interchangably. Java was developed by Sun Microsystems as a computer platform independent programming language for creating small applications, or "applets" that could be part of a web page as well as being a stand alone desktop program. Java applets are like small, self-contained programs, that you can use without seeing or even caring about what is inside of them (we will in a later lesson show you how to find and use Java applets).

The downside of Java is that to create your own applets, you must learn a pretty complex programming language or try to use some of the newer software tools that make the coding less difficult. The other downside is that many Java applets can take a disturbing amount of time to download and run, essentially stalling your web page until it "loads" (in our opinion, waiting to load a scrolling banner is not too many notches above the <blink> tag!).

Originally named "LiveScript", JavaScript was developed by NetScape as something quite different. It was renamed because of structural similarities to the Java programming language. To create JavaScript you simply type its commands interspersed with your HTML and the browser follows the commands as it tries to format the web page.

Hopefully by now you have a sense that as a web browser reads in the HTML code for a page, it starts assembling and displaying the page layout from the top down, so that as a page may partially display even as the browser is reading in the later parts of the HTML document. As each HTML code is read in the browser reacts and formats, without asking any questions.

When the web browser encounters some JavaScript code, it starts interpreting it line by line. But the JavaScript code can instruct the browser to do different things under different situations, or build in some functionality that is not set in motion until the user does something on a page. JavaScript can even create HTML content on the fly, so you can have it do something like print a different HTML message depending on what day of the week it is or changing the background to a random color every time you reload the web page.

So think about JavaScript as a way to add a little bit more brains to your web page. While not as difficult to learn as a pure programming langauge like Java, to use JavaScript is to take a step in complexity up from HTML formatting.

In this lesson we will learn a few small doses of JavaScript that you can use right away in web pages. In another lesson, we will see how it can be used to process your web page forms.

Putting JavaScript in its Place

Where Javascript code goes depends on what it needs to do. As we will see, sometimes we will place JavaScript code inside the <HEAD>..</HEAD> of your HTML file. Other times it sits inside your HTML content. And in other instances, it is added to other HTML tags to initiate "events" triggered by the person interacting with your web page.

The basic approach for writing most "doses" of JavaScript reads like:

  <SCRIPT LANGUAGE="JavaScript">
  <!-- hide from JavaScript impaired browsers
  
  // This is a JavaScript comment. It is not interpreted
  
    JavaScript statement1;
    JavaScript statement2;
    JavaScript statement3;
    
  // done hiding -->
  </SCRIPT>
  
  <NOSCRIPT>
    Content for browsers that cannot deal with
    JavaScript
  </NOSCRIPT>

This is the most reliable way we have found to set up JavaScript so that it works well in most environments. All of the functionality is defined by "statements" between the <SCRIPT>...</SCRIPT> tags. The lines shown in red that are inside of these tags protect the code from displaying if the viewer's browser cannot understand JavaScript. Remember that if a browser does not know what the tag <SCRIPT> means, it will ignore it. The lines in red:

  <!-- hide from JavaScript impaired browsers
     :
     :
  // done hiding -->

enclose the JavaScript statements inside an HTML comment tag so they will not be displayed. The browser would march on, ignoring the <NOSCRIPT> and </NOSCRIPT> tags (again, ignorance is bliss) but it will display the content in between these last two tags.

Now if the browser knows JavaScript, it begins interpreting the code line by line. In JavaScript, lines that begin with either <!-- or // are interpreted as comments, and ignored. The browser looks at all of the other statements, which are step by step instructions, and does as it is told to do.

NOTE: Each JavaScript statement must end with a semi-colon (;) which is how the browser knows it is time to do whatever that line told it to do.

JavaScript says Hello

Probably the simplest JavaScript command is one that displays an alert message-- text that appears in a "dialog" box in the middle of the screen that typically causes the computer to beep and requires you to click an OK button to return to what you were doing. For example, see what happens when you click the button below:

The command to make this happen looks like:

  alert('JavaScript here, boss! What do you want?');

Now if we simply inserted this into our HTML file like:

  <SCRIPT LANGUAGE="JavaScript">
  <!-- hide from JavaScript impaired browsers
     alert('JavaScript here, boss! What do you want?');
  // done hiding -->
   </SCRIPT>

The alert message would pop up immediately as the browser read the code, likely not what we want. To see this in action, try this test page.

More typically, as with the button above, you want this JavaScript command to happen when it is triggered by an "event" such as the viewer clicking the mouse or even moving the mouse over different parts of the screen. We'll learn more about events as we go.

Objects

Now we will throw some more programming jargon at you! Don't recoil in horror!

JavaScript references an object model for the web environment. What does this mean? Think of it as a family tree structure that as you read it moves from left to right but really references things structure from most global to more specific.

Huh?

The big "parent" is the "navigator"- it has many different "properties" that describe more or less the web browser you are using, i.e. what kind (NetScape, Microsoft, etc) and version number. Below is the "window" object that describes the properties of one web window, with its own special properties. Next down is the "document" object, that describes information about a particular web page, say its URL, the time it was last changed, how many links there are in the page. And within the document object are many more objects that we will see soon.

So in JavaScript we often have to refer to things by where they are in the object family tree, like:

 window.document.form[3].choices.options[2]

which would refer to some property of "options" contained within something else called "choices", which is part of one "form" inside the document of a window. So from left to right this object model goes from biggest to smallest objects, each one separated by a period. The things in square brackets ([x]) represent arrays, or collections of similar objects, so that the example above, the document has at least 4 forms since we are referring to the 3rd one (it gets confusing because JavaScript starts counting many objects starting with 0 rather than 1!).

Sometimes we can use this type of structure to "test" or get some value from our web page environment, known as properties. Other times, we use this structure to change these values or properties.

Caution Flag

As we continue with these advanced lessons, your task becomes more difficult. Some web browsers, especially older ones, do not support JavaScript, but we have chosen examples of code that should work on a wide range of environments.

Also, JavaScript code is pretty picky! When you are copying the code examples, it is very important to not have extra return characters within a single line of JavaScript code. You will see what we mean in the next lesson.

Check Your Work

This is an introduction, so we have not made any changes to our project.

Review

Review topics for this lesson:

What are some differences between Java and JavaScript?
How are JavaScript statements hidden inside HTML for browsers that cannot understand JavaScript?
What are two ways of writing comments inside JavaScript commands?
How do you write a JavaScript command to display an "alert" message?
What is the importance of the order in which JavaScript objects are written left to right?

Independent Practice

See if you can insert the JavaScript alert command into different parts of your HTML document. What happens if you place two different ones in different parts of your document?

Coming Next....

Doctor JavaScript prescribes your first dose... alert messages that are triggered by mouse clicks plus mouse rollover displays.

GO TO.... | Lesson Index | previous: "Framed Web Sites" | next: "JavaScript: Alerts and MouseOvers" |

Writing HTML: Lesson 27: A Wee Dose of JavaScript
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

URL: http://www.mcli.dist.maricopa.edu/tut/tut27.html