1 / 14

Window Control with JavaScript

Window Control with JavaScript. Chapter 5 JavaScript for the WWW. Outline. More on JS Syntax: Identifiers, variables, objects Opening a new window Updating a parent window from a child Creating new pages with JavaScript Closing a window. Identifiers and Variables in JS.

grady
Download Presentation

Window Control with JavaScript

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. Window Control with JavaScript Chapter 5 JavaScript for the WWW

  2. Outline • More on JS Syntax: Identifiers, variables, objects • Opening a new window • Updating a parent window from a child • Creating new pages with JavaScript • Closing a window

  3. Identifiers and Variables in JS • Identifiers must start with a letter, but can have numbers, letters and underscores • JS is generally case sensitive; event handlers are not in some browsers • JS is loosely typed; variables can be declared or not: • var1 = 123 //no declaration • var var1 = 123 //declare and use • var var1 //declare first • var1 = 124 //then use

  4. Scope of Variables • Local variables are defined within a function, and can only be used within that function • Global variables are defined outside of a function and can be used anywhere within the file.

  5. Similarities with C, C++, Java • JS operators and program control statements (if, for, while, …) are mostly identical with with C (exceptions solicited) • Escape sequences for formatting output also are based on C: \n new line \t tab \” double quote \/ forward slash, etc. (you’ll see this one soon)

  6. Document Object Model (DOM - Apx. A) • window (parent of all objects) • frame • history • location • navigator • status • document • link • location • form • text (and many other widgets)

  7. Referencing Standard Objects • Usually use dot notation to specify: • window.document.form1.text1.value • “window” can be omitted since it is the default • Some objects (documents and forms) have built-in arrays that allow: • document.forms[0].elements[0].value = “form1, box1” same as • document.Form1.Text1.value = “form1, box1”

  8. Opening a New Window • function newWindow() { pubWindow = window.open("indexB.html","pubWin", location=yes, status=yes, toolbar=yes, scrollbars=yes, resizable=yes, width=500,height=500") } • <a href="javascript:newWindow()"> Publications </a> itri2.org/s/

  9. Updating one Window from AnotherKey parent window script: • newWindow = window.open( “child.html”, “newWin”, “toolbar=yes, location=yes, scrollbars=yes, width=300,height=100”) -- in HEAD script • <FORM NAME=“outputForm”, ACTION= “none”> <INPUT TYPE=“text”, SIZE=“20” NAME=“msgLine”, VALUE=“”> </FORM> --in BODY

  10. Updating one Window from AnotherKey Child Window Script: • function updateParent (textfield) { opener.document.outputForm.msgLine.value = “Hello” + textField.value + “!” } • <FORM ACTION=“none”> <INPUT TYPE=“TEXT”, onBlur=updateParent(this), SIZE=“20”> </FORM> Notes: opener is the window that opened this one this is this object http://itri2.org/s/CS456/parent.html

  11. Creating new pages with JS • Previous multi-window examples used 2 HTML files for parent and child windows • However JS in the parent window can write HTML into the child window, creating it on the fly • Note forward slashes in text strings. What are they? (Script works without them.)

  12. <HTML> <HEAD> <TITLE>Main Window</TITLE> </HEAD> <BODY BGCOLOR="WHITE"> <H1 ALIGN="CENTER">This window is looping madly!</H1> <SCRIPT > newWindow = window.open("", "newWin", "toolbar=yes,location=yes,scrollbars=yes,resizable=yes,width=300,height=300") newWindow.document.write("<HTML><HEAD><TITLE>Generated Window<\/TITLE><\/HEAD><BODY BGCOLOR='WHITE'><H2> This window has result from the other window<\/H2>") for (i=0; i<100; i++) { newWindow.document.writeln("<BR>The loop is now at: " + i) } newWindow.document.write("<\/BODY><\/HTML>") newWindow.document.close() //closes document, not window </SCRIPT> </BODY> </HTML> http://itri2.org/s/CS456/script05.06.html A:/script05.06.html

  13. Closing a Window • newWindow.close() method will close newWindow object • first initialize the newWindow object with newWindow = null • when closing make sure there is a valid object to close with: if (newWindow && !newWindow.closed)

  14. <HTML> <HEAD> <TITLE>Window Test</TITLE> <SCRIPT > newWindow = null function openWindow() { newWindow = window.open("", "newWin", "toolbar=yes,location=yes,scrollbars=yes,width=300,height=200") } function closeWindow() { if (newWindow && !newWindow.closed) { newWindow.close() } } </SCRIPT> </HEAD> <BODY> <CENTER> <H1>Let's play with windows!</H1> <A HREF="javascript:openWindow()"> Open a new window</A> <A HREF="javascript:closeWindow()"> Close the window</A> </CENTER> </BODY> </HTML> http://itri2.org/s/CS456/script05.09.html

More Related