unit 2 — the exciting world of javascript

Unit 2 — The Exciting World of JavaScript

Lesson 8 — Using JavaScript with Frames

The Exciting World of JavaScript2

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.


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.


Advanced JavaScript Programming (cont.)

No. 1: Save HTML code necessary to define the parent/child frame set pages.

<HTML>

<HEAD>

<TITLE>HTML and JavaScript</TITLE>

</HEAD>

<FRAMESET ROWS="140,*">

<FRAME NAME="upperFrame" SRC="upper1.html">

<FRAME NAME="lowerFrame" SRC="lower1.html">

</FRAMESET>

</HTML>



No. 2: Save the HTML page for the upper frame.

<HTML>

<HEAD>


</HEAD>

<BODY>

<CENTER>

<IMG NAME="upperImage" SRC="lions.gif">

</CENTER>

</HTML>



<HTML>

<HEAD>

<TITLE>HTML and

JavaScript</TITLE>

</HEAD>

<BODY>

<CENTER>

<H2>IMAGE LIST</H2>

<TABLE> <TR><TD>1: LIONS.GIF</TD></TR>

<TR><TD>2: TIGERS.GIF</TD></TR>

<TR><TD>3: BEARS.GIF</TD></TR>

<TR><TD>4: OHMY.GIF</TD></TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

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



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

upper1.html

lower1.html


Adding JavaScript Code to Your Frame Set

No. 1: Change the name of the lower frame file.

<HTML>

<HEAD>


</HEAD>




</FRAMESET>

</HTML>


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;

}



No. 3: The number is taken from this code, which then passes the name of the requested graphic file to the function.

<TR><TD><A HREF="javascript:setImage(1)">1: LIONS.GIF</A></TD></TR>

<TR><TD><A HREF="javascript:setImage(2)">2: TIGERS.GIF</A></TD></TR>

<TR><TD><A HREF="javascript:setImage(3)">3: BEARS.GIF</A></TD></TR>

<TR><TD><A HREF="javascript:setImage(4)">4: OHMY.GIF</A></TD></TR>



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

upper1.html

lower2.html


Creating a Frame-Based Slide Show

No. 1: Change the name of the lower frame file.<HTML>

<HEAD>


</HEAD>




</FRAMESET>

</HTML>


Creating a Frame-Based Slide Show (cont.)

No. 2: Save a new lower3.html file with new INPUT buttons.

<CENTER>

<H2>WELCOME</H2>

<H3>to my</H3>

<H3>Electronic Slideshow</H3>

<BR>

<INPUT TYPE="BUTTON" VALUE="Prev Image">

<INPUT TYPE="BUTTON" VALUE="Next Image">

</CENTER>


Creating a Frame-Based Slide Show (cont.)

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

upper1.html

lower3.html


Making Your Slide Show Buttons Functional

No. 1: Change the name of the lower frame file.<HTML>

<HEAD>


</HEAD>




</FRAMESET>

</HTML>


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].src = "tigers.gif";


images[2].src = "bears.gif";


images[3].src = "ohmy.gif";

var index=0;



No. 3: Add the prevImage() function to upper2.html.

function prevImage(){ if (index > 0) { index--; document.upperImage.src=images[index].src; } return;}



No. 4: Add the nextImage() function to upper2.html.

function nextImage(){ if (index <3) { index++; document.upperImage.src=images[index].src; } return;}



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()">



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

upper2.html

lower4.html


Creating a Top-Level JavaScript Function

No. 1: Add code to the parent file.<HTML>

<HEAD>


<SCRIPT>

function message()

{

alert("We're off to see the Wizard!");

return;

}

</SCRIPT>


Creating a Top-Level JavaScript Function (cont.)

No. 2: Change the names to the child files.


<FRAME NAME="upperFrame"

SRC="upper3.html">


</FRAMESET>

</HTML>



No. 3: Convert the image hyperlink in the new upper3html.

<CENTER>

<A HREF="javascript:top.message()"><IMG NAME="upperImage"

SRC="lions.gif"></A>

</CENTER>



No. 4: Add the new button to the new lower5.html.

<BR><BR>

<INPUT TYPE="BUTTON" VALUE="Show Message"

onClick="top.message()">



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

upper3.html

lower5.html


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.

unit 2 — the exciting world of javascript

Documents