JavaScript's data types can be combined to create more sophisticated structures.

JavaScript functions are an important method for organizing your scripts.

• Functions are a way to isolate semi-independent or frequently used sets of statements, and optionally produce a value based on the result of their execution.
   
  Being separate units, functions are easier to debug and reuse.
  
  Functions can have parameters passed to them, and access variables defined elsewhere in the document.
   
  
• Functions have names like variables, and must follow the same naming rules.
   
  
• If a function has a value, it can be used anywhere a literal or variable can be used;
   
  If a function doesn't have a value, it is a statement unto itself.
   
  
• Unlike variables, functions must always be defined in advance, with the function keyword, before they are used or called:

function dayTime() {   var now = new Date   return now.getHours() + ':' + now.getMinutes() } document.write('The time is now ' + dayTime() + '. Are you on time?')

Function definitions load with the rest of document, but they are not executed until called, as in the last line in the example above.

Function definitions are therefore usually placed in the head of the document, ready for later use.
 

• If the function call is to be replaced by a value determined in the function, that value must be the parameter of a return statement, whose execution will terminate the function call.
  
  The function call will terminate with an undefined value if:
  

• the return statement doesn't have a parameter, or
  
  
• a return statement isn't executed, and the function reaches the closing brace.
   

• Parameters are passed to a function as a parameter list of variables and/or literals, separated by commas:

function quadranomial(x, a, b, c) {   return a + b*x + c*x*x } x = 2 z = quadranomial(x, 4, 3, 0) document.write(z)

When a function is called with parameters, the data is copied to the corresponding variables in the function definition.

Therefore, with one exception (objects, discussed below), a variable used in a function call can't be changed by the function.

If a function is called with fewer parameters than in its definition, the extra parameters are set to null.

If a function is called with more parameters than in its definition, the extra parameters are unnamed but are available through the function's parameter array (discussed below).

 

• A function's parameter variables have a scope that is local to the function, i.e. they are not accessible to external statements.
  
  One can also define other local variables inside a function with the var keyword.
  
  The var keyword's use outside of a function results in a variable with global scope, visible anywhere in a document, including inside of functions.
  
  If you simply begin using a variable without first declaring it, either inside or outside of a function, it will also be a global variable.
  
  (Note this is the opposite of PHP, which assumes all variables inside of a function are local, unless explicitly declared global.)
  
  Global variables are an alternative to using a function's parameter list, especially when you need to modify a variable, but they tend to restrict a function's use by making it externally dependent.
   
  
• A JavaScript function can be recursive, i.e. it can call itself.
  
  This carries with it the usual caveats about making sure it doesn't do so ad infinitum!
   
• The typeof operator will describe all functions as one might expect:

document.write(typeof quadranomial)

Note that this is different than:

document.write(typeof quadranomial(1, 2, 3, 4))

• Occasionally the value of a function (or other JavaScript statement) is not only unnecessary but can be undesireable (e.g. see the "Top of page" link below).
  
  In this case, the void operator can be used to throw away the result:

document.write(typeof void quadranomial(1, 2, 3, 4))

The precedence and associativity table previously described the void operator.

JavaScript objects are the key to interacting with documents.

• Objects are collections of properties, methods, and event handlers that are related to each other.
  
  Properties are values such as numbers and strings.
  
  Methods are functions that make use of the objects that contain them, possibly transforming them.
  
  Event handlers are sentinels for particular events, such as mouse clicks, timeouts, or errors, that respond by executing JavaScript statements.
  
  Objects can also contain other objects, which we will refer to as subobjects.
  
  We will refer to all of the above as object members.
  
  The members of an object are usually explicitly named, and are referenced by the terminology object.member and often by object.subobject.member, etc.
  
  The precedence and associativity table previously described the . operator.
   
  
• As an example, consider the elements of a document such as buttons, fields, forms, images, etc.
  
  Every such document element will (usually) be associated with an object, automatically as the page loads.
  
  We saw such an element-object pair previously, a form input field:

<script language="JavaScript">   function checkCollege(college) {     if (college.value.toLowerCase() != 'amherst College' &&       college.value.toLowerCase() != 'amherst') {       college.value = 'Not Acceptable!'     } else {       college.value = 'Amherst College'     }   } </script> <form name="CollegeInput">   <input name="College" type="text" value="Type Your College Here"          size="22" onChange="checkCollege(this)"> </form>

This script can be interpreted as follows:

• This HTML form with the name CollegeInput corresponds to an object called document.CollegeInput.
   
• This form object contains a text-input-field object called document.CollegeInput.College, which in context can be referenced by the synonym this, simplifying many expressions.
   
• The field object has the explicit properties this.name, this.type, this.value, and this.size, as well as an event handler this.onchange().
   
• When the user enters text in the field, the property this.value changes in response.
   
• The event handler this.onchange() notices the new text, and executes its action, a function statement.
   
• The function checkCollege(this) copies the field object reference this to a parameter named college, now a reference to the same text-input-field object.
   
• The function specifically references the property college.value, which is a string.
   
• The function also uses the method college.value.toLowerCase(), which applies the obvious transformation to the object college.value.
   
• The effect of the function is to reset college.value, by a simple assignment, thereby again changing the contents of the text field (though not in a way that triggers the event handler this time).
   

Question: What other document objects have we encountered already? What properties did they have?
 

• Each object is a unique "data type" with respect to its particular collection of members.
  
  Nevertheless, the typeof operator will describe all objects as being the same kind:

document.writeln(typeof document.CollegeInput) document.write(typeof document.CollegeInput.College)

• Important Note: JavaScript objects are more like C++/Java structures than classes, i.e. they do not provide inheritance or message passing.
  
  However, JavaScript objects can be based on other objects, which are called prototypes.
  
  JavaScript objects are also extensible, even those predefined in a document, allowing the addition of new properties and methods:

document.CollegeInput.College.not = 'Not Acceptable!' document.CollegeInput.College.checkCollege = checkCollege()

Note also that some properties in a predefined object might be read-only.

Netscape has published a nice comparison of objects in C++/Java and JavaScript.

• There are several ways to create an object:
  
  

• With JavaScript 1.2 or later, you can create an object with an object literal:

ssCellA1 = { column:0, row:0, name:cr2name, value:32.4 } document.write('<table width="150" border="1" cellspacing="1" cellpadding="1">') document.write('<tr><td width="50" align="center"></td>') document.write('<td width="100" align="center"><b>A</b></td>') document.write('</tr><tr><td align="center"><b>1</b></td>') document.write('<td align="center">') document.write(ssCellA1.name() + ' == ' + ssCellA1.value) document.write('</td></tr></table>')

• For greater compatibility, you can create an object by using the new keyword, the Object prototype, and subsequent property initializations:

ssCellB1 = new Object() ssCellB1.column = 1 ssCellB1.row = 0 ssCellB1.name = cr2name ssCellB1.value = '' document.write('<table width="250" border="1" cellspacing="1" cellpadding="1">') document.write('<tr><td width="50" align="center"></td>') document.write('<td width="100" align="center"><b>A</b></td>') document.write('<td width="100" align="center"><b>B</b></td>') document.write('</tr><tr><td align="center"><b>1</b></td>') document.write('<td align="center">') document.write(ssCellA1.name() + ' == ' + ssCellA1.value) document.write('</td><td align="center">') document.write(ssCellB1.name() + ' == ' + ssCellB1.value) document.write('</td></tr></table>')

• When initializing a number of objects of identical type, you can create an object by defining a constructor for that object type, and then using it with the new keyword:

function SSCell(column, row, value) {   this.column = column   this.row = row   this.name = cr2name   this.value = value } ssCellA2 = new SSCell(0, 1, -27) ssCellB2 = new SSCell(1, 1, 7.5) document.write('<table width="250" border="1" cellspacing="1" cellpadding="1">') document.write('<tr><td width="50" align="center"></td>') document.write('<td width="100" align="center"><b>A</b></td>') document.write('<td width="100" align="center"><b>B</b></td>') document.write('</tr><tr><td align="center"><b>1</b></td>') document.write('<td align="center">') document.write(ssCellA1.name() + ' == ' + ssCellA1.value) document.write('</td><td align="center">') document.write(ssCellB1.name() + ' == ' + ssCellB1.value) document.write('</tr><tr><td align="center"><b>2</b></td>') document.write('<td align="center">') document.write(ssCellA2.name() + ' == ' + ssCellA2.value) document.write('</td><td align="center">') document.write(ssCellB2.name() + ' == ' + ssCellB2.value) document.write('</td></tr></table>')

 

• When you close a document window, all objects you have created will be automatically deleted.

Occasionally, though, you may wish to explicitly delete an object:

delete ssCellB2 document.write('ssCellB2 is a(n) ' + typeof ssCellB2 + ' value.')

You can even delete a particular object property, leaving the rest of the object:

document.write('ssCellA2.value a(n) ' + typeof ssCellA2.value + ' value.<br>') delete ssCellA2.value document.write('ssCellA2.value a(n) ' + typeof ssCellA2.value + ' value.<br>') document.write('ssCellA2.name a(n) ' + typeof ssCellA2.name + ' value.')

The precedence and associativity table previously described the delete operator.

• Hierarchical object references can often become very long, as seen for the form object document.CollegeInput.College above.
  
  The with statement provides a solution, by designating an "object root" with which JavaScript associates otherwise undefined variables:

/* Previously defined:    <form name="CollegeInput">      <input name="College" type="text" value="Type Your College Here"             size="22" onChange="checkCollege(this)">    </form> */ with (document.CollegeInput.College) {   document.write('"' + value + '" can be at most ')   document.write(size + ' characters long.') }

 

• An alternative means of referencing the members of an object is by using the notation of associative arrays, where a string provides the index (or key) into the members (or values) of the object:

document.write('ssCellA1.value = ' + ssCellA1.value + '<br>') document.write("ssCellA1['value'] = " + ssCellA1['value'])

Note that in JavaScript 1.0, you can also reference an object's properties by numeric index, i.e. ssCellB1[0] is the same as ssCellB1['column'] is the same as ssCellB1.column.

This is no longer true in newer versions of JavaScript, with the sole exception of certain document elements that we will talk about later.

Using associative arrays and an object-specific variation of the for statement, called the for-in statement, it's possible to examine all of an object's properties:

document.write('The members of the object ssCellA1 are:<br>') for (member in ssCellA1) {   document.write('ssCellA1.' + member + ' = ' + ssCellA1[member] + '<br>') }

Note that in this statement, the variable member is set to the name of each of the object's members as a string.

JavaScript does not have an explicit array type, but you can create an array object.

• An array is an ordered set of data, and in JavaScript it can be created as a particular type of object using the Array prototype:

fiveColleges = new Array('Amherst College',                          'Hampshire College',                          'Mount Holyoke College',                          'Smith College',                          'University of Massachusetts',                          'Williams College') document.write('fiveColleges is a(n) ' + typeof fiveColleges + ' value.<br>') document.write('fiveColleges[0] == ' + fiveColleges[0] + '.<br>') document.write('fiveColleges has length ' + fiveColleges.length + '.')

Note that, as elsewhere in the C family, the first element of an array is indexed by 0, and the last by n - 1, where n is the length of the array.

Arrays constructed this way come with a length property that dynamically changes as elements are appended.

Arrays may be constructed using several alternative formats:

JavaScript Array Object Construction
Format	Definition	Examples	Needs JS
new Array()	Empty array; elements to be added later	squares = new Array() while ((sl = squares.length) < 5) squares[sl] = sl*sl document.write(squares[3])	1.1
new Array(n)	Array with n elements, to be added later (often nonsequentially)	sparse = new Array(5) sparse[4] = 'The Only One' document.write('Length = '+ sparse.length) document.write('[0] = ' + sparse[0]) document.write('[4] = ' + sparse[4])	1.1
new Array(a1,a2,…)	Array with argument list of elements	fiveColleges = new Array('Amherst College', 'Hampshire College', 'Mount Holyoke College', 'Smith College', 'University of Massachusetts', 'Williams College') document.write(fiveColleges[3])	1.1
[a1,a2,…]	"Literal" array with bracketed list of elements	sports = ['baseball', 'basketball', 'football', 'lacrosse', 'soccer'] document.write(sports[3])	1.2

Note that there is an ambiguity with respect to a single numeric argument  to Array(), as it could be either an empty array with that length (the second construction above) or an array with a single numeric element (the third construction above); generally speaking, the former is used.

A special case is for Array(1), which will have length one in either case; in JavaScript 1.1 that element is undefined, but in subsequent versions it is set to "1" to avoid confusion.
 

• The previous methods of constructing arrays only work with JavaScript 1.1 or later.
  
  You may occasionally run into older scripts written for original JavaScript 1.0, where one must build a constructor that references the length property:

function genArray(n) {   this.length = n } threeColleges = new genArray(3) threeColleges[0] = 'Bryn Mawr College' threeColleges[1] = 'Haverford College' threeColleges[2] = 'Swarthmore College' document.write('threeColleges has length ' + threeColleges.length + '.<br>') document.write('threeColleges[0] == ' + threeColleges[0] + '.')

An important consideration is that for such arrays, the length property is identical to its zeroth element.

In addition, the length property of such an array doesn't change if you extend the array, so its use is discouraged.
 

• As with ordinary object members, you can erase array elements with the delete operator:

delete fiveColleges[5] document.write('fiveColleges[5] == ' + fiveColleges[5] + '.')

Note that what has really happened is that the element has simply lost its value, but it still exists, so the array length doesn't change.

• Just as variables can hold any data type, array elements can be any mixture of data types, including objects:

threeColleges[1] = 3 threeColleges[2] = ssCellA1 document.write('threeColleges[0] is a(n) ' + typeof threeColleges[0] + ' value.<br>') document.write('threeColleges[1] is a(n) ' + typeof threeColleges[1] + ' value.<br>') document.write('threeColleges[2] is a(n) ' + typeof threeColleges[2] + ' value.')

• Another common construction is an array of arrays (i.e. a "rectangular" array).
  
  This is modeled by having (in the usual notation) a "containing" array whose index gives the rows, which consist of arrays whose indices gives the column:

colleges = [ fiveColleges, // Row 0   threeColleges ] // Row 1 document.write(colleges[0][2]) document.write(colleges[1][0])

[Note that this array is not actually rectangular...]

With a rectangular array of cells we can now build a spreadsheet object:

function ssWrite() {   document.write('<table width="' + (50 + this.length * 100) + '"')   document.write(' border="1" cellspacing="1" cellpadding="1">')   document.write('<tr><td width="50" align="center"></td>')   for (var column = 0; column < this.length; column++) {     document.write('<td width="100" align="center"><b>')     document.write(c2name(column))     document.write('</b></td>')   }   for (row = 0; row < this[0].length; row++) {     document.write('</tr><tr><td align="center"><b>' + (row + 1) + '</b>')     for (column = 0; column < this.length; column++) {       document.write('</td><td align="center">')       document.write(this[column][row].value)     }   }   document.write('</td></tr></table>') } function SSCol(column, rows) {   var i   var sscol = new Array(rows)   for (i = 0; i < rows; i++) {     sscol[i] = new SSCell(column, i)   }   return sscol } function SSheet(columns, rows) {   var i   var ssheet = new Array(columns)   for (i = 0; i < columns; i++) {     ssheet[i] = new SSCol(i, rows)   }   ssheet.write = ssWrite   return ssheet } mySheet = SSheet(2, 2) mySheet[0][0].value = 32.4 mySheet[1][0].value = '' mySheet[0][1].value = -27 mySheet[1][1].value = 7.5 mySheet.write()

Even JavaScript's core data types and functions are objects in their own right!

• Most of the core data types, as well as functions and explicit objects, have a default method associated with them called toString(), which converts them to human-readable form:

document.write('true is rendered as "' + true.toString() + '"') document.write('3.4 is rendered as "' + 3.4.toString() + '"') document.write('"A string" is rendered as itself, "' + "A string".toString() + '"') document.write('The array fiveColleges[] is rendered as "' + fiveColleges.toString() + '"') document.write('The function quadranomial() is rendered as "' + quadranomial.toString() + '"') document.write('The object document.CollegeInput is rendered as "' + document.CollegeInput.toString() + '"') document.write('The object ssCellA1 is rendered as "' + ssCellA1.toString() + '"')

toString() is automatically referenced whenever a non-string is used in a string context, e.g. by document.write() to print objects.

For numbers, toString() has an optional radix argument to specify the base of the output:

document.write('12 can be rendered as "' + (12).toString() + '"') document.write(' or "' + '0' + (12).toString(8) + '"') document.write(' or "' + '0d' + (12).toString(12) + '"') document.write(' or "' + '0x' + (12).toString(16) + '".')

Note that the number here must be placed in parentheses to distinguish the object member operator '.' from a decimal point.
 

• User-defined objects can create their own version of toString():

function ssToString() {   var ssDisplay = '<table width="' + (50 + this.length * 100) + '"' +       ' border="1" cellspacing="1" cellpadding="1">' +       '<tr><td width="50" align="center"></td>'   for (column = 0; column < this.length; column++) {     ssDisplay += '<td width="100" align="center"><b>' +         c2name(column) +         '</b></td>'   }   for (row = 0; row < this[0].length; row++) {     ssDisplay += '</tr><tr><td align="center"><b>' + (row + 1) + '</b>'     for (column = 0; column < this.length; column++) {       ssDisplay += '</td><td align="center">' +           this[column][row].value     }   }   ssDisplay += '</td></tr></table>' return ssDisplay } mySheet.toString = ssToString document.write(mySheet)

Function objects have some additional useful properties and methods.

• Variable-argument functions are commonly used in programming.
  
  To access a function's parameters even when they are not all named, reference its arguments array:

function sum() {     var i, total     for (i = total = 0; i < sum.arguments.length; i++)         total += sum.arguments[i]     return total } document.write(sum(1,2,3,4,5))



• A function can also tell a script how many arguments it expects with its arity property:

// Do you remember how many arguments the quadranomial function used? // x, c0, c1, c2, c3, ... coefs = quadranomial.arity - 1 coef = new Array(coefs) for (i = 0; i < coefs; i++)     coef[i] = i; // Allow for more than enough parameters: z = quadranomial(3, coef[0], coef[1], coef[2], coef[3], coef[4], coef[5]) document.write(z)



• Functions being objects, it should be no surprise that there is a function constructor, Function.
  
  Function can be used to define a so-called "anonymous" function (which typically does have an assigned name, though often an abstract one):

f = new Array(5) for (i = 0; i < 5; i++) {     body = 'z = a * Math.pow(x,' + i + '); return z'     f[i] = new Function('a', 'x', body) } document.write(f[3](4, 2))

To work with JavaScript, no special tools are required, just a text editor to write scripts into a .html file (the source view of Dreamweaver can also be used), and a web browser to view the result.

1. For the Spreadsheet Object, modify its special version of toString so that it outputs a form in each cell of the spreadsheet. Then modify the spreadsheet so that an entry in each form changes the corresponding value stored in the spreadsheet. Add a method to check the values in the spreadsheet independently from the form.