1. JavaScript and Ajax (JavaScript window object) Week 6 Web site: http://fog.ccsf.edu/~hyip

2. Window and Document Objects

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

4. The Window Object (Global Object) - Methods Window Methods alert(), back(), blur(), clearInterval(), clearTimeout(), close(), confirm(), focus(), forward(), home(), open(), print(), prompt(), setInterval(), setTimeout(), stop()

5. 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:  lastModified  title  URL  location (deprecated since Netscape 6, use URL instead)

6. The Document Object - Methods Document object methods: close() getElementById() getElementsByName() getElementsByTagname() open() write() writeln()

7. The Document Object - Properties sample document Object properties document Object properties document.write("lastModified (return last modified date): ", document.lastModified, " "); document.write("title (set or return the title of the document): ", document.title, " "); document.write("URL (return the full URL of the document): ", document.URL, " "); document.write("location (deprecated, use document.URL): ", document.location, " ");

8. 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 */

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

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

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

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

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

14. The Navigator Object (continue…) Client sniffer (http://www.mozilla.org/docs/web- developer/sniffer/browser_type.html)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.

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

16. 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 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 window’s browsing history (true) or create a new entry in the window’s browsing history (false), which is the default behavior var 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.

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

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

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

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

21. 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; }

22. onerror sample window onerror property /* 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; } Window onerror property/onerror event handler document.write("No error"); document.write("With error here“

23. Window Synonyms

24. Targeting Windows sample Window target Some page

25. Targeting Windows

26. Window Methods

27. Window Methods (continue…)

30. 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 tag. It can only be alphanumeric or underscore. features: comma-separated list (without spaces) of any of the following options and values.

31. Opening a pop-up Window

32. Opening a pop-up Window (continue…)

33. 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”);

34. Closing a pop-up Window – Window Method close() Call the close method with the window’s name To close myMap:  myMap.close();

35. Opening and Closing a Pop-up Window sample Open and close pop-up window 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; } Contact us (CCSF) 50 Phelan Avenue San Francisco, CA 94112 (415) 239-3000 View Map | View Driving Directions | Close Map

36. map.html Map file Map to CCSF

37. Pop-up News Popup News function showNews() { news = window.open("http://www.cnn.com", "NewsWin", "width=200, height=220"); var newsTimer = setTimeout("news.close()", "20000"); } Popup News

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