Introduction to JavaScript

Introduction

JavaScript is a scripting language designed and first implemented by Netscape (with help from Sun Micro systems). Netscape first introduced a JavaScript interpreter in Navigator 2. The interpreter was an extra software component in the browser that was capable of interpreting JavaScript source code inside an HTML document. This meant that Web page authors using no more than a simple text editor could place special instructions or programs directly inside Web pages to make them more dynamic and interactive. For example, JavaScript can be used to:

• validate user input in an HTML form before sending the data to a server;
• build forms that respond to user input without accessing a server;
• change the appearance of HTML documents and dynamically write HTML into separate Windows;
• open and close new Netscape windows or frames;
• manipulate HTML "layers" including hiding, moving, and allowing the user to drag them around a browser window;
• build small but complete client side programs.

The definition of the JavaScript language and the ability of the Netscape browser (and others..) to process it are still evolving. As the language grows, and Netscape, Microsoft, and others issue new versions of their browsers, programmers are discovering new and exciting things they can do with JavaScript and Web pages.

Advantages of JavaScript

JavaScript gives web authors an unprecedented degree of control over the behavior of Netscape and the behavior of their documents. You can do things with 20 lines of JavaScript that will significantly reduce the load on your server, give the user better feed back, and enhance the appearance of your web pages. JavaScript is often the most efficient solution to many Web authoring problems. JavaScript is also an easy language to get started using. With little more than a text editor a few helpful websites and some interest it is possible to produce some but useful scripts.

Disadvantages of JavaScript

The first browser that reliably implemented JavaScript was Netscape 2.02. Since then, new features have been added to the language and have been supported by later versions of Netscape's browsers. Different versions of Netscape will behave differently depending on the language features you use. It is possible to write JavaScript programs that use advanced JavaScript features but do not cause problems (JavaScript errors) on older browsers. However, doing this is can be a complex and labor intensive process. Unfortunately, even the same version of Netscape may behave differently depending on the operating system it is run on. The language is very new and still evolving. Few software development tools exist to help you write and debug your scripts. And while you can do a lot with JavaScript, some things like animation, scrolling/animated banners and notices, and complex programming are often better done using animated GIFs, Netscape Plugins such as Flash, or Java applets.

To make matters more complicated, Microsoft's support for JavaScript (they call it Jscript) in Internet Explorer has been evolving at a different pace than Netscape's. And while Microsoft has done a reasonable job of implementing the JavaScript language they have decided to introduce differences in how the language interacts with the more recent and advanced methods for manipulating Web pages and responding to user input loosely referred to as dynamic HTML. The growing market share of Internet Explorer and these differences have made it difficult for anyone to reliably use the more advanced features of dynamic HTML on the Web.

From a scripter's perspective this situation is quite discouraging. It will take a number of years before a standard for dynamic HTML/JavaScript is in place and the vast majority of the browsers on the Web completely support the standard. Also bad is the fact that so many of the different browser versions have serious bugs in how JavaScript interacts with HTML objects. Documenting these and working out code work around could easily occupy a small group of people full time.

The Difference Between HTML and JavaScript

When the browser is reading in an HTML document it needs to be able to determine what text is HTML and therefore what to display in the browser window, and what text is JavaScript source code to be interpreted and executed. One way to let a browser know that part of an HTML document is JavaScript is to enclose it inside the HTML <SCRIPT></SCRIPT> tags as illustrated above. A browser that knows how to interpret JavaScript will attempt to interpret text inside the script tags while reading and displaying HTML elements correctly.

Script tags are most often placed inside the head or body tags but may also be placed inside other elements. Not every version of every browser correctly interprets JavaScript code when script tags are placed inside other HTML elements such as table data cells.

JavaScript Statements and Source Code

The JavaScript text is often referred to as "source code" or just "code" and is made up of statements. In the example above these two JavaScript statements:

document.write("<P>Script tags can be placed ")

document.write("in the Head of an HTML document.</P>")

write some text, consisting of an HTML paragraph, into the Web page being loaded by the browser. The first statement writes the first half of the paragraph and the second writes the last half. A full description of the parts of these statements is provided later but the net effect is to make the text:

<P>Script tags can be placed in the Head of an HTML document.</P>

part of the HTML document. Use the View Page button above to see what happens when you load a page containing this script into a Web browser. 

Simple Statements

Here is a simpler JavaScript statement:

a = 2 + 3

The JavaScript interpreter will read in this line of text (or source code) and interpret it. The first thing it will do is evaluate the right hand part of the statement after the " =". This is the expression 2 + 3 which the interpreter will evaluate to the number 5. The next thing it will do is place the number 5in the variable named a.

On its own, adding two plus three to get five and storing this number in a storage location named ais not very exciting. But it does give an example of a simple JavaScript statement that contains a simple expression. Statements can be more complicated and we will often need to look closely at the expressions within them.