Chapter 12. JavaScript 1: Basic
Scripting
Table of Contents
Objectives .............................................................................................................................................. 2
11.1 Introduction .............................................................................................................................. 2
11.1.1 Differences between JavaScript and Java ...................................................................... 2
11.2 JavaScript within HTML.......................................................................................................... 3
11.2.1 Arguments ..................................................................................................................... 5
11.2.2 Accessing and Changing Property Values ..................................................................... 5
11.2.3 Variables ........................................................................................................................ 6
11.2.4 JavaScript Comments .................................................................................................... 8
11.3 Some Basic JavaScript Objects .............................................................................................. 10
11.3.1 Window Objects .......................................................................................................... 10
11.3.2 Document Object ......................................................................................................... 12
11.3.3 Date Objects ................................................................................................................ 13
11.4 Review Questions .................................................................................................................. 17
11.4.1 Review Question 1 ....................................................................................................... 17
11.4.2 Review Question 2 ....................................................................................................... 18
11.4.3 Review Question 3 ....................................................................................................... 18
11.4.4 Review Question 4 ....................................................................................................... 18
11.4.5 Review Question 5 ....................................................................................................... 18
11.4.6 Review Question 6 ....................................................................................................... 18
11.4.7 Review Question 7 ....................................................................................................... 18
11.4.8 Review Question 8 ....................................................................................................... 18
11.4.9 Review Question 9 ....................................................................................................... 18
11.4.10 Review Question 10 ................................................................................................... 19
11.4.11 Review Question 11 ................................................................................................... 19
11.5 Discussions and Answers ....................................................................................................... 19
11.5.1 Discussion of Exercise 1 .............................................................................................. 19
11.5.2 Discussion of Exercise 2 .............................................................................................. 19
11.5.3 Discussion of Exercise 3 .............................................................................................. 20
11.5.4 Discussion of Exercise 4 .............................................................................................. 20
11.5.5 Activity 2: Checking and Setting Background Colour ................................................ 20
11.5.6 Activity 3: Setting a document's foreground colour .................................................... 21
11.5.7 Activity 4: Using user input to set colours .................................................................. 21
11.5.8 Activity 5: Dealing with errors .................................................................................... 22
11.5.9 Activity 6: The confirm method .................................................................................. 23
11.5.10 Activity 7: Changing the window status ................................................................... 24
11.5.11 Activity 8: Semicolons to end statements ................................................................. 24
11.5.12 Activity 9: including separate JavaScript files .......................................................... 24
11.5.13 Activity 10: Opening a new Window ........................................................................ 24
11.5.14 Answer to Review Question 1 ................................................................................... 25
11.5.15 Answer to Review Question 2 ................................................................................... 25
11.5.16 Answer to Review Question 3 ................................................................................... 25
11.5.17 Answer to Review Question 4 ................................................................................... 25
11.5.18 Answer to Review Question 5 ................................................................................... 25
11.5.19 Answer to Review Question 6 .................................................................................. 25
11.5.20 Answer to Review Question 7 ................................................................................... 25
11.5.21 Answer to Review Question 8 ................................................................................... 25
11.5.22 Answer to Review Question 9 ................................................................................... 26
11.5.23 Answer to Review Question 10 ................................................................................. 26
11.5.24 Answer to Review Question 11 ................................................................................. 26
1
, JavaScript 1: Basic Scripting
Objectives
At the end of this chapter you will be able to:
• Explain the differences between JavaScript and Java;
• Write HTML files using some basic JavaScript tags and objects.
11.1 Introduction
Web browsers were originally designed to interpret HTML with two primary purposes: to render documents
marked up in HTML to an acceptable level of quality, and, crucially, to be able to follow hyperlinks to resources.
As the Web grew, so did the demand for more sophisticated Web content. Among many other extensions,
graphics, forms, and tables were added to the HTML standard. With the exception of forms, there is nothing in
HTML that supports interaction with the user. Given the ubiquity of Web browsers, and the effort which millions
of ordinary people have put into learning to use them, they provide an almost universal starting point for
interacting with complex systems, particularly commercial, Internet based systems. Hence the need for
sophisticated interaction facilities within Web browsers.
The main means for providing interactivity within HTML documents is the JavaScript programming language.
HTML documents can include JavaScript programmes that are interpreted (i.e. run) by the Web browser displaying
the Web document. In a real sense, JavaScript allows a Web document to interact with its environment — that is,
with the browser that is displaying it. Ultimately, it lets the Web document become more interactive, to the user's
benefit. For example, the following message could be given to a user when they submit a form with a missing field:
The above message can be shown with the following JavaScript code.
<SCRIPT>
window.alert('Error with form: You forgot to fill in the billing address!')
</SCRIPT>
The JavaScript code is contained within the <SCRIPT> and </SCRIPT> tags. Everything between those tags must
conform to the JavaScript standard (the standard itself is an ECMA International standard, called ECMAScript).
The above statement is an instruction to the browser requesting that an alert box display the message "Error with
form: You forgot to fill in the billing address!".
This unit will later cover another way to include JavaScript in HTML documents. It is worth noting for now that
the <SCRIPT> tag can include a language attribute to ensure the browser interprets the enclosed commands as
JavaScript, since other languages have, in the past, been used (such as VBScript, which is no longer used in new
websites, and is supported by very few browsers). For simplicity, we will use the attribute's default value (of
JavaScript) by omitting the attribute from the <SCRIPT> tag.
11.1.1 Differences between JavaScript and Java
While programming is covered in the programming module of this course, JavaScript differs from Java in some
important areas that we will quickly review. JavaScript objects are covered in more detail in later chapters, so we
will not go into any great depth here.
In Java, all functions must belong to a class, and for this reason are called methods. In JavaScript, a function does
, JavaScript 1: Basic Scripting
not have to belong to a particular object at all. When a function does, however, it is often called a method.
Functions and methods are both implemented in the same way, using the function keyword. All methods are
functions, but not all functions are methods.
Unlike Java, JavaScript does not contain the idea of classes. Instead, JavaScript has constructors, which are a
special kind of function that directly creates objects. These constructor functions define the state variables which
each object holds and initialises their values. These variables are often called the object's properties. Constructor
functions also supply objects with their methods.
In JavaScript, functions are themselves a special kind of object called Function Objects. Function Objects can be
called just as normal functions in other languages, but because they are objects they can themselves be stored in
variables and can be easily passed around as, say, arguments to other functions. They can also contain properties of
their own.Constructor functions have a special Prototype property which is used to implement inheritance, as will
be explained later in the chapter on objects. Constructor functions are called using the new keyword when creating
objects.
JavaScript communicates with its environment by calling methods on objects representing components of that
environment, such as an object representing the window the HTML document is displayed in, an object
representing the document itself, and so on. Ignoring the server side at present, we conceptually have a browser that
interacts with a window, which interacts with a document, which is itself the user interface. JavaScript allows the
user interface to be programmed. This is accomplished by providing the means, in JavaScript, for a user to interact
with a system via the document rendered in the browser window, as depicted below.
A user may request a document via an URL; a Web server delivers the document to a Web browser which not only
displays it, but also executes any interactive elements.
Now do Review Questions 1, 2 and 3.
11.2 JavaScript within HTML
JavaScript statements are embedded within an HTML document and are interpreted by a Web browser. Unlike
programming in Java, a programmer does not programme with JavaScript by preparing source code and compiling it
to produce executable code. JavaScript is directly executed by the Web browser. The most general form of JavaScript
used in HTML documents is to include JavaScript statements within <SCRIPT> and </SCRIPT> tags. Each
JavaScript statement is written on a separate line. If a statement is in some way incorrect, the browser (and its built-
in JavaScript interpreter) may report an error, or it may stop executing the erroneous JavaScript and do nothing. Let
us examine a simple HTML4.0 document that does nothing that could not be done with HTML alone. All that it
does is have the document include the italicised text "Welcome to programming with JavaScript!".
Scripting
Table of Contents
Objectives .............................................................................................................................................. 2
11.1 Introduction .............................................................................................................................. 2
11.1.1 Differences between JavaScript and Java ...................................................................... 2
11.2 JavaScript within HTML.......................................................................................................... 3
11.2.1 Arguments ..................................................................................................................... 5
11.2.2 Accessing and Changing Property Values ..................................................................... 5
11.2.3 Variables ........................................................................................................................ 6
11.2.4 JavaScript Comments .................................................................................................... 8
11.3 Some Basic JavaScript Objects .............................................................................................. 10
11.3.1 Window Objects .......................................................................................................... 10
11.3.2 Document Object ......................................................................................................... 12
11.3.3 Date Objects ................................................................................................................ 13
11.4 Review Questions .................................................................................................................. 17
11.4.1 Review Question 1 ....................................................................................................... 17
11.4.2 Review Question 2 ....................................................................................................... 18
11.4.3 Review Question 3 ....................................................................................................... 18
11.4.4 Review Question 4 ....................................................................................................... 18
11.4.5 Review Question 5 ....................................................................................................... 18
11.4.6 Review Question 6 ....................................................................................................... 18
11.4.7 Review Question 7 ....................................................................................................... 18
11.4.8 Review Question 8 ....................................................................................................... 18
11.4.9 Review Question 9 ....................................................................................................... 18
11.4.10 Review Question 10 ................................................................................................... 19
11.4.11 Review Question 11 ................................................................................................... 19
11.5 Discussions and Answers ....................................................................................................... 19
11.5.1 Discussion of Exercise 1 .............................................................................................. 19
11.5.2 Discussion of Exercise 2 .............................................................................................. 19
11.5.3 Discussion of Exercise 3 .............................................................................................. 20
11.5.4 Discussion of Exercise 4 .............................................................................................. 20
11.5.5 Activity 2: Checking and Setting Background Colour ................................................ 20
11.5.6 Activity 3: Setting a document's foreground colour .................................................... 21
11.5.7 Activity 4: Using user input to set colours .................................................................. 21
11.5.8 Activity 5: Dealing with errors .................................................................................... 22
11.5.9 Activity 6: The confirm method .................................................................................. 23
11.5.10 Activity 7: Changing the window status ................................................................... 24
11.5.11 Activity 8: Semicolons to end statements ................................................................. 24
11.5.12 Activity 9: including separate JavaScript files .......................................................... 24
11.5.13 Activity 10: Opening a new Window ........................................................................ 24
11.5.14 Answer to Review Question 1 ................................................................................... 25
11.5.15 Answer to Review Question 2 ................................................................................... 25
11.5.16 Answer to Review Question 3 ................................................................................... 25
11.5.17 Answer to Review Question 4 ................................................................................... 25
11.5.18 Answer to Review Question 5 ................................................................................... 25
11.5.19 Answer to Review Question 6 .................................................................................. 25
11.5.20 Answer to Review Question 7 ................................................................................... 25
11.5.21 Answer to Review Question 8 ................................................................................... 25
11.5.22 Answer to Review Question 9 ................................................................................... 26
11.5.23 Answer to Review Question 10 ................................................................................. 26
11.5.24 Answer to Review Question 11 ................................................................................. 26
1
, JavaScript 1: Basic Scripting
Objectives
At the end of this chapter you will be able to:
• Explain the differences between JavaScript and Java;
• Write HTML files using some basic JavaScript tags and objects.
11.1 Introduction
Web browsers were originally designed to interpret HTML with two primary purposes: to render documents
marked up in HTML to an acceptable level of quality, and, crucially, to be able to follow hyperlinks to resources.
As the Web grew, so did the demand for more sophisticated Web content. Among many other extensions,
graphics, forms, and tables were added to the HTML standard. With the exception of forms, there is nothing in
HTML that supports interaction with the user. Given the ubiquity of Web browsers, and the effort which millions
of ordinary people have put into learning to use them, they provide an almost universal starting point for
interacting with complex systems, particularly commercial, Internet based systems. Hence the need for
sophisticated interaction facilities within Web browsers.
The main means for providing interactivity within HTML documents is the JavaScript programming language.
HTML documents can include JavaScript programmes that are interpreted (i.e. run) by the Web browser displaying
the Web document. In a real sense, JavaScript allows a Web document to interact with its environment — that is,
with the browser that is displaying it. Ultimately, it lets the Web document become more interactive, to the user's
benefit. For example, the following message could be given to a user when they submit a form with a missing field:
The above message can be shown with the following JavaScript code.
<SCRIPT>
window.alert('Error with form: You forgot to fill in the billing address!')
</SCRIPT>
The JavaScript code is contained within the <SCRIPT> and </SCRIPT> tags. Everything between those tags must
conform to the JavaScript standard (the standard itself is an ECMA International standard, called ECMAScript).
The above statement is an instruction to the browser requesting that an alert box display the message "Error with
form: You forgot to fill in the billing address!".
This unit will later cover another way to include JavaScript in HTML documents. It is worth noting for now that
the <SCRIPT> tag can include a language attribute to ensure the browser interprets the enclosed commands as
JavaScript, since other languages have, in the past, been used (such as VBScript, which is no longer used in new
websites, and is supported by very few browsers). For simplicity, we will use the attribute's default value (of
JavaScript) by omitting the attribute from the <SCRIPT> tag.
11.1.1 Differences between JavaScript and Java
While programming is covered in the programming module of this course, JavaScript differs from Java in some
important areas that we will quickly review. JavaScript objects are covered in more detail in later chapters, so we
will not go into any great depth here.
In Java, all functions must belong to a class, and for this reason are called methods. In JavaScript, a function does
, JavaScript 1: Basic Scripting
not have to belong to a particular object at all. When a function does, however, it is often called a method.
Functions and methods are both implemented in the same way, using the function keyword. All methods are
functions, but not all functions are methods.
Unlike Java, JavaScript does not contain the idea of classes. Instead, JavaScript has constructors, which are a
special kind of function that directly creates objects. These constructor functions define the state variables which
each object holds and initialises their values. These variables are often called the object's properties. Constructor
functions also supply objects with their methods.
In JavaScript, functions are themselves a special kind of object called Function Objects. Function Objects can be
called just as normal functions in other languages, but because they are objects they can themselves be stored in
variables and can be easily passed around as, say, arguments to other functions. They can also contain properties of
their own.Constructor functions have a special Prototype property which is used to implement inheritance, as will
be explained later in the chapter on objects. Constructor functions are called using the new keyword when creating
objects.
JavaScript communicates with its environment by calling methods on objects representing components of that
environment, such as an object representing the window the HTML document is displayed in, an object
representing the document itself, and so on. Ignoring the server side at present, we conceptually have a browser that
interacts with a window, which interacts with a document, which is itself the user interface. JavaScript allows the
user interface to be programmed. This is accomplished by providing the means, in JavaScript, for a user to interact
with a system via the document rendered in the browser window, as depicted below.
A user may request a document via an URL; a Web server delivers the document to a Web browser which not only
displays it, but also executes any interactive elements.
Now do Review Questions 1, 2 and 3.
11.2 JavaScript within HTML
JavaScript statements are embedded within an HTML document and are interpreted by a Web browser. Unlike
programming in Java, a programmer does not programme with JavaScript by preparing source code and compiling it
to produce executable code. JavaScript is directly executed by the Web browser. The most general form of JavaScript
used in HTML documents is to include JavaScript statements within <SCRIPT> and </SCRIPT> tags. Each
JavaScript statement is written on a separate line. If a statement is in some way incorrect, the browser (and its built-
in JavaScript interpreter) may report an error, or it may stop executing the erroneous JavaScript and do nothing. Let
us examine a simple HTML4.0 document that does nothing that could not be done with HTML alone. All that it
does is have the document include the italicised text "Welcome to programming with JavaScript!".
