Unit 2 — The Exciting World of JavaScript Lesson 8 — Using JavaScript with Frames

The Exciting World of JavaScript 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.

The Exciting World of JavaScript 3 Advanced JavaScript Programming The parent/child concept: In order for a JavaScript function to access an object in a different file, the two files must be linked. The “parent” frame set can be referenced with a JavaScript object. The frame set file defines “child” frames, and these frames are given names. To apply this concept, create a JavaScript-ready frame set.

The Exciting World of JavaScript 4 Advanced JavaScript Programming (cont.) No. 1: Save HTML code necessary to define the parent/child frame set pages. HTML and JavaScript

The Exciting World of JavaScript 5 Advanced JavaScript Programming (cont.) No. 2: Save the HTML page for the upper frame. HTML and JavaScript

The Exciting World of JavaScript 6 Advanced JavaScript Programming (cont.) HTML and JavaScript IMAGE LIST 1: LIONS.GIF 2: TIGERS.GIF 3: BEARS.GIF 4: OHMY.GIF No. 3: Save the HTML page for the lower frame.

The Exciting World of JavaScript 7 Advanced JavaScript Programming (cont.) Display the js-test16.html file, which displays two files. upper1.html lower1.html

The Exciting World of JavaScript 8 Adding JavaScript Code to Your Frame Set No. 1: Change the name of the lower frame file. HTML and JavaScript

The Exciting World of JavaScript 9 Adding JavaScript Code to Your Frame Set (cont.) No. 2: Save a new lower2.html file with a JavaScript function using if statements and the parameter (number) to determine which graphic to use in the upper frame. function setImage(number) { if(number == 1) { parent.upperFrame.document.upperImage.src="lions.gif"; } return; }

The Exciting World of JavaScript 10 Adding JavaScript Code to Your Frame Set (cont.) No. 3: The number is taken from this code, which then passes the name of the requested graphic file to the function. 1: LIONS.GIF 2: TIGERS.GIF 3: BEARS.GIF 4: OHMY.GIF

The Exciting World of JavaScript 11 Adding JavaScript Code to Your Frame Set (cont.) Display the js-test18.html file, which displays two other files. upper1.html lower2.html

The Exciting World of JavaScript 12 Creating a Frame-Based Slide Show No. 1: Change the name of the lower frame file. HTML and JavaScript

The Exciting World of JavaScript 13 Creating a Frame-Based Slide Show (cont.) No. 2: Save a new lower3.html file with new INPUT buttons. WELCOME to my Electronic Slideshow

The Exciting World of JavaScript 14 Creating a Frame-Based Slide Show (cont.) Display the js-test18.html file, which displays two different files. upper1.html lower3.html

The Exciting World of JavaScript 15 Making Your Slide Show Buttons Functional No. 1: Change the name of the lower frame file. HTML and JavaScript

The Exciting World of JavaScript 16 Making Your Slide Show Buttons Functional (cont.) No. 2: Add the JavaScript image array to the new upper2.html. var images= new Array(4); images[0] = new Image; images[0].src = "lions.gif"; images[1] = new Image; images[1].src = "tigers.gif"; images[2] = new Image; images[2].src = "bears.gif"; images[3] = new Image; images[3].src = "ohmy.gif"; var index=0;

The Exciting World of JavaScript 17 Making Your Slide Show Buttons Functional (cont.) No. 3: Add the prevImage() function to upper2.html. function prevImage() { if (index > 0) { index--; document.upperImage.src=images[index].src; } return; }

The Exciting World of JavaScript 18 Making Your Slide Show Buttons Functional (cont.) No. 4: Add the nextImage() function to upper2.html. function nextImage() { if (index <3) { index++; document.upperImage.src=images[index].src; } return; }

The Exciting World of JavaScript 19 Making Your Slide Show Buttons Functional (cont.) No. 5: Rewrite lower4.html with these tags. <INPUT TYPE="BUTTON" VALUE="Prev Image" onClick="parent.upperFrame.prevImage()"> <INPUT TYPE="BUTTON" VALUE="Next Image" onClick="parent.upperFrame.nextImage()">

The Exciting World of JavaScript 20 Making Your Slide Show Buttons Functional (cont.) Display the js-test19.html file, which displays two changed files. upper2.html lower4.html

The Exciting World of JavaScript 21 Creating a Top-Level JavaScript Function No. 1: Add code to the parent file. HTML and JavaScript function message() { alert("We're off to see the Wizard!"); return; }

The Exciting World of JavaScript 22 Creating a Top-Level JavaScript Function (cont.) No. 2: Change the names to the child files.

The Exciting World of JavaScript 23 Creating a Top-Level JavaScript Function (cont.) No. 3: Convert the image hyperlink in the new upper3html. <IMG NAME="upperImage" SRC="lions.gif">

The Exciting World of JavaScript 24 Creating a Top-Level JavaScript Function (cont.) No. 4: Add the new button to the new lower5.html. <INPUT TYPE="BUTTON" VALUE="Show Message" onClick="top.message()">

The Exciting World of JavaScript 25 Creating a Top-Level JavaScript Function (cont.) Display the js-test20.html file, which displays two altered files. upper3.html lower5.html

The Exciting World of JavaScript 26 Summary You can create a JavaScript function with a parameter list. You can create JavaScript-enabled hyperlinks that affect other frames. You can create JavaScript-enabled buttons that affect other frames. You can create top-level JavaScript functions.