Getting Started with JavaScript

Abstract: A short introduction to JavaScript and the methods of inserting JavaScript in HTML pages. Covers the basic forms of input and output, variables, and expressions.

Introduction

JavaScript is a programming language for making interactive web pages. Java looks a lot like C (a popular programmming language) and supports standard programming concepts like variables, conditionals, loops, functions, and objects.

Events

JavaScript is an event-based language. Most (but not all) JavaScript programs work under the model "when this happens, do something". What are some common events?

• The page loads. [onLoad]
• The reader clicks on a button (or link or ...). [onClick]
• The reader moves the cursor over a link. [onMouseOver]
• The reader leaves the link. [onMouseLeave]
• The contents of a field change. [onChange]

How do you tell JavaScript (or, more precisely, your browser) to react to your event? You at an

event="whatToDo"

For now, many of our examples will be based on buttons and the onClick event and will have the form

<form name="sample">
<input type="button" name="clickme" value="Click Me"
       onClick="...">
</form>

As you may have observed from this short template, it's helpful (and almost necessary) if you name your forms.

Input and Output

Since we'll need some commands to get started, we'll begin with input and output. For now, we'll simply describe the commands. In the next section, we'll see how to incorporate them into a page.

One way to provide information to the reader is with the alert(text) function. This function brings up an alert box which displays the argument to the function. Many people find the alert box a simple way of providing a greeting without "muddying" the underlying HTML.

A sample program

A similar way to obtain information from the reader is with the prompt(request,default) function. This function brings up a dialog box in which the reader can type a response. In most cases, you will want to include a default setting. The function returns the string the reader entered.

A sample program

You can also put information into fields in a form with

document.formname.fieldname.value = ...

A sample program

Finally, you can set the information on the status bar of the window with

window.status="..."

A sample program

JavaScript Programs

Although you will generally incorporate JavaScript in HTML pages, you can also save them as xxx.js files and load them into navigator. This is often useful for quick testing of concepts.

However, there are many advantages to embedding your JavaScript in HTML code. Among others, you can load JavaScript libraries within HTML pages, but not within other JavaScript files.

JavaScript in HTML Files

Their are a number of ways to insert JavaScript code into HTML documents. We will begin with two of the simpler ones.

For JavaScript code that is to be executed directly, one uses the <SCRIPT> tag. The tag has two optional parameters,

• language="..." -- the scripting language used (javascript, javascript1.1, or others).
• src="..." -- a file of JavaScript code to load into the program.

For example, a simple JavaScript program might include

<script language="javascript"> alert("Welcome to my page."); </script>

The src parameter is particularly useful, as it lets you reuse your JavaScript code. I strongly encourage you to develop general functions, and then incorporate them into your program using the <script src="..."> tag.

We can extend that simple JavaScript program to incorporate a library file as follows. Note that we need two sets of <SCRIPT> tags: one set to load the library and another to call a function from that library.

<script language="javascript" src="greet.js"> </script> <script language="javascript"> greet("Sam"); </script>

Objects and Methods

JavaScript is at least somewhat object-based. That is, it presents many things to you as objects, and lets you manipulate them as such. For example, you can refer to the current window as window or the current document as document.

The pieces of information associated with an object are called the properties of that object. A property may be a number, some text, or even another object). To refer to a property of an object, you use the name of the object, a period, and the name of the propety. For example, you can obtain the title of a document as document.title.

Objects also have associated functions, which are normally called methods. These are the things that the object knows how to do. For example, you could tell the document to close itself with document.close().

For certain types of predefined objects, such as windows and arrays, you create a new object using the new command.