1 / 26

Unit 2 — The Exciting World of JavaScript

Unit 2 — The Exciting World of JavaScript. Lesson 8 — Using JavaScript with Frames. Objectives. Create a JavaScript function with a parameter list. Create JavaScript-enabled hyperlinks that affect frames. Create JavaScript-enabled buttons that affect frames.

jarvis
Download Presentation

Unit 2 — The Exciting World of JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. 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> <HEAD> <TITLE>HTML and JavaScript</TITLE> </HEAD> <FRAMESET ROWS="140,*"> <FRAME NAME="upperFrame" SRC="upper1.html"> <FRAME NAME="lowerFrame" SRC="lower1.html"> </FRAMESET> </HTML> The Exciting World of JavaScript

  5. Advanced JavaScript Programming (cont.) • No. 2: Save the HTML page for the upper frame. <HTML> <HEAD> <TITLE>HTML and JavaScript</TITLE> </HEAD> <BODY> <CENTER> <IMG NAME="upperImage" SRC="lions.gif"> </CENTER> </HTML> The Exciting World of JavaScript

  6. <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> Advanced JavaScript Programming (cont.) • 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> <HEAD> <TITLE>HTML and JavaScript</TITLE> </HEAD> <FRAMESET ROWS="140,*"> <FRAME NAME="upperFrame" SRC="upper1.html"> <FRAME NAME="lowerFrame" SRC="lower2.html"> </FRAMESET> </HTML> 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. <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> 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> <HEAD> <TITLE>HTML and JavaScript</TITLE> </HEAD> <FRAMESET ROWS="140,*"> <FRAME NAME="upperFrame" SRC="upper1.html"> <FRAME NAME="lowerFrame" SRC="lower3.html"> </FRAMESET> </HTML> 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. <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> 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> <HEAD> <TITLE>HTML and JavaScript</TITLE> </HEAD> <FRAMESET ROWS="140,*"> <FRAME NAME="upperFrame" SRC="upper2.html"> <FRAME NAME="lowerFrame" SRC="lower4.html"> </FRAMESET> </HTML> 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> <HEAD> <TITLE>HTML and JavaScript</TITLE> <SCRIPT> function message() { alert("We're off to see the Wizard!"); return; } </SCRIPT> The Exciting World of JavaScript

  22. Creating a Top-Level JavaScript Function (cont.) • No. 2: Change the names to the child files. <FRAMESET ROWS="140,*"> <FRAME NAME="upperFrame" SRC="upper3.html"> <FRAME NAME="lowerFrame" SRC="lower5.html"> </FRAMESET> </HTML> The Exciting World of JavaScript

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

  24. Creating a Top-Level JavaScript Function (cont.) • No. 4: Add the new button to the new lower5.html. <BR><BR> <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. The Exciting World of JavaScript

More Related