1 / 26

ECA 225

ECA 225. Applied Online Programming. windows. windows. new windows are useful for: displaying additional information obtaining additional information Using JavaScript we can: open new windows close windows position widows precisely and more. opening a new window.

noah-hendricks
Download Presentation

ECA 225

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. ECA 225 AppliedOnline Programming windows ECA 225 Applied Interactive Programming

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

  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( ) method • open( ) takes three parameters, the third is optional • url • window name • window options • open( ) returns a reference to the new window ECA 225 Applied Interactive Programming

  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” ); ECA 225 Applied Interactive Programming

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

  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( ); ECA 225 Applied Interactive Programming

  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” ECA 225 Applied Interactive Programming

  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) ECA 225 Applied Interactive Programming

  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” ); ECA 225 Applied Interactive Programming

  10. writing HTML to new window • we can write HTML directly into the new window • open 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( ); ECA 225 Applied Interactive Programming

  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>”); ECA 225 Applied Interactive Programming

  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; ECA 225 Applied Interactive Programming

  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 ); ECA 225 Applied Interactive Programming

  14. centering a window cont … • open a new window using variable nameswhich will open horizontally in the center of the monitor var newWin = window.open( “”, “newPopUp”, “height=400,width=” + myWidth + “,top=300,left=” + fromLeft + “,toolbar,menubar”); ECA 225 Applied Interactive Programming

  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 ECA 225 Applied Interactive Programming

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

  17. javascript: protocol • 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”)’> ECA 225 Applied Interactive Programming

  18. javascript: protocol • 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> ECA 225 Applied Interactive Programming

  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> ECA 225 Applied Interactive Programming

  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( ) ECA 225 Applied Interactive Programming

  21. close( ) cont … <a href='javascript:openIt()'>open</a> <a href='javascript:closeIt()'>close</a> • create two links: • create 2 functions inside the <script> tags: function openIt( ){ newWin=window.open ("","myW","width=300,height=300"); } function closeIt( ){ newWin.close( ) } ECA 225 Applied Interactive Programming

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

  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 ECA 225 Applied Interactive Programming

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

  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> ECA 225 Applied Interactive Programming

  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> ECA 225 Applied Interactive Programming

More Related