Window Control with JavaScript

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. (youll 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.forms0.elements0.value form1,
  box1 same as
• document.Form1.Text1.value form1, box1

8
Opening a New Window

• function newWindow()
• pubWindow window.open("indexB.html","pubWin"
  , locationyes,
• statusyes,
• toolbaryes,
• scrollbarsyes,
• resizableyes,
• width500,height500")
• lta href"javascriptnewWindow()"gt
• Publications lt/agt

itri2.org/s/
9
Updating one Window from AnotherKey parent
window script

• newWindow window.open(
• child.html, newWin,
• toolbaryes, locationyes, scrollbarsyes,
• width300,height100) -- in HEAD script
• ltFORM NAMEoutputForm, ACTION nonegt
• ltINPUT TYPEtext, SIZE20
• NAMEmsgLine, VALUEgt
• lt/FORMgt --in BODY

10
Updating one Window from AnotherKey Child Window
Script

• function updateParent (textfield)
• opener.document.outputForm.msgLine.value
• Hello textField.value !
• ltFORM ACTIONnonegt
• ltINPUT TYPETEXT,
• onBlurupdateParent(this), SIZE20gt
• lt/FORMgt

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
ltHTMLgt ltHEADgt ltTITLEgtMain Windowlt/TITLEgt
lt/HEADgt ltBODY BGCOLOR"WHITE"gt ltH1
ALIGN"CENTER"gtThis window is looping
madly!lt/H1gt ltSCRIPT gt newWindow
window.open("", "newWin", "toolbaryes,locationye
s,scrollbarsyes,resizableyes,width300,height30
0") newWindow.document.write("ltHTMLgtltHEADgtltTITLEgt
Generated Windowlt\/TITLEgtlt\/HEADgtltBODY
BGCOLOR'WHITE'gtltH2gt This window has result from
the other windowlt\/H2gt") for (i0 ilt100 i)
newWindow.document.writeln("ltBRgtTh
e loop is now at " i) newWindow.document.wri
te("lt\/BODYgtlt\/HTMLgt") newWindow.document.close()
//closes document, not window lt/SCRIPTgt lt/BODYgt
lt/HTMLgt
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
ltHTMLgt ltHEADgt ltTITLEgtWindow Testlt/TITLEgt ltSCRIPT
gt newWindow null function openWindow()
newWindow window.open("", "newWin",
"toolbaryes,locationyes,scrollbarsye
s,width300,height200") function
closeWindow() if (newWindow
!newWindow.closed) newWindow.close()
lt/SCRIPTgt lt/HEADgt ltBODYgt ltCENTERgt ltH1gtLet's
play with windows!lt/H1gt ltA HREF"javascriptopenW
indow()"gt Open a new windowlt/Agt ltA
HREF"javascriptcloseWindow()"gt Close the
windowlt/Agt lt/CENTERgt lt/BODYgt lt/HTMLgt
http//itri2.org/s/CS456/script05.09.html