1. Project 9: Exploring the Document Object Essentials for Design JavaScript Level One Michael Brooks

2. Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 Objectives Change color properties Use properties of the links object Employ the anchors array

3. Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Objectives (continued) Assign the title property Use the location and URL properties Control document loading Implement history methods

4. Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 Why Would I Do This? The document object:  represents the HTML code that: exists within an individual window object gives us a way to interact with various elements of the HTML code  contains many objects that represent various aspects of the HTML code contained in the document

5. Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Why Would I Do This? (continued) Objects are represented by arrays An array:  is a temporary storage space for information  is different from a variable because it takes on multiple elements

6. Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Why Would I Do This? (continued) In JavaScript:  the first element of an array is usually referred to as [0]  most HTML tags are represented by an element in the matching array

7. Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Why Would I Do This? (continued) Many objects exist within the document object, to represent HTML elements such as:  image objects to represent tags  link objects to represent tags  form objects to represent tags

8. Copyright (c) 2004 Prentice-Hall. All rights reserved. 8 Visual Summary The document object contains various objects, methods and properties designed to interact with the HTML document Collectively, this group is referred to as the Document Object Model (DOM) The Document Object Model

9. Copyright (c) 2004 Prentice-Hall. All rights reserved. 9 Visual Summary (continued)

10. Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 Changing Color Properties HTML allows various color properties to be set by the user such as:  The background color of a Web page  The color of text displayed on that page Other color properties can control the color of hyperlinks  This statement changes the default background color to dark blue

11. Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 Changing Color Properties (continued) When color is written as a hexadecimal number which represents RGB color values:  The first two digits represent the amount of red  The second two digits represent the amount of green  The third two digits represent the amount of blue

12. Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Changing Color Properties (continued) Designers can also choose to represent colors using simple names such as in the following example Color attributes from HTML also have matching representation in JavaScript  These attributes can be accessed through properties of the document object

13. Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Changing Color Properties (continued) Changing Default Link Colors  Every Web browser sets default link colors for: links active links visited links  Link colors can be set using hexadecimal colors or color names

14. Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Changing Color Properties (continued) alinkColor  The alinkColor property is used to display the active link the active link is the currently active link that will be displayed if you click the mouse on it or press the return key  If you wanted to set the alinkColor property to white, you could type the following statement: document.alinkColor="#FFFFFF";

15. Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Changing Color Properties (continued) linkColor  The linkColor property holds the default color used to display hyperlinks  Hyperlinks which have not been currently selected and have not been recently visited will appear in the color specified by this property

16. Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Changing Color Properties (continued) vlinkcolor  The vlinkColor property represents links which have been recently visited by the Web browser Every Web browser keeps a history list of URLs or files that have been recently visited If a hyperlink represents a file that is cataloged in the history listed, it will appear in the color represented by the vlinkColor property

17. Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 Changing Color Properties (continued) Changing the background color property  The bgColor property allows us to specify the background color of the HTML document  This property represents the same value that can be set using the bgcolor attribute of the tag  To set the background color to red, we could write the following command document.bgColor="#FF0000";

18. Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Changing Color Properties (continued) Changing the foreground color property  The fgColor property allows us to specify the foreground color of the HTML document  The foreground color represents the default text color specified in the tag of an HTML document

19. Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Changing Color Properties (continued)  The following command allows us to set the foreground color property to red. document.fgColor="#FF0000";  This property represents the same value as the text attribute of the HTML tag  The following line of HTML code will achieve the same result:

20. Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Changing Color Properties (continued) Link Color Properties  In most browsers, the link colors will change to purple to indicate a link to a site we have previously visited

21. Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 Changing Color Properties (continued) main.html - demonstrates link color properties // change link color properties document.alinkColor="#CC0000";// dark red document.vlinkColor="#666666"; // dark gray document.linkColor="#FF0000";// bright red Main Page Links: Main About Us Products Most links on the main page will appear in dark gray since we have recently visited these pages

22. Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Changing Color Properties (continued) Set Background and Foreground Colors backgroundcolor.html This page demonstrates various color properties. alert("Hello!"); The background and foreground of the page are set

23. Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 Changing Color Properties (continued) backgroundcolor.html This page demonstrates various color properties. alert("Hello!"); //set background to white document.bgColor="#FFFFFF"; // set text to black document.fgColor="#000000"; The background and foreground colors of the page change

24. Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 Using Properties of the Links Object Many tags in HTML also have matching objects in JavaScript  This allows JavaScript to access and control various aspects of HTML  JavaScript also creates an array to keep track of each type of object it creates each object is referenced as an element of the array

25. Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 Using Properties of the Links Object (continued) The array that stores information about hyperlinks is referred to as the links array Each object referenced in the array is referred to as a link object

26. Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 Using Properties of the Links Object (continued) The links Array and Link Object  Whenever an tag is used in the HTML code to create a link, an entry is made in the links array for the document  Aside from creating an entry in the links array, a link object is also created by JavaScript  Each link object contains a variety of properties which describe characteristics of each hyperlink in the HTML document

27. Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 Using Properties of the Links Object (continued)  HTML documents create hyperlinks with statements such as: Against the Clock Website  Assuming this link is the first hyperlink in the HTML document, it can be referred to in JavaScript in the following manner: document.links[0]

28. Copyright (c) 2004 Prentice-Hall. All rights reserved. 28 Using Properties of the Links Object (continued)  The link object has number of useful properties: the link.href property specifies the entire hypertext reference specified in a HTML hyperlink the link.pathname property, which includes the path to the file, not including the domain name  Commonly used link properties Commonly used link properties

29. Copyright (c) 2004 Prentice-Hall. All rights reserved. 29 Using Properties of the Links Object (continued) PropertyRepresents hrefentire URL entered in hyperlink domaindomain name in a URL hashinternal anchor links in a URL (such as #products). innerHTMLtext between the and tags pathnamepath to the a file, not including the domain name protocolthe protocol in a hyperlink, such as http:,ftp:, or mailto: searcha search string appended to a URL such as ?category=12 targetthe target for the link (such as _blank, _parent, or _self)

30. Copyright (c) 2004 Prentice-Hall. All rights reserved. 30 Using Properties of the Links Object (continued)  Properties such as href and target represent the same information as the HTML attributes of the same name  Consider the following line of HTML code as an example. Secure, Inc.  The target property would be _blank

31. Copyright (c) 2004 Prentice-Hall. All rights reserved. 31 Using Properties of the Links Object (continued) Using Properties of the Links Object linkshref.html Against the Clock document.write("Link object href: " + document.links[0].href); The href property contains the text specified in the href attribute of the tag.

32. Copyright (c) 2004 Prentice-Hall. All rights reserved. 32 Using Properties of the Links Object (continued) Use the Pathname Property linkshref.html Against the Clock document.write("Link object href: " + document.links[0].href); document.write(" "); document.write("Link object pathname: " + document.links[0].pathname); The pathname is the location of the file not including the domain name

33. Copyright (c) 2004 Prentice-Hall. All rights reserved. 33 Using Properties of the Links Object (continued)  URL parameters pass information from one page to another by including a question mark and additional info on the end of a URL in a hyperlink: The information starting with the question mark can be accessed using the link.search property href="products.html?product=ovens"

34. Copyright (c) 2004 Prentice-Hall. All rights reserved. 34 Using Properties of the Links Object (continued)  The link.innerHTML property holds the text shown in the browser for the link This property is useful, but only available in Internet Explorer 5.0 and later and version 6.0 and later of the Netscape Navigator browser

35. Copyright (c) 2004 Prentice-Hall. All rights reserved. 35 Employing the Anchors Array Text anchors are used in HTML to create a link to somewhere else in the HTML document  The point to be linked to is known as an anchor an anchor is simply an tag that has a name attribute:  We can use the following command in our HTML code to create a link to the "F" section of our glossary page: go to F section

36. Copyright (c) 2004 Prentice-Hall. All rights reserved. 36 Employing the Anchors Array (continued) You can link to a named anchor in an external document by specifying the filename in the link: F The anchors array represents each text anchor as specified in the HTML code:  To output the name of the second anchor object to the screen, we could write the following statement: document.write("Anchors object: " + document.anchors[1].name);

37. Copyright (c) 2004 Prentice-Hall. All rights reserved. 37 Employing the Anchors Array (continued) Use the Anchor Object  Text anchors can be created in JavaScript as well as HTML Book Index  The following code will create the same anchor on a string of text (or variable) called myString var myString = "Book Index"; document.write(myString.anchor("bookanchor"))

38. Copyright (c) 2004 Prentice-Hall. All rights reserved. 38 Assigning the Title Property The title property holds the title specified within the and tags of the HTML document  This is the text that appears in the title bar of most browsers Home of the JavaScript Master! We can output the title property to the screen with the following statement: document.write(document.title);

39. Copyright (c) 2004 Prentice-Hall. All rights reserved. 39 Assigning the Title Property (continued) The title property holds the title specified within the and tags of the HTML document  This is the text that appears in the title bar of most browsers Home of the JavaScript Master! We can output the title property to the screen with the following statement: document.write(document.title);  Example Example

40. Copyright (c) 2004 Prentice-Hall. All rights reserved. 40 Assigning the Title Property (continued) Home of the JavaScript Master! document.write(document.title);

41. Copyright (c) 2004 Prentice-Hall. All rights reserved. 41 Assigning the Title Property (continued) The title property can also be changed by assigning a new text string to the property  In newer browsers, this will cause the title bar to change the title message The title of the page can be changed after the page is loaded in Internet Explorer version 5 and above and in Netscape Navigator version 6 and newer

42. Copyright (c) 2004 Prentice-Hall. All rights reserved. 42 Assigning the Title Property (continued) Change the Title of the Page Dynamically My Cool Site Click here to change the title to say: My Hot Site If you choose, the link and your title bar should change to say "My Hot Site"

43. Copyright (c) 2004 Prentice-Hall. All rights reserved. 43 Using the location and URL Properties The Location Property  The location property holds the address of the current HTML document  Changing the location property forces the Web browser to load the page stored at the new address: document.location="http://www.againsttheclock.com";  As of the writing of this book, the location and URL properties are commonly used in many Web sites

44. Copyright (c) 2004 Prentice-Hall. All rights reserved. 44 Using the location and URL Properties (continued) The URL Property  The URL property is almost identical to the location property  In Internet Explorer, changing the URL property will force the browser to load the new page  In Netscape Navigator, changing the URL property will not change the current page

45. Copyright (c) 2004 Prentice-Hall. All rights reserved. 45 Using the location and URL Properties (continued) Use the Location Property location.html This page will redirect to Against the Clock document.location="http://www. againsttheclock.com"; The page will redirect to the Against The Clock Web site

46. Copyright (c) 2004 Prentice-Hall. All rights reserved. 46 Controlling Document Loading The location property:  Is the most useful since it is better supported in most browsers  Is also an object in JavaScript, known as the location object the location object allows us to change the browser’s URL or reload the current document

47. Copyright (c) 2004 Prentice-Hall. All rights reserved. 47 Controlling Document Loading (continued) Methods also exist which will allow us to change the current URL  Methods of the location object are used for this purpose  The primary methods of the location object are: assign() reload() replace()

48. Copyright (c) 2004 Prentice-Hall. All rights reserved. 48 Controlling Document Loading (continued) ASSIGN()  The assign() method loads a new HTML document : location.assign("http://www.againsttheclock.com");  If we were using a relative hyperlink the statement would be written in this fashion: location.assign("index.html");  The href property performs the same function in JavaScript as the assign() method: location.href="http://www.againsttheclock.com" ;  Performs the same function as location.assign("http://www.againsttheclock.com");

49. Copyright (c) 2004 Prentice-Hall. All rights reserved. 49 Controlling Document Loading (continued) reload()  The reload() method: reloads the current HTML document performs the same function as choosing the Reload button in Netscape or the Refresh button in Internet Explorer  Using the reload() method without arguments will cause the page to reload if any changes have been made to the file location.reload();

50. Copyright (c) 2004 Prentice-Hall. All rights reserved. 50 Controlling Document Loading (continued) We can specify a Boolean argument of true to force the browser to reload the page even if the page hasn't changed location.reload(true);

51. Copyright (c) 2004 Prentice-Hall. All rights reserved. 51 Controlling Document Loading (continued) replace()  The replace() method replaces the currently loaded URL with a different one location.replace("newfile.html");

52. Copyright (c) 2004 Prentice-Hall. All rights reserved. 52 Controlling Document Loading (continued) Use reload()  Forcing the browser to reload the page, even if the page hasn't changed might be useful in situations where the page changes based on choices made by the user Example

53. Copyright (c) 2004 Prentice-Hall. All rights reserved. 53 Controlling Document Loading (continued) reload.html relo ad this page This text is new.

54. Copyright (c) 2004 Prentice-Hall. All rights reserved. 54 Controlling Document Loading (continued) Use replace()  The replace() method is often useful in e- commerce applications. for security reasons, we may not want a Web surfer to be able to return to the last document when we are gathering sensitive information or processing an e- commerce transaction.  Example Example

55. Copyright (c) 2004 Prentice-Hall. All rights reserved. 55 Controlling Document Loading (continued) replace.html location.replace("http://www.ag ainsttheclock.com");

56. Copyright (c) 2004 Prentice-Hall. All rights reserved. 56 Implementing History Methods Browsers were designed to be easy enough for anyone to use Each browser window has a unique history list JavaScript creates a history object for each open browser window The history object allows us to access and manipulate the contents of the browser's history list  This is often used to create back or forward buttons within a web interface which will perform the same actions as the back and forward buttons in the browser

57. Copyright (c) 2004 Prentice-Hall. All rights reserved. 57 Implementing History Methods (continued) back()  The back() method of the history object allows us to change a browser window to the previous page in the history list history.back();  By incorporating an event handler with the back() method, we can create a button which will perform the same command as the browser's back button:

58. Copyright (c) 2004 Prentice-Hall. All rights reserved. 58 Implementing History Methods (continued) FORWARD()  The forward() method of the history object allows us to change a browser window to the next page in the history list history.forward(); go()  The go() method allows the browser to jump forward or backward anywhere in the history list history.go(-2);

59. Copyright (c) 2004 Prentice-Hall. All rights reserved. 59 Implementing History Methods (continued) Using the History Object to Create Buttons  The history object was originally designed to also hold the names of all URL's in the browser's history list  This capability: gave developers the ability to read a list of sites users had recently visited prompted privacy concerns from browser users and was removed from newer browsers  Example Example

60. Copyright (c) 2004 Prentice-Hall. All rights reserved. 60 Implementing History Methods (continued) Page 1 Page 1 | Page 2 | Page 3 | Page 4 | Page 5 This is page 1.

61. Copyright (c) 2004 Prentice-Hall. All rights reserved. 61 Recognize Other Methods and Properties The Applets Array  The Java programming language can be used to create applets an applet is a self-contained computer program, often used with Web sites Java applets can be inserted into an HTML document by using the tag the applets array in JavaScript creates an element for every use of the tag in the HTML document

62. Copyright (c) 2004 Prentice-Hall. All rights reserved. 62 Recognize Other Methods and Properties (continued) The forms Array  Every time the and tag is used in the HTML document, JavaScript creates a corresponding object in the forms array  The form object: is a sub-part of the document object has sub-objects associated with each part of the form

63. Copyright (c) 2004 Prentice-Hall. All rights reserved. 63 Recognize Other Methods and Properties (continued) The images Array  Whenever an tag is used in HTML, a corresponding entry is made in JavaScript within the images array the entries in the images array can be used to create image rollovers and manipulate images to create animation each element of the images array contains information about an image object each image object represents an image shown on the page

64. Copyright (c) 2004 Prentice-Hall. All rights reserved. 64 Recognize Other Methods and Properties (continued) The Lastmodified Property  The lastModified property holds the date when the HTML file was last saved onto a disk document.write("Document last updated: " + document.lastModified);  The lastModified property is useful for pages containing time sensitive information

65. Copyright (c) 2004 Prentice-Hall. All rights reserved. 65 Recognize Other Methods and Properties (continued) Document Object Methods  open() and close() the open() and close() methods are methods of the window object and methods of the document object  write and writeln both methods simply output text to the browser window unlike the write() method, the writeln() method adds a new line character to the end of the text document.writeln("Hi World!");

66. Copyright (c) 2004 Prentice-Hall. All rights reserved. 66 Recognize Other Methods and Properties (continued) Use the lastModified Property lastmodified.html This page is used to demonstrate the lastModified property of the document object. document.write("This document was last modified "+document.lastModified);