<%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 are much 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.

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 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.

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.

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.

<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>

Refer to chapter 3 for detailed descriptions of variables, data types, and their uses.

Introducing 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" when a user hovers the mouse over the image. The event can be simply (although inefficiently) handled with simple code, that does not need to be inside script tags:

<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: CLICK HERE!

   
Print this Page Back To Top

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