Window control with javascript
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

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>