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

2. Lesson 9 Barksdale / TurnerHTML and JavaScript BASICS 4E 22 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.

3. Lesson 9 Barksdale / TurnerHTML and JavaScript BASICS 4E 33 Vocabulary child document function parameter parameter list parent document parent object top object

4. Lesson 9 Barksdale / TurnerHTML and JavaScript BASICS 4E 44 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.

5. Lesson 9 Barksdale / TurnerHTML and JavaScript BASICS 4E 55 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.

6. Lesson 9 Barksdale / TurnerHTML and JavaScript BASICS 4E 66 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.

7. Lesson 9 Barksdale / TurnerHTML and JavaScript BASICS 4E 77 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.

8. Lesson 9 Barksdale / TurnerHTML and JavaScript BASICS 4E 88 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.

9. Lesson 9 Barksdale / TurnerHTML and JavaScript BASICS 4E 99 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.

10. Lesson 9 Barksdale / TurnerHTML and JavaScript BASICS 4E 10 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.

11. Lesson 9 Barksdale / TurnerHTML and JavaScript BASICS 4E 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.

12. Lesson 9 Barksdale / TurnerHTML and JavaScript BASICS 4E 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.

13. Lesson 9 Barksdale / TurnerHTML and JavaScript BASICS 4E 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.

14. Lesson 9 Barksdale / TurnerHTML and JavaScript BASICS 4E 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.