Embed Size (px)
DESCRIPTION
The Window Object (Global Object) - Properties Window Properties document: document object Location: location object history: history object (array). history.back(), history.forward(), history.go() navigator: navigator object (Browser information) self: Refers to the current window. Equivalent to window opener: Refers to the window from which a particular window was opened close: Boolean value, window has been closed or not defaultStatus: set or return default text in status bar name: set or return name of window
Citation preview
JavaScript and Ajax(JavaScript window
object)Week 6
Web site: http://fog.ccsf.edu/~hyip
Window and Document Objects
Window Object(Global Object)
document object(DOM)
location object
history object(array)
navigator object
self
opener
alert()back()blur()
clearInterval()clearTimeout()
close()confirm()focus()
forward()home()open()print()
prompt()setInterval()setTimeout()
stop()
Window Properties
Window Methods
Document Object Collection:images[]forms[]links[]
anchors[]
Document Object Properties:lastModified
titleURL
Document Object Methods:close()
getElementById()getElementsByName()
getElementsByTagname()open()write()
The Window Object (Global Object) - Properties
• Window Propertiesdocument: document objectLocation: location objecthistory: history object (array). history.back(), history.forward(), history.go()navigator: navigator object (Browser information)self: Refers to the current window. Equivalent to windowopener: Refers to the window from which a particular window was openedclose: Boolean value, window has been closed or notdefaultStatus: set or return default text in status barname: set or return name of window
The Window Object (Global Object) - Methods
• Window Methodsalert(), back(), blur(), clearInterval(), clearTimeout(), close(), confirm(), focus(), forward(), home(), open(), print(), prompt(), setInterval(), setTimeout(), stop()
The Document Object - Properties• Document object collection:
images[]forms[]
elements[] (button, checkbox, hidden, password, radio, reset, select, submit, text, textarea)links[]anchors[]
• Document object properties:lastModifiedtitleURLlocation (deprecated since Netscape 6, use URL instead)
The Document Object - Methods• Document object methods:
close()getElementById()getElementsByName()getElementsByTagname()open()write()writeln()
The Document Object - Properties sample
<html><head><title>document Object properties</title></head><body><h1>document Object properties</h1><script language="JavaScript" type="text/javascript">document.write("lastModified (return last modified date): ", document.lastModified, "<br>");document.write("title (set or return the title of the document): ", document.title, "<br>");document.write("URL (return the full URL of the document): ", document.URL, "<br>");document.write("location (deprecated, use document.URL): ", document.location, "<br>");</script></body></html>
The Location Object• 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.toString() in place of location.href:location.href location.toString() /* this 2 statements are the same */
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.
The Location Object• The Location object have two methods 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 browser’s 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.
location.replace("http://www.ccsf.edu");• Finally, the location property of the Window object refers to a Location object. The deprecated
location property of the Document object is simply a read-only string (deprecated since Netscape 6, use document.URL instead).
document.location is a synonym for document.URL• In most cases, document.location/document.URL is the same as location.href. When there is a
server redirect, however, document.location/document.URL contains the URL as loaded, and location.href contains the URL as originally requested.
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 window’s (or frame’s) 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)
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 the following 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}
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 + ": " + navigator[propname] + "\n";}alert(browser);
The Navigator Object (continue…)• Client sniffer (
http://www.mozilla.org/docs/web-developer/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("Microsoft") != -1};
• This is one of the reasons that browser sniffing has become less useful and is being superseded by capability testing.
Window Methods (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.
Opening Windows – Window Method open()
• 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 windowFeatureslist: 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 window’s browsing history (true) or create a new entry in the window’s browsing history (false), which is the default behaviorvar w = window.open("smallwin.html", "smallwin", "width=400,height=350,status=yes,resizable=yes");
• 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.
Closing Windows – Window Method close()
• 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( )).
Keyboard Focus and Visibility – Window Method focus() and blur()
• 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.
Simple Dialog Boxes – Window Methods alert() confirm() prompt()
• 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 debugging)
• confirm( ) asks the user to click an OK or Cancel button to confirm or cancel an operation
• prompt( ) asks the user to enter a string
Error Handling – onerror property/handler
• 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 errorThe second argument is a string that contains the URL of the document
containing the JavaScript code that caused the errorThe 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.
Error Handling – onerror property/handler (continue…)
• Define an error handler that handles all errors silently:// don’t bother the user with error messages
window.onerror = function() { return true; }
onerror sample<html><head><title>window onerror property</title><script language="JavaScript" type="text/javascript">/* comment out the following code to see the original error message. */window.onerror = function (message, url, linenum) {
alert("There is an error!!");alert("Error Message: " + message + "\n URL: " + url + "\n Line Number: " + linenum);return true;
}</script></head><body><h1>Window onerror property/onerror event handler</h1><script language="JavaScript" type="text/javascript">document.write("No error");document.write("With error here“</script></body></html>
Window Synonyms
Targeting Windows sample<html><head><title>Window target</title></head><body><a href="somepage.html" target="???">Some page</a></body></html>
Targeting Windows
Window Methods
Window Methods (continue…)
Window Methods (continue…)
Window Methods (continue…)
Opening a pop-up Window – Window Method open()
• [windowObjectName=] [window.] open("URL", "targetName" [, "features"])• windowObjectName: specifies the name of the window object variable. It is
used to call methods on the window and access the window properties.• URL: specifies the URL of the file to open in the new window. If you want to
write to the new window dynamically, do not specify a URL, just provide empty quotes ("").
• targetName: name to be used in the target attribute of an <a> tag. It can only be alphanumeric or underscore.
• features: comma-separated list (without spaces) of any of the following options and values.
Opening a pop-up Window
Opening a pop-up Window (continue…)
Opening a pop-up Window (continue…)
myWin = window.open(“test.html”,“TestWin”,“height=100,width=100,status”);myWin = window.open(“test.html”,“TestWin”,“height=100,width=100,status=yes”);myMap = window.open(“map.html”, “MapWin”, “width=150,height=150, toolbar,status”);
Closing a pop-up Window – Window Method close()
• Call the close method with the window’s name• To close myMap:
myMap.close();
Opening and Closing a Pop-up Window sample
<html><head><title>Open and close pop-up window</title><script language="JavaScript">var map = null;function showMap() {
var features = "width=620, height=650";features += ", left=50, top=50,status";map = window.open("map.html", "MapWin", features);map.focus();
}function closeMap() {
if (map != null) { map.close(); map = null;}
}</script></head><body><h1>Contact us (CCSF)</h1><p>50 Phelan Avenue<br/>San Francisco, CA 94112<br/>(415) 239-3000</p><p><a href="javascript: void(0)" onclick="showMap()">View Map</a> | <a href="http://www.ccsf.edu/Offices/Office_of_Instruction/Access_Guide/" target="MapWin">View Driving Directions</a> |<a href="javascript: void(0)" onclick = "closeMap()">Close Map</a></p></body></html>
map.html<html><head><title>Map file</title></head><body><div align="center"><h2>Map to CCSF</h2><img src="ccsf_map.bmp" border="0" alt="CCSF_MAP" width="400" height="400">
<form><input type="button" value="Print" onclick="window.print()"><input type="button" value="Return" onclick="opener.focus()"><input type="button" value="Close" onclick="self.close()"></form></div></body></html>
Pop-up News<html><head><title>Popup News</title><script language="JavaScript">function showNews() {
news = window.open("http://www.cnn.com", "NewsWin", "width=200, height=220");var newsTimer = setTimeout("news.close()", "20000");
}</script></head><body onload="showNews()"><h2>Popup News</h2></body></html>
Window Methods (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.
