Copyright ©1996, Que Corporation. All rights
reserved. No part of this book may be used or reproduced in any
form or by any means, or stored in a database or 
retrieval system
without prior written permission of the publisher except in the
case of brief quotations embodied in critical articles and reviews.
Making copies of any part of this book for any purpose other than
your own personal use is a violation of United States copyright
laws. For information, address Que Corporation, 201 West 103rd
Street, Indianapolis, IN 46290 or at support@mcp.com.
Notice: This material is excerpted from Special Edition Using JavaScript, ISBN: 0-7897-0758-6. This material is provided "as is" without any warranty of any kind. Please see this DISCLAIMER.
by Mark Reynolds
In Chapter 4 we learned about JavaScript arrays and their close relationship with JavaScript objects. That same chapter also taught us how to create functions to do meaningful work. In this chapter we will build upon that foundation and learn how to create complex arrays, functions and objects. We will reveal some of the hidden power JavaScript in these areas in the process of this exploration.
We begin with a discussion of variable declarations, and its relationship to the critical topic of function parameters and their validation. We will also build up an extremely valuable function, known as word(), which will be used in several subsequent efforts.
Associative arrays are one of JavaScript's most powerful features.
They are also one of the most error prone. The second part of
this chapter will revisit the topic of associative arrays and
examine extensions to them. The unpredictable and often bizarre
results which occur when unitialized arrays are used will also
be explored. Associative arrays also suffer from some platform
dependencies, so a tool will be built up which may be used to
examine array initialization. Since arrays are the only way to
store and access information in a database-like manner we will
also learn how to fill arrays from lists and use extended arrays.
The final section of this chapter will develop two important objects
- the "Image" object and the "Text" object.
The Image object stores a great deal of information about an image,
and can also draw that image as a plain image, framed image or
linked image. The Text object stores text and also information
about how the text is to be formatted. This object can also render
its text in plain, framed or linked forms. Both of these objects
will be developed as arrays of objects, similar to a small database.
Both can also be easily extended for your own purposes.
In this chapter you will learn about:
You will also build these three Javascript objects:
Many of the examples in this chapter are too large to be listed in their entirety within the chapter. All the source code will be found on the CD-ROM.
We have already explored the distinction between global variables,
which are visible in every function, and local variables, which
are only visible in the function in which they are declared. If
you want to declare variables global to the whole window, define
them outside of any function. You may or may not precede the declaration
with var; it will still be global. However, any declarations which
you make inside of functions should be preceded with var if you
want them to remain local. As you know, it is not strictly necessary
to declare variables within functions. JavaScript will treat any
unknown variable which it sees as a new variable, as if you had
declared it. If you do not explicitly declare such a variable,
or do not precede it with var, it will become a window global
variable. Check your functions very carefully for variable declarations.
If you accidentally make a variable be a global variable by not
using var it can cause no end to trouble. This is particularly
true for variables with commonly used names, such as i, j, or
iter..
It is unfortunate that the rules for the use of var are confusing..
Remember that placing var in front of a variable declaration restricts
it to the scope in which it is declared. The scope of a variable
is the context in which that variable may be used. In the case
of a local variable declared the function, the scope of that variable
is the function itself. In the case of a window script, it is
the window. If you do not use var in a function or a window script,
the variable' scope will beglobal - it may be used anywhere in
the window.
Although Javascript does not force you to declare or initialize variables before you begin function statements, it is often very useful to do so. First, it allows you to document the purpose of each variable. This is not only good programming practice, it is also genuinely useful. When you return to a function six months after you wrote it you may well not remember what the variable countme does, unless you explicitly document it as "// array index variable." . Second, if you explicitly declare each variable then you have the opportunity to initialize them to some meaningful default value.
If you declare global variables within a function, you must execute the function first in order for the variables to be defined.
Figure 9.1 illustrates this idea.
When the first button is pressed an alert results, which tells
us that there is an undefined variable. Since the variable was
declared with var inside a function, it is local and 'out of scope'
to anything outside the function. The other three buttons all
access global variables which have been defined outside of a function
or within a function without the use of var. Presssing these buttons
gives you the value of the variable. The source code for this
example will be found in c9-2.htm on the CDROM with Special
Edition Using JavaScript.
Fig. 9.1
JavaScript alerts you when you have used an undefined variable
Functions, particularly ones which carry out critical tasks like
opening windows, should always check to see if the their parameters
are valid. This usually involves making sure that they are the
correct type and/or within some expected range. First and foremost,
then, we need routines to determine if the parameters are valid.
Strings are relatively safe as parameters, but numbers and booleans
are not. This is because JavaScript will often convert a non-string,
such as 5 to the corresponding string "5," but it only
convert to numerical or boolean form if it can. If a string parameter
is specified as the number 5, no error will occur. If a numerical
parameteris specified as the string "five" an error
will very definitely occur.
If you discover a bad parameter, you have two choices. You can simply abandon all processing, or you can change the bad parameter to some safe default. It is often preferable to do the latter, and place an error message in a variable which calling routines can check. The library functions use two of these; they are aWinErr and aStringErr. Of course, there is nothing you can do to keep the user from entering something totally unanticipated in a text field. The best you can do is to try to limit the destruction that will ensue.
We will now examine a few functions from our repetoire to see
how they work. Three checking functions are presented: one for
numbers or restricted characters, one for booleans, and one for
character encoding/decoding.
Restricted Character Sets
The function isIn, shown in Listing 9.1, is multipurpose. It can
check to see if all of the characters in a parameter string are
also found within a comparison string. If the comparison string
is empty, it will use a string of digits (0-9) as the comparison
string. This function will return a boolean true/false indication
to indicate if the comparison succeeded or failed. It can also
strip unwanted characters from the parameter value and return
a string which contains only acceptable characters. Figure 9.2a
and Figure 9.2b show two results
from the function isIn(). The test code is found in the file c9-testr.htm.
Listing 9.1 A Multipurpose parameter checking function
function isIn(astr,nstr,strip)
// astr : item in question
// nstr : allowable character string; defaults to numbers
// strip: determines whether return is true/false or only allowable characters. Defaults to false.
{
//declare and initialize variables to make sure they stay local
var cc=''
var dd=''
var bstr = ''
var isit
var i = 0
// make error string empty
aStringErr = ''
//force number to a string
astr = '' + astr
//default to checking for a number
if (nstr== null || nstr == '') nstr = '1234567890'
//make sure that 'strip' is a boolean
strip = (isBoolean(strip))
//force to string; remember, this can return a boolean
strip += ''
//NOT a boolean--complain
if (strip == 'false')
{
strip = false
aStringErr = '"Value" must be (T/t)rue or (F/f)alse. It is neither. Defaulting to false.'
}
//now that everything is set up, let's get down to business
isit=false
// begin loop which cycles through all of the characters in astr
for (i = 0 ; i < astr.length ; i++)
{
cc=astr.substring(i, i+1)
// begin loop which cycles through
// all of the characters in nstr
for (j =0 ; j< nstr.length ; j++)
{
dd = nstr.substring(j, j + 1)
isit = false
if (cc == dd) // so far so good
{
isit = true
bstr += cc // accumulate good characters
break // no need to go further
}
} // end of j loop
//you found a mismatch; disqualify the item immediately
//unless you are going to strip the string.
if (isit == false && strip == 'F')
break;
else continue
} // end of i loop
if (strip=='T') return bstr // return stripped string
else return isit // or return true/false (boolean)
}
Fig. 9.2
When we write code, it is easy to forget exactly how we are supposed to pass a variable. This is especially true of boolean values. Is it true or 'true' or 't' or 'T'? Listing 9.2 shows a routine that takes the first character of a putative boolean, changes it to upper case, and checks to see if it is 'T' or 'F'. If so, the function returns that value; if not it returns false. One of the nice things about Javascript the language is that it is relatively untyped when compared with strongly typed languages like Ada or Pascal. In JavaScript the same function can return a boolean or a string or a number with impunity. The calling routine may have some trouble though; it will complain if you try to hand it a string when it thinks it should get a number. One way out of this dilemma is to forcibly convert the variable to the form you want. You can force an arbitrary value to be a string by concatenating it with an empty string. You can force an arbitrary value to be an integer with parseInt().
Listing 9-2. A boolean validation function.
function isBoolean(astr)
//astr is the object to check
{
var isit=''
astr +=''
if (astr == null || astr == '') isit= false
else
{
astr = astr.substring(0,1) // just get first letter
astr = astr.toUpperCase() // make it caps
if (astr != "T" && astr != "F")
{
// unacceptable value entered
isit = false
}
else
//returns value which caller can test for true/false
//without having to do substrings, etc.
isit= astr
}
//return is mixed: can be either a boolean or a string.
return isit
}
Most languages have a means of defining a character as a numeric
code and, conversely, converting the code back to the character.
The ASCII standard is often used for this conversion these days,
just as EBCDIC used to be twenty years ago. In fact, if we had
functions to convert between character respresentation and numerical
representation then many forms of parameter validation become
much easier.,For example, an isNumber function, which attempts
to determine if a parameter is a number, becomes extremely easy
to write. One just examines each variable's ascii code for inclusion
in the range represented by the '0' through '9' characters.
In factthese two conversion functions are relatively easy to write.
We first need to construct a string which contains all of the
printable ASCII characters. We will construct such a string (called
the charset string) with a function called makeCharsetString().
To convert from character representation to numerical representation
we search for the character within the charset string. The numerical
representation of that character is its index in the charset string,
plus 32. The additional 32 is needed since that is the numerical
code of the first printable ASCII character, the SP (space) character.
To convert from a numerical representation we reverse the process.
We subtract 32 from the numerical value and then extract the character
in the charset string at that location. Listing 9.3 shows the
asc function, which converts from character to numeric code, while
listing 9.4 shows the chr function, which converts from numeric
code to character.
Listing 9.3 A Function to return the ASCII code of a character.
function asc(achar)
//achar character whose ascii code you want
{
var n = 0
var csstr = makeCharsetString() //get ascii char string
//alert(csstr)
n = csstr.indexOf(achar)
//printable characters begin at 32 with [space]
return n + 32
}
Listing 9.4 A Function to return a character given an ASCII code.
function chr(x)
{
var ar = ''
var astr = makeCharsetString() //get ascii string
//alert(astr)
result = ''
if (x >= 32 ) // printable
{
x = x - 32
ar = astr.charAt(x)
result = ar
}
else // non printable, return text representation
{
if ( x == 9 ) result = 'tab'
if ( x == 13 ) result = 'return'
if ( x == 10 ) result = 'linefeed'
}
return result
}
Note that there are some strategically placed alert() calls in
these functions which are commented out. These alerts are for
debugging pruposes, to in sure that the functions are actually
delivering what you want. Note alsothat they chr() function does
not handle most of the non-printable characters, whose numeric
codes are below 32. It will tell you if the character was a tab,
a return, or a linefeed. This can be used in an ugly but useful
way to insert a carriage return/linefeed combination into a string
using the expression '+ chr(13) + chr(10)'. Figure 9.3 shows
some test output from these conversion functions.
Fig. 9.3
String conversion is straightforward in JavaScript
There is one additional function which we will present. This is
the extremely useful word() function, which extracts an indexed
phrase from a delimited string. A delimited string is one containing
one or more entries separated by a special character, referred
to as the delimiter or separator. For example, the string "My:name:is:Hanover:Fiste"
contains five components 'My', 'name', 'is', 'Hanover' and 'Fiste'
separated by the delimiter colon (:).
The word() function is given the delimited string, the delimiter, and the index of the component required. It returns that component. Thus, if word() were asked for third component of the string given above, it would return "is". Figure 9.4 shows some sample output from the word() function.
Listing 9.5 The delimited string processing function word().
function word(sep,which,inwhat)
// separator character
// which word/pharase
// text in which to look
{
//alert(inwhat)
var n = 0 // start of a phrase
var wstr = 0 // holds substring
var i = 0 // loop counter
var s = 0 // start of winning phrase
var f = 0 // end of winning phrase
for (i = 1 ; i < which ; i++)
{
n = inwhat.indexOf(sep,n) // look for separator
if (n < 0 ) // if you do not find it
{
return '' // return is empty string
break // jump out of loop
}
n++ // otherwise, loop again
}
// now we should be a the right place
if ( n >= 0) // ... but do this only if we
{ // found the separator
//alert(n + '==' + wstr)
var s = n // phrase starts with n, now s
var f = inwhat.indexOf(sep,n) // get next instance of sep
if (f < 0 ) f = inwhat.length // but if there is none ...
wstr = inwhat.substring(n,f) // must be last phrase in string
}
//alert(f + '--' + wstr)
return wstr // return string; it will be
// empty if sep was not found.
}
Fig. 9.4
The word() function extracts an indexed phrase from within a character delimited string.
You will recall from Chapter 4 that functions are developed by declaring them within a script. This section will briefly review some of things to remember when writing functions, and then delve a little more deeply into some of the fine points of function in JavaScript. This material will be developed further in the next section on associative arrays.
Make sure that you declare your most elementary functions earliest
in the header script. This will insure that later functions are
able to use them. The same rule applies to objects. Make sure
that you do not reference any objects that have not yet created
been in any of your functions. Functions in a header script cannot
see objects created by the HTML on your page, nor can they see
objects created by code executing later in the script. If there
is something which must be done with an HTML generated object,
place it in a footer script.
Proper error checking is also very important. If a function fails,
provide a mechanism for the calling routine to detect the failure.
If you can, try to keep the damage to a minimum. It is a sign
of very poor design when the Netscape Navigator "JavaScript
Error" dialog comes up immediately after your page is loaded.
One major problem with using function has to do with passing the
parameters in an incorrect order. If some function expects three
parameters which represent two numerical values and a string,
but you give it a numerical value, a string, and then the second
numerical value, an error will very likely occur. A similar problem
arises when a calling function misinterpretes what should be passed
in a parameter. If a function relies on unchecked input from a
user, check that the parameter is at least of the right type.
If you detect that it is incorrect, flag it, and, if you can,
fix it.
Make sure that all of the function variables are declared as local
variables by preceding them with var, unless you expressly want
them to be global. You may latter call that function from another
function which uses the same local variable names. If some of
these variables are unintentionally global variables, then the
called function can alter the calling routine's variables. This
will produce errors which are often appear very confusing and
can be and difficult todiagnose.
Javascript cannot read (or write) local data files, but it can
load and use HTML files. Therefore, even though you cannot create
a JavaScript function library in an ordinary file, you can write
a function library in an HTML header and load that library inconspicuously
when you want to use it. In the case of our bug tracker example
in chapter 20, the function library is in the header script of
the file functions.htm, loaded into the upper left hand frame.
All of the other frame documents have a global variable called
funcs, which defines that frame from the perspective of the calling
frame. Consequently, you can call 'funcs.myfunction' from anywhere
in any of the nested frames. You can also make a function library
in a frameset itself.
Note that the functions given here are meant to be introductory
only. Since Javascript, at the moment, lacks many of the functions
that have become standard in most programming languages, we have
provided you with a library of some commonly used functions. They
are to be found in function.htm on the CD-ROM. Function.htm is
also the document in the upperleft frame of c9-1.htm, the frameset
document which we will use for the demos in Chapter 20. If you
are in that document, clicking on the tile image in that frame
will popup a window with all of the function declarations and
variable definitions. You can try out all of the string functions
from c9-funcs.htm, which is also on the CD-ROM. This HTML file
is a little test page that allows you to enter parameters and
call a given function with them. It is also useful if you want
to quickly lookup an ASCII code or to convert some HTML text to
a form in which it can be displayed by the browser without being
interpreted by the browser.
In Chapter 8 we used the construct 'Javascript: xxx' as a replacement for a URL reference in linked text or images. We can use this idea to create a one line scratchpad to execute code any time you want. First of all, you can attach just 'JavaScript:' to a link When this is link is exercised a window pops up with two frames: a text widget on the bottom and a blank window on top. If you now type some script into the text box, and then hit Return, the text will be executed. You can even rewrite the document in the top frame.
Rather than writing script code, there is an even easier way to
get the same behavior. Just type 'Javascript:' in the location
display and hit Return. Up pops the scratchpad! In fact, you can
even type your code directly into the location text box and have
it be executed. Figure 9.5 illustrates
this simple JavaScript scratchpad.
Fig. 9.5
The Javascript one line scratchpad is created with the "Javascript:"
URL.
In Hypercard, one can write Hypertalk in a text field and then
'do' the field. Because of this your HyperCard scripts can write
and execute code on the fly. You can do something similar in JavaScript
using eval(). Although eval() sounds like it should be used only
to evaluate mathematical equations this function can actually
do much more. It can evaluate any string which is a Javascript
statements. Try the following experiment. Create an HTML button,
and attach the following statement as its onClick event handler:
eval('alert("I did it!")')
When you click the button the alert box will pop up. In the same
way, you can pass it the contents of an HTML text field or text
area. This is illustrated by the function evaluate(), which is
found in the file c9-3.htm on the CD-ROM. This function consists
of a single line of code, 'eval(what)'. An single HTML button
arranges to pass the contents of a textarea to this function,
which promptly tries to execute the contents of that textarea
as JavaScript code.. The eval statement could be have been placed
directly in the button handler, of course. By placing it in the
separate (but trivial) evaluate function we make it easier to
extend in the future. Figure 9.6 shows
this simple textarea evaluator at work.
Fig. 9.6
The Contents of a TEXTAREA can be evaluated as JavaScript code
using eval.
Associative arrays were introduced in Chapter 4, and have been
used in several previous chapters in this book. You are already
aware that an associative array is a one dimensional array of
pairs. You access the left hand member of the pair with a numeric
index. You access the right hand member of the pair with a string
index equal to the value of the left hand member of the pair.
For example, (left) myArray[1] = 'red' but (right) myArray['red']=
'FF0000'. Arrays must be explicitly created by a function which
takes a generic 'this' object and gives it a size. You can also
create other properties for the array in this function. To actually
create the array you use the new operator together with our array
creation function. For example the statement
myNewArray = new createArray(6,'')
creates an array called myNewArray with 6 elements and initializes all of the left hand members to ''. Note that this is not being done for you by JavaScript in some magical way. You have to write the creation function and then invoke it with the appropriate parameters..
An array is a primordial Javascript object. Its properties, which
represent the array members, may be anything. You must set the
special property known as size, however, in your creation function.
This property gives the length of the array. The size property
will often be found in the zeroth element of the array. You need
to be make certain that your initialization function does not
overwrite the zero element. Listing 9.6 shows a general purpose
createArray() function.
Listing 9.6 A general purpose createArray function.
function createArray(n, init)
{
this.size = n //The only necessary statement
for (I = 1 ; I <= n ; I++)
{
this[i] = init //Initialize all of the left hand elements
}
return this //Return the 'finished' array object to the caller
}
Notice that there is no initialization of the right hand members
of the array. Oyou could also arrange to do this in the createArray
function , but only with some effort. This is because the left
hand element must be unique, and we have initialized all the array
elements to the same value, namely the value init.. If you have
two array members containing the same value, you will only be
able to get to the first one.
In addition to creating arrays, it is often desirable to be able
to reset or clear and an array so that it may be reused. A special
procedure, known as a double replacement scheme must be used to
clear or reset an existing array. (You can always create a completely
new array, of course.). This special approach is needed because
you have no way of knowing that what values are already stored
in the array. In particular, you have no way of knowing that they
are uniqueThe double replacement method uses the following loop
to safely reset the array myArray:
myArray[i] = '@@@@@'
myArray['@@@@@'] = ''
myArray[i] = ''
This method uses a special dummy replacement value to manipulate both the left and right hand sides of the pair. In the example above the string '@@@@@' was used. In order to avoid the problem of non-unique indices this dummy value must be highly unusual, so that it will be extremely unlikely to actually appear in the array.
Do NOT try to initialize the right hand side of an array in the same loop in which you initialize the left hand side. Javascript will mix left and right values for you. If you need to initialize the right hand side then do it in a separate loop.
Associative arrays occur far more often than one might think.
They even occur in everyday life, although most people do not
think of them that way. The picture on the top of a TV dinner
box is related to what is in the box. You choose your dinner by
looking at the picture because the picture conjures up thoughts
of what is in the box. You would not open every box in the freezer
an examine its actual contents in order to decide which one to
put in the microwave. Programmers tend to think of an association
in somewhat less colorful terms such as a = b, x = 3y2 . A Windows.ini
file is an excellent example of the use of associative pairs.
Every entry has a left hand element, such as '*.doc' and a right
hand element, such as 'c:\winword.winword.exe'. In this case,
the association is a relationship between a file suffix and the
application which created it. Hypertext links are also associations;
they are just ordered backward. The following HTML
<A HREF='http://www.myfavoritelink.com'>My favorite link</A>
is actually an associative pair. If we were to place this into an array, most of us would place 'My favorite link' on the left hand side, and 'http://www.myfavoritelink.com' on the right. We often reference complicated, large, and sometimes obtuse objects with less complicated words or nicknames.
A simple associative pair array may not be sufficient for your
needs. Since an array is just an unstructured object, we can conveniently
make it into a more complex object. For example, we could add
a description property to an array. This is useful because the
array may have a short namewhich is easy to use elsewhere in our
code, but that name may not be very illustrative of the array's
purpose.
Another property we might want to add is a property which reflects
the 'element of interest right this minute' or the'current' element.
An example of this might be the the strings in a List Box. The
current property could refer to the currently selected item. This
might be called the currentIndex property, or, more tersely, the
nDx property. (Remember that Javascript is case sensitive.) Finally,
if we are using the list as some kind of a stack, or if we are
keeping track of items which are constantly being added or deleted
from the list, we might need to know where the next open slot
is located. We will call this property the nextIndex property.
But where will we put these properties? Well, properties are just array elements, so the question is where in the element list they will be put If we put them at the beginning, the array elements proper will not start at index=1. If we put them at the end, the array elements will be in the right place, but it is now more difficult to increase the size of the array. This is because there will be referencing problems if you access the properties by their array index, rather than their names.
While Netscape's description of Arrays and their capabilities
are glowing, there are some pitfalls in using arrays. Most of
them stem from a lack of initialization or from incorrect initialization.
The file c9-4.htm on the CD-ROM contains several array initialization
and array manipulation function.Various array functions are given
which present different approaches to the location of the enhanced
array object properties mentioned above, and how (or if), the
array is initialized.
The page generated by this file has buttons to allow you to initialize various array, clear them , clear them to null, to enter a single value, and to fill the arrays. Each array is treated in the same fashion. After you have exercised one or more of these functions you can then look at the contents of each array to see the effect. The first four array creation methods place the enhanced properties at the end of the array and initialize all empty slots to '@'. They differ in how they handle the enhanced properties. The other creation methods place the enhanced properties at the beginning of the array. This set of methods may be used to examine the consequences of not initializing the array, or initializing all of the elements, (including those of the special properties) to the same thing, and of initializing only the empty elements. These functions are obviously not the only possibly ways in which such array functions may be written. Listings 9.7 and 9.8 show two of these functions.
Listing 9.7 A function to create an array with special properties added at the end.
function createArray1_d(n,init)
{
var i = 0
this.length = n + 3
for (i = 1 ; i <= n ; i++)
{
this[i] = init
}
this.description = 'desc'
this.nDx = 'nx'
this.nextIndex = 'ni'
return this
}
Notice that it is not possible to create an uninitialized array
and still place the extended properties at the bottom.
Listing 9.8 An array creation routine with extended properties at the beginning.
function createArray3(n,init)
{
var i = 0
this.length = n + 3
this.description = 'dc'
this.nDx = 'nx'
this.nextIndex = 'ni'
for (i = 4 ; i <= n + 4 ; i++)
{
this[i] = init
}
return this
}
When you first load the c9-4.htm page all of its arrays will have been created; those which initialize themselves will have done so. Initialization will have been done only for the left hand element. No initialization isdone for the right hand element. The viewing routine has been set to look at the, that is element at index n+1, which is not yet processed or initialized in any way.
For purposes of this discussion, we will call those array elements
which are not directly related to a property the 'empty' elements.
Those which are associated with properties will be called the
'special' elements. Each element consists of a left (hand) and
right (hand) element. The left hand element of the zeroth element
of the array has the array size in it. Note that the array size
does not include the zerothe element itself, so that if the array
size is 100 the array actually has 101 elements (the 101st being
the size element). Said another way, the size includes elements
1 ... array.length. You should structure your for loops so that
you iterate from element 1 up to and including element array.length.
Platform dependencies have been reported in the current release of
First, lets look at the those arrays which have the special elements at the end of the array. Click on the '1A' button. This creation routine initializes all of the empty elements to '@' and the special elements to ''. Did you expect to see the property names in the special elements? They do not appear here. They are properties associated with the array object, not values within the array object. This creation scheme work as we would expect, except that we might expect the right hand element of anArray[0] to be undefined. It appears to be merely empty instead.
Before we breathe a sigh of relief, let's look at the next array
creation method(associated with button 1b). Because we could not
tell which element was which, we decided to initialize the left
hand side of each special element with the name of the property
associated with it. We did not do anything to the right hand side
of the properties.... We didn't, but Javascript did! You will
notice that the right hand element has also been filled in with
the name of the property, as shown in Figure 9.8.
This should provide your first clue that Javascript arrays seem
to have a mind of their own. Further, the right hand side of anArray[0]
has the last special property assignment in it.
Fig. 9.8
JavaScript will often fill associative array member values autonomously
Button 1c manipulates an array where all of the special elements have been initialized to the same value as the empty elements. There are no surprises here, except for the '@' put into anArray[0] right hand side element. The final creation method of the first series initializes the special elements to two unique characters for each related property. This creation routine is also mostly well-behaved of all, as shown in Figure 9.9. The presence of the last special element assignment in the right hand side of anArray[0 is no longer a surprise.
Fig. 9.9
Initializing a JavaScript array to unique values works best
The last three creation methods put the special elements at the beginning of the array. In this case it is possible to produce a completely uninitialized array. Still, nothing unusual happens in this case,; the empty elements are just null, as shown in Figure 9.10. The second of these creation methods initializes the special elements, except that the initialization spans the whole array, instead of just the empty elements. This is not a mystery, but is something to watch out for. The very last creation method is designed properly and behaves properly, although, once again, anArray[0 is mysteriously filled in by JavaScript.
Fig. 9.10
Accessing a completely uninitialized array yields null values
Instead of clearing or reinitializing the arrays at this point,
click on the rightmost button named 'Enter One Value/Array'. This
button does exactly that. It enters a "red","FF0000"
pair into anArray[2] for those arrays with special properties
at the end and into anArray[6] for those arrays with special properties
at the beginning.
The array created by method 1a offers up no more surprises in this case. The value pair has been entered in the correct place. Notice that the array is one-based in terms of reference as well. The arrays created by the other methods with the special elements at the end (methods 2 through 4) are also well behaved. When we get to the first of the methods which puts the special elements at the beginning, though, trouble appears. The data pair is placed in anArray[6] but the 'FF0000' is also placed in the left hand element of anArray[7], as shown at the top of Figure 9.11.
Fig. 9.11
Using an uninitialized array can overwrite array elements;
once it is inited all is well.
It is worthwhile noting that this array was the one which was not initialized. To see this effect, reload the page. If you initialize the array in any way, even to null, it becomes well behaved, as shown at the bottom of Figure 9.11. That should be a lesson well learned. The next two methods behave well within the array proper but notice that an 'FF0000' has been placed in the left element of the first unused (not-yet) element.
To continue our array experimentation, let's reinitialize the
arrays, preferably by reloading the file. Then click on the Fill
Arrays button. This will fill the empty elements of the array
with pairs in the form of name=month. Repeat your inspection process.
Array 1a is filled properly but now an 'FF0000' has appeared in
the not-yet element. The same is true for the other three arrays
with propertieslast. As might be expected, the uninitialized properties
first array fails to perform as desired, as shown at the top of
Figure 9.10. The other two arrays
with properties first behave well, except for the standard quirks:
the left element of the last array element ends up in the right
element of anArray[0] and the left side of the not-yet element
appears to obtain the right side of the now discarded color pair.
Clearing the array solves all the problems associated with not
being initialized, as shown at the bottom of Fig. 9.10
Entering data into an uninitialized array scrambles the values;
after being clear all is well.
You can perform a variation on this experiment by reinitializing the arrays and then clearing them, using either method. Follow the procedures given above and add a single value to all of the arrays, or simply fill the arrays. The 0 element and not-yet element quirks will remain, but the array elements themselves will behave properly.
The companion page in the file c9-4x.htm provides a variation
on the same theme. It is the same as the code in c9-4.htm, except
that all its arrays have an extra uninitialized element, just
after the original eight array elements. As before a not-yet element
is displayed. If you go through the same procedures, you will
see that this extra element causes even more confusion.
Initialize your arrays before you use them!
The next listing, 9.9, is worth special attention. T It provides
a way to fill the associative pairs of an array from two parallel
lists of delimited elements. It is a lot faster to write such
lists than it is to specifically set each right and left element.
This function uses the library function word() which we describe
above. You will recall that this function uses a character delimiter
to separate the elements in the list. The separator can be any
character; the most common one is a comma. Hypercard enthusiasts
will recognize this as an item list.
Listing 9.9 A function to load both left and right elements of an associative array from two delimited lists
function fillArrayFromLists(anArray,aaList,bbList,sep,s,f)
{
var lstr = ''
var rstr = ''
var i = 0
var counter = 1
for (i = s ; i <=f ; i++)
{
anArray[i] = word (sep,counter,aaList)
anArray[anArray[i]] = word(sep,counter,bbList)
counter++
}
}
As a demonstration of the power of this function, let us invoke it using two short lists. In our cases we will use the asterisk (*) character as the delimiter. The following code shows each person on the list aList being associated with a particular month, as given in the list bList.
var aList = 'Mona*Jane*Barbara*Sandra*Maxine' var bList = 'January*March*September*February*December' fillArrayFromLists(array1_a,aList,bList,'*',1,5)
Now that we have created our enhanced array object and dissected it at great length, how can we use it and which version should be adopt? Although most of the creation methods we have tested will work if the array is properly initialized, we will use the final version of properties first methods in our subsequent code. This is the one which did not overwrite our special properties. Some of the most frequent uses of an array object of this type are as a string list, as an object list, or as a stack. Most of the time only the left hand elements of the associative pair are used, but these lists can also hold an associated object (right hand element).
Another excellent example is a array of newly created child windows, since JavaScript does not provide such an array. Listing 9.10 shows a function which can be used to add a window to such a window array. Note that this function uses global variables to keep track of the next available array slot (in nextWin), as well as the current window (in curWin).
Listing 9.10 A function to add a window to a window tracking array
function winArrayAdd(aWinHdl)
{
// set next open slot in winArray to hold this window handle
// and that windows creator
aWinArray[nextWin] = aNewWin
aWinArray[aWinArray[nextWin]] = aNewWin.creator
curWin = nextWin // make this the current window
nextWin++ // increment next available slot pointer
}
Instead of using global variables we can, of course, use the special
properties approach as well. The code in listing 9.11 illustrates
this form of the window addition function. While listing 9.11
does not look much different from 9.10, the latter version is
the preferred one. This is because tit keeps essential window
tracking information together. Other functions may therefore access
all the relevant data by simply examining appropriate elements
of the array, rather than having to look at the array and also
consult some global variables.
Listing 9.11 Another version of the window add function using special properties.
Example 5b
function winArrayAdd(aWinHdl)
{
// set next open slot in winArray to hold this window handle
// and that windows creator
aWinArray[aWinArray.nextIndex] = aNewWin
aWinArray[aWinArray[nextWin]] = aNewWin.creator
aWinArray.ndx = aWinArray.nextIndex // make this the current window
nextWin++ // increment next available slot pointer
}
One of the biggest criticisms of associative arrays is that they are one dimensional. The argument could be made that the left and right hand side constitute a second dimension, of size two, but this is not really a true multidimensional array. In fact, two dimensional arrays are really just arrays of arrays. Because of the nature of associative arrays, one can develop some such complex structures with relative ease.
Imagine, if you will, an array of colors. In a simple implementation
of such an array the left hand element will contain the name of
the color, such as "red", and the right hand member
will contain the hexadecimal value for the color. For red this
value is 'FF0000'. There are many shades of red, however, and
Netscape has even named a few specific ones. Of course, we could
add all of these variant names to the array. It would be much
nicer to be able to go to an array, find "red," and
then access into a list of colors which were various shades of
red. We will now construct an example in which we can do that.
As usual, the left element will be initialized to 'red'. The right
element, however, will holds a handle to another array called
moreReds. The array moreReds contains the typical colorname=hexvalue
pair. Listing 9.12 shows a very simpleminded way of creating such
a multidimensional array.
Listing 9.12 A first approach to creating a multi-dimensional array
colors = new createArray(9,'') moreRed = new createArray(20,'') moreYellow = new createArray(20,'') moreOrange = new createArray(20,'') moreBrown = new createArray(20,'') moreGreen = new createArray(20,'') moreBlue = new createArray(20,'') morePurple = new createArray(20,'') moreGray = new createArray(20,'') moreWhite = new createArray(20,'') ...
This is not only tedious, but it is also not even a complete solution. We will have to put each of these secondary arrays into the right hand elements of the first array. There must be an easier way to do this. We need to develop an approach to getting the various values into the multidimensional array, and also to getting them out again.
Listing 9.13 contains three functions. The createArray() function is very similar to what we have already seen. The fillcolorArray() function fills both the left and right elements of an associative array, which is passed in as a parameter. This means that if you execute the statement
anArray = fillColorArray(anArray,'green','gr')
the left elements will be filled with green1, green2,... and the right elements will be filled with gr1, gr2,.... The third function, lotsOfColors(), is used toorchestrate the creation and initialization of this array. This function also uses our old friend, the word() function..
One might think of using eval() to metamorphose a constructed string into an array handle, as in the following statement
dstr = eval(dstr = new createArray(20,''))
but, in fact, this is not necessary. Here we see another tribute to the flexibility of Javascript variables because the statement
dstr = new createArray(20,'')
works just fine. Try this in C or Pascal! The resulting value
of dstr, is then passed to fillColorArray() to be stuffed with
values. When this function returns, dstr is plugged into the right
hand value of the current array pair.
Listing 9.13 Three functions used to create an associative array of associative arrays.
function createArray(n,init)
//n size of array
//init what you want all values initialized to
{
var i = 0
this.length = n
for (i = 1 ; i < n ; i++)
{
this[i] = init
}
return this
}
function fillColorArray(anArray,init,init2)
//n size of array
//init what you want all values initialized to
{
var i = 0
var astr = ''
var bstr = ''
var n = anArray.length
for (i = 1 ; i <= n ; i++)
{
astr = init + i
bstr = init2 + i
anArray[i] = astr
anArray[astr] = bstr
}
return anArray
}
function lotsOfColors()
{
var cstr
var colors = new createArray(9,'')
var colorstring = 'red,yellow,orange,brown,green,blue,purple,gray,white'
for (i = 1 ; i <= 9 ; i++ )
{
cstr = word(',', i , colorstring)
colors[i] = cstr
dstr = 'more' + cstr
dstr = eval(dstr = new createArray(20,''))
dstr = fillColorArray(dstr,cstr,cstr.substring(0,2))
colors[colors[i]] = dstr
astr = colors[cstr][3]
bstr = colors[cstr][astr]
alert( astr + '\n' + bstr)
}
}
The function lotsOfColors() warrants close attention. It starts off by creating the associative array, colors, as well as a comma delimited string which lists the colors it will use. It then cycles through a loop for each color to be processed. It first extracts the color we want from colorstring (as a string) and then sets the left hand element of the current associative pair to that string. Thus colors[1] would yield 'red'. That's the easy part. How do we name the array handles which we will place into the right hand member? We can construct a as 'moreRed' but moreRed is then a string. Fortunately, JavaScript permits a string to be enough of a chameleon that it may be turned into an array handle.
Separate array initialization and element filling are Required.Initializing and stuffing an array in the same routine does not work. Strange substitutions which are symptomatic of an uninitialized array result.
So far, we have not tried to access the secondary members of this construction. Surprisingly enough, that is not much harder than accessing the usual one dimensional associative array. This example shows you how to extracts values:
If you attempt to do this in one step, though, it appears confusing. Use some algebra to substitute the value of astr in the second equation. You get the following massive expression:
bstr = colors[cstr][colors[cstr][3]]
The substitution is delineated by bold brackets so that you can follow it more easily.
Note that we placed some convenient, but arbitrary, values into
our subsidiary arrays. We could have had the fill function generate
successive, properly spaced hex values which were within the appropriate
color range, instead. In general, it is more likely that you will
want to use these kinds of arrays to keep arbitrary data.
This section will review some of the fundamental concepts of HTML
objects in JavaScript, and then proceed to the more complex Image
and Text objects described at the beginning of this chapter. By
this point we are well acquainted with the various HTML object
in JavaScript. The focus of this section will be to explore some
of their innovative uses. Many of the "tricks" of JavaScript
revolve around its polymorphism, namely, its ability to view a
single thing in different ways.
JavaScript strings provide an excellent example of this. Strings
in JavaScript may be thought of as HTML objects, in addition to
their usual meaning. This is because JavaScript provides methods
form giving strings many of the formatted characteristics of HTML
text, such as bold, italics, big, link, etc. When you use a construction
such as
mystring = 'This is some text.' mystring = mystring.bold,
mystring becomes '<B>This is some text.</B>'.We will use methods such as these in the TEXT object which we will create.
You will recall that objects are just arrays of properties. However, properties are accessed somewhat differently than array elements, and they usually only use the left hand side of the array. New properties can be added to an object at any time. This is possible because only the left hand element of the array is used. Trying to add new array elements on the fly when you are using both sides of the array element is fraught with disaster, as we have seen previously.
Objects can have properties and/or methods. Methods are simply declared as properties. For example, you might have a 'color' object. Colors are cited in terms of their red, green, and blue components (at least in browsers; there are other color mixing schemes). Many of Netscape's colors also have common names. To declare a 'color' object, we must make a constructor/creator, as shown in Listing 9.14. This is no different than the type of construction methods we have seen for arrays.
Listing 9.14 Creating a simple color object.
function createColor(name,red,green,blue)
{
this.name = name
this.red = red
this.green = green
this.blue = blue
this.length = 4
return this
}
myGreenColorObject = new createColor('green','22','DD','22')
Object constructors really just reserve space for the property
array elements. We can access the property values by their array
indices, as well as by using the dot (.) operator. This is sometimes
this is extremely useful in order to store objects. In order to
store the color object as a cookie,the code in listing 9.15 might
be used.
Listing 9.15 Storing an object's properties.
function storeColor(aColorObject)
{
var k = aColorObject.length
var astr = ''
var I = 0
for(i = 1 ; I <= k ; I++)
{
astr += aColorObject[i] + '@'
}
return astr
}
You can easily reverse this process, as listing 9.16 shows.
Listing 9.16 Retrieving an object's properties.
aColorObject = createColor('tempname','','','')
getColor(aColorObject)
function getColor(aColorObject,astr)
{
var l = astr.lastIndexOf'@'
var n =0
var f = 0
var I = 1
while ( n >= 0 )
{
f = astr.indexOf(astr,n)
aColorObject[i] = astr.substring(n,f)
if (f == l) // only one more left to get
{
aColorObject[i+1] = astr.substring(f+1,astr.length)
break
}
else n = f + 1
}
}
These examples are not the only ways to perform either of these
functions. The storage function of listing 9.15 could also have
been implemented as shown in Listing 9.17, for example. We could
also use the word() function to retreive the properties of an
object from a string. This would be slower than the approach shown
above, however.
Listing 9.17 An alternative color storage function.
function storeColor(aColorObject)
{
var astr = ""
for (var i in aColorObject)
astr += aColorObject[i] + '@'
return astr
}
It would be nice if the color object knew how to do its own conversion to and from the string representation. Since we have already written the essential functions, it's easy to give them them to the object. To declare methods for the color object, we just give the methods names and assign them as properties of the object itself. If we use this approach our color object constructor will be as shown in Listing 9.18.
Listing 9.19 Creating a color object with methods and properties.
function createBetterColor(name,red,green,blue)
{
this.name = name
this.red = red
this.green = green
this.blue = blue
this.toString = storeColor
this.fromString = getColor
this.length = 6
return this
}
myGreenColorObject = new createBetterColor('green','22','DD','22')
You may have noticed that the length is set manually. In theory,
you should not have to do this, but depending on the flavor of
Javascript which you are using, you may or may not need to do
this in practice. You lose nothing by doing it yourself, and it
is safer. As with arrays, the length property occupies the zeroth
element.
If you are going to convert a function into a method, you can (and should) alter it somewhat to exploit the fact that it is now a method function. If a function which is external to an object to act upon that object, you have to pass it the object as one of its parameters (unless the object has been declared globally). Once you make the function a method of the object, it can reference the object which contains it via the keyword this. Consequently, we can rewrite the storecolor method to looks like Listing 9.19.
Listing 9.19 Storing an objects properties using a method function.
function storeColor()
{
var k = this.length
var astr = ''
var I = 0
for(i = 1 ; I <= k ; I++)
{
astr += this[i] + '@'
}
return astr
}
In order to change a function into a into a method function of an object, take these three steps:
Make the method a property of the object, as in aColor.toString = store color.
Do not pass the object as a parameter to the function
Change all references to the object to this; e.g., l = aColorObject.length becomes l = this.length.
Drawing images is a complex affair. One of the most important
things to remember about image manipulation in terms of Javascript
is that all images must be characterized by HEIGHT and WIDTH modifiers
in their HTML tags. If you leave these modfiers out, Javascript
will misbehave or will not function at all. We will create an
image object which will encapsulate all the important image properties,
including the height and width.. The image object will also know
how to display itself in several contexts. Theconstructor for
the image object is shown in Listing 9.20.
Listing 9.20 A Comprehensive Constructor for an Image Object
function createImage(title, filename, height, width, vspace, hspace,
border, bordercolor, frame, framecolor, href, notes)
{
this.title = title
this.filename = filename
this.height = height
this.width = width
this.vspace = vspace
this.hspace = hspace
this.border = border
this.bordercolor = bordercolor
this.frame = frame
this.framecolor = framecolor
this.href = href
this.notes = notes
this.draw = drawImage
this.frame = frameImage
this.reference = referenceImage
this.popup = popImage
return this
}
If you examine the constructor for the image object shown above,
you will see that it not only encapsulate the normal HTML qualifiers
for an image, but it also has properties for a file spec, a title,
an associated URL, and notes. It can present itself as a plain
image, a framed image, or as a linked image. It can also pop itself
up in a window of its own. The image 'draws' itself by presenting
you with a string which you can send to a nascent document using
document.write(). The code in Listings 9.21, 9.22 and 9.23 shows
the methods used to draw a plain image, a linked image, or a framed
image.
Document created on the fly, also known as nascent documents, are discussed thorough in the "Nascent Document" section of Chapter 8.
Listing 9.21 The image object's plain draw method.
function drawImage(how,border)
{
var astr = ''
// if the image does not use this modifier, the parameter can be empty or '^'
astr = '<IMG SRC="' + this.filename + '"'
if (how != '') astr += ' ALIGN=' + how
if (this.height != '') astr += ' HEIGHT=' + this.height
if (this.width != '' && this.width != '^') astr += ' WIDTH=' + this.width
if (this.vspace != '' && this.vspace != '^') astr += ' VSPACE=' + this.vspace
if (this.hspace != '' && this.hspace != '^') astr += ' HSPACE=' + this.hspace
if (this.border != '' && this.border != '^') astr += ' BORDER=' + this.border
astr +='>'
if (this.border != '' && this.border != '^') astr = '<FONT COLOR=' +
this.bordercolor + '>' + astr + '</FONT>'
return astr
}
Listing 9.22 The image object's linked draw (reference) method.
function referenceImage(how,border,ref,atext) { if (ref == '')
ref=this.href if (ref == '') ref = location.href if (atext ==
'') atext = 'Your text here!' var astr = '<A HREF=' + ref +
'>' astr += '<IMG SRC="' + this.filename + '"'
if (how != '') astr += ' ALIGN=' + how if (this.height != '')
astr += ' HEIGHT=' + this.height if (this.width != '' &&
this.width != '^') astr += ' WIDTH=' + this.width if (this.vspace
!= '' && this.width != '^') astr += ' VSPACE=' + this.vspace
if (this.hspace != '' && this.width != '^') astr += '
WIDTH=' + this.hspace if ('' + border != '') astr += ' BORDER='
+ this.border astr +='>' astr += atext astr += '</A>'
return astr }
Listing 9.23 Tthe image object's framed draw method.
function frameImage(how,border,leading)
{
var astr = '<TABLE '
if (how != '') astr += ' ALIGN=' + how
if ('' + border != '') astr += ' BORDER=' + border
if ('' + leading != '') astr += ' CELLSPACING=' + leading
astr += '><TR><TD ALIGN=CENTER>'
var bstr = '</TD></TR></TABLE>'
astr += this.draw('',2)
astr += bstr
return astr
}
Notice that the frame method essentially draws the table structure
which will be the 'frame' and then calls the draw method to draw
the image. In all cases, the image can have a border. In both
the draw and frame methods the border color is determined by the
current font color. This is a underutilized fact of JavaScript
and requires some effort to use. Since the image object encapsulates
the border color, it is as easy to include it as it is to include
any other modifier. Referenced image borders, though, do not have
such a choice; they will be the link or vlink color specified
for the page.
You can use the Image Object to make a database of your images.
A file name, notes ( which could include a caption for the image),
and a URL are included as part of the object. The example program
on the CD arbitrarily sets up a trivial database of six image
objects held in an array. It can present the 'catalog' of images
as plain, framed, or referenced. It can also popup any image in
its own window. Hypercard users will appreciate this twist. Listing
9.24 shows the method function which creates the popup.
Listing 9.24 The popup method of the image object.
function popImage(title)
{
var w = 50 + parseInt(this.width)
var h = parseInt(this.height) + 50
scrl = 'no'
if (w>640){w=640;scrl='yes'}
if (h>480){h=480;scrl='yes'}
var whstr ='WIDTH=' + w + ',HEIGHT=' + h + 'RESIZABLE=yes,SCROLLBARS=' + scrl
aNewWin = self.open('',title,whstr)
if (!aNewWin)
{
alert('Could not open a new window. A window by this name may already be open or you may
have run out of memory.')
}
else
{
var astr = '<HTML><HEAD>'
astr += '<BASE HREF="' + location.href + '">'
astr += '<TITLE>' + this.title + '</TITLE>'
astr += '</HEAD><BODY>'
aNewWin.document.write(astr)
var bstr = '<CENTER>' + this.draw('CENTER') + '</CENTER>'
aNewWin.document.write(bstr)
aNewWin.document.write('</BODY></HTML>')
aNewWin.document.close()
}
}
The resulting image display is shown in Figure 9.11.
The page generated by the CDROM file c9-5.htm is covered with
popup windows containing its tiny database of six images. The
images were placed in the pages arbitrarily; the page has no input
interface. . Any single image can be popped up by placing its
number in the text box next to the 'Image' button and clicking
the button. Figures 9.12 and 9.13 show
the plain and framed versions of the image catalog.
Fig. 9.11
The Image Object may be activated to popup an image database.
Fig. 9.12
c9-5.htm and its popup catalogue of plain images
Fig. 9.12
c9-5.htm and its popup catalogue of framed images
Most of the draw methods presented here accept a string 'terminator' as a parameter, and also return a string. The terminator will usually be the carriage return character '\n'. This results in a string with linebreaks suitable for an alert. You can also use '<BR>' as the string terminator; this will yield a string which can be nicely presented in a window. The utility function showInWindow in Listing 9.25 will popup a window and try to put anything which you hand it into that window. We will use this function quite often in later chapters.
Listing 9.25 Function which shows an object, in the form of an
HTML coded string, in a popup window.
function showInWindow(tstr,title)
{
var w = 300
var h = 300
scrl = 'yes'
if (w>640){w=640;scrl='yes'}
if (h>480){h=480;scrl='yes'}
var whstr ='SCROLLBARS=' + scrl + ',RESIZABLE=yes,WIDTH=' + w + ',HEIGHT=' + h aNewWin = self.open('',title,whstr)
var astr = '<HTML><HEAD>'
astr += '<BASE HREF="' + location.href + '">'
astr += '<TITLE>' + title + '</TITLE>'
astr += '</HEAD><BODY>'
aNewWin.document.write(astr)
aNewWin.document.write(tstr)
aNewWin.document.write('</BODY></HTML>')
aNewWin.document.close()
}
The approach which we employed for the Image object may be used
for text manipulation as well. We will create an image object
which holds various important properties related to how the text
is displayed.Let's do something similar for text. The constructor
function for the Text object is shown in Listing 9.26.
Listing 9.26 The Constructor function for the Text Object.
function createText(type,title,text,size,color,bold,italic, supersub,frame,href,notes)
{
this.type =type
this.title= title
this.text = text
this.size = size
this.color = color
this.bold = bold
this.italic = italic
this.supersub = supersub
this.frame = frame
this.href = href
this.notes = notes
this.draw = drawText
this.frame = frameText
this.reference = referenceText
this.popup = popText
this.lines = stringToList
this.word = word
return this
}
Notice that this function is very similar to the constructor for the image object. It encapsulates some of Netscape's own string properties. This object, too, knows how to present itself as plain, framed, or referenced text. It can also pop itself up in a window. Note that it has a 'type' property; that is, the text can be a list, a paragraph, etc. Its draw method accepts a parameter which allows you to draw the text according to a predefined type method or to draw the text using the properties which you have set.
The text object has some methods which can access the text as
lines or words. Again, this is a crude emulation of Hypercard.
These methods allow you to define the separator which separates
one phrase from another. The StringToList method accepts a prefix
and a suffix as well as the list separator. It separates the string
into phrases and then adds the prefix and suffix given. Use '\n'
as the separator character to get logical lines. Our old friend,
the 'word' function, returns the word at the position which you
specify. The implementation of the stringToList method is shown
in Listing 9.27. This function will be found in the file c9-6.htm
on the CDROM.
Listing 9.28 A Function to separate character delimited strings into phrases.
function stringToList(sep, pref,suf)
{
var n = 0
var f = 0
var astr = ''
var nstr = ''
var finished = false
while (f >= 0 )
{
f = this.indexOf(sep,n) // gets position of next sep
if (f == this.lastIndexOf(sep)) // is it the last one?
{ // if so...
f = this.length // set end to end of string
finished = true // flag finished
}
nstr = pref + this.substring(n,f) + suf // get string,add prefix and suffix
astr += nstr // add to build string
if (finished ) break // exit loop if done
n = f + 1 // update start position
} // try again
return astr
}
Note that this function uses an interesting trick to decide that when it has come to the end of the string. Before it starts its loop, it uses lastIndexOf() to get the character position of the last occurrence of the separator. As it walks the string, it checks to the character found equals the last instance of that character. If it does, it sets the phrase end to the end of the string, , performs its usual string separation, and then quits.
Another useful routine, which can easily be modified for your
own purpose, is the makeTitle method. MakeTitle goes through a
string and eliminates spaces, but capitalizes the letter after
the space. This is useful for catching two word window names,
such as "Hi there" which a user has entered. If you
hand the open() command more than one word, it simply will not
open the window, nor will it tell you why. The makeTitle method
will convert such strings into more acceptable titles, such as
"HiThere" in this case. The makeTitle function is shown
in Listing 9.28. Figure 9.14 shows
the result of exercising the popup capabilities of the Text object.
Listing 9.28 c9-2.htm A Function to create Window Title
function makeTitle(what)
{
var n = what.length
var i = 0
var cc = ''
var accstr=''
for (i = 0 ; i < what.length ; i++)
{
cc = what.substring(i,i+ 1)
if ( cc != ' ' )
{
accstr += cc
continue
}
else
{
i++
cc=what.substring(i,i + 1)
cc = cc.toUpperCase()
accstr += cc
}
}
return accstr
}
Fig. 9.14
c9-6.htm and its database of text objects in popup windows.