Lesson 9 Using JavaScript with Frames

1. Lesson 9Using JavaScript with Frames HTML and JavaScript BASICS, 4th Edition Barksdale / Turner

2. 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. 2

3. child document function parameter parameter list parent document parent object top object Vocabulary 3

4. Advanced JavaScript Programming • 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. Frame-based Web page 4

5. 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. 5

6. 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. 6

7. Adding JavaScript Code to Your Frameset (continued) • By using the JavaScript function parameter to distinguish one hyperlink from another, it is not necessary to define a function for each hyperlink. Web page with functional hyperlinks 7

8. 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. 8

9. 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. 9

10. Making Your Slide Show Buttons Functional • There is more than one way to make the slide show buttons functional. With framesets there are multiple ways to solve a problem. Functional frame-based slide show Web page 10

11. 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. 11

12. 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. 12

13. 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. 13

14. 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. 14