1

Lesson 9Using JavaScript with Frames

HTML and JavaScript BASICS, 4th Edition

Barksdale / Turner

Lesson 9

Barksdale / Turner HTML and JavaScript BASICS 4E22

Objectives

Create a JavaScript function with a parameter list.

Create JavaScript-enabled hyperlinks that affect frames.

Create JavaScript-enabled buttons that affect frames.

Create top-level JavaScript functions.

Lesson 9

Barksdale / Turner HTML and JavaScript BASICS 4E33

Vocabulary

child document function parameter parameter list parent document parent object top object

Lesson 9

Barksdale / Turner HTML and JavaScript BASICS 4E44

Advanced JavaScript Programming

Frame-based Web page

A Web page that contains a frameset includes a file that defines the frameset and two or more additional files that define the frames within that frameset.

Lesson 9

Barksdale / Turner HTML and JavaScript BASICS 4E55

Advanced JavaScript Programming (continued)

The frameset file is known as the parent document, and the frame files contained within the frameset are known as child documents.

Lesson 9

Barksdale / Turner HTML and JavaScript BASICS 4E66

Adding JavaScript Code to Your Frameset

All JavaScript function definitions include a parameter list, which is a list of data items that the function needs to perform its intended action.

A function parameter is simply an object or data element that is accessed by an assigned name within the function.

A parent object is a reserved word in JavaScript that refers to the parent frameset.

Lesson 9

Barksdale / Turner HTML and JavaScript BASICS 4E77

Adding JavaScript Code to Your Frameset (continued)

Web page with functional hyperlinks

By using the JavaScript function parameter to distinguish one hyperlink from another, it is not necessary to define a function for each hyperlink.

Lesson 9

Barksdale / Turner HTML and JavaScript BASICS 4E88

Creating a Frame-Based Slide Show

In Lesson 7, you created an electronic slide show that allowed the user to change the image displayed by clicking hyperlinks or buttons.

In this lesson, you create a frame-based Web page that performs essentially the same function. Begin by creating the basic frameset and the frames that it contains.

Lesson 9

Barksdale / Turner HTML and JavaScript BASICS 4E99

Using the Parent/Child Relationship

For a JavaScript function to access an object in a different file, the two files must be linked.

In this example, the upper1.html and the lower2.html files are both contained within a common parent frameset, and this frameset can be referenced via the JavaScript object called parent.

Lesson 9

Barksdale / Turner HTML and JavaScript BASICS 4E1010

Making Your Slide Show Buttons Functional

Functional frame-based slide show Web page

There is more than one way to make the slide show buttons functional. With framesets there are multiple ways to solve a problem.

Lesson 9

Barksdale / Turner HTML and JavaScript BASICS 4E1111

Making Your Slide Show Buttons Functional (continued)

In this case, you start by defining a four-element image array to contain the four graphics that make up the slide show.

You also add two new JavaScript functions called prevImage() and nextImage() that change the image that is currently displayed in the upper frame and a startup() function to initialize the image array.

Lesson 9

Barksdale / Turner HTML and JavaScript BASICS 4E1212

Making Your Slide Show Buttons Functional (continued)

Next, you add an onClick event to each of the two buttons that were defined in the lower frame document.

Lesson 9

Barksdale / Turner HTML and JavaScript BASICS 4E1313

Creating a Top-Level JavaScript Function

When working with nested framesets, you can access any frame you want by developing the proper sequence of JavaScript parent objects.

If you place JavaScript function definitions in the top-level frameset file, every HTML document easily access these functions by using the JavaScript top object.

Lesson 9

Barksdale / Turner HTML and JavaScript BASICS 4E1414

Summary

In this lesson, you learned: How to create a JavaScript function with a

parameter list. How to create JavaScript-enabled hyperlinks

that affect frames. How to create JavaScript-enabled buttons that

affect frames. How to create top-level JavaScript functions.