JavaScript Introduction

An Introduction to the basics of JavaScript

Overview of JavaScript.

JavaScript is a programming Language for web pages and was originally called LiveScript. LiveScript became known as JavaScript when Sun Microsystems came out with Java and later joined up with Netscape. At this point both Sun Microsystems & Netscape felt that the name JavaScript was a better name to use than LiveScript.

However, confusion still reigns, since we now have Java and javaScript.. These two languages are completely different to each other, sharing only a similar sounding name.

**Main differences between Java & JavaScript.**
JavaScripts can read and placed directly into HTML pages	"Applets" are executed externally, and are not embedded in HTML pages
Easier to understand and use in HTML	Requires a sound programming background to create and use
Object based	Object oriented
Limited capability & features	Wider range of capabilities & features
Can run on on 16 & 32-bit operating systems without penalty to capabilities.	Requires 32-bit operating system to make full use of it.

JavaScript Primer.

The power behind JavaScript is in it's use of functions. Functions are basically mini 'scripts' within the main script that each have a specific purpose or task. Functions should always be defined between the <HEAD> and </HEAD> tags. This allows them to be loaded before the web page has been fully loaded, so that any script on your page will work when the viewer starts to browse.

Functions are defined by first giving each function a unique name by which it can be identified within the script itself. This naming system is case sensitive, so, function Lookup is different to function lookup.

Here's an example of a JavaScript function called expnew. It's sole task is to check the current date system date against the date it is given, and if this date has not been reached yet then it will display an Icon on the web page.

// please keep these lines on when you copy the source ;// Denotes comment lines,
// made by: Nicolas - http://www.javascript-page.com ;works like a REM line in Basic.

var image = "new.gif"                                                       ;Define a global variable called image
                                                                                                                     ;and assign it a value, which in this
                                                                                                                     ;example is a URL for where to find
                                                                                         ;the new.gif picture file

function expnew(when) {                                                  ;Start of our function called expnew
                                                                                        ;(when) = function variable, will hold
                                                                                        ;the date to be checked and compared.

;{ denotes start of function code

when = new Date(when)                                                  ;variable when is defined as a local
                                                                                                                     ;variable and is assigned a date format.

date = new Date()                                                            ;variable date is defined as a local
                                                                                                                     ;variable and is assigned a date format.

if (when.getTime() > date.getTime()) {                            ;if when > date then display the new.gif
document.write("<img src="+image+">")                         ;picture file referenced by the variable
                                                                                       ;image.

}                                                                                                     ;{ denotes end of script code
}                                                                                                     ;{ denotes end of script code
//-->                                                                                                           ;//--> Stop ignoring script code </script>                                                                                                  ;</script> denotes end of script code

Ok, we now have a defined script function and if placed in a html web page will do nothing, since it must now be executed by a specific call to this function we have called expnew.

In order to do this we must place a separate script instruction on our HTML page which must also be enclosed within the <script> or and </script> tags. See below on how we can expand on the starting <script> tag to control which Netscape Browser can execute our script code.

Each time we want the expnew function to be executed we must place the following script code in our HTML page, preferably where we want the Icon to be displayed.

//--> ;//--> Stop ignoring script code

</script> ;</script> denotes end of script code

Here's this script in action..

This "New" Icon expired on 12/20/98
This "New" Icon expires on 7/4/99
This "New" Icon expires on 12/31/99

JavaScript code follows a strict set of rules which governs how you can both design and use it within your web pages. here is a breakdown of these script guidelines....

1. The tag to begin a JavaScript routine is <SCRIPT>. The actual script code is then placed after that tag, and to end the script, you use the </SCRIPT> tag.

Because some web browsers such as Netscape use different versions of JavaScript, it is important to make sure your JavaScript runs only on those versions of Netscape that supports ALL the JavaScript code that you have used. In order to make sure only those browsers capable of running our JavaScript code gets to execute our JavaScript we can expand on the <SCRIPT> tag in the following ways..

<SCRIPT LANGUAGE="JavaScript"> Allows the script to work with Netscape 2.0+. <SCRIPT LANGUAGE="JavaScript1.1"> Allows the script to work with Netscape 3.0+ and not anything below it. <SCRIPT LANGUAGE="JavaScript1.2"> Allows the script to work with Netscape 4.0+ and not anything below it.
In the above example script code expnew, you will see that this script will run in Netscape 2.0 and above.

2. Wether because some Browsers have their JavaScript option switched off or because there are still some browsers out there that cannot execute JavaScript we have the facility to make our JavaScript code 'invisible' to these Browsers. If we couldn't hide our JavaScript from these Browsers then our web pages would display all our JavaScript code instead of being executed as we had planned. Imagine if you had used large amounts of JavaScript code and all this suddenly appeared in your visitor's Browser!. Not a pretty sight..

To hide our JavaScript code we must add  before the </SCRIPT> tag.

3. JavaScript code can be quite complicated to understand, especially if you need to go back to it a week later and need to change or update a part of it. In this situation being able to comment our code is a valuable tool for debugging purposes. JavaScript has two tags which we can use to comment our script code:-

If you want a comment that uses multiple lines, type /* to begin the comment and then type */ to end the comment.

The other comment tag is for single line comments. To use the single line comment method, type // and then type your comments on the same line.

4. Functions make up the core of your JavaScript code. They will most often be given numeric or text data to process and depending on the job assigned to the function, will either perform a task or series of actions based on the data it was originally given or, it will simply perform no action and return the processed value back to where ever it originally came from.

Here is an example of a function that will receive a numeric value and then proceeds to adds 25 to this number and finally it will write out this total value to the web page.

<!--

function add20(i) {

document.write(i + "+20 is " + (i+20))

}

//-->

</SCRIPT>

To execute this function we need this small script code in our web page:-

<SCRIPT>          ;Start of JavaScript Code.
add20(5)            ;Call the add20 function and pass the numeric value (5) to it.
</SCRIPT>         ;End of JavaScript code.

Here is this script in action.

Page by The Sandman
Page Created: 4th February 1999