Javascript 4 Using Windows and Frames in Javascript

JavaScript 4 – Using windows and frames in JavaScript

Using Frames in JavaScript (jsex9.zip)

To run, unzip jsex9.zip, go to jsex9 directory then the showingindexonly directory then click on index.html)

Frames can get confusing because if you simply right-click in either the left or right frame then view à source will simply show the code which has been loaded into the frame (nothing in this case as the page does not exist).

To view the frameset code you must click on view on the top of the page, then select source from the resulting menu. This is what was done in the screenshot below.

<FRAME name=left src="indexpage.html">

Write the code to produce

the frame structure on the right

Using Frames in JavaScript (jsex9.zip)

To run, unzip jsex9.zip, go to jsex9 directory then the frames directory then click on index.html)

LINKS WHAT YOU nneed fore marking me corsewok<P>
<a href ="hobbies.html" TARGET = "right">background image<a>
<P>
<a href ="page6.html" TARGET = "right">example of links<A>
<P>
<a href ="contactme.html" TARGET = "right">example of email link</a>

<P>
<a href ="internallink.html">internal linking in a document</a>
<P>work wat I's proud oft
<P>
<a href ="stolenwork.html" TARGET = "right">example of stealing websites using right click copy save as without knowing wat you is doing</a> /

When this link ‘example of email link’ is clicked contactme.html is put into the right hand frame (right)

<a href ="contactme.html" TARGET = "right">example of email link</a>

CAREFULLY describe what will happen when the following link is clicked on

<a href ="internallink.html">internal linking in a document</a>

Using Windows in JavaScript

To run, unzip jsex10.zip, go to jsex10 directory and click on wind.html

<html>
<body>
<h2>
<form name=form1>
<input type="button" value="newwindow1" name="Button1"
onClick="newwindow1=window.open
('panel.html', 'newwin1','width=300,height=100')";
"newwindow1.focus()">
<input type="button" value="newwindow2" name="Button2"
onClick="newwindow2=window.open
('', 'newwin2','width=500,height=500')";
"newwindow2.focus()">
<P>
<input type="button" value="see1" name="Button3"
onClick="newwindow1.focus()">
<input type="button" value="see2" name="Button4"
onClick="newwindow2.focus()">
<input type="button" value="green" name="Button two"
onClick="newwindow1.document.bgColor='green';newwindow1.focus()">
<input type="button" value="closewin1"
onClick="newwindow1.document.close()">
</form</h2>
</body>
</html> /

<HTML>
<TITLE>a window you can close</TITLE>
<BODY>
A new window
<FORM name=form1>
<INPUT TYPE="button" value="close me" name="winclose"
OnClick='self.close()'>
<FORM>
</BODY>
</HTML>
Note OnClick=’self.close’ will close the window
that the command is located in.

The following code will change the background colour of window one to green.

<input type="button" value="green" name="Button two"

onClick="newwindow1.document.bgColor='green';newwindow1.focus()">

The code for button two

<input type="button" value="newwindow2" name="Button2"

onClick="newwindow2=window.open

('', 'newwin2','width=500,height=500')";

"newwindow2.focus()">

What would happen if you loaded the page then clicked the ‘green’ button first? HINT this would not happen if you clicked ‘newwindow1’ first!

Write the button code to do the following

· Produce a button with the words ‘red window’ on

· Open a window 250x400

· Load in the page panel.html

· Give the window a red background.

More Frames in JavaScript

To run, unzip jsex11.zip, go to jsex11 directory and click on index.html

Note set up a frame and put colour.html in the left column and blank.html in the right column.

<HTML>

<TITLE>frame example</Title>

</frameset>

</html>

Code for left frame (colour.html)
<html>
<script>
</script>
<body>
<form<font size =7>
<h2>What colour would you like the index page?</h2>
Click a Button<HR>
<input type=button value="Pink" onClick="document.bgColor='pink'">
<input type=button value="Black" onClick="document.bgColor='black'">
<P<P<P>
<h2>What colour would you like the frame on the left?</h2>
Click a Button<HR>
<input type=button value="Pink" onClick="top.right.document.bgColor ='pink'">
<input type=button value="green" onClick="top.right.document.bgColor='green'">
</form>
</body>
</html> /

Note the subtle difference between the top and bottom group of buttons

Top group

Bottom group

Write the code for two additional buttons

· One to turn the left hand frame red

· One to turn the right hand frame yellow