It won't hurt...
It may make your web feel better...
Be careful! Don't gulp it!
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 langauge 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.
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 read 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 it to would 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.
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 parts of the screen. We'll learn more about events as we go.
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.
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.
The Internet Connection at MCLI is
Alan Levine --}
Comments to levine@maricopa.edu
URL: http://www.mcli.dist.maricopa.edu/tut/tut27.html