CNIT 133 Interactive Web Pags – JavaScript and AJAX

CNIT 133 Interactive Web Pags –JavaScript and AJAX Window Object

Agenda • My Web Site: http://fog.ccsf.edu/~hyip (download syllabus, class notes). • The window object. • The document object. • The location object. • The history object. • The navigator object. • The onerror property/handler. • Window Methods.

Window and Document Objects

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

The Window Object (Global Object) - Methods • Window Methods alert() back() blur() clearInterval() clearTimeout() close() confirm() focus()

The Window Object (Global Object)- Methods forward() home() open() print() prompt() setInterval() setTimeout() stop()

The Window Object – Properties sample <html> <head><title>Window Object properties</title> </head> <body> <h1>Window Object properties</h1> <script language="JavaScript" type="text/javascript"> document.write("closed (boolean - window has been closed or not): ", closed, "<br>"); document.write("defaultStatus (set or return default text in statusbar): ", defaultStatus, "<br>"); document.write("name (set or return name of window): ", name, "<br>"); </script> </body> </html>

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)

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("domain (return domain name): ", document.domain, "<br>"); document.write("lastModified (return last modified date): ", document.lastModified, "<br>"); document.write("referrer (return the URL of the document that loaded the current document): ", document.referrer, "<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. • 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 Location Object sample <html> <head><title>location Object properties</title> </head> <body> <h1>location Object properties</h1> <script language="JavaScript" type="text/javascript"> document.write("host (return hostname and port of a URL): ", location.host, "<br>"); document.write("hostname (return the hostname of a URL): ", location.hostname, "<br>"); document.write("href (return the entire URL): ", location.href, "<br>"); document.write("pathname (return path name of a URL): ", location.pathname, "<br>"); document.write("port (return the port number the server uses for a URL): ", location.port, "<br>"); document.write("protocol (return the protocol): ", location.protocol, "<br>"); document.write("search (return the query portion of a URL): ", location.search, "<br>") </script> </body> </html>

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)

The History Object sample <html> <head><title>history Object properties</title> </head> <body> <h1>history Object properties</h1> <script language="JavaScript" type="text/javascript"> document.write("length (return the number of URLs in the history list): ", history.length, "<br>"); document.write("History has three methods - back(), forward(), and go()"); </script> </body> </html>

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 }

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

The Navigator Object sample <html> <head><title>navigator Object properties</title> </head> <body> <h1>navigator Object properties</h1> <script language="JavaScript" type="text/javascript"> document.write("appCodeName (return the code name of browser): ", navigator.appCodeName, "<br>"); document.write("appName (return the name of the browser): ", navigator.appName, "<br>"); document.write("appVersion (return the version information of the browser): ", navigator.appVersion, "<br>"); document.write("cookieEnabled (determine whether cookies are enabled in the browser): ", navigator.cookieEnabled, "<br>"); document.write("platform (return which platform browser is compiled): ", navigator.platform, "<br>"); document.write("userAgent (return the user-agent header sent by the browser to the server): ", navigator.userAgent, "<br>"); document.write("<br><br>"); document.write("javaEnabled() (method-Specifies whether or not the browser has java enabled): ", navigator.javaEnabled(), "<br>"); </script> </body> </html>

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

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

Error Handling – onerror property/handler • Define an error handler that handles all errors silently: // don’t bother the user with error messages window.onerror = function() { return true; } • Display error message: <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

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

Writing to Window dynamically sample <html> <head><title>dynamic window text</title> <script language="JavaScript" type="text/javascript"> function dynWrite() { var topDoc = "<html><head><title>Dynamic text</title></head>"; topDoc += "<body bgcolor='yellow' text='black'>"; var endDoc = "</body></html>"; var features = "width='200',height='200'"; var newWin = window.open("", "DynWin", features); newWin.document.write(topDoc, "<h2>Dynamically write text</h2>"); newWin.document.write("Quote of the day: Please turn in your homework. Thanks."); newWin.document.write("<div align='center'>", "<input type='button' value='close' onClick='self.close()'></div>"); newWin.document.write(endDoc); } </script> </head> <body onLoad="dynWrite()"> <h1>Home page of some web site</h1> </body> </html>

CNIT 133 Interactive Web Pags – JavaScript and AJAX