Window control with javascript
This presentation is the property of its rightful owner.
Sponsored Links
1 / 14

Window Control with JavaScript PowerPoint PPT Presentation


  • 108 Views
  • Uploaded on
  • Presentation posted in: General

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.

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


Outline

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

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:

    \nnew line

    \ttab

    \”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 = 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/


Updating one window from another key parent window script

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


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

    <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


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


Window control with javascript

<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


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)


Window control with javascript

<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


  • Login