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

JavaScript Intro

Client Side Language: JavaScript adds dynamic behavior to HTML pages, adding programming capabilities. JavaScript is a predominantly client side scripting language used for a large variety of tasks, such as form validation, image rollovers and fly-out menus. Lately JavaScript has emerged as an even more important piece of a developer's arsenal with the adoption of AJAX, JavaScript can now interact with the server, when it was never able to do this before.

Standardized Language: JavaScript was created by Netscape, and is now the standardized (official) client side language. Once it was standardized, the official name of JavaScript became the much less cool sounding EMCAScript. Contrast this to server side programming (PHP, ASP.NET, etc.) where there is no single agreed upon language. We can therefore learn JS knowing the language we use on the client is the same regardless of the server side code used.

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. The differences can be:

  1. How errors are shown (or not)
  2. How code reacts (or doesn't)
  3. How pieces and parts of the browser are accessed (or not)

When we work with JavaScript, we can access pieces and parts of the browser, including the data currently entered by the user in a form, each open browser window, the address bar or the HTML document itself and all the elements (tags) contained inside.

No Errors Shown, By Design: Because JavaScript errors are so common and disruptive to a user’s experience, most browsers elect NOT to display any JavaScript errors, by default. In order to troubleshoot scripting errors, we use a browser like Firefox, which gives feedback on errors by selecting:

Tools >> Error Console

Case Sensitivity: When creating JavaScript code it is case sensitive, perhaps overly so. If you use a JavaScript function or variable and get even one letter in the wrong case, JavaScript will either throw an error, or will give you unexpected results.

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

Keywords: 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, myName.

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 type="text/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 type="text/javascript". It is advised that you insert the language indication anyway.

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.

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 type="text/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 type="text/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 type="text/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>

Browser Object Model: In order to access pieces and parts of the browser, for example the current window, the address bar or the current document, an objecto model was created to access these pieces programmatically. The collective object model that allows access to all pieces and parts can be called the Browser Object Model (BOM). Contrast this below with the more recently created Document Object Model (DOM) which works exclusively with the actual HTML document.

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.

More To Come: Several of the topics above, the BOM, the DOM, event handlers and JS Fundamentals and more will be covered in further lessons!

   
Print this Page Back To Top

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