window control with javascript n.
Skip this Video
Download Presentation
Window Control with JavaScript

Loading in 2 Seconds...

play fullscreen
1 / 14

Window Control with JavaScript - PowerPoint PPT Presentation

  • Uploaded on

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Window Control with JavaScript' - grady

Download Now 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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
window control with javascript

Window Control with JavaScript

Chapter 5

JavaScript for the WWW

  • 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
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
scope of variables
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.
similarities with c c java
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)

document object model dom apx a
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)
referencing standard objects
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”
opening a new window
Opening a New Window
  • function newWindow() {

pubWindow ="indexB.html","pubWin", location=yes,





width=500,height=500") }

  • <a href="javascript:newWindow()">

Publications </a>

updating one window from another key parent window script
Updating one Window from AnotherKey parent window script:
  • newWindow =

“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

updating one window from another key child window script
Updating one Window from AnotherKey Child Window Script:
  • function updateParent (textfield) {

opener.document.outputForm.msgLine.value =

“Hello” + textField.value + “!” }

  • <FORM ACTION=“none”>


onBlur=updateParent(this), SIZE=“20”>


Notes: opener is the window that opened this one

this is this object

creating new pages with js
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.)

<HTML> <HEAD> <TITLE>Main Window</TITLE> </HEAD>


<H1 ALIGN="CENTER">This window is looping madly!</H1>


newWindow ="", "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.close() //closes document, not window



closing a window
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)


<HTML> <HEAD> <TITLE>Window Test</TITLE>


newWindow = null

function openWindow() {

newWindow ="", "newWin", "toolbar=yes,location=yes,scrollbars=yes,width=300,height=200") }

function closeWindow() {

if (newWindow && !newWindow.closed) {

newWindow.close() } }


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