CNIT 133 - PowerPoint PPT Presentation

1 / 23

About This Presentation

Title:

CNIT 133

Description:

Browser Location and History. Obtaining Window, Screen, and Browser Information ... Featureslist: list of features that specify the window size and GUI decorations. ... – PowerPoint PPT presentation

Number of Views:37

Avg rating:3.0/5.0

Slides: 24

Provided by: hy86

Category:

more less

Transcript and Presenter's Notes

Title: CNIT 133

1
CNIT 133

Scripting Browser Windows

2
Objectives

JavaScript Scripting Browser Windows
Timers
Browser Location and History
Obtaining Window, Screen, and Browser Information
Opening and Manipulating Windows
Simple Dialog Boxes
Scripting the Status Line
Error Handling

3
Timers

The core JavaScript language does not provide
ability to schedule code to be executed at some
point in the future, but client-side JavaScript
does provide it in the form of the global
functions setTimeout(), clearTimeout(),
setInterval(), and clearInterval().
The setTimeout() method of the Window object
schedules a function to run after a specified
number of miliseconds elapses. It returns an
opaque value that can be passed to clearTimeout()
to cancel the execution of the scheduled
function.
The setInterval() invokes the specified function
repeatedly at intervals of the specified number
of miliseconds. It returns an opaque value that
can be passed to clearInterval() to cancel any
future invocations of the scheduled function.

4
Browser Location and History

The location property of a window (or frame) is a
reference to a Location object it represents the
URL of the document currently being displayed in
that window.
The href property of the Location object is a
string that contains the complete text of the
URL.
The toString() method of the Location object
returns the value of the href property, so you
can use location in place of location.href
location.href
location.toString() / this 2 statements are
the same /

5
Loading New Documents

Although the location property of a window refers
to a Location object, you can assign a string
value to the property.
When you do this, the browser interprets the
string as a URL and attempt to load and display
the document at the URL
/ if the browser does not support the
Document.getElementById function, redirect to a
static page. /
if (!document.getElementById) location
staticpage.html
Historically, assigning a URL to the location
property of a window has been the supported
technique for loading new pages.

6
Loading New Documents

The Location object have two objects with related
purposes
The reload() method reloads the currently
displayed page from the web server
The replace() method loads and displays a URL
that you specify. When you call this method, the
specified URL replaces the current one in the
browsers history list rather than creating a new
entry in that history list. Therefore, the Back
button does not take the user back to the
original document.
Finally, the location property of the Window
object refers to a Location object. The location
property of the Document object is simply a
read-only string.
document.location is a synonym for document.URL
In most cases, document.location is the same as
location.href. When there is a server redirect,
however, document.location contains the URL as
loaded, and location.href contains the URL as
originally requested.

7
The History Object

The history property of the Window object refers
to the History object for the window.
For security and privacy reasons, the array
elements of the History object are never actually
accessible to scripts.
Although its array elements are inaccessible, the
History object supports three methods
The back() and forward() methods move backward or
forward in a windows (or frames) browsing
history, replacing the currently displayed
document with a previously viewed one.
The go() method, takes an integer argument and
can skip any number of pages forward (for
positive arguments) or backward (for negative
arguments) in the history list.
history.back()
history.forward()
history.go(2)
history.go(-3)

8
Obtaining Window, Screen, and Browser Information

The navigator property of a Window object refers
to a Navigator object that contains information
about the web browser as a whole.
In the past, the Navigator object was commonly
used by scripts to determine if they were running
in Internet Explorer or Netscape.
This browser-sniffing approach is replaced by a
capability-testing approach
if (window.addEventListener)
// addEventListener() method supports by
Netscape/Mozilla/Firefox
else if (window.attachEvent)
// attachEvent() method supports by IE
else
// old browsers

9
The Navigator Object

Browser sniffing is sometimes still valuable,
however, one such case is when you need to work
around a specific bug that exists in a specific
version of a specific browser. The Navigator
object lets you do this.
The Navigator object has five properties that
provide version information about the browser
that is running
appName appVersion userAgent appCodeName
platform.
The following lines of JavaScript code display
each Navigator object property in a dialog box
var browser BROWSER INFORMATION \n
for (var propname in navigator)
browser propname navigatorpropname
\n
alert(browser)

10
The Navigator Object

Client sniffer (http//www.mozilla.org/docs/web-de
veloper/sniffer/browser_type.html)
/ this module defines an object named browser
that is easier to use than the navigator
object
/
var browser
version parseInt(navigator.appVersion),
isNetscape navigator.appName.indexOf(Netscape
) ! -1,
isMicrosoft navigator.appName.indexOf(Microsof
t) ! -1
This is one of the reasons that browser sniffing
has become less useful and is being superseded by
capability testing.

11
Opening and Manipulating Windows

The Window object defines several methods allow
you to open and close windows, control window
position and size, request and relinquish
keyboard focus, and scroll the contents of a
window.

12
Opening Windows

You can open a new web browser window with the
open() method of the Window object.
window.open() takes four optional arguments and
returns a Window object that represents the newly
opened window
window.oprn(URL, winname, featureslist,
booleanvalue)
URL URL of the document to display in the new
window. If omitted or null or empty string, the
window will be empty
Winname the name of the window
Featureslist list of features that specify the
window size and GUI decorations.
Booleanvalue specifies whether the URL specified
as the first argument should replace the current
entry in the windows browsing history (true) or
create a new entry in the windows browsing
history (false), which is the default behavior
var w window.open(smallwin.html, smallwin,
width400,height350,statusyes,resizableyes)
The return value of the open() method is the
Window object that represents the newly created
window.
The opener property of a window refers to the
window from which it was opened. If the window
was created by the user, the opener property is
null.

13
Closing Windows

The close() method closes the current window.
If you create a Window object w, you can close it
with
w.close()
JavaScript code running within that window itself
can close it with
window.close()
Note the explicit use of the window identifier
to distinguish the close() method of the Window
object from the close() method of the Document
object (document.close( )).

14
Keyboard Focus and Visibility

Calling focus( ) requests that the system give
keyboard focus to the window
Calling blur( ) relinquishes keyboard focus
Note the focus( ) method ensures that the window
is visible by moving it to the top of the
stacking order.

15
Simple Dialog Boxes

The Window object provides three methods for
displaying simple dialog boxes to the user.
alert( ) displays a message to the user and waits
for the user to dismiss the dialog (use for
degugging)
confirm( ) asks the user to click an OK or Cancel
button to confirm or cacnel an operation
prompt( ) asks the user to enter a string

16
Scripting the Status Line

Web browser typically display a status line at
the bottom of every window in which the browser
can display message to the user.
In old browser, you can set the status property
to specify text that the browser should
temporarily display in the status line
confused? Try the lta hrefhelp.html
onmouseover statusClick here for help!
return truegtOnline Helplt/agt
Modern browsers have disabled the ability to set
the status property.

17
Scripting the Status Line

The Window object also defines a defaultStatus
property that specifies text to be displayed in
the status line when the browser doesnt have
anything else to display there. (defaultStatus
works in some browsers but not all)
ltscriptgt
var WastedTime
start new Date(),
displayElapsedTime function()
var now new Date()
var elapsed Math.round((now
WastedTime.start)/60000)
window.defaultStatus You have wasted
elapsed minutes.
// update the status line every minute
setInterval(WastedTime.displayElapsedTime,
60000)
lt/scriptgt

18
Error handling

The onerror property of a Window object is
special. If you assign a function to this
property, the function is invoked whenever a
JavaScript error occurs in that window the
function you assign becomes an error handler for
the window.
Three arguments are passed to an error handler
when a JavaScript error occurs
The first argument is a message describing the
error
The second argument is a string that contains the
URL of the document containing the JavaScript
code that caused the error
The third argument is the line number within the
document where the error occurred
If the onerror handler returns true, it tells the
browser that the handler has handled the error
and that no further action is necessary.