JavaScript Course Notes PDF

JavaScript for Beginners
Course notes
What is a Programming Language? .......................................................................................5

Key Points ......................................................................................................................................................... 5
Server-side vs. Client-side .......................................................................................................7

Key Points ......................................................................................................................................................... 7
About JavaScript ....................................................................................................................10

Key Points ....................................................................................................................................................... 10
A Tour of JavaScript...............................................................................................................13
Key Points ....................................................................................................................................................... 13
Project.............................................................................................................................................................. 13
Objects, Properties and Methods ..........................................................................................18

Key Points ....................................................................................................................................................... 18
Assigning Values to Properties .............................................................................................21

Key Points ....................................................................................................................................................... 21
Project.............................................................................................................................................................. 22
About Comments ....................................................................................................................25

Key Points ....................................................................................................................................................... 25
Project.............................................................................................................................................................. 26
Hiding Scripts from Older Browsers ......................................................................................28

Key Points ....................................................................................................................................................... 28
Project.............................................................................................................................................................. 29
Automatically Redirecting the User .......................................................................................31

Key Points ....................................................................................................................................................... 31
Project.............................................................................................................................................................. 31
10 Alert, Prompt and Confirm .....................................................................................................33

Key Points ....................................................................................................................................................... 33
Project.............................................................................................................................................................. 34
11 Variables and Operators ........................................................................................................35

Key Points ....................................................................................................................................................... 35
Project.............................................................................................................................................................. 38
12 Comparisons...........................................................................................................................40
Key Points ....................................................................................................................................................... 40
Project.............................................................................................................................................................. 41
13 Conditionals ............................................................................................................................42
Key Points ....................................................................................................................................................... 42
Project.............................................................................................................................................................. 45
Project 2........................................................................................................................................................... 46
14 Looping....................................................................................................................................48
Key Points ....................................................................................................................................................... 48
Project.............................................................................................................................................................. 50
15 Arrays ......................................................................................................................................53
Key points ........................................................................................................................................................ 53
Project.............................................................................................................................................................. 55
16 Associative & Objective Arrays .............................................................................................57

Key Points ....................................................................................................................................................... 57
Project.............................................................................................................................................................. 58
17 Two Dimensional Arrays ........................................................................................................59

Key Points ....................................................................................................................................................... 59
Project.............................................................................................................................................................. 60
18 String Manipulation.................................................................................................................61
Key Points ....................................................................................................................................................... 61
Project.............................................................................................................................................................. 65
19 Using Functions ......................................................................................................................66

Key Points ....................................................................................................................................................... 66
Project.............................................................................................................................................................. 69
20 Logical Operators ...................................................................................................................71

Key Points ....................................................................................................................................................... 71
Project.............................................................................................................................................................. 74
21 Using Event Handlers ............................................................................................................75

Key Points ....................................................................................................................................................... 75
Project.............................................................................................................................................................. 77
22 Working with Images ..............................................................................................................79

Key Points ....................................................................................................................................................... 79
Project.............................................................................................................................................................. 80
23 Simple Image Rollovers .........................................................................................................81

Key Points ....................................................................................................................................................... 81
Project.............................................................................................................................................................. 83
24 Object Instantiation and Better Rollovers .............................................................................85

Key Points ....................................................................................................................................................... 85
Project.............................................................................................................................................................. 86
25 Working with Browser Windows ............................................................................................88

Key Points ....................................................................................................................................................... 88
Project.............................................................................................................................................................. 90
26 Positioning Browser Windows ...............................................................................................91

Key Points ....................................................................................................................................................... 91
Project.............................................................................................................................................................. 92
27 Focus and Blur........................................................................................................................93

Key Points ....................................................................................................................................................... 93
Project.............................................................................................................................................................. 94
28 Dynamically Created Content ................................................................................................95

Key Points ....................................................................................................................................................... 95
Project.............................................................................................................................................................. 95
29 Working with Multiple Windows .............................................................................................97

Key Points ....................................................................................................................................................... 97
Project.............................................................................................................................................................. 98
30 Using an External Script File .................................................................................................99

Key Points ....................................................................................................................................................... 99
Project............................................................................................................................................................ 100
31 Javascript and Forms...........................................................................................................101

Key Points ..................................................................................................................................................... 101
Project............................................................................................................................................................ 103
32 Form Methods and Event Handlers ....................................................................................105

Key Points ..................................................................................................................................................... 105
Project............................................................................................................................................................ 106
33 JavaScript and Maths...........................................................................................................108

Key Points ..................................................................................................................................................... 108
Project............................................................................................................................................................ 109
34 Object Variables A Refresher ...........................................................................................111

Key Points ..................................................................................................................................................... 111
Project............................................................................................................................................................ 112
35 Actions From Menu Items ....................................................................................................113

Key Points ..................................................................................................................................................... 113
Project............................................................................................................................................................ 114
36 Requiring Form Values or Selections..................................................................................116

Key Points ..................................................................................................................................................... 116
Project............................................................................................................................................................ 118
37 Working with Dates ..............................................................................................................121

Key Points ..................................................................................................................................................... 121
Project............................................................................................................................................................ 122
38 Retrieving Information from Date Objects...........................................................................123

Key Points ..................................................................................................................................................... 123
Project............................................................................................................................................................ 124
39 Creating a JavaScript Clock ................................................................................................126

Key Points ..................................................................................................................................................... 126
Project............................................................................................................................................................ 128
What is a Programming Language?
Key Points
o A programming language is a set of codes that we can use to
give a computer instructions to follow.
o Popular and well-known programming languages include Java,
C++, COBOL, BASIC, LISP and more. Most popular
programming languages consist of words and phrases that are
similar in form to the English language.
o A well-written program will be easily readable by anyone with
a little programming experience, regardless of whether they
have any direct experience of the language in question. This is
because modern programming languages share a large number
of common concepts. In particular, they all have a notion of
variables, arrays, loops, conditionals, and functions. We will
meet these concepts again in more depth later in the course.
o Traditionally, programming languages have been used to write
(for the most part) stand-alone applications. Things like
Microsoft Word, Mozilla Firefox and Lotus Notes are all
examples of such applications. Once installed on a PC, these
applications run without necessarily requiring any other
software to be installed alongside them.
o Web Applications differ from these traditional applications in
many respects, but the most striking is that they all run inside
your web browser. Examples of popular web applications are
things like Google, Hotmail, Flickr, GMail and any of the vast
array of weblogging systems.
o These applications are also written using programming

languages, but as a rule they are built using multiple,
interdependent technologies. These technologies are easily
(though not completely) broken down into two categories:
server-side and client-side.
Server-side vs. Client-side
Key Points
o The World Wide Web is built on a number of different
technologies.
o For most users, the web starts and ends with their choice of
web browser. The browser is said to define the client-side of
the web, with the browser, the computer it is running on, and
the user surfing the web being collectively referred to as the
client.
o Consider a client who has decided to visit the web site at
www.google.com. The first thing that happens is that the client
will make a request to Googles web server for the default
page of that web site.
o The web server is an application running on a computer
owned by Google. Like the client, the server application and
the computer on which it runs define the server-side of the
web, and are collectively referred to as the server.
o When the server receives the request from the client for a
particular page, its job is to retrieve the page from the
computers files and serve it back to the client. In many cases,
this operation is a very simple procedure involving little or no
work on the part of the server.
o However, using a programming language like PHP, Perl or
Java, we can cause the server to either modify the page it finds
before it passes it back to the client, or even to generate the
page entirely from scratch. This is referred to as a server-side
application. The page passed back to the client looks (to the
client) exactly the same as any other page that has not been
modified.
o An example of a server-side application might be to insert the

current date and time into a page. This would mean that each
time the page was requested (say, by using the browsers
refresh button), a new time value would be added to the page.
o Once the client has received the page from the server, it
displays the page and waits for the user to request another
page. As soon as the page reaches this state, it has moved
beyond the control of the server. No server-side application
can now alter the contents of the page without the client having
to make another trip back to the server to get a new (and
possibly updated) copy of the page.
o However, all modern browsers allow for the running of clientside applications. These are small applications which are
embedded within the HTML code of the page itself.
o Server-side applications ignore any client-side applications
that they find while modifying pages to send to the client, so in
general the two types of application cannot easily talk to
each other.
o However, once the client has received a client-side
application, it can begin to modify the page dynamically,
without the need to go back to the server.
o An example of a client-side application might be a clock on a
web page that updated every second.
o An unfortunate side effect of client-side applications is that all
the code must be sent to the client for running, which means
that the applications inner workings are available for anyone
to see. This makes it impractical for checking passwords, or
doing anything else that could cause confidential information
to be released into the wild.
o In addition, all modern web browsers afford the user the
opportunity to switch off client-side applications altogether.
On top of this, the way the same client-side application is run
will vary from browser type to browser type.
o Despite these drawbacks, client-side applications (or scripts,
as they are better known due to their general brevity) remain
the best way to provide web users with a rich environment
when developing web applications.
o In short, the two technologies each have their strengths and

weaknesses:
o Client-side scripts allow the developer to alter pages
dynamically, and to respond to user actions immediately rather
than having to wait for the server to create a new version of the
page. However, there are security and cross-browser
compatibility issues to be aware of, and these are often nontrivial.
o Server-side applications allow the developer to keep her code
secure and secret, thus allowing for more powerful
applications to be created. In addition, since the server running
the code is always a known quantity, applications that run
successfully in one browser will run successfully in all
browsers. However, despite all this power, there is no direct
way for a server-side application to alter a page without
having to force the client-side to load another page. This
makes it completely impractical for things like drop-down
menus, pre-submission form checking, timers, warning alerts
and so forth.
10
About JavaScript
Key Points
o JavaScript is an interpreted, client-side, event-based, objectoriented scripting language that you can use to add dynamic
interactivity to your web pages.
o JavaScript scripts are written in plain text, like HTML, XML,
Java, PHP and just about any other modern computer code. In
this code, we will use Windows NotePad to create and edit
our JavaScript code, but there are a large number of
alternatives available. NotePad is chosen to demonstrate
JavaScripts immediacy and simplicity.
o You can use JavaScript to achieve any of the following:
Create special effects with images that give the

impression that a button is either highlighted or
depressed whenever the mouse pointer is hovered over it.
Validate information that users enter into your web

forms
Open pages in new windows, and customise the

appearance of those new windows.
Detect the capabilities of the users browser and alter

your pages content appropriately.
Create custom pages on the fly without the need for a

server-side language like PHP.
And much more
11
o JavaScript is not Java, though if you come from a Java

background, you will notice that both languages look similar
when written. Java is a full featured and comprehensive
programming language similar to C or C++, and although
JavaScript can interact with Java web applications, the two
should not be confused.
o Different web browsers will run your JavaScript in different,
sometimes incompatible ways. In order to work around this, it
is often necessary to use JavaScript itself to detect the
capabilities of the browser in which it finds itself, and alter its
operation depending on the result.
o To revisit the original definition in this chapter, note the
following points:
Interpreted refers to the fact that JavaScript code is

executed (acted on) as it is loaded into the browser. This
is a change of pace from compiled languages like Java,
which check your program thoroughly before running a
single line of code, and can have many implications that
can catch you out if you are from a non-interpreted
programming background.
Client-side has been defined already in the previous

chapter.
Event-based refers to JavaScripts ability to run certain

bits of code only when a specified event occurs. An
event could be the page being loaded, a form being
submitted, a link being clicked, or an image being
pointed at by a mouse pointer.
Object-oriented signals that JavaScripts power to

exert control over an HTML page is based on
manipulating objects within that page. If you are familiar
with object-oriented programming, you will be aware
of some of the power that this can bring to the coding
environment.
o One final note: While JavaScript is a programming language,

HTML (the language of the World Wide Web) is not. HTML
is a Markup Language, which means that it can be used to
mark areas of a document as having special characteristics like
headers, paragraphs, images, forms and so on, but it cannot
perform any logical processing on its own. So while
JavaScript is often written alongside HTML, the rules of one
do not necessarily have any bearing on the other.
12
13
A Tour of JavaScript
Key Points
o Lets start with a quick tour of the major features of
JavaScript. This chapter is intended to be a showcase of what
JavaScript can do, not an in depth investigation into the
deeper concepts, so dont worry too much if you get lost or
dont understand the code youre typing in!
Project
o Our JavaScript is all going to be written using NotePad.
Open NotePad and save the resulting empty document in your
user drive as chapter_4.html.
o
Begin by creating a basic HTML page in your blank document.

It doesnt have to be anything fancy the following will be
more than sufficient:
<html>
<head>
<title>Chapter 4: A Tour of
JavaScript</title>
</head>
<body>
<h1>A Tour of JavaScript</h1>
</body>
</html>
o As a convention, when the notes intend that you should enter

code all on one line, they will use an arrow as above to
indicate that you should not take a new line at that point. With
HTML, this is rarely important, but with JavaScript, a new
line in the wrong place can stop your code from working.
o Save your new webpage, and view it in your web browser. For
the moment, use Internet Explorer to view this page. To do
this, find your saved file on your user drive, and double-click
on it. This will open the file in Internet Explorer by default,
and let you see the header youve just created.
o So far, we havent done anything beyond the scope of HTML.
Lets add some JavaScript to the page.
o There are (generally speaking) three places in a web page
where we can add JavaScript. The first of these is between a
new set of HTML tags. These script tags take the following
form:
<script language=JavaScript
type=text/JavaScript>
code
</script>
o The script element above can be placed virtually anywhere

you could place any element in an HTML page in other
words, in either the head element or the body element. It is
most commonly placed in the former, though this is usually so
that all your code can be easily found on the page.
o Note too that there is no arbitrary limit on the number of
script elements that can be contained in an HTML page.
There is nothing stopping you from having a hundred of these
dotted around your pages, except perhaps prudence.
o Lets add our opening and closing script tags to the head
element of the page, like so:
<html>
<head>
<title> </title>
</script>
</head>
14
15
o Save the file, and then try refreshing your page in the browser
window. Note that nothing has happened. This is what we
expected all we have done so far is to set up an area of the
page to hold our JavaScript.
o Go back to NotePad and enter the following text between the
opening and closing script tags:
window.alert(Hello world!);
o Save your changes, and again refresh your page in the browser
window. Welcome to the world of JavaScript!
o Go back to notepad and remove the window.alert line you
just added. Now add the following, slightly more complex
code:
if
( confirm(Go to Google?) )
document.location =
http://www.google.com/;
}
o Again, save your changes and refresh the page. For those with
an eye to future chapters, this is an example of a conditional
statement, where we ask JavaScript to check the condition of
something (in this case, our response to a question) and then to
alter its behaviour based on what it finds.
o Now, both of these bits of JavaScript have run uncontrollably
when the page has loaded into the browser. In most cases, we
will want to have more control over when our JavaScript does
what we ask it to.
o This control is the domain of events. In a browser, every
element of an HTML document has associated with it a
number of events that can happen to it. Links can be clicked,
forms can be submitted, pages can be loaded and so on.
o Modify the previous lines of JavaScript in your script
element to match the following:
function go_to_google() {
if ( confirm(Go to Google?) )
document.location =
http://www.google.com/;
}
}
o Be careful with your brackets here!

o Save and refresh, and note that nothing happens this time. This
is because we have enclosed the previous action (popping up a
question and acting on the response) within a function. A
function is a block of code that is given a name in this case,
the name is go_to_google() and is only run when that
name is called. It can be useful to think of functions as
magic spells that can be invoked when their name is said.
o To invoke this spell, we need to choose an element on the page
to trigger it. A natural candidate is a link element, so add the
following HTML to the body section of your page:
<p>A quick <a href=#>test</a>.</p>
o The # link is a common HTML trick that allows us to create a

link to nowhere.
o Save and refresh, and check that the link appears on the page,
and that it goes nowhere when clicked.
o Now, we want to have our page ask us if we want to Go to
Google? when we click on that link. Heres how
o Take the link element, and modify it as follows:
<a href=# onclick=go_to_google();>test</a>
o Save and refresh, and then click on the link. This is an example
of an event handler. When the link is clicked (onclick), our
browser says the magic words go_to_google(), and our
function is invoked.
o For our final trick, add the following code to the body section
of the page, after the paragraph containing the link:
<body>
document.write(<h2>Heres another
header!</h2>);
</script>
o Note that the line of code should be all on one line!
16
o Save the page and refresh the browser. Note that we now have
a new line of text on the page another header! Weve used
JavaScript to create HTML and tell the browser to display it
appropriately. In this example, JavaScript has done nothing
that we couldnt have done with a line of HTML, but in future
chapters we will see how we can use this to write the current
date and more.
17
18
Objects, Properties and Methods
Key Points
o Generally speaking, objects are things. For example, a piano
is an object.
o Properties are terms that can describe and define a particular
object. Our piano, for example, has a colour, a weight, a
height, pedals, a keyboard and a lid.
o Note from the above that an objects properties can be
properties themselves. So we have the case where a piano lid is
a property of the piano, but is also an object in its own right,
with its own set of properties for example, the lid has a
colour, a length, and even a state of either open or closed.
o If objects are the nouns of a programming language and
properties are the adjectives, then methods are the verbs.
Methods are actions that can be performed on (or by) a
particular object. To continue our piano example, you could
play a piano, open its lid, or press the sustain pedal.
o Many programming languages have similar ways of referring
to objects and their properties or methods. In general, they are
hierarchical, and an objects relationship with its properties
and methods, as well as with other objects, can often be easily
seen from the programming notation.
o In JavaScript, we use a dot notation to represent objects and
their properties and methods. For example, we would refer to
our pianos colour in the following way:
piano.colour;
o If we wanted to instruct JavaScript to play the piano, we could

write something as simple as:
piano.play();
o A clear example of object hierarchy could be seen if we

decided to open the lid of the piano:
piano.lid.open();
o Or even more so if we wanted to press the sustain pedal of the

piano:
piano.pedals.sustain.press();
o Note that in some of the examples above, we have brackets ()

after each set of words, and in some we dont. This has to do
with making sure that JavaScript can understand what we say.
o JavaScript works with objects throughout its existence in a
web browser. All HTML elements on a page can be described
as objects, properties or methods. We have already seen a few
of these objects in our previous introductory chapter:
document.write();
document.location;
o In these examples, document is an object, while write is a

method and location is a property.
o In these lines, we see a clue about the use of brackets in these
statements. We use brackets to signify to JavaScript that we
are talking about an objects method, and not a property of the
same name.
o Brackets also allow us to pass certain extra information to an
objects method. In the above example, to write the text Hello
world! to a web page document, we would write the
following JavaScript:
document.write(Hello World);
o Each method can do different things depending on what is put

in the brackets (or passed to the method as an argument, to
use the technical term). Indeed, many methods can take
multiple arguments to modify its behaviour. Multiple
arguments are separated by a comma (,).
19
o A JavaScript instruction like those shown here is referred to as

a JavaScript statement. All statements should end in a single
semi-colon (;). JavaScript will often ignore missed semi-colons
at the end of lines, and insert the semi-colon for you. However,
this can cause some unexpected results. Consider the
following:
document.write(<h1>
Hello World!
</h1>);
o In many other languages, this would be acceptable. However,

JavaScript will often interpret something like this as the
following:
document.write(<h1>;
Hello World!;
</h1>);
o This interpretation will generate an error, as JavaScript will

complain if you end a statement without ensuring that any
terms between quotes have matching pairs of quotes. In this
example, the first lines statement is cut short, and
JavaScript will fall over.
o For this reason, it is recommended that all your statements
should end with semi-colons.
20
21
Assigning Values to Properties
Key Points
o While objects and methods allow us to do things on a page,
such as alter the content or pop up dialogue boxes to interact
with the user, in many cases we will want to alter the value of
one of an objects properties directly. These cases are akin to
painting our piano green.
o Given our discussion on methods so far, we might expect to be
able to alter our objects properties by using a method for
example, the following would seem logical:
piano.paint(green);
o In many cases, that is exactly what we will do. However, there

are two drawbacks here. The first is that, within this course, the
majority of objects that we discover are built into and defined
by our browser. If we rely on using a method to alter an
objects property, we are also relying on the fact that the
method exists in the first place.
o A much more direct way to solve this problem is to access the
objects properties directly. For example:
piano.colour
green;
o Here we are no longer using a method to perform an action, we

are using what is known as an operator. In this case, the
operator has the symbol =, and is known as the assignment
operator.
22
o Within JavaScript, we can use this operator to great

effectiveness. For example, we could alter the title element of a
document (the text that is displayed in the top bar of the
browsers window) dynamically. This could be done when a
user clicked on a part of the page using an event handler (more
later on this), or could be set to automatically update each
minute to show the current time in the page title. The code we
would use for this task is simple:
document.title
a new title;
o There are many assignment operators in JavaScript. Some of

the more common are shown in the table below:
Assignment
Function
x=y
Sets the value of x to y
x += y
Sets the value of x to x+y
x -= y
Sets the value of x to x-y
x *=y
Sets the value of x to x times y
x /=y
Sets the value of x to x divided by y
o Not all assignment operators work with all types of values. But
the addition assignment operator works with both numbers and
text. When dealing with numbers, the result will be the sum of
the two numbers. When dealing with text (technically called
strings), the result will be the concatenation of the two
strings:
document.title += !;
will cause the symbol ! to be appended to the end of the

current document title.
Project
o Open your previous project file, and save it under the name
chapter_6.html.
o Remove any existing JavaScript from your script tags, but
leave the tags in place ready for some new JavaScript.
o Use your text editor to change the value of the title element of
the page as follows, then load your page into a browser and
view the result:
<title>With a little help from</title>
o Now, add a statement to our script element to add the

following text to the end of the current title:
JavaScript for Beginners!;
o Reload the page in your browser and note the title bar of the
window.
o If the display looks odd, consider your use of spaces
o All we have so far is an example that does nothing more than
HTML could manage. Lets introduce a new method of the
window object to help us to add a little more dynamism and
interaction to the script. Change the value of the title tag as
follows:
<title>Chapter 6: Assigning Values to
Properties</title>
o Now, remove your previous JavaScript statement and insert the

following:
document.title =
window.prompt(Your title?, );
o Reload your page and consider the result.

o We have come across the window object before. Our
demonstration of the alert method in chapter 4 could have
been more properly written as:
window.alert(message);
In many cases, we can omit certain parts of our

object/property/method hierarchy when writing our code. We
will discuss this again later.
23
To understand what is going on with our prompt method, we

can write down a method prototype. This is a way of
describing a methods arguments in such a way that their effect
on the method is more self explanatory. A prototype for the
prompt method of the window object might look like the
following:
window.prompt( message, default_response );
So, we can see that the first argument defines the text that
appears as the question in the prompt dialogue box. The
second argument is a little less clear. Try your code with
different values and see what difference your changes make.
Finally, we note that this prompt method somehow takes the

information typed into the box and passes it to our JavaScript
assignment. Say someone typed Hello World into the box. It
would have been as if our assignment had actually been:
document.title = Hello World;
When this sort of passing of values occurs, it is said that the

method has returned the value passed. In this case, we would
say that the prompt method has returned the value Hello
World, or that the return value of the prompt method was
Hello World.
o Return values will become very important when we deal with

event handlers later on.
24
25
About Comments
Key Points
o Repeat after me : Comments are important. Comments are
important. Comments are important.
o Adding comments to your code is always good practice. As the
complexity of your scripts grows, comments help you (and
others) understand their structure when you come to view the
code at a later date.
o A lot of code created quickly is said to be write only code, as
it suffers from an inherent lack of structure or commenting.
Debugging such code, or reusing it months later, becomes
maddeningly impossible as you try to remember what a certain
line was supposed to do, or why using certain values seems to
stop your code from working.
o Comments are completely ignored by JavaScript and have no
effect on the speed at which your scripts run, provided they are
properly formed.
o Comments can slow the loading of your page, however many
coders keep a development copy of their code fully
commented for editing, and remove all comments from their
code when they finally publish it.
o There are two types of comment in JavaScript single line
comments, and multi-line comments.
o Single line comments begin with two forward-slash characters
(//), and end with a new line:
// this is a comment
alert(hello); // so is this
o Single line comments in JavaScript can also use the HTML

comment format that you may be familiar with:
 tag. Secondly, this is only a one
line comment, unlike its use in HTML, which comments all
lines until the closing comment tag.
o You can add multiple-line comments by enclosing the
comment block between /* and */. For example:
/* all of this text is going to be
ignored by JavaScript. This allows us to
write larger comments without worrying about
having to individually comment out each
line */
alert(Hello World);
/* a one line, mult-line comment */
o As well as adding narrative to your script, you can use

comments to remove code from your pages without having to
delete the code. For example:
// this was the old message
// alert(Hello World);
// and this is the new message
alert(Hello everyone!);
o This can be very useful if you are trying to track down an error
in your code you can comment out each suspect line in
turn until you manage to get your code working again.
Project
chapter_7.html.
o Add the single line comment
This is my first comment
to the beginning of your script.
26
o Add a multi-line comment to your script, replacing your

previous single line comment. The multi-line comment should
describe what your script does at present.
27
28
Hiding Scripts from Older Browsers
Key Points
o Very old browsers dont understand JavaScript. There are very
few such browsers in use today, but two factors force us to
continue to consider environments that may not be able to cope
with our JavaScript code.
o Firstly, all modern browsers allow users to control whether
JavaScript code will be run. In many cases, users will not have
any say over their company policy, and may not even know
that their work machine has had JavaScript disabled.
o Secondly, not all of your visitors will be using browsers that
can make any use of JavaScript. Braille displays, screen
readers and other non-visual browsers have little use for many
JavaScript tricks. In addition, search engines like Google will
ignore any JavaScript you use on your pages, potentially
hiding important content and causing your pages to remain unindexed.
o Browsers that dont support JavaScript are supposed to ignore
anything between the opening and closing script tags.
However, many break this rule and will attempt to render your
code as HTML, with potentially embarrassing consequences.
29
o However, we can use the fact that 
</script>
o This prevents older browsers from displaying the code, but

what if we want to replace this with some comment. For
example, lets say we had a bit of code that displayed the time
of day and greeted our user by name. Without JavaScript and
using the method above, there would simply be a blank on the
page where the greeting should have been.
o We can use the <noscript> tag to cause our code to fail
gracefully where JavaScript has been disabled or is
unavailable. The contents of this element will be ignored
where JavaScript is understood, and displayed anywhere else.
For example:
<noscript>
<h1>Welcome to our site!</h1>
</noscript>
<script>

</script>
Project
chapter_8.html.
o Add two lines to your code to ensure that it will not confuse
older browsers or browsers where the user has disabled
JavaScript.
o Add a noscript element to explain what your JavaScript does.

It is generally considered bad form to instruct your user to
upgrade to a better browser, as this can insult many people
who use assistive devices consider this form of advice to be
similar to the advice that tells a blind person to get some
glasses.
o Instead where possible you should use the noscript element to
provide content that adequately replaces the scripted content
with a suitable replacement. For example, if you use your
JavaScript to build a navigation panel on your page, the
noscript element should contain a plain HTML list that does
the same job.
30
31
Automatically Redirecting the User
Key Points
o We have already briefly seen the use of browser redirection in
chapter 4.
o To formulate the idea more completely, in order to redirect the
user to a different page, you set the location property of the
document objects.
o
As we saw in chapter 6, we can use the assignment operator

here. For example:
document.location = http://www.bbc.co.uk/;
document.location = chapter_4.html;
Project
chapter_9_redirect.html.
o Save another copy of the file, this time called
chapter_9.html.
o Make sure both files are saved in the same folder, and that you
have chapter_9.html open in your editor.
o Remove all script from between the script tags, except for your
browser hiding lines. Make sure that the script tags are still in
the head section of the page.
o Now, add a single statement to this script that will
automatically redirect the user to the page
chapter_9_redirect.html as soon as the page is loaded
into a browser.
o Finally, add a header tag to the body section of the page

containing the text You cant see me!.
o Close this page, dont check it in a browser yet, and open the
page chapter_9_redirect.html in your editor.
o Remove all JavaScript from this page (including your script
tags) and ensure that only HTML remains on the page.
o Add a header tag to the body section of the page containing the
text But you can see ME!.
o Save this page, and load the page chapter_9.html into your
browser.
o Experiment with various positions for the script tags on
chapter_9.html to see if you can make the header appear
before the redirection.
32
10
33
Alert, Prompt and Confirm
Key Points
o So far, we have seen brief examples of alert, prompt and
confirm dialogue boxes to request a response from the user,
and to pause all code in the background until the request is
satisfied.
o All of these boxes are the result of methods of the window
object. This object is the highest level object that JavaScript
can deal with in a browser. As such, all other objects on a page
(with a few exceptions) are actually properties of the window
object.
o Because of this ubiquity, its presence is assumed even if it is
omitted. Thus, where we technically should write:
window.document.write();
it is equally valid to write:

document.write();
as we have been doing.

o
Similarly, instead of writing:

window.alert();
we can happily write:

alert();
The prototypes of the three methods are:

window.alert( message );
window.confirm( message );
window.prompt( message, default_response );
o Alert will always return a value of true when it is cleared by

clicking ok.
o Confirm will return either true or false depending on the
response chosen to clear the box.
o Prompt will return either the value typed in, null if nothing is
typed in, and false if the box is cancelled.
Project
chapter_10.html.
o Clear the previous redirection code, and ensure that the script
tags have been returned to the head section of the document.
o
Add a new statement to the script on the page that will display
the following message before the rest of the page is shown:
Welcome to my website! Click OK to continue.
Check your page in your browser.
We will use alert, confirm, and prompt throughout this

course. Take a moment to try each of them in turn on this page,
each time stopping to review your changes.
o Use the write method of the document object to check the

return values of each method. For example:
document.write(alert(hello world));
Make sure that you place this particular snippet of code in

script tags within the body area of the page, as we are
generating text output to be rendered by the browser. Also,
note the use (or not) of quotes here. More next chapter!
34
11
35
Variables and Operators
Key Points
o We have been introduced to the concepts of objects and their
various properties and methods. These inter-related concepts
allow any web page to be broken down into little snippets of
information or data, which can then be accessed by JavaScript
and, in many cases, changed.
o However, what if we want to create our own storage space for
information that doesnt necessarily have a page-based
counterpart? For example, what if we wanted to store the
previous value of a documents title property before changing
it, so it could be retrieved later, or if we wished to store the
date time that the page was loaded into the browser for
reproduction in several places on the page, and didnt want to
have to recalculate the time on each occasion?
o Variables are named containers for values within JavaScript.
They are similar to object properties in many ways, but differ
importantly:
o In a practical sense, variables have no parent object with
which they are associated.
o Variables can be created (declared) by you as a developer,
and can be given any arbitrary name (within certain rules)
object properties, however, are restricted by the definition of
the parent object. It would make no sense, for example, for our
piano object in the previous chapters to have a propeller
property!
o Variable name rules are straightforward no spaces, names

must start with a letter. Examples of valid variable names are:
BrowserName
page_name
Message1
MESSAGE1
o In many browsers, JavaScript is case-sensitive, which means
that the last two variables in the example above are distinct
variables. It is a good idea to pick a particular naming style for
your variables, and to stick to it within your projects.
o At the simplest level, variables can store three different types
of value:
o Numbers
e.g. 1.3324, 3.14159, 100000, -8 etc.
o Strings
e.g. JavaScript for Beginners, week 3, Hello World etc.
o Boolean Values
e.g. true, false
o Note that strings can contain numbers, but the following
variable values are not equivalent:
1.234 and 1.234
The latter is a string value. This becomes important. Consider:
1+2 = 3
a + b = ab
1 + 2 = 12
o Some developers use their own naming convention with
variable names to denote the type of value expected to be
contained in a given variable. This can often be helpful, but is
in no way required by JavaScript (c.f. JavaScript comments)
o For example, strMessage might indicate a string variable,
where numPageHits might indicate a numerical value in the
variable.
36
37
o Variable assignment is accomplished in the same way as

object property assignment. When a variable is assigned a
value for the first time, it is automatically created. This is
different from other programming languages, where a variable
must be created explicitly first, before it can be loaded with a
value.
o Some examples of variable assignment follow:
numBrowserVersion = 5.5;
numTotal += 33;
Message = Hello!;
Message = Goodbye;
Message = 3;
o Note that the last three examples show that variable values can
be altered after their initial assignment, and also that the type
of value stored in a variable can be altered in a similar
manner.
o Once a variable has been created and a value stored within, we
will want to be able to access it and perhaps manipulate it. In a
similar manner to object properties, we access our variables
simply by calling them:
Message = Hello World!;
alert(Message);
o
Note that we do not use quote marks around our variable

names. The above code is different from:
alert(Message);
for hopefully obvious reasons.

o
As well as using variables for storage and access, we can

combine and manipulate them using operators. For example:
a
b
c
c
c
= 12;
= 13;
= a + b; // c is now 25
+= a; // c is now 37
= b + Hello!; // c is now 13 Hello!
38
o Our last example may have been unexpected we added a

number to a string and got a string as a result. JavaScript is
smart enough to realise that a number cannot be added to a
string in a numerical sense, so it converts the number
temporarily to a string and performs a concatenation of the
two strings. Note that b remains 13, not 13.
o A table of operators:
Operator
Function
x+y
Adds x to y if both are numerical

otherwise performs concatenation
xy
Subtracts x from y if both are numerical
x*y
Multiplies x and y
x/y
Divides x by y
x%y
Divides x by y, and returns the remainder
-x
Reverses the sign of x
x++
Adds 1 to x AFTER any associated

assignment
++x
Adds 1 to x BEFORE any associated

assignment
x--
Subtracts 1 from x AFTER any associated

assignment
--x
Subtracts 1 from x BEFORE any associated

assignment
Project
chapter_11.html.
o Clear the previous JavaScript code, and ensure that the script
tags are contained in the body section of the document.
o
Assign the message

Welcome to my web site
to a variable called greeting.
Use this variable to create an alert box containing the message,

and also to produce a header on the page without having to
retype the message.
Test this page in your browser.
Now, modify your code to create two variables, var_1 and

var_2.
Assign the value Welcome to to var_1, and the value my

web site to var_2.
Create a third variable var_3, and assign to it the value of

var_1 + var_2. Then use an alert box to check the resultant
value of var_3.
Test this page in your browser.
If the text in the alert box does not appear as expected,

consider the use of spaces in the variable assignments, and
correct the error.
Now, modify your code to produce the same result but without
requiring a third variable.
Clear all statements from the current script tags.
Add two statements to the script which assign the numbers

100 to one variable and 5.5 to another.
Use document.write to show the effects of each of the

operators given in the table on page 34 on the two numerical
values.
o Substitute one of the numerical values for a text string and

repeat the procedure. Note the differences.
39
40
12
Comparisons
Key Points
o Comparison operators compare two values with each other.
Most commonly, they are used to compare the contents of two
variables for example we might want to check if the value of
var_1 was numerically greater than that of var_2.
o
When you use a comparison operator, the value that is

returned from the comparison is invariably a Boolean value
of either true or false. For example, consider the following
statements:
var_1 = 4;
var_2 = 10;
var_3 = var_1 > var_2;
In this case, the value of var_3 is false. Note that the Boolean
value of false is not the same as the text string false:
var_4 = false; // Boolean value
var_5 = false; // Text string
o Common comparison operators are given below:

Comparison
Function
X == y
Returns true if x and y are equivalent, false

otherwise
X != y
Returns true if x and y are not equivalent,

false otherwise
X>y
Returns true if x is numerically greater than

y, false otherwise
41
X >= y
Returns true if x is numerically greater than

or equal to y, false otherwise
X<y
Returns true if y is numerically greater than

x, false otherwise
X <= y
Returns true if y is numerically greater than

or equal to x, false otherwise
o To reverse the value returned from a comparison, we generally

modify the comparison operator with a ! (a bang). Note that
in many cases this is not necessary, but can aid
comprehension:
var_1 !> var_2;
var_1 <= var_2;
both of these are equivalent, but one may make more semantic
sense in a given context than the other.
Project
chapter_12.html.
o Ensure that your two variables both have numerical values in
them and not strings.
o Use an alert box to display the result of a comparison of your
two variables for each of the comparison operators listed
above.
o Substitute one of the numerical values for a text string and
repeat the procedure. Note the differences.
42
13
Conditionals
Key Points
o Up until now, our JavaScript projects have been unable to alter
their behaviour spontaneously. When a page loads with our
JavaScript embedded within, it is unable to do anything other
than what we expect, time and again.
o The only difference we have seen is in the use of a prompt box
to alter what is shown on a page. However, the page essentially
does the same thing with the text provided, regardless of what
text is typed in.
o What would be really handy would be to give JavaScript a
mechanism to make decisions. For example, if we provided a
prompt box asking the visitor for their name, it might be nice
to have a list of known names that could be greeted
differently from any other visitors to the site.
o Conditional statements give us that ability, and are key to
working with JavaScript.
o A conditional statement consists of three parts:
o A test (often with a comparison operator, or comparator) to
see if a given condition is true or false.
o A block of code that is performed if and only if the condition is
true.
o An optional block of code that is performed if and only if the
condition is false.
These three parts are represented in JavaScript as follows:

if ( conditional_test )
{
JavaScript statement;
}
else
{
o Everything from the first closing curly bracket (or brace) is

optional, so the following is also a valid conditional prototype:
if ( conditional_test )
{
o In this case, if the conditional_test does not return true,

nothing happens.
o
An example of complete conditional statement is as follows:

if ( var_1 > var_2 )
{
alert(Variable 1 is greater);
}
else
{
}
43
Note that the above condition is not necessarily always correct.

Consider the case where var_1 is equal to var_2. In that
case, the above code will produce the message that Variable 2
is greater, since var_1 > var_2 returns false. In this case,
we want to add an additional condition to the else branch of
code:
if ( var_1 > var_2
{
alert(Variable
}
else
if ( var_1 < var_2
{
alert(Variable
}
44
)
1 is greater);
)
2 is greater);
In this case, equality will produce no output, as neither of the

conditions will return true. For completeness, we could add a
final else branch to the statement:
{
}
else
if ( var_1 < var_2 )
{
}
else
{
alert(The variables are equal);
}
o Note that in this case, we dont have to check for equality in

the final branch, as if var_1 is neither greater than nor less
than var_2, then numerically at least the two must be
equal.
o We can continue adding as many else if statements as required
to this stack.
If you only have one statement following your conditional test,

the braces may be omitted:
However, if you later want to add further statements to this

conditional branch, you will have to add braces around the
block, and this can lead to confusion. It is recommended that
you use braces to enclose all blocks of conditional code.
o
Consider the following block of code:

if ( var_1 > 4 )
{
var_2 = var_1;
}
else
{
var_2 = 4;
}
o This code is rather long, but achieves comparatively little

var_2 is equal to var_1 or 4, whichever is greater.
o
A more compact way of writing this could be:

var_2 = 4;
{
var_2 = var_1;
}
However, an even more compact way of writing this could be

to use the ternary operator:
var_2 = (var_1 > 4) ? var_1 : 4;
o In the above statement, the conditional is evaluated and, if true,

the value returned is the value between ? and : symbols, or if
false, it is the value between the : and ; symbols.
Project
chapter_13.html.
o Clear all JavaScript code from your script tags.
o Create two variables and assign numerical values to them.
45
o Use a conditional statement to show alert boxes declaring

which variable is the greater of the two.
o
Consider the following code:

var_3 = (var_1 > var_2);
o Use this code in your script to simplify your conditional

checking code.
o Now, use a prompt box to ask your visitor their name. Assign
this name to var_3.
o Check to see if the name typed in is your own name. If it is,
use document.write to display a personalised greeting on
the page. Otherwise, display a generic greeting.
o Use multiple else if branches to check the typed name against
the names of some of your friends. Create personalised
messages for all of them.
o There may be a way to simplify your conditional greeting code
to use only one document.write statement. See if you can
figure out how. Hint how might you use a variable called
greeting?
Project 2
o In many cases, the brevity of your conditional statements will
rely on your ability to formulate the right questions to
consider when performing your tests. Try to make your
solution to the following problem as concise as possible.
o Clear all of your current code from the script tags.
o Ensure that your script tags are currently situated in the body
section of the page.
o Create a variable called exam_result and store a numerical
value of between 0 and 100 in it.
46
47
o Use an if statement and multiple else if statements to

check the value of this variable against the following exam
grading scheme, and print out the appropriate message to the
page:
Exam Result
Result Message
90 or more
Excellent. Pass with Distinction.
Between 70 and 89
Well Done. Pass with Honours
Between 55 and 69
Just passed.
54 or below
Failed. Do better next time.
o Test your result in your browser. Vary the value of

exam_result and check the value shown in the browser. For
extra practise, try to use a prompt box to make changes to your
exam_result variable as easy to achieve as possible.
48
14
Looping
Key Points
o The letters i, j and k are traditionally used by programmers to
name variables that are used as counters. For example, at
different stages of the program, i may contain the numbers 1,
2, 3 etc.
o
In order to achieve a counting effect, you will need to

increment or decrement the value of your counting variable
by a set value. Here are some examples:
i = i + 1;
i = i - 1;
i = i + 35;
incr = 10
i = i + incr;
To keep things concise, we can use the following shortcuts:

i++; // equivalent to i = i + 1;
i--; // equivalent to i = i + 1;
o Counting in JavaScript, like many other programming

languages, often begins at zero.
49
o In many cases, this makes a lot of sense, as we will see.

However, it can often cause confusion. Consider starting at 0
and counting up to 10. In that case, we may have actually
counted 11 items:
0
1
2
3
4
5
6
7
8
10
(1)
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(11!)
o If you wanted to give an instruction to someone to perform a

repetitive action, you might say that you wanted them to
continue the action for a certain number of times. If someone
were performing an action 300 times, for example, they might
do something like the following to ensure that their count was
accurate:
o Write the number 1 on a bit of paper.
o After each action, erase the number on the bit of paper and
increment it by 1.
o Before each action, check the number on the bit of paper. If it
is less than or equal to 300, perform the action.
o Alternatively, they might decide to start counting at 0. In this
case, the procedure would be identical, but the check before
each action would be to make sure that the number was strictly
less than 300.
o
In JavaScript, we say almost the same thing. The following

code will display the numbers 1 to 100 on the page:
for
( i = 1; i <= 100; i++ )
{
document.write(<p> + i </p>);
}
50
The for statement tells the browser that we are about to

perform a loop. The layout here is very similar to a conditional
statement, but in this case we have much more information in
the brackets. Where our conditional had one JavaScript
statement to describe its action, a for loop has three:
An initialiser this sets up the initial counting condition, in

this case i = 1.
A conditional this is identical to our conditional statements

earlier, and must return true or false. If it returns true, the
loop continues, otherwise it exits.
An incrementer this defines the action to be performed at the

end of each loop. In this case, i is incremented by a value of 1.
o The key difference between a conditional and a for loop is that

the condition is constantly being changed and re-evaluated. It
is possible to create an infinite loop by making the conditional
non-reliant on the count value for example:
for
( i=0; 5 > 4; i++ )
will always perform the script in the braces, and will probably
cause errors in the browser.
o Note too that it is very common to start counting at zero in
JavaScript. The reason for this is that it is often desirable to
count how many times an operation has been performed.
Consider the following:
for
( i=1; 1 < 2; i++ )
o In this case, the loop will run once, but the value of i will be 2,
as after the first run, i will be incremented to 2, and will then
fail the test and so the loop will exit. If we use the following:
for
( i=0; 1 < 1; i++ )
Then the loop will run once, and the value of i afterwards will
be 1, as we might hope.
Project
chapter_14.html.
o Write a series of statements to produce a multiplication table as

follows:
o The following exercise is more of an HTML example, but

demonstrates an important facet of using JavaScript (or,
indeed, any programming language) to produce well-formatted
text.
o Modify your previous code to make your pages content
appear in the centre of the page. Put your multiplication table
in an HTML table to make sure that the equals signs,
multiplication signs and so forth line up in neat columns:
51
o As a hint, here is a look at the table cells involved:
52
53
15
Arrays
Key points
o In many cases, variables will completely satisfy our data
storage needs in JavaScript. However, in a large number of
cases, we may wish to group variables into a collection of
related items.
o Take, for example, days of the week. In each day we perform a
number of tasks, so we could want to record each task as a
separate item under a group called, say, Mondays Tasks.
o In JavaScript, to achieve this we would store each task in a
separate variable, and then group those variables together into
an array.
o An array is a special type of JavaScript object that can store
multiple data values unlike a variable, which can only store
one data value at a time.
o It could be helpful to think of an array as a row of mail boxes
in an office, just as you might think of a variable as a single,
solitary mail box.
o The boxes in an array are numbered upwards, starting at box
number 0 note that counting begins at 0 here, just as we
discussed in the previous chapter. The number assigned to each
box is known as its index.
o In order to use an array in JavaScript, you must first create it.

There are a number of ways to create arrays in JavaScript. The
simplest follows:
arrDays = new Array();
This statement creates a new, empty array called arrDays. We

can call arrays just like we can variables, but with a few minor
adjustments.
o If you already know how many elements a given array will
have, you can declare this explicitly:
arrDays = new Array(7);
This modification creates an array with 7 empty boxes.

However, arrays will expand and contract to the required size
in JavaScript, so the cases where you will need to state the size
of the array are rare.
o More useful, however, is the ability to fill the boxes of an
array when you create it. For example:
arrDays = new Array(Monday,Tuesday);
We now have an array with two elements. The first (element 0)

has a value of Monday, while the second (element 1) has a
value of Tuesday. We need not restrict ourselves to string
values in arrays Boolean, numerical and string values are
allowed, as in arrays. It is even possible to assign other arrays
to array elements more on this later.
o The most often-used way of creating an array is to use square
bracket notation. Square brackets play a large role in the use
of arrays, so this is often the easiest method to remember:
arrDays = [Monday,Tuesday];
This is identical to the previous example.
54
o To access an arrays elements, we first call the arrays name,

and then specify the number of the element in square brackets,
like so:
alert(arrDays[0]);
Note the lack of quotes around the 0 here. This line of code is
equivalent to:
alert(Monday);
assuming the array is defined as in the previous examples.

o
Not only can we access the value of an array element using this
notation, but we can also assign the value as well:
arrDays[2] = Tuesday;
arrDays[3] = Wednesday;
If you wish to add an element to an array without knowing the

index of the last element, you can use the following code:
arrDays[] = some other day;
o As we will see, arrays are actually just special JavaScript

objects, and have properties and methods associated with them.
The most important property that every array has is its length
property:
how_many_days = arrDays.length;
o As well as properties, arrays have very useful methods. If you
wished to sort your array alphanumerically, you could use the
arrays sort method thus:
arrDays.sort();
Note that the sort method works on the actual array itself, overwriting the current values. So, if you had an array with each
day of the week as an element, calling its sort method would
mean that arrDays[0] was then equal to Friday, not
Monday.
Project
chapter_15.html.
55

o Write a few JavaScript statements that will present the months
of the year on the page in alphabetical order. You should use
the following technique to achieve this:
o Store the names of the months of the year in an array.
o Use an array method to sort the array elements
alphanumerically.
o Use a for loop to iterate through each array element in turn,
and print the value of the element to the screen (hint, consider
the use of array[i], where i is the for loops counter).
o The above method (the use of a for loop to iterate through a
series of array elements) is one of the first common
programming techniques we have discussed in this course. Its
usefulness cannot be overstated, as it allows us to perform
repetitive tasks on a series of related elements without
necessarily knowing what those elements might be when we
wrote the code. It can be applied to form elements, cookies,
page elements, pages, windows, and just about any other
collection of object that you might wish to manipulate with
JavaScript.
o To reinforce this generalism, if you have not used the
array.length value in your loop, consider its use now. To
prove that you have created a more generic loop, try the code
with an array of days instead of an array of months, and see if
you have to change any of the looping code.
56
16
57
Associative & Objective Arrays
Key Points
o
We have already seen that we can access array elements by

their index:
arrDays = [Monday, Tuesday];
// print Monday to the page
document.write(arrDays[0]);
However, it might be more useful to be able to name our array

elements. By default, an array will be created as a numeric
array. We can also create an associative array:
arrDays[Monday] = Go to the dentist;
arrDays[Tuesday] = Attend JavaScript
class;
arrDays[Wednesday] = JavaScript homework;
// remind you of Wednesdays task
alert(arrDays[Wednesday]);
This looks a lot like our previous discussion of objects and

properties. In fact, since an array is actually an object, we can
access its elements as though they were properties:
// remind you of Wednesdays task
alert(arrDays.Wedensday);
Note a subtle difference here in our previous, numeric array

examples, the names of the week days were the values of our
array elements. Here, the names of the week days are the
indexes of our elements. Avoid the following common error:
arrDays = [Monday,Tuesday];
arrDays[Monday] = Go to work;
// this is actually equivalent to
arrDays[0] = Monday;
arrDays[1] = Tuesday;
arrDays[Monday] = Go to work;
// and arrDays.length is now 3, not 2
Project
chapter_16.html.
o Write a new script which creates a new, seven element
associative array called Week:
o Use the days of the week as indexes for each element of the
array.
o Assign a task to each day of the week as each associative
element is created.
o Use a for loop to display a calendar on the page, as follows:
Monday: task
Tuesday: task
etc
o Modify your code to use a prompt box to ask the visitor to
choose a day, and display on the page the task allotted to that
day.
58
17
59
Two Dimensional Arrays
Key Points
o Referring back to our mailbox analogy, where our array could
be pictured as a row of mailboxes, each with its own contents
and label, a two dimensional array can be thought of as a series
of these rows of mailboxes, stacked on top of each other.
o In reality, a two dimensional array is simply an array in
which each element is itself an array. Each sub array of a
two dimensional array can be of a different length in other
words, the two dimensional array doesnt have to be square.
o
You can access the contents of each sub array by using two
pairs of square brackets instead of just one. An example will
illustrate this best:
array_1 = [element, element 2];
array_2 = [another element, 2, 98, true];
array_3 = [array_1, array_2];
alert(array_3[1][3]);
// displays 98
While you cant mix numerical and string indexing systems in

a single array (i.e. an array cannot be both numerical and
associative), you can have both associative and numerical
arrays in two dimensional arrays. For example, consider the
above recast as follows:
array_3 = new Array();
array_3[firstArray] = array_1;
array_3[secondArray] = array_2;
alert(array_3[secondArray][3]);
//displays 98 again
Similarly, we can happily use our objective notation for

associative arrays:
alert(array_3.secondArray[3]);
//displays 98 yet again
Project
chapter_17.html.
o Building on your previous project, create a number of new,
seven element associative arrays to represent 4 separate weeks.
o Combine these 4 weeks into a four element array to represent a
month.
o Modify your previous code to take a week number and print
out all that weeks activities to the page.
o Modify one of your week arrays to consist not of single
elements, but of arrays of hours from 8am to 5pm. This then
represents a three dimensional array. We can extend arrays to
be n-dimensional, where n is more or less arbitrary.
o Finally, alter your code to prompt the user for three values a
week, a day and an hour. Store these values in three separate
variables, and use those variables to display the requested task,
or else to display an error message if a task cannot be found.
60
61
18
String Manipulation
Key Points
o Throughout your use of JavaScript in a production
environment, you will often use it to read values from
variables, and alter a behaviour based on what it finds.
o We have already seen some basic string reading in the section
on comparisons where we test for equality. However, this allor-nothing approach is often not subtle enough for our
purposes.
o Take the case where we want to check a users name against a
list of known users. If the user enters their name as Karen,
for example, that will be fine if and only if they spell the name
precisely as we have it recorded, including capitalisation etc. If
the user decides to type in her full name, say Karen
Aaronofsky, the code will not recognise her.
o In this case, we want to see if the text Karen appears at all in
the string. We call this substring searching, and it can be
incredibly useful.
o One of the simplest substring searches is done by using the
indexOf method. Every string-type variable has this method
associated with it. Consider this code:
var_1 = Karen Aaronofsky;
var_2 = var_1.indexOf(Karen);
In this case, the value of var_2 will be 0 remembering that

JavaScript begins counting at 0!
62
o If we were to search for a surname here:

var_1 = Karen Aaronofsky;
var_2 = var_1.indexOf(Aaronofsky);
var_2 will have a value of 6.
o Finally, if the search were to fail, so say we searched for the

name Anisa as a substring, the value of var_2 would then
be -1.
o Note that this is more flexible, but still presents an issue if the
user forgets to capitalise any of the substrings that we are
searching for in JavaScript, Karen does not equal karen.
o
In order to get around this, we might want to ensure that

capitalisation is not taken into account. A simple way to
achieve this is to force strings into lowercase before the check
is performed:
real_name = Karen;
name = prompt(Your name?,);
real_name = real_name.toLowerCase();
try_name = try_name.toLowerCase();
if ( try_name.indexOf(real_name) > -1 )
{
alert(Hello Karen!);
}
else
{
// note we use the original,
// non-lower-cased name here
alert(Welcome + name);
}
o There are a number of string methods we can use to perform

value checks on strings. A few are printed in the following
table:
Method
Behaviour
String.indexOf(str)
Returns the numerical position of the first

character of the substring str in the String
String.charAt(x)
Returns the character at position x in the

string the opposite of indexOf
63
String.toLowerCase()
Returns a copy of the string with all capital

letters replaced by their lowercase
counterparts
String.toUpperCase()
Returns a copy of the string with all

lowercase letters replaced by their capital
counterparts
String.match(/exp/)
Returns true or false based on a regular

expression search of the string
o The final method here deserves some comment. What is a

regular expression?
o A regular expression is a standard way of writing down a
pattern of characters that is easily recognisable. For example,
consider a typical email address:
[email protected]
o An email address follows a pattern which makes it instantly
recognisable as an email address to a human. Wouldnt it be
handy if we could define that pattern in JavaScript for a
browser to use? Regular expressions allow us to do just that.
o Lets look at our email address again. We can break it down to
a prototype email address as follows:
[some letters]@[some more letters].[a few more letters]
o Of course, its slightly more complex than that there are
some characters which arent allowed to be in certain parts of
the email address (no spaces, for example), but this lets you
see the idea of breaking this string up into required chunks.
o
Now, to convert this to a regular expression. Just as we use

quote marks to denote (or delimit) string values in
JavaScript, to signify a regular expression, we use forward
slashes: /. Our email address regular expression might look like
this:
/^.+@.+\..+$/
This warrants some discussion. Lets look at this a character at

a time:
/ denotes the start of the regular expression
^ denotes that we want this regular expression to be found at

the very beginning of the string we are searching.
.+ the dot symbol is used to stand in for any character. The

plus signifies we want to find at least one of those. So this is
equivalent to our plain-English phrase [some letters].
@ this is simply a character it has no special meaning other

than to say we want to find an @ character after at least one
character from the beginning of the string.
.+ the same as before at least one more character after the @.
\. This is interesting. We know that the dot symbol has a

special meaning in a regular expression it means match any
character. However, here we want to find an actual dot.
Unlike @, which has no special meaning, we have to tell
JavaScript to ignore the dots special meaning. We do this by
preceding it with a backslash, which tells JavaScript to treat
the character immediately following it as though it has no
special meaning. This is a convention you will come across
many times while programming. The net result here is that we
want to match a dot after a series of characters.
o .+ and again, at least one more character after the dot.

o $ this is the mirror of the ^ at the beginning this matches the
end of the tested string.
o / tells JavaScript we are at the end of the regular expression.
o Phew! Lots to consider here. Regular expressions are an arcane
art at the best of times, so dont worry too much if the above
code is indecipherable. The important thing to realise at the
moment is that we can perform some quite sophisticated
pattern recognition in JavaScript without having to resort to
checking each individual character of a string multiple times.
64
The following code checks a variable to see if it looks like an

email address:
var_1 = prompt(Your email?, );
if ( var_1.match(/^.+@.+\..+$/) )
{
alert(valid email address);
}
else
{
alert(are you sure?);
}
o There are a few problems with this code at the moment for
example, it will pass the string [email protected] quite happily, which is
clearly wrong. We will look at ways around this later on in the
course.
Project
chapter_18.html.
o Use a prompt box to capture some user input to a variable
called check_string.
o Use a document.write statement to output the results of each of
the various string methods when applied to the user input.
o Check the user input to see if its an email address, and alter
your output accordingly to either Thats an email address or
That doesnt look like an email address to me!
o In the latter case, output the failed string as well so that the
user can see their input and modify it next time, if appropriate.
65
66
19
Using Functions
Key Points
o A function is a named set of JavaScript statements that
perform a task and appear inside the standard <script> tags.
The task can be simple or complex, and the name of the
function is up to you, within similar constraints to the naming
of variables.
o
JavaScript functions are declared before they are used. The

declaration looks like this:
function name_of_function( )
{
your code here
}
o Unlike all the JavaScript instructions we have looked at so far,

the code inside a function will not be run until specifically
requested. Such a request is called a function call.
o Functions can be called from anywhere on the page that
JavaScript can live, but must be called after the function has
been declared. For example, if you declare a function in the
body of a document and then call it from the head of the
document, you may find that the browser returns an error
message. For this reason, most JavaScript programmers define
any functions they are going to use between <script> tags in
the head section of their pages to ensure that they are all
defined before they are used.
o
Functions are to object methods as variables are to object

properties they are also called in a similar manner. To run the
code contained in the name_of_function function above,
we would use the following line of code:
name_of_function();
Note the parentheses after the function name. This lets

JavaScript know that we are dealing with a function and not a
variable. The parentheses also allow us to pass extra
information to the function, which can alter its behaviour.
Consider the following function:
function greet_user( username )
{
message = Hello + username;
alert(message);
}
Whenever the function is called, it will greet the user named.

How can we pass this information through? Consider:
greet_user(Anisa);
or
var_1 = prompt(Name?, );
greet_user(var_1);
o We should use functions in our code as often as possible.

Whenever we perform an action that isnt accomplished by the
use of a method or an assignment operator, we should try to
build a function that can accomplish the task.
o
For example, we can build a function to check email addresses:

function check_email( address )
{
var_1 = false;
if ( address.match(/^.+@.+\..+$/) )
{
var_1 = true;
}
}
o The above function will take a string that is passed to it (often

called the functions argument), and will alter the value of
var_1 depending on what it finds. However, the function is
lacking an important ability the ability to communicate its
findings back out to the rest of the script.
67
We have mentioned return values a few times in the notes.

Now we see a situation that requires a function to return its
findings to the rest of the code. Ideally, wed like to be able to
use the above function as follows:
if ( check_email(address) )
{
do some email things
}
In order for this to work, the return value from check_email

would have to be a Boolean value. We can arrange this quite
simply:
{
var_1 = false;
{
var_1 = true;
}
return var_1;
}
o Since var_1 is either true or false, the returned value will be

Boolean. We can even skip the use of the variable here and be
more direct:
{
{
return true;
}
return false;
}
or even better, since address.match() will return a Boolean

value of its own:
{
return address.match(/^.+@.+\..+$);
}
68
The above function may not seem like a great saving. After all,
we are using four lines of code to define a function that
performs only one line of code. Compare:
{
return address.match(/^.+@.+\..+$);
}
if ( check_email(address) )
{
}
with:
{
}
o While the benefits here are not obvious, consider the case
where, at some point in the future, you discover a better
method of checking for email addresses. In the second case
abov, you will have to search your code for each and every
instance of that method, and replace it with your new method,
which may not be one line of code. In the first case, you will
just have to change the underlying function definition, and the
upgrade will be effective throughout your code without you
having to update each occurrence.
Project
chapter_19.html.
o Ensure that you have a script element in the head area of your
document, and one in the body area.
o In the head area, define a function called show_message. This
function should take one argument, called message, and
should use an alert box to display the contents of the argument.
o In the body area, call the function with various messages as
arguments.
69
o Now use a variable in the body area to store the return value of
a prompt asking the user for a message. Use this variable as the
argument to a single instance of show_message.
o Define a new function in the head area called get_message.
It should take no argument, but should replicate the function of
your prompt in the body area and ask the user for a message
via a prompt box.
o
Make sure that get_message returns a sensible value. We

are aiming to replace our prompt statement in the body area
with the following code:
message = get_message();
so consider what you will have to return to enable this to work.

o Once you are happy with your get_message definition, try
replacing your prompt code in the body area with the statement
above.
o To demonstrate the power of functions, change the action of
show_message to write the message to the page without
changing any code in the body area of the page.
70
71
20
Logical Operators
Key Points
o
In our discussion of conditionals, we saw how to check the

veracity of a single condition via a comparator:
if ( x > some_value )
{
expressions
}
We have also seen the limitations of such an approach. Let us

say we wanted to discover if x lay between two values, say
val_1 and val_2. There are a number of ways we could
achieve this. In our example on student grades, we learned that
we could use an ifelse pair to achieve this effect:
if ( x
{
do
}
else
if ( x
{
do
}
> val_1 )
something
> val_2 )
something else
o The above code achieves what we want for the second

branch, x must lie between val_2 and val_1 (assuming
val_1 is greater than val_2, of course). However, its rather
unwieldy, and does not scale elegantly to checking three
conditions (say we wanted to check if x was an even number
as well), or in fact to ten conditions.
o Enter Logical Operators. These operators are used to join
together conditional checks and return true or false depending
on whether all or any of the checks are true.
o In English, we refer to these operators by using the words

AND and OR.
o For example, say we wanted to do something each Tuesday at
8pm. We would want to check whether the current day was
Tuesday, and whether the time was 8pm.
o Another example: Lets say we wanted to do something on the
first Tuesday of each month, and also on the 3rd of the month
as well. We would have to check whether the current day was
the first Tuesday of the month, or whether it was the 3rd day of
the month.
o Note in the last example, if both conditions were true, then we
would be on Tuesday the 3rd and would perform the action. In
other words, an or condition allows for either one, or the other,
or both conditions to be true.
72
o In JavaScript, we use the following syntax to check multiple

conditions:
( 100 > 10 && 5 < 8 )
translates as if 100 is greater than 10 and 5 is less than 8. In

this case, the result is true.
( 100 > 200 && 4 < 9 )
in this case, the result is false. Note here that only the first
condition is actually checked. Since and requires both
comparisons to be true, as soon as it finds a false one it stops
checking. This can be useful.
( 100 > 10 || 9 < 8 )
translates as if 100 is greater than 10 or 9 is less than 8. In

this case, the result is true, since at least one of the conditions
is met.
( 100 > 200 || 4 > 9 )
in this case, the result is false since neither of the comparisons

are true. Finally:
( 100 > 200 || 5 < 2 || 3 > 2 )
in this case, the result is true. Any one of the three being true
will provide this result.
o As we can see from the last example, this method of checking
scales to any number of conditions. We can also mix and
match the operators. For example:
( ( 100 > 200 && 100 > 300 ) || 100 > 2 )
in this case, the and condition evaluates to false, but since
either that or the last condition has to be true to return true, the
overall condition returns true as 100 is indeed greater than 2.
o This sort of complex logic can take a while to comprehend,
and will not form a set part of the course. However, it is useful
to be aware of it.
73
Project
chapter_20.html.
document, and one in the body area.
o Copy the file available_plugins.js from the network
drive (your tutor will demonstrate this), and open it using
NotePads File > Open command.
o Copy and paste the entire contents of
available_plugins.js into your current project file, into
the script element in the head area of your page.
o Have a read through the code. Note that it defines a large, two
dimensional array. The array has a list of various components
that can be present in web browsers (such as Flash or
Quicktime)
o Add a function to the head area script element, called
flash_exists(). This function should use a for loop to
check each of the elements of the available_plugins array
and establish if Flash is present.
o Add a further function to the head area script element, called
quicktime_exists(). This function should also use a for
loop to check each element of the array, this time returning
true if Quicktime is present.
o Finally, add a function to the head area script element called
both_quicktime_and_flash_exist(). This function
should call both of the previous functions, store their results in
a variable, and produce an alert box containing the message:
o Both Quicktime and Flash if both functions returned true; or:
o One of Quicktime or Flash is missing if either of the
functions return false.
o Call the final function from the body area script element.
o Check your results in your browser.
74
75
21
Using Event Handlers
Key Points
o So far, our scripts have run as soon as the browser page has
loaded. Even when we have used functions to package our
code, those functions have run as soon as they have been called
in the page, or not at all if no call was made. In other words,
the only event our scripts have so far responded to has been the
event of our page loading into the browser window.
o Most of the time, however, you will want your code to respond
specifically to user activities. You will want to define
functions, and have them spring into action only when the user
does something. Enter event handlers.
o Every time a user interacts with the page, the browser tells
JavaScript about an event happening. That event could be a
mouse click, a mouse pointer moving over or out of a given
element (such as an image or a paragraph), a user tabbing to a
new part of an HTML form, the user leaving the page, the user
submitting a form and so on.
o An event handler is a bit of JavaScript code that allows us to
capture each event as it happens, and respond to it by running
some JavaScript code.
o In general, we attach event handlers to specific HTML tags, so
a mouse click on one element of the page might be captured by
an event handler, but clicking somewhere else might do
something completely different, or indeed nothing at all.
o Some common event handlers are in the table below:
Event Handler
Occurs When
onload
An element is loaded on the page
76
onunload
An element is not loaded, for example when

a user leaves a page
onmouseover
When the mouse pointer enters the area

defined by an HTML element
onmouseout
When the mouse pointer leaves the area

defined by an HTML element
onclick
When the left mouse button is clicked within

the area defined by an HTML element
onmousedown
When the left mouse button is depressed

within the area defined by an HTML
element
onmouseup
When the left mouse button is released

within the area defined by an HTML
element
o The last three are related, but there are subtle differences
onclick is defined as being when both mousedown and
mouseup events happen in the given elements area. For
example, if you click on an area of the page, that registers the
areas mousedown event. If you then hold the mouse down and
move to another area before releasing, it will register the other
areas mouseup event. The browsers click event, however,
will remain unregistered.
o In theory, we can add most of these event handlers to just
about any HTML tag we want. In practise, many browsers
restrict what we can interact with.
o We will mostly be attaching event handlers to <img>, <a> and
<body> tags.
o
To attach an event handler to a tag, we use the following

method:
<a href= onclick=a_function();>link</a>
We can use this method to attach any event handler listed

above to the elements of the page. In addition to calling
functions (with any optional arguments, of course), we can
write JavaScript directly into our event handlers:
<a href= onclick=alert(hello);>link</a>
o Note the potential issue with quote marks here if you use
double quotes around your event handler, you need to use
single quotes within and vice versa.
Project
chapter_21.html.
document, and none in the body area.
o
Within the head area script element, define the following

function:
function set_status( msg )
{
window.status = msg;
}
When called, this function will set the text displayed in the
browsers status bar (the part of the window below the page
content) to whatever is passed as an argument. For example, to
set the status bar to display Welcome, we would call:
set_status(Welcome);
Now define the following function immediately below the last:

function clear_status( )
{
set_status();
}
o When called, this function will clear the status bar. Notice that
we are using our previous function within the new one. This is
a common programming technique that allows us to define
functions of specific cases using more general functions.
o
Now, add the following HTML to the body area of your page.
Remember, were adding HTML here, not JavaScript, so do
not be tempted to use script tags for this part of the project:
<a href=#
onmouseover=set_status(hello);
onmouseout=clear_status();>testing</a>
77
o Load the page in your browser and observe what happens

when you move your mouse over the link.
o The # value for the href attribute of the link allows us to define
a dead link on the page. Clicking on the link will take you
nowhere try it.
o Now, alter the code to have the link point at a real website that
you know of.
o Clicking on the link now will take you away from the page.
Lets say we want to suppress that behaviour.
o When an event handler intercepts an event, it pauses the
normal action of the event. For example, if you used an onclick
handler on a link to pop up an alert box, the link would only be
followed after the alert box had been dismissed. We can use
event handlers to cancel the action if required by using their
return values.
o
Add a new function to the head area script element:

function confirm_link( )
{
check = confirm(This will take you
away from our site. Are you sure?);
return check;
}
o The value of check will be true or false.

o
Now, modify your link to contain the following event handler:

onclick=return confirm_link();
o By using the word return in our event handler, the response

of the function will be used to decide whether the rest of the
normal action is run. In this case, if confirm_link()
returns false, our link action will be cancelled.
o Load your page in your browser and view the result.
78
79
22
Working with Images
Key Points
o
In HTML, we can identify specific elements on the page using

an id attribute. For example, to name an image, we can use
the following code:
<img src=logo.gif alt= id=theLogo />
To refer to this element in JavaScript, we can now get to it

directly by its id value:
document.getElementById(theLogo)
o This method will return an object that refers to the given

element on the page. If no such element can be found, the
method will return false.
o
For easier use, we can assign the object found to a variable.

For example, to create an object called our_logo in our scripts,
we can use the following line of code:
our_logo = document.getElementById(theLogo);
The resultant object has a number of properties. Since, in this

case, our object represents an image element, its properties
include:
our_logo.height
our_logo.width
our_logo.src
We can use JavaScript to change any of these properties, so if

we wanted to change the image displayed, we could do so as
follows:
our_logo.src = new_logo.gif;
Project
o Copy the folder called images from the network drive to your
project folder.
chapter_22.html.
o Within the body area of your page, create an image element
that loads an image from the images folder. Give the element
an appropriate id attribute.
o In the head area script element, define a function called
describe_image() that will pop up an alert box containing the
following information about your image:
the image file used
the image width
the image height
o
To have each bit of text appear on a separate line, you can add
the following character to your alert text:
\n
for example
alert(line one\nLine two);
o
Load your page in the browser and view the results.
80
81
23
Simple Image Rollovers
Key Points
o A simple image rollover is an effect which happens when the
mouse appears over an image (usually a linked button) on the
page. The original image is replaced by another of equal size,
usually giving the effect that the button is highlighted in some
way.
o With what we have learned so far, we already have the ability
to create a simple image rollover effect. All that remains is to
clarify the particulars of the process:
o The page is loaded and the original image appears on the page
as specified by the <img> tags src attribute.
o The mouse moves offer the image and the alternative image is
loaded into place.
o The mouse leaves the image and the original image is loaded
back.
o As you may have realised, we are going to use JavaScript to
alter the src attribute of the image tag. The best way to think
of this is to picture the <img> tag as simply a space on the
page into which an image file can be loaded. The src attribute
tells the browser which image to load into the space, and so if
we change that value, the image will be changed.
o In other words, the id attribute of the <img> tag is naming the
space, not the image.
Now, in order to alter the src attribute with JavaScript, we need

to tell JavaScript which image space we want to alter. We
use the id attribute along with the getElementById() method
from the last chapter to do this:
button_img =
document.getElementById(button);
button_img.src = new_image.jpg;
We can directly insert this code into the images event handler:
<img src=old.jpg id=button
onmouseover=
document.getElementById(button).src
= new.jpg;>
Note that this code is suddenly very convoluted. There are two
immediate potential solutions. The first is to define a function:
function swap_image( id, new_image )
{
img = document.getElementById(id);
img.src = new_image;
}

onmouseover=
swap_image(button, new.jpg);>
o This is a much cleaner solution, and more importantly we can

use this for any images on the page, simply by changing the
arguments of our function call. We can also use the function to
achieve the swap back functionality:

onmouseover=
swap_image(button, new.jpg);
onmouseout=
swap_image(button, old.jpg);>
82
o We can go even further in cleaning up our code, though.

Because the event handler is being used to alter the object
which is experiencing the event (ie, the mouse is moving over
the image tag that we are trying to change), we can use the
automagic JavaScript object this to perform the operation:
function swap_image( img, new_image )
{
img.src = new_image;
}

onmouseover=
swap_image(this, new.jpg);>
o Note a couple of things. Firstly, this has no quotes around it

we are using it like a variable name. Secondly, our function
now uses the first argument directly, instead of using it to get
the relevant object from the page. We can do that because
this is actually an object its an object that takes on the
properties and methods of whatever object it is called from, in
this case, it becomes equivalent to
document.getElementById(button), although is
obviously much shorter!
o Using this has some limitations. For example, if we wanted
to change the src attribute of any other image on the page
when the mouse moved over button, we would be unable
to use this, and hence would have to define another function
that could take an id as its argument and get the relevant object
that way.
Project
o Copy the folder called buttons from the network drive to
your project folder.
chapter_23.html.
83
o Within the body area of your page, create a paragraph

containing six image elements. Set the src attributes of the
images to load the following files in your copied buttons
folder, and give each a sensible id:
o
contacts.jpg
home.jpg
people.jpg
products.jpg
quotes.jpg
whatsnew.jpg
o Create a JavaScript function in the head area script element

that takes two arguments an id and a file name. It should
alter the src property of the appropriate image object to the file
name given.
o Use this function to swap the src attribute of the contacts
button to contactsover.jpg when the mouse moves over
the image.
o Once you have this working, update the remaining five images
with event handlers to swap their src attributes to their
appropriate over image.
o Add event handlers to all six images to ensure that they return
to their original state when the mouse is moved away from
them. Check your work in your browser
o Add a new paragraph above the previous one, and add an
<img> tag to it to containing the file rocollogo.jpg from
the images folder.
o Add a text link to a new paragraph between the two
paragraphs. The link should be a dummy link (ie use # as
its href attribute value), but when the mouse moves over it,
the image above it should change to show rocollogo.gif.
o Moving the mouse away from the text link should return the
logo to its previous state.
o Check your work in your browser.
84
24
85
Object Instantiation and Better

Rollovers
Key Points
o So far we have seen a very simple example of an image
rollover. It is functional and works as desired, but it is lacking
in a few finer details.
o Specifically, when we use JavaScript to change the src
attribute of an <img> tag, the browser has to load this image
from scratch. On our local machine, this will not cause an
appreciable delay, but when dealing with a remote server (as
we will be on the Internet), this delay can lead to a noticeable
lag, which can destroy the feeling of a dynamic interface.
o Ideally, we would like to instruct the browser to load any
alternate images when it loads the page. This will allow us to
ensure that the new images are sitting on the users computer,
ready to be swapped in and out instantly.
o To do this, we need to look at object variables and object
instantiation (or creation). In particular, we need to look at
the Image object.
o Each <img> tag on the page has a corresponding Image object
in JavaScript. We have looked at ways of manipulating this
directly, and have an idea of some of the properties an Image
object can have.
o However, we can create Image objects directly in JavaScript,
without the need for a corresponding <img> tag on the page.
When we create such an object, and set its src property, the
browser will load the appropriate file into memory, but will not
display the image on the page.
o In other words, we can create virtual images that exist within

JavaScript, and use these Image objects to store the alternate
images for our real images.
o
To create an Image object (in fact, to create any object), we

need to use the following code:
virtual_image = new Image();
o We have seen this sort of syntax before the use of the new
keyword when we created our Arrays. new tells JavaScript that
we are creating a new object. The virtual_image part of the
assignment is just a variable name. In this case, the variable is
an Object Variable, since it contains an object.
o
To use this variable to preload our images, we take advantage

of the fact that it has the same properties and methods as any
other image:
virtual_image.src = contactsover.jpg;
o The browser will now preload our image, ready to be swapped

in at a later time.
Project
chapter_24.html.
o Starting with your previous code, create a new function called
preload_images in the head area script element of your page.
o Use this function to create seven new image objects, and use
each objects corresponding object variable to preload your
over image variations.
o Check your work in your browser to ensure that the image
swapping still works as expected.
o
Add your preload_images function to the body tag of your

page to ensure that it runs when the page has finished loading.
Use the following syntax:
<body onload=preload_images();>
86
o Once you have verified that the image swapping still works as
expected, expand your preload_images function to define an
array of images to preload, and then use a for loop to move
through the array and assign each image to the src property of
an object variable. Hint: an object variable can be anything
that can store information for example an array element.
87
25
88
Working with Browser Windows
Key Points
o
Using standard HTML links, we can open new browser

windows:
<a href=# target=_new>link</a>
o The amount of control this method affords us over the resultant

image, however, is nil. We cannot control the size, shape,
location on the screen or anything else about that window with
this method.
o
JavaScript allows us much finer control, as we may expect:

window.open( page_url, name, parameters );
o As we can see from the above prototype, there are only three
arguments that this method can take. However, the
parameters argument is actually more complex than we
might assume:
param1,param2,param3,param4
since we can use it to add many parameters to the method.

Note there are no spaces in the parameter list.
o name is used to give the window an HTML name so we can
use that name to open links into the new window using the
target method above.
89
The return value from the open method is an object variable

referring to the newly opened window. In other words, if we
open a new window like so:
win = window.open(page.html, , );
we can use the object variable win to alter the new window
through JavaScript.
o
A practical example lets say we want to open a new window

300 pixels high by 400 pixels wide, and display the BBC news
page in it. The following code would suffice:
window.open(http://news.bbc.co.uk/,
bbc, width=300,height=300);
o Some available parameters are given in the table below:

Parameter
Value
Function
location
Yes/no
Specifies whether or not the location

(address) bar is displayed
menubar
Yes/no
Specifies whether the menu bar is

displayed
status
Yes/no
Specifies whether the status bar is

displayed
width
Pixels
Specifies the width of the new window
height
Pixels
Specifies the height of the new window
resizable
Yes/no
Allow or disallow window resizing
scrollbars
Yes/no
Allow or disallow window scrolling
o If no parameters are set, then the value of each parameter is set

to yes where appropriate. For example:
window.open(http://www.bbc.co.uk/,
bbc, );
is equivalent to:
<a href=http://www.bbc.co.uk/ target=bbc>
90
o However, if any parameter is set, all others default to no. So

if you wanted to have a scrollbar but nothing else, the
following would suffice:
window.open(http://www.bbc.co.uk/,
bbc, scrollbars=yes);
Project
chapter_25.html.
o Remove all functions and HTML from your previous file,
leaving only the logo image and the link.
o Create a function in the head area script element called
view_new_logo. This function should:
Open a new window 200 pixels square.
Load the image rocollogo.jpg from the images folder.
Be called RocolLogo
Be stored in an object variable called objNewLogo.
Have no scrollbars, be of a fixed size, and have no other

features where possible.
o Remove all event handlers from the link, and add a new one to
run the function above when the link is clicked.
o Once you have verified that a window pops up as required
when the link is clicked, test each parameter from the table
above in the function.
91
26
Positioning Browser Windows
Key Points
o The screen object provides you with access to properties of the
users computer display screen within your JavaScript
applications.
o Some of the available properties are:
Property
Description
availHeight
The pixel height of the users screen minus the

toolbar and any other permanent objects (eg the
Windows Taskbar)
availWidth
As availHeight, but dealing with horizontal space
colorDepth
The maximum number of colours the users screen

can display (in bit format, eg 24 bit, 16 bit etc)
height
The true pixel height of the users display
width
The true pixel width of the users display
o The left and top parameters of the open() method enable

you to specify the position of a window on screen by
specifying the number of pixels from the left and top of the
screen respectively.
o If you need to use a variable to specify the value of a parameter
in the open() method, you would do so as follows:
window.open(index.html, window_name,
width=200,height=200,left=+var_left+
top=+var_top);
Where var_left and var_top are the appropriate variables.
o Note the use of the + operator to ensure that the third

parameter in the open() method remains as one string when
variables are added.
o In order to centre the window on the users screen, a little
simple geometry is required. The centre of the screen is
obviously the point found when we take the width of the
screen divided by two, and take the height of the screen
divided by two. However, if we set the windows top and left
values to these coordinates, the top left corner of the window
will be centred, not the window itself.
o
In order to centre the window, we need to subtract half of the

windows height from our top value, and half of the windows
width from our left value. A simple script to accomplish this is
as follows:
win_width = 200;
win_height = 200;
win_left = (screen.availWidth/2)
- (win_width/2);
win_top = (screen.availHeight/2)
- (win_height/2);
o By using this script, the values of win_left and win_top will be

set correctly for any window using win_width and win_height
appropriately to be centred on the screen.
Project
chapter_26.html.
o Modify your existing code to ensure that the logo appears
centred on the users screen. If possible, do not modify your
original function by doing anything more than two new
functions get_win_left( width ) and
get_win_top( height ).
92
93
27
Focus and Blur
Key Points
o
The focus() method of the window object gives focus to a

particular window. In other words, it ensures that the window
is placed on top of any other windows, and is made active by
the computer. For example, if we have created a new window
and stored the result in an object variable called new_window,
we could ensure that the window was brought back to the front
at any point after it had been opened by using the following
code:
new_window.focus();
Conversely, we can use the blur() method to remove focus

from the specified window returning focus to the previously
selected one as appropriate. Its use is similar to the focus()
method.
Both these events have associated event handlers: onblur and

onfocus. However, since they do not have associated HTML
tags, how can we attach event handlers to the object?
It turns out that, within JavaScript, each object has an

individual property for each event handler it can have applied
to it. For example, if we wanted to add an event handler to an
image tag on the page, we could apply either of the following
methods to do that:
<img src= id=test_img
onclick=do_something(); />
<script>
document.getElementById(test_img).onclick=
do_something();
</script>
94
So, to attach a function to a windows focus event, we could

use:
new_window.onfocus = some_function();
Project
chapter_27.html.
o Modify your function to open another window as well as the
original one, with the following features:
The second window should be called oldRocolLogo,

should be assigned to the object variable objOldLogo, and
display the old logo from the file
images/rocollogo.gif.
When opened, the windows should be positioned so that

both can be clearly seen.
o Test your modifications at this point.

o Observe the functions action when the windows are opened,
then the original window is placed in front of them and the
function is invoked again.
o Add a new statement to the function which uses the focus()
method to ensure that when the function is called, both new
windows are moved to the top of the stack of windows.
o Observe which logo appears on top when the function is
called. Use the focus() method again to alter this.
28
95
Dynamically Created Content
Key Points
o Its quite easy to create a new page on demand using
JavaScript. In this context, we are talking about creating a
completely new page in a window without loading any file into
that window.
o
To do this, invoke the open() method of the window object,

leaving the location parameter empty:
new_win = window.open(, newWin,
params);
Next, remember that you can write HTML code to a page

using the windows document.write() method. Up until
now, we have used only the current windows document
object. However, we can specify which windows document
we want to manipulate as follows:
document.write(); // write to current window
new_win.document.write(); // or new window
For example:
new_win.document.write(<html><head>);
new_win.document.write(<title>demo</title>):
new_win.document.write(</head><body>);
new_win.document.write(<h1>Hello!</h1>);
new_win.document.write(</body></html>);
Project
chapter_28.html.
96
o Modify your existing script to create a third window with the

following properties:
The window should be called newHTML, and be assigned to

the object variable objNewHTML.
It should be 400 pixels square.
It should not load any page when it is created. It should

display the word Welcome as an H1 header.
It should contain a paragraph with the text Please decide

which logo you would like to choose.
The third window should carry the title Rocol Art
When all windows have been opened, the third window

should be focussed.
o Check your work in the browser.
29
97
Working with Multiple Windows
Key Points
o The window objects close() method enables you to close a
window. If you have an object variable in the current window
referring to the window you wish to close, you can simply use:
new_window.close();
to close the window.

o Things are a little more complicated when you wish to close a
window from a window other than the one which opened the
new window. In order to tackle this, we need to think about
window scope.
o When we write JavaScript into our code, all functions and
variables within that script are available for us to use within
that window. For example, if we have a function called
say_hello() in our main window, we can easily call that
function. However, if we want to call the function from a
newly opened window, we cannot call it directly from the new
window, as our functions and variables are tied to the
windows in which they were first defined.
o This is why, when we want to write to any window other than
the one containing our JavaScript code, we must access the
document object of that window in order to put content in the
right place,
o But how about in the other direction? Lets say we use a
function in our main window (call it window 1) to open a new
window (window 2). If we store window 2 as an object
variable, we can access all properties of window 2 from
window 1 by using that object. The question is, how do we
access any properties of window 1 from window 2?
98
o The key is that window 2 and window 1 have a special

relationship a parent/child relationship. We can access any
property of window 1 from window 2 by using the special
object called opener. This is an object created within any
window that has been opened by JavaScript, and it always
refers to the window that opened the new window.
o To illustrate this, lets consider our previous project. We have
three new windows, and one parent window. If we wanted to
use an event handler on one of the new windows to close on of
the other new windows, we would need to first access the
parent window, and then access the object variable within the
parent window that pointed to the window we wanted to close.
o
Lets say we wanted to close window_2 from a link in

window_1. We would have to create an event handler in the
link with the following code:
onclick=opener.window_2.close();
Project
chapter_29.html.
o Modify your existing script to achieve the following:
Add two new paragraphs to the third windows content

containing the following text:
The Old Logo
The New Logo
Each line should be contained in a hyperlink whose event

handler accesses the parent windows object variable
pointing to the appropriate new window. Its close()
method should then be invoked.
o Check your work in the browser.
30
99
Using an External Script File
Key Points
o JavaScript can easily save us from having to type lots of
HTML. As we have seen, we can use JavaScript to generate
large form elements and tables using a small amount of code.
This is good news for us, as it makes our work easier. It is also
good news for our visitors, as they only have to download a
small amount of code for a relatively large amount of content.
o However, we can do better. As it is, if we have one function
that will generate a year drop down menu for a forms date of
birth section, we need to include that function in every page
that requires it. This means that our visitors are downloading
identical content multiple times. In addition, if we change or
improve our function, we have to ensure that we update that
function in every page that has it included.
o HTML allows us to solve this problem by providing a
mechanism to load an external text file into the HTML page
and treat its contents as JavaScript code. Since it is a separate
file, once it has been downloaded once, the browser will not
download further copies of the file if it is requested by another
page. In other words, we can load all our JavaScript code into
one file, and any changes there will instantly be reflected
across the entire site.
o
To use code in an external file, we still use the <script> tag

but with a new attribute, the src attribute. This is very
similar to loading an image file on to a page:
type=text/JavaScript
src=s/script_file.js></script>
o Note three things:
100
The language and type attributes are essential here.
The script tag still has a closing </script> tag.
We cannot add any further JavaScript between the tags

when we are using the tags to load an external file. To add
JavaScript to the current page only, we have to use a second
set of <script> tags.
Project
chapter_30.html.
o Move all your JavaScript function definitions, and any other
code in the head section script element to a new file called
script.js.
o Modify your head section script element to load code from the
new file.
o Check that your page still works as expected.
o NOTE: the .js file extension is just a naming convention.
<script> tags will load JavaScript from any text file (hence
the need to include the type and language attributes). However,
it is a widely used convention, and it is worth sticking to in
order to keep your code easily understood by anyone who may
work on your code in the future.
101
31
Javascript and Forms
Key Points
o Without JavaScript, the server handles all validating and
processing of information submitted via a form. Using
JavaScript on the client side of the equation saves time for the
user and creates a more efficient process.
o Some processing can be handled by JavaScript (for example,
mathematical computations) and JavaScript can ensure that
only correct data is sent to the server for processing.
o JavaScript is used in conjunction with server-side processing
it is not a substitute for it.
o
To access information in a form we use the document objects

getElementById() method, as we have previously to access
other objects on the page. For example, if we have a form on
the page like so:
<form id=testForm >
</form>
we would access it in JavaScript by using:

document.getElementById(testForm);
o The resultant object is actually a multi-dimensional array.

Each of its elements is itself an array containing information
about the elements of the form (text boxes, buttons etc). By
properly naming each of the forms elements in the appropriate
<INPUT> tags, you can access information relating to each of
the forms elements.
o To access the data stored in a text box called Name which is

included in the form with the id Enquiry you use the value
property like so:
objForm = document.getElementById(Enquiry);
strValue = objForm.Name.value
o There are two ways of sending form data to the server. Using
the method attribute, you can specify either the GET or the
POST methods:
<form id =enquiryform method=GET
or
<form id =enquiryform method=POST
o In general, you should use the POST method if you want to

send a lot of data (eg files, large amounts of text) from your
form. You should use GET if you want to process search forms
etc, as a GET form will be transmitted just like a URL, and is
hence savable as a bookmark or link.
o
In general, you will send your form to a server side script,

specified by the forms action attribute:
<form id=enquiryform method=GET
action=process.php
When the user clicks on a forms Submit button, without

JavaScript intervention, the forms data is sent straight to the
server for processing. But you can intercept the data (so you
can process it with JavaScript) before it is sent, by including
the onsubmit event handler in the <form> tag. This enables
you to run a JavaScript function before the data is sent:
<form id=enquiryform method=GET
action=process.php
onsubmit=functionName()>
o In the above example, when the user clicks on the Submit

button, the function functionName() is run first, then the
data is sent to the server.
102
103
o When the submit event is triggered by the forms submission,

the browser waits to discover what is returned from the event
handler. By default, the event handler will return true.
However, if the event handler returns a false value, the
forms submission will be aborted, and the page will not be
submitted to the server.
o By returning a value of either true or false from your function
(functionName() in the above example), and ensuring that
this is also the return value of the onsubmit event handler,
you can decide whether or not the forms data is actually sent
to the server.
o You specify that the return value of the function is also the
return value of the onsubmit event handler in the following
way:
onsubmit=return functionName();
Project
chapter_31.html.
o Clear any content from the body element of the page, and
ensure that the head area script element has no code in it.
o Save a copy of this page as processing_31.html, and put
an <h1> element in the body area saying success!.
o Now, close your processing_31.html page and create a
form on your original chapter_31.html page using HTML
if you have difficulty with this, the tutor will provide an
example to duplicate. Your form should:
have an id of jsCourseForm.
have a single input box with an name value of name.
have a submit button.
use the GET method of submission.
have processing_31.html as its action attribute.
104
have an onsubmit event handler that returns the value of the

(as yet non-existent) check_form() function.
o Now, create a function in the head area script element called

check_form(). This function should:
use the documents getElementById() method to store a

reference to the forms object in an object variable.
store the value of the forms name element in another

variable.
if the value of the name element is not Bugs Bunny, an

alert box should appear stating:
Sorry chum!
Either you misspelled your name
Or you havent got what it takes
Try again.
in addition, the form should be prevented from submitting.
o If the user enters the correct name, however, the form should
submit without interruption.
32
105
Form Methods and Event

Handlers
Key Points
o Each form object (e.g. text, button etc) has a set of properties
associated with it. This is different for each form element.
The value property is common to most form elements and is
one of the most useful properties.
o
You can assign the data stored in a text box called Name which
is included in the form with id Enquiry, to a variable like
so:
variable = document.getElementById(Enquiry).
Name.value
o Form objects also have methods associated with them. The set
of available methods is different for each form object.
o Below is a list of commonly used methods for the text object:
Method
blur()
focus()
select()
Description
Removes the focus from the text box
Gives the focus to the text box
Selects the text box
o Below is a list of commonly used methods for the button

object:
Method
blur()
focus()
click()
Description
Removes the focus from the button
Gives the focus to the button
Calls the buttons onclick event handler
106
o Form objects also have event handlers associated with them.

The set of available event handlers is different for each form
object.
o Below is a list of commonly used event handlers for the text
object:
Event handler
onblur
onfocus
onselect
onchange
Runs JavaScript code when

The text box loses the focus.
The text box receives the focus.
The user selects some of the text within
the text box..
The text box loses the focus and has had
its text modified.
o Below is a list of commonly used event handlers for the button

object:
Event handler
onBlur
onFocus
onClick
Runs JavaScript code when

The button loses the focus
The button receives the focus
The user clicks the button
o Finally if you are sending data to the server, a submit button is

not the only way. You could use the submit() method in a
function which is invoked by an event handler. This operates
as if the Submit button was clicked:
document.getElementById(Enquiry).submit();
Project
chapter_32.html.
o Modify your form in the following way:
Remove the submit button
Replace the submit button with a standard form button.
Add an event handler to this button to invoke the function

in the head area script element.
Remove the onsubmit event handler from the form

element.
107
o Now, modify the check_form() function in the following

way:
If the user types in the name Bugs Bunny, the function

submits the form using the forms submit() method.
If the user types anything else, the previous alert box

warning is displayed and the form is not submitted, but
also:
The words please try again are displayed in the

text box.
The text box is given focus.
The text in the text box is selected.
108
33
JavaScript and Maths
Key Points
o The Math object is a pre-defined JavaScript object containing
properties and methods which you can use for mathematical
computation.
o Below is a selection of some useful Math methods:
Method
Math.cell()
Returns
The smallest integer greater than or equal to a number.
That is, it rounds up any number to the next integer.
Math.cell(2.6) returns 3 and so does
Math.cell(2.2).
Math.floor()
The largest integer greater than or equal to a number.

That is, it rounds down any number to the next integer.
Math.floor(2.2) returns 2 and so does
Math.floor(2.6).
Math.max(n1,n2)
Math.min(n1,n2)
Math.random()
Math.round()
Math.sqrt()
The larger of the two arguments.

The smaller of the two arguments.
A random number between 0 and 1.
The number rounded to its nearest integer.
The square root of a number.
o You dont need to include a Submit button in a form and you

dont need to send form data to the server. You could use
event handlers to invoke JavaScript code which merely
processes the data on the form (e.g. you may just perform
some mathematical computations on some user data).
109
o If you are not sending the data to the server, there is no need to
include either the Action or Method attributes in the <FORM>
tag, though by default the Action will usually submit to the
current page, and the Method will be set to get.
Project
chapter_33.html.
o Remove all content from the body section of the page.
o Copy the file max_wins.html from the network, and open it
using NotePads File > Open command.
o Copy and paste the entire contents of max_wins.html into

your current project file, into the body element of the page.
o Remove all JavaScript code from the script element in the head
o Take some time to open your project file in a browser, and

study the code. This project will enable the page to:
Generate two random numbers when the button is pressed.

Display the random numbers in the text boxes marked
player 1 and player 2.
Compare the two random numbers and display the name of

the player whose number is higher in the text box marked
winner.
o When studying the code, note that the form has no valid action
or method attributes. It also has no submit button. We are
not going to allow the form to submit to the server at all, but
are going to use JavaScript to do all our processing on the
form.
o Now, modify the HTML code on the page to add an event
handler to invoke a new function defined in the head area
script element. The function should perform the following
operations when the form button is clicked:
Place two separate random integers between 0 and 100 in

each of the Player text boxes.
110
Find a way to use a Math method to compare the two

entered integers. Once compared, the function should then
place the appropriate value of Player 1, Player 2, or Draw
in the Winner text box.
34
111
Object Variables A Refresher
Key Points
o Referring to objects can be a lengthy process. Consider the
Player 1 text box in the previous example. You refer to it in
full as follows:
document.getElementById(MaxWins).Player1
o This notation although precise, is tedious, time consuming and

can be prone to error. Luckily, there are some shortcuts which
can save time and reduce typing errors.
o
We can use an object variable to simplify our work whenever

we are in situations where certain objects need to be referred to
repetitively. To use an object variable, you begin by simply
assigning it a specific object:
oPlayer1 =
document.getElementById(MaxWins).Player1
Once assigned, you can use the object variable in any situation
where you would use the specific object itself. Using the object
variables from the previous paragraph:
oPlayer1.value
is the same as:

document.getElementById(MaxWins).Player1.value
112
o Bear in mind that you assign objects to object variables. You would
assign a text box or a button or an image etc to an object variable and
then refer to that objects properties as shown above
(oPlayer1.value). You dont assign text or string values to object
variables. So:
oPlayer1 =
document.getElementById(MaxWins).Player1.value
would merely assign the value stored in Player1 to the variable

oPlayer1.
o Hopefully it is obvious that you dont need to include the o at

the beginning of the object variables name. Its just a
convention to help distinguish between the different types of
variables.
Project
chapter_34.html.
o Modify the function in the head area script element in the
following way:
All specific object which are referred to more than once are
each assigned their own object variable at the start of the
function.
References to specific objects in the code are replaced by

the appropriate object variables.
o Test your work in your browser to ensure that it functions as

before.
35
113
Actions From Menu Items
Key Points
o
The HTML <select> form tag enables you to create a menu

(select box) of options from which the user can choose:
<form id=menu>
<select name=Product>
<option value=one>Image one</option>
<option value=two>Image two</option>
<option Value=three>Image three</option>
</select>
</form>
o Ordinarily, selecting an option from a select box merely

specifies the value of the select box. This is then used for
further processing either by JavaScript or by the server.
o You can use JavaScript to invoke actions based on the current
value of a select box (the selected option). These actions
might be directly loading another page or performing some
other type of processing.
o Another name for this type of action is a jump menu.
o In order to do this, you need to know that each select box on a
form has a select object associated with it. Using the above
example, you can therefore access the current value of the
Product select box (ie the value of its currently selected option)
which is located on the ProductMenu form, in the following
way:
document.getElementById(menu).Product.value
114
o As you would expect, the select option has methods and event
handlers associated with it:
The focus() method gives the focus to a select box.
The blur() method removes the focus from the select box.
o The available event handlers for the select object are given
below:
Event handler
onblur
onfocus
onchange
o
Runs JavaScript code when.

The select box loses the focus
The select box receives the focus
The select box has had its value modified
The way to invoke action(s) when the user selects an option

from a select box is to prepare a JavaScript function which will
be invoked using the select objects onchange event handler:
<select name=name onchange=functionname()>
Project
chapter_35.html.
o Clear the head section script element of JavaScript, and
remove all content from the body area of the page.
o Create a form in the body area of the page. Give the form an id
of jumpMenu.
o In the form, place a select element. Give the select element the
following values and labels eg:
<select name=menu>
<option value=value>label</option>
</select>
Value
http://www.bbc.co.uk/
http://www.google.com/
http://www.hotmail.com/
Label
The BBC
Google
Hotmail
115
http://www.ed.ac.uk/
http://www.apple.com/
http://www.microsoft.com/
o
The University of Edinburgh

Apple Computer
Microsoft Corporation
Finally, add an option element to the beginning of your menu

like so:
<option value=>Select a destination</option>
o We are now going to use the menus onchange event handler

to invoke a function we are about to define. The function is to
be called jump_to_page().
o Define such a function in the head area script element. The
function should:
Create an object variable referencing the form element that

represents the menu.
Get the value of the menu at that moment.
If the value is not equal to (ie, if a valid selection has

been made), the function should use the use JavaScript to
load the selected page into the browser.
36
116
Requiring Form Values or

Selections
Key Points
o Form data may be invalid if it is sent to the server without
certain information for example, if the user has omitted to
select an item from a menu. Better not to bother processing,
than to waste the time of the user and server by trying to
process the invalid information.
o In the case of a selection box, one way of validating is to
include a null value for the default option. In the previous
project, the default value of the selection box (always the first
option unless specified otherwise) was . If the user doesnt
actively make another selection, then you can check the value
of the selection box before sending it to the server.
o Another example is the case of a set of radio buttons. Imagine
that for an imaginery company, an order form contained two
form elements a selection box to specify which product was
being ordered and two radio buttons to specify whether it was
being ordered as a photographic print or as a slide.
o Lets say the id of the order form is OrderForm and the name
of each radio button is Format. (Remember that in HTML,
radio buttons in a set are related to each other by their name
that must be the same for each related radio button).
o The radio object is an array where each element of the array
stores information relating to each of the radio button objects
(remember, counting starts at 0).
o As the name is identical for each radio button in the set, you
cant access an individual radio button by using its name. But
you can access it using the standard array notation:
oOrderForm.Format[i]
where in this case, I is an integer between 0 and 1, and

oOrderForm is an object variable pointing to the form
element.
o
Radio buttons in a set each have a checked property that stores

a Boolean value specifying whether or not a radio button is
checked. Obviously, you can access this value in the following
way:
oOrderForm.Format[i].checked
So, to verify that in a set of radio buttons, at least one of them

is checked, all you have to do is loop through each of the radio
buttons using the arrays length property to specify the number
of iterations of the loop:
FormatSelected = false;
oOrderForm =
document.getElementById(OrderForm);
for ( i=0; i < oOrderForm.Format.length; i++ )
{
if ( oOrderForm.Format[i].checked )
{
FormatSelected = true;
}
}
117
o In our order form example, one of the products might only be

available as a slide. You could use the onchange event
handler of the select object to invoke a function which
automatically sets the value of the relevant radio objects
checked property:
function SetFormat ()
{
oOrderForm =
document.getElementById(OrderForm);
if ( oOrderForm.Product.value ==
Greek Boat )
{
oOrderForm.Format[0].checked = true;
}
}
where Product is the name of the select box, Format is the

name of the group of radio buttons and the value of the first
ratio button is Slide.
o
Finally, to reset all form objects to their initial state, use the
reset() method:
oFormObject.reset()
Project
chapter_36.html.
o Copy the file order_form.html from the network, and open
it using NotePads File > Open command.
o Copy and paste the entire contents of order_form.html into

your current project file, into the body element of the page.
o Remove all JavaScript code from the script element in the head
o Take some time to open your project file in a browser, and

study the code.
118
119
o Add an event handler to the form element on your page that

will invoke a function called check_form() when the form is
submitted. This function will return true or false depending
on whether the form passes a number of tests as described
below. Remember to precede the event handlers function call
with return to ensure that the form awaits confirmation from
the function before proceeding.
o Create the check_form() function in the head area script
element. The function should perform the following steps:
If the current value of the selection menu is :
Display an alert with the message please select a

product
Give focus to the menu
Return false
If no radio buttons are selected:
Display an alter with the message please specify a

format
Return false
Otherwise, return true

o The Greek Fishing Boat is only available in Slide format.
Add an event handler to the select element which will run a
function called set_format() when its value is changed.
o Create the function set_format() in the head area script
element. The function should check first what the value of the
menu is. If it is the Greek Fishing Boat, it should then check
to see if the Slide radio button is checked. If it is not, then the
function should correct this.
o Modify your check_form() function to check that, if the value
of the menu is Greek Fishing Boat, then the Slide radio button
is checked. If not, it should report the error as before.
120
o Finally, note that your check_form() function is currently

not very efficient, in that it will only report one error at a time.
This can be tedious for an error prone user, and it is much
better practise to observe a form for all errors simultaneously.
o Create a variable at the beginning of the function called
error. Set the value of this variable to .
o Instead of using an alert box each time an error is found, add
the error message to the end of the variable, eg
error += error message\n;
(note the new line code at the end of each message)

o
After all checks have been made, if we have caught any errors, the
value of error will no longer be . Thus, we can use the
following code to report all errors at once:
if ( error != )
{
alert(The following errors were found: \n\n
+ error);
return false;
}
else
{
return true;
}
o Modify your function to be more efficient.
121
37
Working with Dates
Key Points
o The date object stores all aspects of a date and time from year
to milliseconds.
o
To use a new date object, you must create it and assign it to an

object variable simultaneously. The following code creates a
new date object which stores the current date and time and
assigns it to the variable dtNow
dtNow = new Date();
You can specify your own parameters for the date object when
you create it:
theDate = new Date(
year, month, day, hours,
minutes, seconds, mseconds
);
o Note that months are represented by the numbers 0 to 11

(January to December). Days are represented by 1 to 31, hours
by 0 to 23, minutes and seconds by 0 to 59 and milliseconds by
0 to 999.
o
The following code stores 17th July 2004 at 9:15:30pm in the

variable theDate:
theDate = new Date(2004,6,17,21,15,30,0);
o The first three parameters are mandatory, while the rest are
optional:
theDate = new Date(2004,6,17);
gives you midnight of the date above.
You can assign a date to a variable using a string in the

following way:
theDate =
new Date(Sun, 10 Oct 2000 21:15:00 0500);
o Everything from the hours onwards is optional, and in practical

terms the day is not necessary either. For example:
theDate = new Date(10 Oct 2000);
is a valid date.
Project
chapter_37.html.
o Create a function in a head section script element that displays
an alert box containing the current date and time. Have this
function called from a body section script element.
o Now modify your script so that it also writes the date and time
17th July 1955 1:00am to the page in standard date and time
format. Do this by entering the appropriate parameters into the
new Date() constructor.
o Now, using parameters once again, add a new line to your
script that will display midnight on 17th July 2004 on a
separate line under the existing date.
o Finally, using the string approach in the date object, add a new
line to your script which will display midnight on 31st
December 1999 on a separate line under the existing
information and in standard date and time format.
122
123
38
Retrieving Information from

Date Objects
Key Points
o Below is a selection of some useful methods which enable you
to retrieve some useful information from date objects:
Method
Returns
getDate()
The day of the month (1-31)
getDay()
The day of the week (0 = Sunday, 6 = Saturday)
getFullYear()
The year as four digits
getHours()
The hour (0-23)
getMilliseconds()
The milliseconds (0-999)
getMinutes()
The minutes (0-59)
getMonth()
The month (0-11)
getSeconds()
The seconds (0-59)
getTime()
The date and time in milliseconds also called Unix

Time
o JavaScript stores date and time information internally as the

number of milliseconds from 1st January 1970. This is common
to most programming languages, and is actually the way most
computer systems store time information.
124
o For example:
dtNow = new Date();
document.write(dtNow.getTime());
writes the number of milliseconds that have passed since 1st

January 1970.
o Being aware that there are 1000 milliseconds in a second, 60
seconds in a minute, 60 minutes in an hour and 24 hours in a
day, you can establish the number of days (or hours or minutes
etc) between two dates by subtracting on date in millisecond
format from the other in millisecond format. To achieve the
units you require, perform the appropriate division (so for the
number of minutes, divide the result of the subtraction first by
1000, then by 60), and then use Math.floor() on the result to
round the number down as required.
Project
chapter_38.html.
o Clear any JavaScript from the pages script elements.
o Create a function in the head section script element that
performs the following:
Create two arrays, one storing the days of the week

(Sunday, Monday etc), the other storing the months of
the year (January, February etc)
Use a new date object, along with the arrays and the
appropriate date methods to write todays date to the page
in the following format:
Today it is: dayName, month, dayNumber.
for example:
Today it is Tuesday, October 17.
125
Below the date, write the time in the following format:

It is currently hh:mm am (or pm)
Note: to convert from the 24hr clock, subtract 12 from any
value over 12, and replace a zero value with 12. Anything
greater than or equal to twelve should receive a pm
suffix.
Below the time, write the number of days since the start of
the millennium in the following format:
It is n days since the start of the millennium.
o Finally, call your function from the body area script element
on your page, and check your work in your browser.
39
126
Creating a JavaScript Clock
Key Points
o setTimeout() is a method of the window object. In its
common form, it enables you to run any JavaScript function
after an allotted time (in milliseconds) has passed. For
example:
window.setTimeout(functionName(), 1000)
will run functionName() after one second. Note the quote

marks!
o You can have any number of timed out methods running at
any one time. To identify each timeout, it is a good idea to
assign the return value of each one you create to an object
variable:
firstTimeout =
window.setTimeout(functionName(), 1000)
o The most common reason to track timeouts is to be able to

cancel them if necessary for example, you may wish a
window to close after 5 seconds unless a button is clicked:
firstTimeout =
window.setTimeout(window.close(), 5000);
adding the following code to the buttons onclick event

handler:
window.clearTimeout(firstTimeout);
will do the trick.
o Ordinarily, it is a bad idea to recurse a function to have a

function call itself. For example, imagine the annoyance of the
following:
function annoy_me( )
{
window.alert(BOO!);
annoy_me();
}
This will potentially keep popping up alert boxes, and perhaps

even lock up the users computer!
o However, you may wish a function to use a setTimeout
method to call itself periodically. Imagine a function that calls
itself every second to check on the time, and then displays the
result in the same place. In effect, this could be seen as a
digital clock.
o If you want to clear the clocks timeout which in this case
would stop the clock the timeout must already be in
operation. You cant clear a timeout that doesnt yet exist. So,
you have to check first whether a timeout is in operation. One
way of doing this is to set a Boolean variable to true whenever
the clock is started. By checking this variable before you
attempt to clear the timeout, you know whether or not the
clock is running and therefore can be stopped.
o To show an am/pm clock you obviously need to carry out the
conversion you created in the previous chapters project.
o
But, so as the display doesnt show a moving effect at

different times, you need to consider the situation where either
the minutes or seconds on the clock are fewer than 10. For
example, consider:
10:59:59 am
changing to:
11:0:0 am
127
o In this situation, we need to concatenate an extra 0 on to the

front of the actual value to produce:
11:00:00 am
as we might expect.
o We can use a shortened form of the if conditional to make this
simple. For example:
s = theDate.getSeconds;
s = ( s < 10 ) ? 0 + s : s;
o What is happening here? First, we get the current value of the
seconds and store that in a variable called s. Next, we reset
the value of s depending on the condition in the brackets. The
prototype of this form of the if conditional is:
var = ( condition )
? value if true
: value if false;
in other words, we can think of the ? as being like the opening

brace { of an if conditional, the : as being the } else {, and the ;
as being the closing brace. The result of the conditional test is
then stored in var.
Note that this has been split over three lines to aid reading. In
practice (see above) we can place this on one line for ease of
use.
Project
chapter_39.html.
o In the body section, create a form input element with the id
clockBox, and two form input buttons labelled Start and Stop.
o In the head section scrip element, create two empty functions
start_clock() and stop_clock().
o Before the two function definitions, as the first statement of the
script element, create a variable called timer, and assign it a
value of null.
128
129
o Immediately below that statement, create a variable called

timer_running. Assign it a value of false.
o We will use these variables to track the clocks status.
o Now, add statements to the start_clock() function that will:
Get the current time.
Format the current time as hh:mm:ss am/pm (as

appropriate).
Display the formatted time in the text field on the page.
Create a timeout which will run the start_clock()

function again in half a second, and assign that timeouts
return object to the timer object variable.
Set the timer_running variable to true.
o Add statements to the stop_clock() function that will:
Check to see if the clock is running.
If it is, clear the timer timeout and set timer_running to

false.
o Finally, add event handlers to the two form buttons to ensure

that the one labelled Stop calls the function stop_clock()
when clicked, and the one labelled Start calls the function
start_clock() when clicked.
o While this should work (test your code!), youll notice that the
output is a little ugly. Displaying the time in a text field is not
the most unobtrusive way to show a clock on a page.
o Luckily, we can modify our code very slightly to achieve
something much more professional.
o
Replace your input field with the following:

<span id=clockBox></span>
o <span> is an HTML tag that allows you to mark areas of

content without any semantic meaning eg, the clock is not a
paragraph or a header, so we dont want to label it as such.
o With JavaScript, we can control the content of just about any

element on the page. In our previous example, we used
getElementById (hopefully!) to obtain a reference to the
input field, and then altered its value property to show our
clock.
o Since we are using the same id value here, we do not have to
alter our function too much. However, the getElementById
method now returns a different type of object one that has no
value property.
o However, all content tags in HTML (like <p>, <h1>, <div>
etc) have a special property when they are returned as
JavaScript objects which refers to their text content the
property is innerHTML.
o We can use this to alter the content of the tags. For example, if
our previous input-field solution had the following code:
clk = document.getElementById(clockBox);
clk.value = formatted_time;
where formatted_time is a variable containing the

formatted time as required, then replacing it with this code:
clk = document.getElementById(clockBox);
clk.innerHTML = formatted_time;
will allow us to use the modified <span> element in place of

the <input> element.
o Try adapting your code to use this method of displaying
content on the page.
130

JavaScript Course Notes PDF

Uploaded by

Copyright:

Available Formats

JavaScript Course Notes PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JavaScript Course Notes PDF

Uploaded by

Copyright:

Available Formats

JavaScript for Beginners

JavaScript for Beginners

What is a Programming Language? .......................................................................................5

Server-side vs. Client-side .......................................................................................................7

About JavaScript ....................................................................................................................10

Objects, Properties and Methods ..........................................................................................18

Assigning Values to Properties .............................................................................................21

About Comments ....................................................................................................................25

Hiding Scripts from Older Browsers ......................................................................................28

Automatically Redirecting the User .......................................................................................31

10 Alert, Prompt and Confirm .....................................................................................................33

11 Variables and Operators ........................................................................................................35

JavaScript for Beginners

16 Associative & Objective Arrays .............................................................................................57

17 Two Dimensional Arrays ........................................................................................................59

19 Using Functions ......................................................................................................................66

20 Logical Operators ...................................................................................................................71

21 Using Event Handlers ............................................................................................................75

22 Working with Images ..............................................................................................................79

23 Simple Image Rollovers .........................................................................................................81

24 Object Instantiation and Better Rollovers .............................................................................85

25 Working with Browser Windows ............................................................................................88

26 Positioning Browser Windows ...............................................................................................91

JavaScript for Beginners

27 Focus and Blur........................................................................................................................93

28 Dynamically Created Content ................................................................................................95

29 Working with Multiple Windows .............................................................................................97

30 Using an External Script File .................................................................................................99

31 Javascript and Forms...........................................................................................................101

32 Form Methods and Event Handlers ....................................................................................105

33 JavaScript and Maths...........................................................................................................108

34 Object Variables A Refresher ...........................................................................................111

35 Actions From Menu Items ....................................................................................................113

36 Requiring Form Values or Selections..................................................................................116

37 Working with Dates ..............................................................................................................121

38 Retrieving Information from Date Objects...........................................................................123

39 Creating a JavaScript Clock ................................................................................................126

JavaScript for Beginners

What is a Programming Language?

JavaScript for Beginners

o These applications are also written using programming

JavaScript for Beginners

Server-side vs. Client-side

JavaScript for Beginners

o An example of a server-side application might be to insert the

JavaScript for Beginners

o In short, the two technologies each have their strengths and

JavaScript for Beginners

Create special effects with images that give the

Validate information that users enter into your web

Open pages in new windows, and customise the

Detect the capabilities of the users browser and alter

Create custom pages on the fly without the need for a

And much more

JavaScript for Beginners

o JavaScript is not Java, though if you come from a Java

Interpreted refers to the fact that JavaScript code is

Client-side has been defined already in the previous

Event-based refers to JavaScripts ability to run certain