Introduction

The purpose of this lab is to gain greater familiarity with some of the language features of JavaScript, and how it may be used to interact with a web browser.  Before working through this lab you should have studied the solutions to last week's lab exercises, and the lecture notes.

The first part of the lab works through some examples.  This involves either copying a file or typing in some code and then running it by loading an HTML page into a web browser.  In some cases, the code has been deliberately broken, and needs fixing; fixing it will help you learn. 

The lab finishes with an exercise; you should aim to complete the exercise before the start of the lab next week.  It is recommended that you use Intellij for editing the HTML, JavaScript and CSS involved with these examples, and the Firefox web browser for testing them (they should also work in the preview pane of Intellij).

JavaScript from a Hyperlink

This example demonstrates how to change the appearance of part of a document by invoking JavaScript code from a hyperlink.  The file can be found here: Lists.html.  An excerpt is shown below.  Note that the excerpt is missing the CSS classes which you need, but these are in the Lists.html file.

Note how the <a href="javascript: ...">Link Text</a> is used to invoke the code from the link.  The listStyle() function is very simple: it gets the id of the div tag and then sets the attribute to the value passed as a parameter called style.

The list comes up in the style shown below, and clicking Default changes it back to the default style. 

Mini-Exercise: The 'No-Bullet' style is broken however; see if you can fix it.  Hint: study the CSS classes.

Evaluating JavaScript Code

In this section we'll learn how to build a JavaScript test page.  This will have a text area in which to type JavaScript code, a button to run the code, and a button to clear the code.  This enables you to very rapidly try out simple program fragments; this is useful when learning a new language.

A screenshot is shown below:

The code to do this is remarkably straightforward - see the snippet below.  Note again the use of document.getElementById(), but in addition the property textContent.  This is a property of the JavaScript objects that model HTML elements (in other words, the DOM!).  Getting or setting a node's textContent does what you expect.  On the other hand, for the text area, which is an input control, observe the use of ipNode.value to get the text.  A try/catch block is used to allow useful reporting of any errors that the system detects (any errors will be copied to the output area).

The code for this page is available here.  Verify the operation of this page by testing the higher-order function example from the lecture notes.

Popup Windows

The next example we shall study is how to pop up a window from an existing browser window, and then to communicate with the opener.  The effect achieved should be this: an initial window with a hyperlink, which can be clicked to open a new window:

Clicking 'Yes' or 'No' then sends the value back to the calling window i.e. the opener:

This invokes the reply function of the opener, which just happens to pop up an alert.

This example also illustrates the use of invisible blocks of HTML; note how the code copied from the DIV tag is displayed in the popup window, but was invisible in the displayed window.  This code contains many important ideas, including:

• use of window.open() to open a new window, and assigning to a variable (w)
• use of w.document to get a reference to the document object of the new window
• d.open to open the document for writing
• d.close to finish writing and display the new window
• use of an invisible style to stop content from being displayed
• the innerHTML property of an HTML element, which gets all the children (including text content) of that node in the document tree (note that Internet Explorer 6 is not directly compatible with this, though there are some work-arounds).

type it in and get it working for yourself.

Above is the head, below is the body (just add the closing </body> tag).  Experiment with the HTML; what happens if you remove the class='invis' declaration?  Does that block remain invisible or not?  If not, why not?

Exercise

The aim of this exercise is to produce a day selection control, that allows the selection of a day from a month.  The month is specified by two parameters: the day of the week on which the first day falls, and the number of days in the month.  The popup control should be invoked with a call to a user-defined function called getDay(startDay, nDays).  The control should only show this information; no year or name of month should be shown (this is partly to keep the problem simple, and partly to prevent the direct reuse of an existing calendar control!). 

A suitable solution is shown below (this was cropped from a screenshot of the date control used by http://expedia.co.uk ).  There are two parts to the exercise.  The first is to dynamically create the content.  The second is to put this into a popup window that writes back the chosen field onto a field of the opener (calling window).  Note: alternatively, you can make the calendar overlay the existing web page directly instead of using a popup window; this can be done with CSS layout control.  An example of how to do overlays is here: Overlay.html (note: this does not work in Internet Explorer).

Summary

In this lab we studied how to:

• evaluate strings as JavaScript code using the eval function.
• access particular parts of a document and modify them
• invoke JavaScript code from hyperlinks, and from buttons (via onClick)
• operate popup windows

end of page