Writing JavaScripts

A Brief Background of JavaScript

• Overview of Scripting Architecture
• Supported Software Platforms
• The JavaScript Programming Model

• Language Structure
  • General
  • Comments
  • Variables
    • Types of Variables
    • Variable Naming
    • var
    • Uninitialized Variables
    • Constant Variables
  • Procedures
    • Functions
    • eval
    • parseInt and parseFloat
  • Operators
    • Assignments
    • Arithmetic
  • Logical Operators
  • Comparison Operators
  • String Operators
  • Operator Precedence
  • Objects
    • Creating an Object
    • Properties
    • Methods
    • Associative Arrays
    • Arrays
  • Built-In Objects
    • The String Object
    • The Math Object
  • Program Flow
    • if
    • for
    • while
    • for...in
  • User Interface Elements
• Resources
• Summary
• Q&A
• Workshop
• Quiz

Chapter Seven

Writing JavaScripts

Today you will learn JavaScript. You have already encountered JavaScript in a couple of the examples you've done this week. You implemented JavaScript by hand-coding directly on the HTML page (covered on Chapter 2, "HTML and Scripting"), and by using the three editing tools you looked at on Chapter 4, "Tools of the Trade": Word, HoTMetaL, and the ActiveX Control Pad. JavaScript was also used in the last example on Chapter 5, "Programming for Internet Explorer," when you looked at programming inside the Internet Explorer. Today, after looking briefly at the background of JavaScript, you will learn all you need to know about the language, from variables to objects. By the end of the day you will have examined dozens of examples, and will be ready to use JavaScript in a project.

A Brief Background of JavaScript

JavaScript started life as LiveScript, a scripting language built specifically for Netscape Navigator. Netscape, in conjunction with Sun, changed the name to JavaScript. Microsoft’s Internet Explorer also supports JavaScript. JavaScript is object oriented. The Window object you learned about on Chapter 5 is a native part of JavaScript. Because it is at home with objects, JavaScript can be used to manipulate ActiveX controls as well as the objects native to HTML. It is important to note that JavaScript is not Java. They are similar, but JavaScript is dedicated to Web-page scripting, whereas Java is becoming a full-blown application builder like C or C++. JavaScript's commitment to HTML and support for ActiveX controls makes learning JavaScript well worth your while.

Overview of Scripting Architecture

To learn JavaScript, you need to know about the following topics:

• Supported software platforms
  
  
• JavaScript programming model
  
  
• Variable types
  
  
• Operators
  
  
• Variable scope
  
  
• Functions
  
  
• Program flow
  
  
• User interface
  
  

You'll be quizzed at the end of the chapter, so pay attention!

Supported Software Platforms

As of this writing, the two major Web browsers support JavaScript. Anything you learn about JavaScript is applicable to programming on both the Netscape Navigator and the Internet Explorer. You can find Netscape Navigator at http://www.netscape.com/.Find the Internet Explorer at http://www.microsoft.com/ie/ie.asp. Both are in their third version. Internet Explorer is freeware, and Netscape Navigator is available for a nominal cost on a subscription basis.

Netscape controls the JavaScript standard, and it looks like it will remain proprietary. This is not necessarily bad. Proprietary standards evolve faster and are less compromised than languages controlled by the more democratic open standard approach.

Because JavaScript and ActiveX are currently supported on the Internet Explorer, the bottom line is that if you need to use JavaScript and ActiveX right now, use the Internet Explorer as your target software platform.

The JavaScript Programming Model

JavaScript is an object-oriented language. To those of you new to programming, an object-oriented language uses objects to group related properties and methods. You have already been introduced to one of the main JavaScript objects, Window (discussed in detail on Chapter 5). The Window object is a good example of how objects are constructed and used. The concepts of subroutines and functions that you learned on Chapter 6 also apply to JavaScript.

JavaScript and object-oriented languages in general are strong in the areas of organization and code maintenance. The downside of object-oriented languages is that they have a steeper learning curve than procedural languages. Design and maintenance are what recommend JavaScript to Web programmers. After you have used an object-oriented approach for a while, you will find it well-suited to the world of Windows and ActiveX.

Language Structure

Now you can get to know JavaScript. I'll start with a discussion of the general elements of the language, and when I'm through, you will have covered every keyword in JavaScript. Most of the examples in this chapter are run from within the framework of template.asp, shown in Listing 7.1.

Listing 7.1. template.asp.

You have covered all the elements of this Web page during the previous days of the week. As you can see, there are two <SCRIPT> sections to handle two Window object events. One area is assigned to the onLoad event, which causes the code placed in this section to be run whenever the page is loaded. The second <SCRIPT> section is assigned to the onUnload event, and is fired every time you leave the page.

Are you ready? Time to learn a new language!

General

JavaScript is case sensitive. This means, for example, that the variable A is different from the variable a. Try the following in the template:

As you would expect, given that JavaScript is case sensitive, the output from the preceding code is
1

4

5

The next question is, "How do I differentiate one line from another?" In JavaScript, all you have to do is start a new line. Look at this code:

Notice that the lines have no visible terminator. Some languages, such as C, use a semicolon (;) as the terminator for a line. Lines of code in JavaScript use the line feed at the end of the line as a terminator.

If you feel the need to pack several lines of code on one line, use the ; to separate them, as shown in Listing 7.2.

Listing 7.2. separate.asp.

Notice how the semicolon is used in template.asp. Running this program will produce the number 3. It will also annoy any programming purists with whom you work. I recommend that you keep to one statement per line (unless, of course, your goal is to annoy those who read your code).

This is the only example I will show you using the entire template. In the rest of the chapter you'll focus on the code inside.

Indentation is not required to make the language work. For example, Listing 7.3 runs identically to Listing 7.4.

Listing 7.3. Indented code.

Listing 7.4. Unindented code.

Listing 7.4 runs in the same way as Listing 7.3, but Listing 7.4 won't win you many points for style. I recommend that you use indentation to organize your code so that if you have to go back and maintain it (or someone else does), it is easier to understand. You will see examples of indentation used for clarity throughout this chapter.

Comments

Comments can make your life, or the life of someone who looks at your work later, much easier. Comments are not required in JavaScript, but if you want them in your code, you have two choices: // and /* */. With //, any characters from the start of the remark to the end of the line are ignored when the script is run. With /* */, everything between /* and */ is ignored. An example of both kinds of comments follows:

Variables

Variables are those things you learned in high school algebra—you remember, the class you knew would never apply to your "real" life. Well, you were wrong (sorry, Mr. White). Without variables, computer languages could do little more than power player pianos or music boxes. Variables are what allowed you to send people to the moon, build addictive games like Doom, and make interactive Web pages. JavaScript has a simple approach to variables.

Types of Variables

JavaScript supports four variable types: numeric, string, boolean, and null. Numeric variables represent integers or floating-point numbers. Strings are arrays of characters, such as Hello World and Good Bye. For example, the following code sets string1 to hold the string variable hello world and mynum1 to hold the number 4:
var string1 = "hello world"
var mynum1 =

JavaScript is loosely typed, which means that you can turn around and assign these variables like this
string1 = 4
mynum1 = "hello world"

without the interpreter complaining. The advantage of a loosely typed language is that you don't have to remember lots of conversion functions. The disadvantage is that you are at the mercy of the language interpreter: it will determine what conversions need to be conducted and how. You will need to keep an eye on these automatic conversions. You might not always want what the interpreter gives you. Later today I will cover conversion functions in JavaScript that provide the capability to precisely change one type to another.

The boolean variable can be either true or false. JavaScript does not assign numbers to true and false like some other languages do.

The null variable represents a variable that has not been defined. It is not the same as a zero-length string. For example, the following code returns the value MyUninited is null:

Now you should know the difference between a null value and a zero-length string.

Variable Naming

Names of JavaScript variables must have the following two characteristics:

• They must begin with an alphabetic character or an underscore(_)
  
  
• They must be unique in the scope in which they are declared. You can’t have two MyVars in a function.
  
  

This means a variable like 22street would return an error like the one shown in Figure 7.1.

Figure 7.1. Results of an improper variable.

The error shown in the figure was generated by the following code:

var

Declaring variables is easy, and optional, in JavaScript. Declaring a variable is done using the key word var. Consider the following code:

Notice how value1 is declared using var, and value2 is not declared. The form will produce these lines:

1

value two

You can also declare a variable without assigning it a value, but you cannot have an undeclared variable without an assigned value. The interpreter doesn’t initialize undeclared variables. Look at the following modification to the previous code:

This causes the following error:
Microsoft JScript runtime error
[Line: 7] 'value2' is undefined

Optional declaration, bypassing the use of var is fine, but it will not sit well with programming purists. Also, you might be working in a corporation whose programming standards require that all variables to be declared.

Uninitialized Variables

If you use var to declare a variable and then print that variable, what will be in it? I have spent days in other languages tracking down bugs caused by uninitialized variables assigned some random number. JavaScript does not support this kind of frustration. Variables in JavaScript are given a value of null when they are declared without being assigned in the var statement. You saw an example of this when you looked at the null value in the "Types of Variables" section of this chapter.

Constant Variables

In general, JavaScript does not support constant variables. A constant variable is one of those programming oxymorons that means a variable that cannot be changed after it is declared. A constant variable is used to hold things that should not be open to the interpretation of the programmer (like the value of pi, for instance). This prevents the programmer from improving pi or accidentally changing pi.

Any variable you declare in JavaScript can be modified. If you want to implement constants in your Web pages, you must give them a unique identifier (I recommend all uppercase letters—it is the C programmer in me) and invent a stiff penalty for programmers who change them during the course of a program (I recommend reassignment as the tech writer for a group of assembly language programmers—they hate that).

Some objects within the JavaScript environment have read-only properties that can be used as constant variables. For example, the Math object, discussed later, has a property named PI, which is shown in the following code:

This code produces the constant

3.14159265358979

Any attempt to change the value of Math.PI is ignored, as in the following modification to the code:

This code still produces constant 3.14159265358979.

The bottom line here is that although there are built-in constants, the programmer cannot create a new constant.

Variable Scope and Global Variables

The scope of a variable has to do with where it is visible. The code in Listing 7.5 shows you how scope works.

Listing 7.5. scope01.asp.

The code in Listing 7.5 produces the following output:

Notice that the MyVariable declared outside of the functions is visible to all functions within the <SCRIPT> tags, making it global. Then, when a variable is declared inside ThingOne with the same name, that local variable is used inside procedure ThingOne. Just to prove that the global MyVariable isn't overwritten, ThingTwo writes out its value so you can see that the global MyVariable hasn't changed. Also of note here is how the Window object is global.

Now change the code so that ThingOne and ThingTwo are in a different <SCRIPT> tag (see Listing 7.6).

Listing 7.6. scope02.asp

Run the page. The results are identical. Now you've seen that scope applies across <SCRIPT> sections.

Procedures

In general, a procedure contains programming instructions, and can be assigned to events or called from other functions. You have seen procedures in every example today. JavaScript has only one kind of procedure: the function. Let's see how it works.

Functions

A function has this general structure:

function MyFunction(arg2, arg2)
{
//Lines of code
}

The keyword function lets the interpreter know that what follows is a function. After the keyword function is the function name, followed by any arguments the function has enclosed in parentheses (()). The function is given copies of the arguments, which means that the function cannot change the original value of an argument.

A function can also return a value using the keyword return. Type the code found in Listing 7.7 (sub01.asp on the CD-ROM).

Listing 7.7. sub01.asp

This is a simple radians-to-degrees function. It returns the following value:
0.785398163397448 Rad is 45.0190227259417degs

JavaScript has three built-in functions: eval, parseInt, and parseFloat. The rest of the functionality in JavaScript is contained in objects, which you will learn about later today in the section called "Objects.". For now, let's look at the functions.

eval

eval has this syntax:

eval(string)

eval takes the string argument and acts like a mini interpreter. For example, the following code returns the value 11730.

Note how the code is in the <BODY> section of the form. If this code is run in the onLoad event, it returns the string (345*34) instead of its value.

parseInt and parseFloat

The functions parseInt and parseFloat both take a single argument: a string. The function parseInt takes the string and attempts to return an integer. The function parseFloat takes the string and attempts to return a float value. Both functions are demonstrated in Listing 7.8, parse.asp.

Listing 7.8. parse.asp.

Listing 7.8 returns the following:
MyFloat = 34.345
MyInt = 34

Before you go any further, let's look at the operators you use to string your variables and functions together.

Operators

Operators determine what is done to variables and functions. There are five types of operators: assignment, arithmetic, logical, comparison, and string. Lets start with the most used—assignment operators.

Assignments

You use assignment operators all the time to assign one value to another; indeed, assignment variables are the heart of programming. JavaScript not only has the traditional =, but also includes five others: +=, -=, *=, /=, and %=. They are explained in Table 7.1

Table 7.1. Assignment operators.

Listing 7.9 uses all of the assignment operators shown in Table 7.1.

Listing 7.9. assign.asp

Note how the numbers are reloaded between prints. This is necessary because MyNum1 is reassigned in every writeln. Listing 7.9 produces the following output:
MyNum1 = MyNum2 is 6
MyNum1 += MyNum2 is 38
MyNum1 = MyNum2 is 26
MyNum1 = MyNum2 is 192
MyNum1 = MyNum2 is 5.33333333333333
MyNum1 = MyNum2 is 2

Arithmetic

The math functions are another group you tend to take for granted. The important thing to note as you go through these operators is how they work on various combinations of integers and real numbers. Table 7.2 shows the arithmetic operators.

Table 7.2. Arithmetic operators.

Listing 7.10 contains examples of the primary arithmetic operators:

Listing 7.10. asgmath.asp.

The following illustrates how these arithmetic operators work with various combinations of float and int.

???Jeff: What are "float" and "int"? -kim

For Two integers, 32 and 6

32 + 6is38

32 - 6is26

32 * 6is192

32 / 6is5.33333333333333

32 % 6is2

For Two Floats, 32.23 and 6.98

32.23 + 6.98is39.21

32.23 - 6.98is25.25

32.23 * 6.98is224.9654

32.23 / 6.98is4.61747851002865

32.23 % 6.98is4.31

For Float and Int, 32.23 and 6

32.23 + 6is38.23

32.23 - 6is26.23

32.23 * 6is193.38

32.23 / 6is5.37166666666667

32.23 % 6is2.23

Increment (++) and decrement(--) operators are old hat to C programmers. Listing 7.11 shows how these two features work.

Listing 7.11. asginc.asp.

Displaying the page described in Listing 7.11 produces the following result:
33

31

7

The first two numbers, 33 (32++) and 31 (32--) are easy to understand. The last three are more difficult. Variable a is originally 5, so after two increments it becomes 7, which explains the first number. The second equation (b = ++a) causes a to change from 5 to 6 and for 6 to be assigned to b, which explains the second number. The equation c = a++ results in a, which starts as 6, to be assigned to c before it is incremented, leaving c at 6 and a at 7. Be careful when using increments and decrements with an assignment statement.

Logical Operators

Logical operators are used to combine the results of two boolean expressions. They are described in Table 7.3.

Table 7.3. Logical operators.

Listing 7.12 shows these logical operators at work.

Listing 7.12. logops.asp.

Listing 7.12 returns the following value where 0 is false and -1 is true:
0
0
-1
-1
0
-1

Comparison Operators

Comparison operators are used inside JavaScript's control structures to test the relationship between variables. They are described in Table 7.4.

Table 7.4. Comparison operators.
Operator Definition == Comparison for equality(different from assignment statement =) != Not equal to > Greater than < Less than >= Greater than or equal to <= Less than or equal to

The only unusual thing here (if you are not a C programmer) is the == operator (test for equality). In JavaScript, == always makes a comparison, and = always makes an assignment. Don't confuse the two. The statement if (a = 5) will ruin your whole day if you are trying to compare a and 5 rather than assign a to 5. Look for examples in the section found later in this chapter called Program Flow.

String Operators

There is only one string operator: concatenation (+). It's funny that a language that uses an = and an == to give the programmer greater flexibly would also use the + to add numbers and concatenate strings. Listing 7.13 shows string operators at work.

Listing 7.13. strop.asp

Notice that when the number is combined with the strings, the number is automatically converted to a string, as shown in the result of running strop.asp:

Thing one and Thing two and 3

Operator Precedence

You have seen that it is possible to combine several comparison operators from the arithmetic, comparison, and logical groups on one line. You have also seen that the operators can be grouped within parentheses to clarify the order of operation. When expressions are not grouped within (), what happens? The following order is used:

• assignment—= += -= *= /= %= <<= >>= >>>= &= ^= |=
  
  
• conditional—?:
  
  
• logical-or—||
  
  
• logical-and—&&
  
  
• bitwise-or—|
  
  
• bitwise-xor—^
  
  
• bitwise-and—&
  
  
• equality—== !=
  
  
• relational—< <= > >=
  
  
• bitwise shift—<< >> >>>
  
  
• addition/subtraction—+ -
  
  
• multiply/divide—* / %
  
  
• negation/increment—! ~ - ++ --
  
  

Listing 7.14 is illustrates arithmetic precedence.

Listing 7.14. prec.asp

Listing 7.14 results in the following:

A + B / C * 12 = 18
(A + B) / (C * 12) = 8.33333333333333E-02

Quite a difference. Maybe this is what is happening to my paycheck. Make a note to talk to payroll. My advice here is use () to group your statements so they are performed in the order you want and not in the order the machine wants.

Objects

At the beginning of the day you saw that JavaScript is an object-oriented language. This means that you can create objects that have their own properties and methods, just like the Windows object. This allows you to group methods and properties logically. For example, the document object has properties, such as forms (an array of forms on the document) and methods like writeln that relate to documents. In JavaScript, it is easy for you to create your own objects.

Creating an Object

Creating an object uses the same syntax as creating a function. The following code creates a template for an object:

To create a function with this template, use the new keyword, as shown in the following code:

The line new MyObject("Circle",10,25) creates the new object that runs the template you created, assigns the variables in the argument list, and names the new object Shape1. The output from the code verifies that the following variables were set:
Circle

10

25

Properties

These variables you set are the properties of your object. They can be accessed by the same notation you used with the Document object. For example, the type in your Shape1 object can be referenced by Shape1.type, as you did in the following line:

window.document.writeln(Shape1.type)

Properties can include other objects. Look at the Listing 7.15, object02.asp, and notice the modifications to MyObject, which you created in the section titled "Creating an Object."

Listing 7.15. object02.asp

Notice how you added a new property, pos, of the type position, to store the x and y values of MyObject. This new property is accessed through the notation Shape.pos.x. The result of this page shows that the properties did make it into Shape1:

Circle

10

25

24

167

Methods

What if you want to make your object a little more self-sufficient by adding some methods? Listing 7.16 illustrates how to make your object print itself out.

Listing 7.16. object03.asp.

Here you have moved the printing to its own method, Printout. Inside Printout you used the this keyword to designate the internal properties of MyObject. If you tried to run the method, Printout, as a standalone function, you would get error centering on the nonexistence of the variables. The magic happens with the following line, which is found inside MyObject:


this.printme = Printout

This line designates Printout as a method of MyObject, and grants Printout access to the properties of MyObject. Calling Shape1.printme results in the following:

type = Circle

height = 10

width = 25

x value= 24

y value = 167

Associative Arrays

Internally, the data contained in an object is contained in an associative array. This allows you to associate a value from the object with the property name, as shown in Listing 7.17.

Listing 7.17 object04.asp.

In this example, you used Shape1.["type"] to access the Shape1.type property. The results are as shown.


type = Circle

height = 10

width = 25

x value= 24

y value = 167

type = Square

height = 42

width = 25

x value= 24

y value = 167

Arrays

Those of you with a programming background are used to working with arrays. For those of you new to programming, an array is a collection of elements that can be accessed by an index. For example, MyArray[1] would access the element in the array with an index of one.

JavaScript does not have built-in support for arrays. If you need to use arrays, you will have to build your own. Don't panic, it isn't hard to do. Here are two ways to hand-build an array.

The first array you will build will allow you to enter elements into the array when you first declare it. Listing 7.18 shows this method.

Listing 7.18. array01.asp.
<SCRIPT LANGUAGE="JavaScript">
<!--
function initArray()
{
this.length = initArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i]
}
-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" FOR="window" EVENT="onLoad()">
<!--
var MyArray = new initArray("Thing1", "Thing2", 3, 4)
document.writeln("<PRE>")
document.writeln("MyArray[4] = "+ MyArray[1])
document.writeln("MyArray[4] = "+ MyArray[2])
document.writeln("MyArray[4] = "+ MyArray[3])
document.writeln("MyArray[4] = "+ MyArray[4])
document.writeln("</PRE>")
-->
</SCRIPT>

Note that arguments are used both to find out how many arguments there are (initArray.arguments.length), and as an array of those arguments (arguments[I]). The output from this example looks like the following:

MyArray[1] = Thing1

MyArray[2] = Thing2

MyArray[3] = 3

MyArray[4] = 4

Another way to create an array is shown in Listing 7.19.

Listing 7.19. array02.asp.

In this listing, you can size the array and initialize it when you declare it. The output shows both the initial values (MyArray[4]) and the values you set after the array was declared:

MyArray[1] = This

MyArray[2] = 2

MyArray[3] = That

MyArray[4] = *

MyArray.lenght = 10

This lack of a built-in array behavior is inconvenient but, on the plus side, you can create your arrays that fit into the problems you solve with JavaScript.

Built-In Objects

JavaScript contains both user-built objects, which you have already covered, and built-in objects. You have already used the Window object; the three remaining built-in objects are String, Math, and Date.

The String Object

The JavaScript String object has one property and nineteen methods. You create a string whenever you assign a string to a variable. The following lines result in a string object with full rights to the property and functions described in Table 7.5 and Table 7.6:

var mystring ="Hello World"

myotherstring = "Something"

Table 7.5. String object (properties).

Table 7.6. String object (methods).

Listing 7.20 shows how the string manipulation functions work.

Listing 7.20 string01.asp.

The Math Object

The JavaScript Math object has six properties and seventeen methods. Math functions are referenced using the object Math, as it Math.PI. The properties and functions of the Math object are described in Table 7.7 and Table 7.8.

Table 7.7. Math object (properties).

Table 7.8. Math object (methods).

Listing 7.21 gives you a general idea about how to use these functions.

Listing 7.21. math.asp.

Notice how the with keyword is used. Inside the brackets of the with (Math) statement, the Math object is assumed and doesn't have to be typed. The output is as follows:

sin(angle) = 0.5
cos(angle) = 0.866025403784439
round(angle) = 1
exp(angle) = 1.68809179496447

The Date Object

The JavaScript Date object has zero properties and twenty methods. Define a new Date variable with the syntax:

Mydate = new Date(dateinfo)

where dateinfo is an optional indicator of the date format that can have one of three formats:

• month day, year hours:minutes:seconds
  
  
• year, month, day
  
  
• year, month, day, hours, minutes, seconds
  
  

The methods that go with the Date object appear in Table 7.9.

Table 7.9. The Date object.

Listing 7.22 shows how these functions can be used.

Listing 7.22 date.asp.

Program Flow