Arguments are also known as parameters. An argument is information that must be included with a function or method so that it may achieve its purpose. As in Java, some methods and functions are designed to have information supplied to them, so that their effect can differ in detail. If a function or method is designed in this way, it must be supplied with the required arguments when it is called. The document method write has been designed and implemented that way. Another function that needs a string argument is the window method alert, which was briefly shown earlier in these notes. The next exercise makes use of alert.

document.write is an example of a function that can take an unspecified number of arguments. It must, however, have at least one. The following example uses more than one argument:

document.write("<BU>", "<LI>books</LI>", "<LI>magazines</LI>", "</BU>")

In JavaScript, as in Java, multiple arguments to a function must be separated by commas and provided in an order determined by the function. There is no simple rule to tell how many arguments a method must have or what their order should be, and this information can only be obtained from the method's definition, or from a good reference document or book.

Now do Review Questions 4, 5 and 6.

In JavaScript, it is commonplace to directly access or change the value of a property. One such document property is bgColor, which represents the document's background colour. Directly accessing a property is similar to accessing a method: write the object name followed by a period (a dot) and the property name. Thus, to access a document's background colour, write document.bgColor. Note the American English spelling of 'Color', and the use of a capital 'C' inside the word. The spelling and capitalisation must be precise or a browser's JavaScript interpreter will not properly process the script.

Of course, methods can be combined with the ability to access properties. For example, the alert method of window can be used to report the document's background colour:

window.alert(document.bgColor)

This would produce a dialogue box as follows.

The box shows the hexadecimal (HEX) representation of the colour, with #FFFFFF being the HEX for white, a document's default background colour.

The content of the dialogue box can be made more comprehensible by announcing the value with another string explaining the value. One way to do this is with the string concatenation operator, +, which combines what precedes it with what follows it. So, for example, "changing " + "colour" results in the string "changing colour". Note the space at the end of the first string literal appears between the two words in the string resulting from using +. Hence you can concatenate "background colour is (in Hex): " with document.bgColor to produce more helpful output:

window.alert("background colour is (in Hex): " + document.bgColor)

To change a document's background colour, simply assign the new value to the property using the = operator. Do not confuse this symbol with equality. JavaScript belongs to a class of programming languages (just as Java) that use = as the assignment operator: it assigns the value of whatever is to its right to whatever is on its left. Another symbol is used for equality testing, as we discuss later. Hence, to set the background colour of a document to blue (HEX 0000FF), we can use:

document.bgColor = "0000FF"

JavaScript provides a set of mnemonic strings for many colours. For example:

document.bgColor = "blue"

Note that no matter what value was used to set a colour, if you access it as above the output will always be in HEX. (This is because JavaScript automatically converts between different types of data. We will see this a lot in JavaScript programming.)

With the exception of alert dialogue boxes, so far we have used JavaScript to do nothing more than what HTML can do. We now proceed to the vital concept of programming with variables via another interactive facility — dialogue boxes that allow the user to enter data.

The prompt method allows you to make a window display a dialogue box containing an explanation prompt and a default value for input.

For example, the statement below explains to the user that their company name cannot be found (let's assume some previous processing has determined this). It provides a suggested default of Cairo, which we assume makes sense for the Web application.

window.prompt("Cannot find your company name. Please input your location:", "Cairo")

Note that the two string arguments, each delimited by their own quotes, are separated using a comma.

The output from a document containing this JavaScript appears as in the following diagrams. Three variations are given below (from Internet Explorer, Navigator and Opera). As you can see, the dialogue boxes differ in their details (e.g. in size and button position), but are in essence the same.

So, what might be done with input obtained this way? In general, we would use it to change the state of some part of the Web application, and such a simple change of state could eventually lead to more complex behaviour. One straightforward use is to modify the HTML stream to include the input obtained by window.prompt. For example, imagine an application that generated an email message whose content is an HTML document. We could ask for the subject and then write it as a level 1 heading (i.e. using <H1> and </H1>):

document.write("<H1>Subject: "+window.prompt("Subject of email:","")+"</H1>")

This rather complicated argument to document.write needs explaining. The complication comes from needing to evaluate the prompt to determine the argument to write as a whole. When this statement is executed, the interpreter tries to concatenate the three strings:

   1. "<H1>Subject: "
   2. window.prompt("Subject of email:","")
   3. "</H1>"
      

String 1 is the first part of the heading; it includes the start tag for the level 1 heading, and the beginning of the heading — 'Subject: '. String 3 is the end tag for the level 1 heading. String 2 cannot be part of the concatenation for the write method unless it is itself evaluated; hence the following dialogue box is produced. Notice how no default for the input is provided, because the second argument is an empty string — a string with zero characters in it.

If the user types in 'Unable to book flight' and clicks OK (or presses the Enter key), then the prompt method delivers that string object as String 2 and the concatenation can be completed, resulting in the heading in the browser below:

An alternative way to programme this type of behaviour is to break it up into smaller pieces and to provide the means to remember the result of evaluating some complex expression, then using that result later in the programme in whatever way is needed. This is what variables are for: they are names that can be used to refer to an object or value for a variety of purposes. They are called variables because they can be used to refer to different objects at different times of the programme's execution. As it happens, in JavaScript a variable can refer to objects of any type, whether they be strings, numbers, or user defined objects. This is very flexible and powerful, but it means that the interpreter cannot help you by restricting the functionality of the variable to a declared purpose, as in some other languages (such as Java). The most general way to use a variable is to declare it with a special key word, var, as in:

    var input

Once a variable has been declared it can be made to refer to an object with the assignment operator, =, introduced earlier. Now the email subject prompter can be reprogrammed as follows (below, we choose the obvious variable name — input — which has nothing to do with the HTML tag or the JavaScript object):

    <SCRIPT>
    var input
    input = window.prompt("Subject of email:","")
    document.write("<H1>Subject: " + input + "</H1>")
    </SCRIPT>
      

Executing this script has the same effect as the earlier version that included the prompt as an argument to write. A user cannot tell the difference.

In the same way that HTML provides the means to prevent an HTML interpreter (a browser) from acting on text in a document, JavaScript also provides the means to turn its statements into comments that the JavaScript interpreter ignores. Because of its C++, C and Java heritage, JavaScript accepts comment syntax from all of these languages: anything between /* and */ is ignored, as is everything on a line following //. The former brackets a comment, which can be over several lines or within a statement. The latter is typically used when the end of a line contains a comment. For example, the above script can be commented as follows:

    *lt;SCRIPT>
    var input // this variable will be used in a later script
    input = window.prompt("Subject of email:","")
    /* We have to generate HTML according to
    company style guidelines found in
    Document 1998-EM-GD-V3.1, hence what follows. */
    document.write("<H1>Subject: " + input + "</H1>")
    </SCRIPT>
      

JavaScript is used within HTML and it is possible that older browsers are unable to run JavaScript, or that a user has disabled the JavaScript functionality of a recent browser. Therefore JavaScript also understands the opening HTML comment, but not the closing comment. This allows JavaScript code to use a mixture of HTML comments to allow the JavaScript to be ignored by browsers that cannot run JavaScript and would format it as HTML text.

The previous example could be changed so that it works in a JavaScript-enabled Web browser but has no effect on the output of a Web browser that cannot handle JavaScript. The line immediately after the <SCRIPT> tag is the start of an HTML comment, which is ignored by both language interpreters. The line before the </SCRIPT> tag is ignored by a JavaScript interpreter, but if there was none, the HTML interpreter would have been ignoring everything up to the closing HTML comment bracket.

<SCRIPT>
<!---the JavaScript can be ignored
var input // this variable will be used in a later script
input = window.prompt("Subject of email:","")
/* We have to generate HTML according to
company style guidelines found in
Document 1998-EM-GD-V3.1, hence what follows. */
document.write("<H1>Subject: " + input + "</H1>")
//--->
</SCRIPT>
      

    var fore, back
    back = document.bgcolor
    fore = document.fgColor = fore
    newFore = window.prompt("Foreground colour:",fore)
    document.fgColor = newFore
    input = window.prompt("What do you want written out underlined in colour "+newFore+'?')
    document.write("You typed: " + <U> + "input + </U>")
 

Now do Review Questions 7, 8 and 9.