AdvWeb-1/14 DePaul University SNL 262 Advanced Web Page Design Chapt 10 - Document/location/navigator Objects - Instructor: David A. Lash

AdvWeb-2/14 Chapt 10 - Document Object u The document object represents a web document or page. – It is a child of the window object – technically you can refer to window.document to refer to the current document. u But just document is shorter. – If you had frames there might exist > 1 document opbjects each with its own name.

AdvWeb-3/14 Chapt 10 - Window Hierarchy

AdvWeb-4/14 More Document Objects Properties u Here are more properties: – cookie - a special property enabling trusted web servers to read & write cookies. – Links[] - an array of link objects representing the links in the document. – vlinkColor - the color of the visited links in the document. – alinkColor - the color of a link while activated in the document.. – fgColor - the default text color of the document. – bgcolor - background color of the document

AdvWeb-5/14 Web Documents u The document object represents the web document & has the following properties: – referrer - the URL of the document that contained the link that the user clicked on to get to the current document. – title - the text between the & tags. – URL - a string representing the URL from where the document was loaded. – images[] - an array of images objects the represent elements from the document – forms[] - an array of objects representing the form elements in the document. – lastmodified - a string set to the last modified date of the document – anchors[] - array of objects populated by the anchors of the document.

AdvWeb-6/14 Documents Properties Example Cool backgrounds function colorit() { document.bgColor=colors[x]; if (x++ >= 2) x=0; timerID=setTimeout("colorit()",2000); } Setting and Cancelling Timer var x = 0; var colors= new Array("#CCFFFF", "#ff0000", "#00ff00"); document.bgColor="#ffff00"; document.write( "referrer=" + document.referrer + " " ); document.write( "title=" + document.title + " " ); document.write( "URL=" + document.URL + " " ); document.write( "brcolor=" + document.bgColor + " " ); timerID=setTimeout("colorit()",2000); See: examples/11_list10-4.html

AdvWeb-7/14 A word about refferrer Referrer can be used by sites to save where the browser was before your site. For example, can write this property when user hits submit on a form. Could track where folks are coming from.

AdvWeb-8/14 LastModified Property – Displaying the last modified date Test Document This page was last modified on: document.write(document.lastModified); See: examples/11_list10-1.html

AdvWeb-9/14 Images Array – images[] - an array of images objects the represent elements from the document u the most usful property is the src property. u document.two.src=“sample.gif”; u Where two was set in tag earlier as: – - See example on next slide

AdvWeb-10/14 Images Object example Timed Images function change_image() { temp=document.two.src; document.two.src=document.one.src; document.one.src=temp; timerID=setTimeout("change_image()",2000); } Setting and Cancelling Timer Keep your eye on the ball. <SCRIPT LANGUAGE="JavaScript" timerID=setTimeout("change_image()",2000); examples/11_list10-2.html

AdvWeb-11/14 Location Object u An object that represents URL of the document displayed in the window – location.href - the conplete text of the URL being displayed – location.pathname - complete pathname – location.protocol - http, ftp, file, etc. – Can use location on left hand side of equation to set a new location URL for document u location=“ u location=“file1.html”

AdvWeb-12/14 Location Object Example Timed Images function leaving() { location=" } Setting and Cancelling Timer You are currently at= document.write( location + " " ); document.write( "host=" + location.host + " " ); document.write( "pathname=" + location.pathname + " " ); document.write( "protocol=" + location.protocol + " " ); document.write( "Going to my new home page in 5 seconds" + " " ); timerID=setTimeout("leaving()",5000); examples/11_list10-3c.html

AdvWeb-13/14 Navigator Object u Here are more properties: – appName - a simple name of the browser – platform - hardware plaform running on – language - the language supported (e.g., en- english or fr - french). – appVersion - the version # of the borwser.

AdvWeb-14/14 Navigator Object Navigator Object var x = 0; var colors= new Array("#CCFFFF", "#ff0000", "#00ff00"); document.bgColor="#ffff00"; document.write( "browser=" + navigator.appName + " " ); document.write( "version=" + navigator.appVersion + " " ); document.write( "platform=" + navigator.platform + " " ); document.write( "language=" + navigator.language + " " ); – examples/11_list10-5.html