[SOLVED] Java javascript COMP284 Scripting Languages Handouts (8 on 1)

COMP284 Scripting Languages Handouts (8 on 1)

COMP284 Scripting Languages
Lecture 17: JavaScript (Part 4)

Handouts (8 on 1)

Ullrich Hustadt

Department of Computer Science
School of Electrical Engineering, Electronics, and Computer Science

University of Liverpool

Contents

1 Dynamic web pages using JavaScript
Window and Document objects
Window object: Properties and methods
Dialog boxes
Input validation
Document object and Document Object Model

2 Event-driven Programs
Introduction
Events

COMP284 Scripting Languages Lecture 17 Slide L17 1

Dynamic web pages using JavaScript Window and Document objects

Window and Document objects

JavaScript provides two objects that are essential to the creation of
dynamic web pages and interactive web applications:

window object

a JavaScript object that represents a browser window or tab
automatically created whith every instance of a or
tag

allows properties of a window to be accessed and manipulated
; JavaScript provides methods that allow window objects to be

created and manipulated
Example: window.open(http://www.csc.liv.ac.uk,Home)

whenever an object method or property is referenced in a script without
an object name and dot prefix it is assumed by JavaScript to be a
member of the window object

Example: We can write alert() instead of window.alert()

COMP284 Scripting Languages Lecture 17 Slide L17 2

Dynamic web pages using JavaScript Window object: Properties and methods

Window object

A window object represents an open window in a browser.
If a document contain frames, then there is

one window object, window, for the HTML document
and one additional window object for each frame,

accessible via an array window.frames

A window object has properties including

document document object for the window

history history object for the window

location location object (current URL) for the window

navigator navigator (web browser) object for the window

opener reference to the window that created the window

innerHeight inner height of a windows content area

innerWidth inner width of a windows content area

closed boolean value indicating whether the window is
(still) open

COMP284 Scripting Languages Lecture 17 Slide L17 3

Dynamic web pages using JavaScript Window object: Properties and methods

Navigator object

Properties of a navigator object include

navigator.appName the web browers name

navigator.appVersion the web browers version

Example: Load different style sheets depending on browser

COMP284 Scripting Languages Lecture 17 Slide L17 4

Dynamic web pages using JavaScript Window object: Properties and methods

Window object

Methods provided by a window object include

open(url, name [, features])
opens a new browser window/tab
returns a reference to a window object
url is the URL to access in the new window; can be the empty string
name is a name given to the window for later reference
features is a string that determines various window features

The standard sequence for the creation of a new windows is not:

// new instance of Window class

var newWin = new Window ()

newWin.document.write( )

instead it is

// new window created by using open with an existing one

var newWin = window.open ()

newWin.document.write( )

COMP284 Scripting Languages Lecture 17 Slide L17 5

Dynamic web pages using JavaScript Window object: Properties and methods

Window object

Methods provided by a window object include

close()
closes a browser window/tab

focus()
give focus to a window (bring the window to the front)

blur()
removes focus from a window (moves the window behind others)

print()
prints (sends to a printer) the contents of the current window

COMP284 Scripting Languages Lecture 17 Slide L17 6

Dynamic web pages using JavaScript Window object: Properties and methods

Window object: Example