<%response.buffer=true%> <% yere = year(date()) Response.Expires = 0 %> JavaScript Intro
<resources>
  spacerspacer

JavaScript Intro

JavaScript In Perspective: JavaScript is a predominantly "client side" scripting language used for a large variety of tasks, such as form validation, event handling (such as rollovers), DHTML and more. JavaScript was first created by the developers of Netscape, and has been the client side scripting language of choice, since it is the most universal.

JavaScript Is A Scripting Language: JavaScript code (on the client side) is embedded directly into the HTML page, usually in the <head> tag. Scripting languages are different than compiled languages, because the code is read, and compiled on the fly, making the code inherently slower than a compiled language. Scripting languages however can be more easily changed with a simple text editor, and do not need to go through the compilation process. Scripting languages are usually sufficiently fast for web pages.

Client Side vs. Server Side Scripting: JavaScript is capable of being used on the server or the client side of web scripting. Server side scripting is used for interaction with the user, and is frequently used to create dynamic pages by interacting with a database. Client side scripting is designed to run on the user's machine, and as such is cut off from the server while it is running. Nevertheless, any work that can be done on the client is best done there, as any processing there takes a load off a busy server. Form processing, navigation and DHTML all benefit from client side JavaScript. This class will focus almost entirely on client side JavaScript.

Browser Differences : How client side scripting is handled can depend on the browser involved. With client side scripting, the JavaScript is run by the browser currently being used to view the web page. There are differences in how browsers are designed, and therefore differences in how JavaScript is processed. One such difference appears in how the document object model is handled.

JavaScript Formatting: JavaScript can be inserted in various places in an HTML page, usually in the <head> tag.  JavaScript must reside inside <script> and </script> tags.  Usually the scripting language should be specified, however since JavaScript is usually the default client side scripting language, this may not be necessary.  The format of a typical JavaScript looks like this:

<script language="JavaScript">

    //Code goes here

</script>

Notice the comment tag (//Code goes here) that is inserted in the text. The double slashes indicate that no code will be executed beyond that point on that particular line of code.

Any text following "//" on a line (until the lines end) is considered a comment, and not executed. You may also use the characters /* and */ to contain a larger comment, and this comment can span multiple lines.

Since JavaScript is usually the "default" client side language, code may run just fine without indicating language="JavaScript". It is advised that you insert the language indication anyway. It is also advised NOT to indicate the JavaScript version you may be addressing as the browser will have more flexibility in trying to run your code if you are not specific.

Keywords are words that have special meaning in JavaScript. These words must be used in accordance to JavaScript rules and can't be used as variable or function names. Some common keywords are break, do, else, for, this, true, false, if, var, void, null, return, while, function, in and switch. If we are tempted to use a word that logically is very close to a keyword, the suggestion is to attach the prefix "my" to it, ie: myFunction.

Functions are re-useable sections of code. Some are built into the JavaScript engine and the user can create their own. Usually a function is designed to change or effect an item that is passed into it.

JavaScript is case sensitive on variables or functions you create. All keywords are in lower case. JavaScript ignores white space, and line breaks. Use a semi-colon to indicate the end of a complete command (statement).

Identifiers: Variables and functions are called identifiers. Identifiers usually consist of letters and numbers, but must not start with a number. 

Camel (or Pascal) case is a convention in which the first letter of the first word of an identifier is lower case, and each significant word in the identifier is upper case afterward. For example: myNewFunction. This is common in JavaScript.

 Data Types: Numerical data is entered in JavaScript without quotations around it, while alphanumeric data (hereafter called string data) needs to be inserted with quotes. JavaScript makes certain assumptions about the specific "type" of data, and we need to be aware of the differences. There are 3 basic types of data in JavaScript, strings, numbers and booleans.  While the JavaScript engine is processing, it will give it's best guess as to the data type involved.  In general, any number that can be used in a calculation is considered numerical.  An address number, like a zip code, would be a string. 

Strings: Strings are sequences of alphanumeric data, for instance a proper name.  Strings are enclosed between single or double quotation marks.  Quotes can be nested.  Strings can be "concatenated" (connected) to each other with an operator called + (the plus sign).  This operator is also the symbol for addition, if the data involved are numbers.  Below is a simple demo of this:

<script language="JavaScript">

myTotal = 2 + 2;

alert("My name is" + "Bill Newman");

alert("My total is " + myTotal);

</script>

 Note that the above example uses a "function" or specialized bit of code called "alert" that prints the results of our JavaScript to a special text box that appears on the browser's screen.  Using the method of putting your data into alerts is on way to troubleshoot.

Variables: To be able to interact with the user, the data they give us (and data we get from other sources) needs to be stored in the code while we process it. The storage places are called "Variables", since the data inside can vary. Typical storage of a variable looks like:

<script language="JavaScript">

var myName= "Bill";

</script>

In this case, the name "Bill" is stored inside the variable. The source of this info could have been typed in by a user on a form, triggered by a program based on the time, the previous page the user was on, etc.

Below is an example that uses variables, and prints a number to the screen using a different function called document.write, which writes to the screen, similar to using straight HTML:

<script language="JavaScript">

var firstNum= 1;

var secondNum=23;

var myName="Bill";

var myAnswer = ""; //Initialize a variable to store the answer

myAnswer = firstNum + secondNum;

document.write("The name of the user is " + myName + " and the answer is " + myAnswer);

</script>

Document Object Model: The elements that make up an HTML document can be put to various purposes by JavaScript.  The way that an HTML document is navigated is by a structure called the Document Object Model (DOM).  The DOM allows us to read down to a part of an HTML document and either read or change data.  You can call out the object by it's exact name, or by climbing the DOM "tree" elements sequentially.

Event Handlers: Actions by the user can be captured and used as a trigger for actions taken by JavaScript. The mouse clicks and mouse hovers, etc. are called "events", and the JavaScript "handles" or reacts to the actions of the user, hence the phrase "event handler".

The most common kind of event handler in a typical page is a "mouse over", wherein an image is "swapped out" (changed) when a user hovers the mouse over an image. JavaScript is inherent in the browser, meaning that certain events can trigger JavaScript without even calling out a script tag. The simple "mouse over" example code below simply (although inefficiently) handles a mouse over event:

<a href="mypage.htm" onMouseOver="document.myImage.src='images/on.gif'"
onMouseOut="document.myImage.src='images/off.gif'"><img src="images/on.gif" name="myImage"><a/>

EXAMPLE!

Notice that this is example is extremely inefficient, as the "swapped" image is not loaded into the browser until the user actually hovers the mouse over the image. We will learn later how to "pre-load" all possible images when the page is loaded to speed up the user's experience.

   
Print this Page Back To Top

2000- <%=yere%> newMANIC INC, All rights reserved