ECA 225 Applied Online Programming windows ECA 225

windows v new windows are useful for: v displaying additional information v obtaining additional

opening a new window v unlike other objects we do not use the new

open( ) v first parameter: the url of the document we want to open

open( ) v second cont … parameter: the name of the new window v

open( ) cont … v to access properties and methods of the new window

open( ) cont … v third parameter: set of options to specify properties of

open( ) v third cont … parameter: available window properties height v width v

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

writing HTML to new window v we can write HTML directly into the new

writing HTML to new window cont … v now use the document. write( )

centering a window v the screen property of the window object will return monitor

centering a window v create cont … two more variables: var my. Width =

centering a window v open cont … a new window using variable names var

javascript: protocol v the javascript: protocol will invoke Java. Script outside of any <script>

javascript: protocol v type into the location field of your browser: javascript: document. write(“Hello”)

javascript: protocol v an example of javascript: used with an event handler <input type=‘button’

javascript: protocol v an example of javascript: used with an href <a href=’javascript: new.

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

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

close( ) v create cont … two links: <a href='javascript: open. It()'>open</a> <a href='javascript:

close( ) cont … v to close the child window from inside itself use

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

opener cont … to reference the parent from the child use the opener property

opener v inside cont … <script> tags: new. Win=window. open(" ", "my. Win", "width=300,

location v to change the URL of the parent from the child use the

Slides: 26

Download presentation

ECA 225 Applied Online Programming windows ECA 225 Applied Interactive Programming 1

windows v new windows are useful for: v displaying additional information v obtaining additional information v Using Java. Script we can: v open new windows v close windows v position widows precisely v and more ECA 225 Applied Interactive Programming 2

opening a new window v unlike other objects we do not use the new keyword to create a new window object v to open a new window use the open( ) method v open( ) takes three parameters, the third is optional v url v window name v window options v open( ) returns a reference to the new window ECA 225 Applied Interactive Programming 3

open( ) v first parameter: the url of the document we want to open in the new window var new. Win = open(“whats_new. html”, “new. Pop. Up”); v to open a blank window use empty quotes as the first parameter var new. Win = open( “”, “new. Pop. Up” ); ECA 225 Applied Interactive Programming 4

open( ) v second cont … parameter: the name of the new window v different from the variable name var new. Win = open( “whats_new. html”, “new. Pop. Up” ); v the name we give the window can be used as a target attribute for hyperlinks and forms <a href=”whats. New. htm” target=”new. Pop. Up”>Click Here</a> ECA 225 Applied Interactive Programming 5

open( ) cont … v to access properties and methods of the new window object, use the var name plus dot syntax var new. Win = open( “whats_new. html”, “new. Pop. Up” ); new. Win. status=”This is my new window”; new. Win. blur( ); ECA 225 Applied Interactive Programming 6

open( ) cont … v third parameter: set of options to specify properties of the new window v if you leave out the third parameter, all of the options default to “yes”, ie, all parts of the window are present v if you explicitly set one option, all other options default to “no” ECA 225 Applied Interactive Programming 7

open( ) v third cont … parameter: available window properties height v width v left (left starting position in pixels) v top (top starting position in pixels) v location (show location field) v menubar (show menu bar) v resizable (can the user resize the window? ) v scrollbars (show scrollbars) v status (show status bar) v toolbar (show toolbar) v ECA 225 Applied Interactive Programming 8

open( ) cont … v third parameter: pay attention to placement of quotes var new. Win = open( “whats_new. html”, “new. Pop. Up”, “width=300, height=400, menubar=1” ); v to turn properties on or off, set them to yes or 1 no or 0 ECA 225 Applied Interactive Programming 9

writing HTML to new window v we can write HTML directly into the new window v open a new blank window var new. Win = open( “”, “new. Pop. Up” ); v use the document. open( ) method to open the document object of the new window new. Win. document. open( ); ECA 225 Applied Interactive Programming 10

writing HTML to new window cont … v now use the document. write( ) method of the new window to write HTML new. Win. document. write(“<html>n<head>n”) ; new. Win. document. write(“<title>My Window</title>n”); new. Win. document. write(“</head>n”); new. Win. document. write(“<body>n<h 1>Hello ECA 225 Applied Interactive Programming 11 </h 1>n”);

centering a window v the screen property of the window object will return monitor resolution v create a var to hold the width of the screen divided by two var w = screen. width / 2; ECA 225 Applied Interactive Programming 12

centering a window v create cont … two more variables: var my. Width = 500; // width of new window var from. Left = 0; //position from left initialized to 0 v reset the from. Left var from. Left = w – ( my. Width / 2 ); ECA 225 Applied Interactive Programming 13

centering a window v open cont … a new window using variable names var new. Win = window. open( “”, “new. Pop. Up”, “height=400, width=” + my. Width + “, top=300, left=” + from. Left + “, toolbar, menubar”); which will open horizontally in the center of the monitor ECA 225 Applied Interactive Programming 14

javascript: protocol v the javascript: protocol will invoke Java. Script outside of any <script> tags v javascript: tells the browser that what follows is Java. Script and should be treated as such v you can use javascript: inside the href of an anchor tag, or as part of an event handler ECA 225 Applied Interactive Programming 15

javascript: protocol v type into the location field of your browser: javascript: document. write(“Hello”) javascript: alert(“Hello”) javascript: Date( ) ECA 225 Applied Interactive Programming 16

javascript: protocol v an example of javascript: used with an event handler <input type=‘button’ value=‘click me’ on. Click=‘javascript: new. Win=window. open (“http: //www. yahoo. com”, ”my. Win”)’> ECA 225 Applied Interactive Programming 17

javascript: protocol v an example of javascript: used with an href <a href=’javascript: new. Window( )’>Link</a> <script type=‘text/javascript’> function new. Window( ){ new. Win=window. open("http: //www. yahoo. com", "my. Win", "width=300, height=250, resizable, scrollbars"); } </script> ECA 225 Applied Interactive Programming 18

javascript: protocol v add a second link and click on it while the child window is open <a href=’javascript: new. Window( )’>Link</a> <a href="http: //www. altavista. com" target="my. Win">Link 2</a> <script type=‘text/javascript’> function new. Window( ){ new. Win=window. open("http: //www. yahoo. com", "my. Win", "width=300, height=250, resizable, scrollbars"); } </script> ECA 225 Applied Interactive Programming 19

close( ) v just as you can open a new window with the open( ) method, you can close a window with the close( ) method window. close( ) v to use the close( ) method from the parent window, reference the child window object by its variable name ECA 225 Applied Interactive Programming 20

close( ) v create cont … two links: <a href='javascript: open. It()'>open</a> <a href='javascript: close. It()'>close</a> v create 2 functions inside the <script> tags: function open. It( ){ new. Win=window. open ("", "my. W", "width=300, height=300"); } function close. It( ){ new. Win. close( ) } ECA 225 Applied Interactive Programming 21

close( ) cont … v to close the child window from inside itself use either window. close( ) self. close( ) ECA 225 Applied Interactive Programming 22

opener v to change a property of the parent window from the child widow use the opener property v opener is used by the child window to reference the original window which opened it ECA 225 Applied Interactive Programming 23

opener cont … to reference the parent from the child use the opener property child window opener property parent window ECA 225 Applied Interactive Programming 24

opener v inside cont … <script> tags: new. Win=window. open(" ", "my. Win", "width=300, height=250, resizable, scrollbars"); new. Win. document. write(“<form name=‘f 1’><input type=‘text’ name=‘f 2’> <input type=‘button’ on. Click=‘opener. document. my. Form. test. value=this. value’> </form>”); v inside <body> tags: <form name=“my. Form”> <input type=‘text’ name=‘test’ > </form> ECA 225 Applied Interactive Programming 25

location v to change the URL of the parent from the child use the location property with the opener property <script type=‘text/javascript’> new. Win=window. open(“”, ”my. Win”, "width=300, height=250, resizable, scrollbars"); new. Win. document. write(“<form name=‘f 1’>”); new. Win. document. write(“<input type=button name=‘f 2’ value=‘click’ onclick=‘opener. document. location=”http: //www. yahoo. com” ’>”); new. Win. document. write(“</form>”); </script> ECA 225 Applied Interactive Programming 26