ECA 225

ECA 225 Applied Interactive Programming

1

ECA 225

AppliedOnline

Programmingwindows


2

windows

new windows are useful for:displaying additional informationobtaining additional information

Using JavaScript we can:open new windowsclose windowsposition widows preciselyand more


3

opening a new window

unlike other objects we do not use the new keyword to create a new window object

to open a new window use the open( ) methodopen( ) takes three parameters, the third is optional

urlwindow namewindow options

open( ) returns a reference to the new window


4

open( )

first parameter: the url of the document we want to open in the new window

to open a blank window use empty quotes as the first parameter

var newWin = open(“whats_new.html”, “newPopUp”);

var newWin = open( “”, “newPopUp” );


5

open( ) cont …

second parameter: the name of the new windowdifferent from the variable name

the name we give the window can be used as a target attribute for hyperlinks and forms

<a href=”whatsNew.htm” target=”newPopUp”>Click Here</a>

var newWin = open( “whats_new.html”, “newPopUp” );


6

open( ) cont …

to access properties and methods of the new window object, use the var name plus dot syntax

var newWin = open( “whats_new.html”, “newPopUp” );

newWin.status=”This is my new window”;

newWin.blur( );


7

open( ) cont …

third parameter: set of options to specify properties of the new window

if you leave out the third parameter, all of the options default to “yes”, ie, all parts of the window are present

if you explicitly set one option, all other options default to “no”


8

open( ) cont … third parameter: available window properties

height width left (left starting position in pixels) top (top starting position in pixels) location (show location field) menubar (show menu bar) resizable (can the user resize the window?) scrollbars (show scrollbars) status (show status bar) toolbar (show toolbar)


9

open( ) cont … third parameter: pay attention to placement of

quotes

to turn properties on or off, set them to yes or 1no or 0

var newWin = open( “whats_new.html”, “newPopUp”, “width=300,height=400,menubar=1” );


10

writing HTML to new window

we can write HTML directly into the new windowopen a new blank window

use the document.open( ) method to open the document object of the new window

var newWin = open( “”, “newPopUp” );

newWin.document.open( );


11

writing HTML to new window cont …

now use the document.write( ) method of the new window to write HTML

newWin.document.write(“<html>\n<head>\n”);newWin.document.write(“<title>My Window</title>\n”); newWin.document.write(“</head>\n”);newWin.document.write(“<body>\n<h1>Hello</h1>\n”);newWin.document.write(“</body></html>”);


12

centering a window

the screen property of the window object will return monitor resolution

create a var to hold the width of the screen divided by two

var w = screen.width / 2;


13

centering a window cont …

create two more variables:

reset the fromLeft var

var myWidth = 500; // width of new windowvar fromLeft = 0; //position from left initialized to 0

fromLeft = w – ( myWidth / 2 );


14

centering a window cont …

open a new window using variable names

which will open horizontally in the center of the monitor

var newWin = window.open( “”, “newPopUp”, “height=400,width=” + myWidth + “,top=300,left=” + fromLeft + “,toolbar,menubar”);


15

javascript: protocol

the javascript: protocol will invoke JavaScript outside of any <script> tags

javascript: tells the browser that what follows is JavaScript and should be treated as such

you can use javascript: inside the href of an anchor tag, or as part of an event handler


16


type into the location field of your browser:

javascript:document.write(“Hello”)

javascript:alert(“Hello”)

javascript:Date( )


17


an example of javascript: used with an event handler

<input type=‘button’ value=‘click me’ onClick=‘javascript:newWin=window.open(“http://www.yahoo.com”,”myWin”)’>


18


an example of javascript: used with an href

<a href=’javascript:newWindow( )’>Link</a>

<script type=‘text/javascript’> function newWindow( ){ newWin=window.open("http://www.yahoo.com","myWin", "width=300,height=250,resizable,scrollbars");

}</script>


19

javascript: protocol add a second link and click on it while the

child window is open

<a href=’javascript:newWindow( )’>Link</a><a href="http://www.altavista.com" target="myWin">Link2</a>

<script type=‘text/javascript’> function newWindow( ){ newWin=window.open("http://www.yahoo.com","myWin", "width=300,height=250,resizable,scrollbars");

}</script>


20

close( )

just as you can open a new window with the open( ) method, you can close a window with the close( ) method

to use the close( ) method from the parent window, reference the child window object by its variable name

window.close( )


21

close( ) cont …

create two links:

create 2 functions inside the <script> tags:

<a href='javascript:openIt()'>open</a> <a href='javascript:closeIt()'>close</a>

function openIt( ){ newWin=window.open ("","myW","width=300,height=300"); }

function closeIt( ){ newWin.close( ) }


22

close( ) cont …

to close the child window from inside itself use either

window.close( )

self.close( )


23

opener

to change a property of the parent window from the child widow use the opener property

opener is used by the child window to reference the original window which opened it


24

opener cont …

child window

parent window

opener property

to reference the parent from the child use the opener property


25

opener cont … inside <script> tags:

inside <body> tags:

newWin=window.open(" ","myWin", "width=300,height=250,resizable,scrollbars");

newWin.document.write(“<form name=‘f1’><input type=‘text’ name=‘f2’><input type=‘button’ onClick=‘opener.document.myForm.test.value=this.value’>

</form>”);

<form name=“myForm”><input type=‘text’ name=‘test’ >

</form>


26

location to change the URL of the parent from the child

use the location property with the opener property

<script type=‘text/javascript’>newWin=window.open(“”,”myWin”, "width=300,height=250,resizable,scrollbars"); newWin.document.write(“<form name=‘f1’>”);newWin.document.write(“<input type=button name=‘f2’ value=‘click’

onclick=‘opener.document.location=\”http://www.yahoo.com\” ’>”); newWin.document.write(“</form>”);</script>

Documents

ECA 225