Chapter 1: Javascript Introduction

Javascript Guide

by Stephen Wilson (c) 1996

Note: These draft javascript tutorials are presented for the personal use of students in the Conceptual Design Department at San Francisco State University and for members of the Internet community. It is not permitted to creproduce sell, or redistribute without permission of Stephen Wilson. swilson@sfsu.edu

I Introuction

What is JavaScript?

Javascript is a scripting language built into Netscape Naviagator (version 2.0 and above). It allows you to to embed interactive and some limited multimedia capabilities into your Web pages. You include the javascript commands along with the HTML tags and structures that make up a Web page. Anyone downloading your page using an apporpriate version of Netscape Navigator will be able to experience your events. Furthermore, these experiences can duplicate the function of events that now require a user to send data to a server via the Internet and wait while CGI scripts process the information and send back information via the Internet.

&& what it looks like

Why Learn Javascript?

Since Javascript is a programming language, there are a world of possibilities of what you can script. You can arrange your page so that it responds to user actions. For example, clicking on links or buttons or moving the mouse pointer over features of the Web page can bring forth text in the status bar at the bottom of the page. You can also arrange for events to automatically happen without user actions - for example, background colors changing after particular numbers of seconds. You can create pages that seem to be intelligent and responsive - for example, customizing links or using text the user has typed in without ever sending anything to a Web server. Note, however, that JavaScript is a limited language so there are signicant limits on what you can script - for example, you cannot write to or from the users hard disk file system.

What kind of programming model does Javascirpt use?

Javascript uses a modified object oriented model. Certain structures are defined as objects - for example windows, forms, buttons, and strings. These objects have certain properties that can be determined and modified - for example, a button's properties include its type, name, and value. Functions can return the value of object properties and methods can be applied to objects to change the value of these properties. Javascript includes certain statement words that allow you to set up logical structures - for example an if...then structure can test for certain situations and respond appropriately. Javascript also allows you to create event handlers to respond to certain actions such as a document being loaded or a user moving the mouse.

A Sample Script to Respond to a Button Click

The following script would create a button on your page and arrange it so that a user's click would result in an alert box asking "Are you sure you want to choose this ?"

<FORM> <INPUT TYPE="button" VALUE= "careful" NAME = "warnbutton" onClick= "alert('Are you sure you want to choose this ?')"> </FORM> && &&<note> &&<note>

This book assumes you know basic HTML formatting. If not, please consult my World Wide Web Design Guide (Hayden, 1995) or any other source. To save space we will illustrate Javascript code fragments. Understand that these must be embedded within documents containing other regular HTML tags and structures.

(figure 1.1 button alert box)

This script would be placed on the HTML web page document like the usual HTML tags - for example, <HTML> <HEAD>,<BODY> etc. You can see that the tags for creating the button are very similar to those for creating a standard HTML form based button. Note, however, that a traditional FORM tag would include an ACTION attribute to indicate a server to send the data to and a METHOD attribute to indicate how the data will be sent to the server. Since all response is handled locally, nothing gets sent to a server and no ACTION or METHOD need be specified. Here is an example of a standard FORM tag with ACTION and METHOD specified:

<FORM METHOD="POST" ACTION="http://webaddress/responce.cgi">

In Javascript parlance, the script creates a button object with the indicated names. The onClick event hander waits for a user to click the button. When it is clicked, it uses the alert method to cause Navigator to produce an alert box. The alert box contains the text indicated.

Note the syntax requirements. The response to the the onClick is enclosed in quotes. The alert method requires the text to be printed out to be placed inside parentheses. Since it is a text string it also needs to be enclosed in quotes. Single quotes are used because the whole method is enclosed in the regular double quotes.

A Sample Script to Respond to Attempt to Write Text in a Text Input Field

The following script illustrates the construction of a simple JavaScript script by showing the use of the onChange event handler. OnChange gets activated when a user changes the text inside of a text or textarea object or selects something different in a select object. In the following example, an alert box gets activated when the user changes the text and clicks elsewhere on the page.

<FORM> <INPUT TYPE="text" VALUE= "dont change" NAME = "leavebutton" onChange= "alert('Please dont change this')"> </FORM> (figure 1.2 change alert box)

A Sample Script to Automatically Show the Date Once the Page Has Loaded

Javascript does not only respond to user actions. It can automatically start actions after loading of new page or the passing of time. The following script shows the Javascript elements of a simple script that presents an alert box with the current time at the beginning of a document. It makes use the Javascript object called new Date, the statement var, the event handler called onLoad, and the alert method.

<SCRIPT LANGUAGE = "Javascript"> var today= new Date() </SCRIPT> .... <BODY onload=alert(today)> (insert figure 1.3 date alert here)

The tags <SCRIPT> and </SCRIPT> are used to enclose Javascript elements that are not part of other tags. The attribute LANGUAGE="Javascript" tells the browser to interpret the code as Javascript. (Other scripting languages could be interpreted by indicating another language.) The statement var indicates that the following code will define a variable. As in most languages you can name variables anything you want within the limits of the language. Javascript allows variables to be any length as long as they start with a letter and are composed only of letters and numbers.(&&) Here we have arbitrarily named the variable "today". The code then assigns a value to the variable "today". by using the built-in object called new Date(). New Date(). accesses the clock on the computer and creates a string with current date and time. Once the variable "today" is defined it can be used elsewhere on the page.

In this example the event handler onLoad is embedded within the <BODY> tag. OnLoad activates whenever a new page has finished downloading. This alert code tells the browser to create an alert box containing the value of the variable "today". Thus, it automatically prints out the date and time when the page has finished loading and requires no special action by the user.

What Are the Limits of What JavaScript Can Do?

You are probably asking what JavaScript can do. What are its limits? Those of you who have worked with scripting and programming languages have already encountered this notion of limits and potentials. Computer languages are somewhat like human languages. They are tremendously flexible, allowing the expression of an enormous range of ideas and processes. For example, English can be used to create everything from technical guides on assembling an airplane to love poetry. Computer languages, however, are typically more limited. They are limited by the capabilities of the hardware and the structural features that authors chose to incorporate in the language. Computer languages vary in the limits of what they can do and in what they do easily. Think of an analogy with human language. Eskimo languages are notoriously useful for describing the subtleties of various kinds of snow; they would have to work much more circuitously to describe tropical sea life.

Javascript was designed as a "light" language with definite limits. The complexity of a computer language is partially a consequence of its size. Each feature requires additonal code space. Javascript was designed to be incorporated within browsers so space was definitely a concern. It is missing many features found in more complete languages. For example, it is missing sound manipulation and screen drawing capabilities. Also, it is missing sophisticated text string manipulation commands.

Note, however, that although some of the limits are almost impossible to overcome (for example, direct control of sound capabilities), others can be worked around by building capabilities out of simpler commands. For example, many languages have built-in commands for directly manipulating words in a text string such as counting words or changing particular words. Javascript does not. Nonetheless, you could use the simple logical structures of the language to create such a function by scanning a text string looking for spaces which could be used to identify word boundaries. Later chapters will help you learn how to create these workarounds.

Also, Javascript was designed with security in mind. Since users will download these scripts over the Internet into their local machines, there was a definite attempt to cripple the language in ways that would prevent it from creating havoc with the local system. For example, JavaScript has no structures for reading and writing from the local computers hard disk files. You cannot access directories or save, load, rename, or erase files. You cannot cause the local machine to print out.

Preview of What JavaScript Can Do

To master JavaScript you will need to learn what it can do easily, what it can do with some effort, and what it can't do. Here we give you a preview of what it can do. Computer systems were clasically analyzed using a three part model - 1. input, 2. output and 3. processing and data storage.. Although this model is now considered overly simple, it is useful for a quick preview of JavaScript capabilities.

(Insert figure 1.4 basic model of computing)

Inputs:

JavaScript is designed to watch for events intiated by the user. It has built-in event handler structures that you can use to respond to all the following.

-Clicks on buttons, checkboxes, radio buttons, or links (onClick)

-Text typed into text input field (onChange)
- Mouse positioned over a link (onMouseOver)
- New text line selected from a text select box (onSelect)
- Mouse moved from within a text input or select area or by hitting tab key(onBlur)
- Mouse clicked within a text input or select area or area selected by tabbing (onFocus)
- User submits a form either through clicking a submit button or hitting return key (onSubmit)
- The browser finishes loading a new page (onLoad)
- User choses to exit a page (onUnload)

Outputs:

So what can JavaScript do in response to a user action or to processing some data? Here is a sample of the kinds of actions your scripts can initiate:

- Change the text that appears in a text input area or in a button

- Change other text that appears as part of Web page
- Open, close, and clear browser and document windows
- Change the selection status of checkboxes, radio buttons, and select areas
-Control qualities of windows such as background color, link colors, and titles
- Control qualities of frames such as rows and columns and URLs to be loaded in various frames
- Control qualities of text strings such as font style, size, color, case
- Generate alert and confirmation windows
- Dynamically generate new HTML pages
- Fetch URLs and load them into windows and frames

Those of you who work with multimedia might consider this set of possibilities rather limited. You cannot generate sounds, draw images on the screen, or control animations. Within the limits of HTML, however, Javascript gives you considerable ability to control the pages viewers see in response to their actions. Furthermore, you will see later in the book that the ability to dynamically generate HTML pages on the fly allows you to create interesting animated effects.

Information Processing and Manipulation:

Many consider that the part in the middle between input and output is what makes computers seem "intelligent". JavaScript has a full range of logical analysis and data manipulation capabilities such that you can generate quite sophisticated events. As with any language you arrange the structures so that information.

&&

AI not any more than this, put time in input

How is this Book Organized to Teach You Javascript?

&&

- This page created by Stephen Wilson, Professor Conceptual Design, SFSU (http://userwww.sfsu.edu/~swilson) swilson@sfsu.edu
- More information about the Conceptual Design program is available at (http://userwww.sfsu.edu/~infoarts)
- It is a resource used in Art511 Art&Telecommunications course (http://userwww.sfsu.edu/~infoarts/Tele/Tele95.index.html)
- A comprehensive guide to Web design is available in the book World Wide Web Design Guide (Hayden Books) by Stephen Wilson
- The url of this page is (http://userwww.sfsu.edu/~infoarts/Tele/wilson.javascript1r.html)