Download
eca 225 n.
Skip this Video
Loading SlideShow in 5 Seconds..
ECA 225 PowerPoint Presentation

ECA 225

115 Vues Download Presentation
Télécharger la présentation

ECA 225

- - - - - - - - - - - - - - - - - - - - - - - - - - - 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