Unit 2

1
Unit 2 The Exciting World of JavaScript

• Lesson 8 Using JavaScript with Frames

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.

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.

4
Advanced JavaScript Programming (cont.)

• No. 1 Save HTML code necessary to define the
  parent/child frame set pages.
• ltHTMLgt
• ltHEADgt
• ltTITLEgtHTML and JavaScriptlt/TITLEgt
• lt/HEADgt
• ltFRAMESET ROWS"140,"gt
• ltFRAME NAME"upperFrame" SRC"upper1.html"gt
• ltFRAME NAME"lowerFrame" SRC"lower1.html"gt
• lt/FRAMESETgt
• lt/HTMLgt

5
Advanced JavaScript Programming (cont.)

• No. 2 Save the HTML page for the upper frame.
• ltHTMLgt
• ltHEADgt
• ltTITLEgtHTML and JavaScriptlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltCENTERgt
• ltIMG NAME"upperImage" SRC"lions.gif"gt
• lt/CENTERgt
• lt/HTMLgt

6
Advanced JavaScript Programming (cont.)

• No. 3 Save the HTML page for the lower frame.

• ltHTMLgt
• ltHEADgt
• ltTITLEgtHTML and
• JavaScriptlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltCENTERgt
• ltH2gtIMAGE LISTlt/H2gt

• ltTABLEgt ltTRgtltTDgt1 LIONS.GIFlt/TDgtlt/TRgt
• ltTRgtltTDgt2 TIGERS.GIFlt/TDgtlt/TRgt
• ltTRgtltTDgt3 BEARS.GIFlt/TDgtlt/TRgt
• ltTRgtltTDgt4 OHMY.GIFlt/TDgtlt/TRgt
• lt/TABLEgt
• lt/CENTERgt
• lt/BODYgt
• lt/HTMLgt

7
Advanced JavaScript Programming (cont.)

• Display the js-test16.html file,
  which displays two files.
• upper1.html
• lower1.html

8
Adding JavaScript Code to Your Frame Set

• No. 1 Change the name of the lower frame file.
• ltHTMLgt
• ltHEADgt
• ltTITLEgtHTML and JavaScriptlt/TITLEgt
• lt/HEADgt
• ltFRAMESET ROWS"140,"gt
• ltFRAME NAME"upperFrame" SRC"upper1.html"gt
• ltFRAME NAME"lowerFrame" SRC"lower2.html"gt
• lt/FRAMESETgt
• lt/HTMLgt

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"lio
  ns.gif"
• return

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.
• ltTRgtltTDgtltA HREF"javascriptsetImage(1)"gt1
  LIONS.GIFlt/Agtlt/TDgtlt/TRgt
• ltTRgtltTDgtltA HREF"javascriptsetImage(2)"gt2
  TIGERS.GIFlt/Agtlt/TDgtlt/TRgt
• ltTRgtltTDgtltA HREF"javascriptsetImage(3)"gt3
  BEARS.GIFlt/Agtlt/TDgtlt/TRgt
• ltTRgtltTDgtltA HREF"javascriptsetImage(4)"gt4
  OHMY.GIFlt/Agtlt/TDgtlt/TRgt

11
Adding JavaScript Code to Your Frame Set (cont.)

• Display the js-test18.html file, which
  displays two other files.
• upper1.html
• lower2.html

12
Creating a Frame-Based Slide Show

• No. 1 Change the name of the lower frame file.
• ltHTMLgt
• ltHEADgt
• ltTITLEgtHTML and JavaScriptlt/TITLEgt
• lt/HEADgt
• ltFRAMESET ROWS"140,"gt
• ltFRAME NAME"upperFrame" SRC"upper1.html"gt
• ltFRAME NAME"lowerFrame" SRC"lower3.html"gt
• lt/FRAMESETgt
• lt/HTMLgt

13
Creating a Frame-Based Slide Show (cont.)

• No. 2 Save a new lower3.html file with new INPUT
  buttons.
• ltCENTERgt
• ltH2gtWELCOMElt/H2gt
• ltH3gtto mylt/H3gt
• ltH3gtElectronic Slideshowlt/H3gt
• ltBRgt
• ltINPUT TYPE"BUTTON" VALUE"Prev Image"gt
• ltINPUT TYPE"BUTTON" VALUE"Next Image"gt
• lt/CENTERgt

14
Creating a Frame-Based Slide Show (cont.)

• Display the js-test18.html file, which
  displays two different files.
• upper1.html
• lower3.html

15
Making Your Slide Show Buttons Functional

• No. 1 Change the name of the lower frame file.
• ltHTMLgt
• ltHEADgt
• ltTITLEgtHTML and JavaScriptlt/TITLEgt
• lt/HEADgt
• ltFRAMESET ROWS"140,"gt
• ltFRAME NAME"upperFrame" SRC"upper2.html"gt
• ltFRAME NAME"lowerFrame" SRC"lower4.html"gt
• lt/FRAMESETgt
• lt/HTMLgt

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)
• images0 new Image
• images0.src "lions.gif"
• images1 new Image
• images1.src "tigers.gif"
• images2 new Image
• images2.src "bears.gif"
• images3 new Image
• images3.src "ohmy.gif"
• var index0

17
Making Your Slide Show Buttons Functional (cont.)

• No. 3 Add the prevImage() function to
  upper2.html.
• function prevImage()
• if (index gt 0)
• index--
• document.upperImage.srcimagesindex.src
• return

18
Making Your Slide Show Buttons Functional (cont.)

• No. 4 Add the nextImage() function to
  upper2.html.
• function nextImage()
• if (index lt3)
• index
• document.upperImage.srcimagesindex.src
• return

19
Making Your Slide Show Buttons Functional (cont.)

• No. 5 Rewrite lower4.html with these tags.
• ltINPUT TYPE"BUTTON" VALUE"Prev Image"
• onClick"parent.upperFrame.prevImage()"gt
• ltINPUT TYPE"BUTTON" VALUE"Next Image"
• onClick"parent.upperFrame.nextImage()"gt

20
Making Your Slide Show Buttons Functional (cont.)

• Display the js-test19.html file, which
  displays two changed files.
• upper2.html
• lower4.html

21
Creating a Top-Level JavaScript Function

• No. 1 Add code to the parent file.
• ltHTMLgt
• ltHEADgt
• ltTITLEgtHTML and JavaScriptlt/TITLEgt
• ltSCRIPTgt
• function message()
• alert("We're off to see the Wizard!")
• return
• lt/SCRIPTgt

22
Creating a Top-Level JavaScript Function (cont.)

• No. 2 Change the names to the child files.
• ltFRAMESET ROWS"140,"gt
• ltFRAME NAME"upperFrame" SRC"upper3.html"gt
• ltFRAME NAME"lowerFrame" SRC"lower5.html"gt
• lt/FRAMESETgt
• lt/HTMLgt

23
Creating a Top-Level JavaScript Function (cont.)

• No. 3 Convert the image hyperlink in the new
  upper3html.
• ltCENTERgt
• ltA HREF"javascripttop.message()"gtltIMG
  NAME"upperImage"
• SRC"lions.gif"gtlt/Agt
• lt/CENTERgt

24
Creating a Top-Level JavaScript Function (cont.)

• No. 4 Add the new button to the new lower5.html.
• ltBRgtltBRgt
• ltINPUT TYPE"BUTTON" VALUE"Show Message"
• onClick"top.message()"gt

25
Creating a Top-Level JavaScript Function (cont.)

• Display the js-test20.html file, which
  displays two altered files.
• upper3.html
• lower5.html

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.