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

Loading in 2 Seconds...

play fullscreen
1 / 14

Window Control with JavaScript - PowerPoint PPT Presentation


  • 145 Views
  • 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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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

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:

\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 = 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.)
slide12

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

slide14

<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