2. Project 3: Understanding the JavaScript Object Model Essentials for Design JavaScript Level One Michael Brooks

3. Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 Objectives Use dot syntax Use the JavaScript Object Model Manipulate the document object Interact with HTML dynamically Incorporate the form object Use non-traditional objects

4. Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Why Would I Do This? An object model is a map of the organizational structure of an OOP environment  The JavaScript Object Model defines the classes of JavaScript objects  In JavaScript, you use dot syntax to separate: object names sub-categories, characteristics other aspects of an object

5. Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 Why Would I Do This? (continued) Objects in JavaScript include:  User-defined objects, which programmers create to bring consistent structure to specific programming tasks  Built-in objects, which are included in the JavaScript language  Browser objects, which control specific aspects of the Web browser  Document objects, which allow the developer to control aspects of HTML and cascading style sheet (CSS) code

6. Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Why Would I Do This? (continued) Reasons for compatibility problems:  Every version of the JavaScript language has a slightly different object model  Every browser typically includes a set of objects designed for use with that particular browser

7. Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Why Would I Do This? (continued) Variables are important foundational elements in every programming and scripting language A variable is a named temporary storage area for a piece of information or an object In JavaScript, when you create a variable, the information assigned to the variable name determines the type of object

8. Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Visual Summary The JavaScript Object Model is the entire scripting language organized into categories  The Browser Object Model is the JavaScript language that has been adapted for Web browsers

9. Copyright (c) 2004 Prentice-Hall. All rights reserved. 8 Visual Summary (continued)  A comprehensive diagram of the Browser Object Model would include the properties and methods of each object The most useful part of the complete object model is the Document Object Model (DOM), since it provides direct control over HTML and CSS coding. Objects in the DOM represent HTML code When JavaScript encounters an HTML tag, JavaScript often creates a matching object to represent the HTML tag  Example of several HTML tags, their matching JavaScript objects, and how the objects are referenced in JavaScript Example of several HTML tags, their matching JavaScript objects, and how the objects are referenced in JavaScript

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

11. Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 Visual Summary (continued) The tag displays an image in HTML  This tag also creates a matching object in JavaScript known as an image object  In JavaScript, you can use the following notation to refer to an image: window.document.images[0]  This code refers to the first image in the HTML document

12. Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 Visual Summary (continued) JavaScript also contains several built-in objects that are useful for a variety of purposes  Examples of built-in objects include: the Math object, which you can use to complete complex mathematical operations the Date object, which makes it easy to manipulate dates and times

13. Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Using Dot Syntax Dot syntax is the primary method for noting the relationship of objects and their associated methods and properties  Using a simple explanation of dot syntax you could write the following pseudo code object.subobject.method() object.subobject.property

14. Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Using Dot Syntax (continued) Using an actual JavaScript method, we can write the following statement using dot syntax: window.document.write("hello");  The document object is a subordinate object of the window object  The write() method belongs to the document object  Example of using dot syntax to specify a property of an image object Example of using dot syntax to specify a property of an image object

15. Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Using Dot Syntax (continued) scenic.html // display a property of the image object alert(window.document.images[0].href ); The first tag is part of the document object (the HTML code), which was part of the window object (the browser window)

16. Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Using the JavaScript Object Model The JavaScript Object Model is the organizational chart for the entire language  Each browser has its own object model, which varies slightly from every other browser’s object model in addition, subordinate objects have their own object models  Understanding the DOM allows you to interact with and change existing HTML code

17. Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Using the JavaScript Object Model (continued) Name an Object  Various aspects of the document object and its subordinate objects often represent objects that have already been created in HTML  You can include a name attribute in most HTML tags to create an object name, which you can then use in JavaScript  Examples of naming an object Examples of naming an object  Example of using the name stored in the name attribute to refer to the property Example of using the name stored in the name attribute to refer to the property

18. Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 Using the JavaScript Object Model (continued) scenic.html // display a property of the image object alert(window.document.images[0].name); The alert() method returns the name property of the image object Next Example

19. Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Using the JavaScript Object Model (continued) scenic.html // display a property of the image object alert(window.document.LittleRiver.height); The value stored in the height property of the object is returned to the user

20. Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Using the JavaScript Object Model (continued) Create a New Window Object  JavaScript allows you to create a new window object by naming and opening a new window Examples of creating a new window Examples of creating a new window

21. Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Using the JavaScript Object Model (continued) openwindow.html var AdWindow=open("","mywin","height =300,width=300"); A second window opens and a matching window object is also created in JavaScript

22. Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 Using the JavaScript Object Model (continued) Manipulate a Second Window Object  In most browsers, the pop-up window (Second Window Object) appears in the upper- left corner Examples of manipulating a second window Examples of manipulating a second window

23. Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Using the JavaScript Object Model (continued) openwindow.html Var AdWindow=open("","mywin","height=300,width=300"); AdWindow.document.write("Free fish with dog purchase!"); // the next statement sends content to the original window window.document.write("This is the original window"); This code is creating a second window object

24. Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 Using the JavaScript Object Model (continued) You use methods to manipulate objects You can also create your own methods by creating functions  Functions are similar to methods, except that the user creates functions, while methods are built into the JavaScript language you can use functions to create custom objects

25. Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 Manipulating the Document Object The document object:  Represents the HTML or CSS code used in the browser  Is the strength behind JavaScript  Is the most revered object in JavaScript The Document Object Model is the most important part of JavaScript

26. Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 Manipulating the Document Object (continued) You can use the various parts of the DOM to complete many different tasks  For example: you may want an image that you created in HTML to display a rollover effect when the user moves her mouse over the image you may want to validate the content of a form you created in HTML to verify that the user entered his email address correctly

27. Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 Manipulating the Document Object (continued) When you create HTML tags, matching objects are created in JavaScript  The JavaScript objects represent the HTML tags  You can use methods or properties of the objects to manipulate the HTML when the browser interprets the script With JavaScript, many additional functions are available to you — functions not available in HTML

28. Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 Manipulating the Document Object (continued) Manipulate a Link Object  Link objects represent tags in the HTML document The link object is designed for use when the tag links to a URL, such as index.html http://www.againsttheclock.com

29. Copyright (c) 2004 Prentice-Hall. All rights reserved. 28 Manipulating the Document Object (continued)  The link object is a part of the document object The keyword “links” is used to denote all links in the HTML document The first object found in a category is always noted as [0] The second link object is noted as links[1], and so forth The target property represents the target attribute of the link object or tag  Example of using the link object Example of using the link object  Example of using the link object attribute “target” Example of using the link object attribute “target”

30. Copyright (c) 2004 Prentice-Hall. All rights reserved. 29 Manipulating the Document Object (continued) links.html PrenticeHall Site alert(window.document.links[0].href); The value stored in the href property appears in the alert box Next Example

31. Copyright (c) 2004 Prentice-Hall. All rights reserved. 30 Manipulating the Document Object (continued) links.html PrenticeHall Site alert(window.document.links[0].target) The value stored in the target attribute displays in the alert box

32. Copyright (c) 2004 Prentice-Hall. All rights reserved. 31 Manipulating the Document Object (continued) Create an Image Object in JavaScript  You can create an image object from within JavaScript  A URL can be assigned as the src (source) property of the image object: myImage.src="scenic.jpg";  This code causes the image to load into the browser’s cache

33. Copyright (c) 2004 Prentice-Hall. All rights reserved. 32 Manipulating the Document Object (continued)  The ability to create image objects in JavaScript and assign the source property allows an image to pre-load into the browser’s cache before the image is used this feature is useful when you create rollover effects and slide shows Example of creating and manipulating an image object Example of creating and manipulating an image object

34. Copyright (c) 2004 Prentice-Hall. All rights reserved. 33 Manipulating the Document Object (continued) imageobject.html // create an image object var myImage= new Image(); myImage.src="scenic.jpg"; // manipulate the image object document.write(myImage.height); The height of the loaded image (206) displays A URL is assigned as the src (source) property of the image object

35. Copyright (c) 2004 Prentice-Hall. All rights reserved. 34 Interacting with HTML Dynamically Since the DOM represents the HTML code in the document, you can use a variety of the DOM features to change the existing HTML code It is possible to create new HTML code from within JavaScript  This is usually done by using the write() or writeln() methods of the document object

36. Copyright (c) 2004 Prentice-Hall. All rights reserved. 35 Interacting with HTML Dynamically (continued)  Consider the following code as an example: document.write(" Hello "); HTML code is embedded into the text string being passed to the method this code is interpreted by the HTML interpreter after being interpreted by the JavaScript interpreter  Consider the end result of this code shown in the following figure Consider the end result of this code shown in the following figure

37. Copyright (c) 2004 Prentice-Hall. All rights reserved. 36 Interacting with HTML Dynamically (continued) The result of this code shown in the included figure document.write(" Hello ");

38. Copyright (c) 2004 Prentice-Hall. All rights reserved. 37 Interacting with HTML Dynamically (continued) Use the innerHTML Property  The innerHTML property represents the text between the and tags you can use the innerHTML property to change the text that appears between a starting HTML tag (such as an tag) and an ending tag (such as an tag) the innerHTML property is useful when you want to change the content of an HTML tag as the result of a user action  Example of using the innerHTML Example of using the innerHTML

39. Copyright (c) 2004 Prentice-Hall. All rights reserved. 38 Interacting with HTML Dynamically (continued) links.html PrenticeHall Site alert(window.document.links[0].innerHT ML); window.document.links[0].innerHTML = "Essentials Series" The text between the and tags displays in the alert window as well as on the Web page

40. Copyright (c) 2004 Prentice-Hall. All rights reserved. 39 Interacting with HTML Dynamically (continued) Write HTML Dynamically  You can create HTML code using the write() method of the document object the ability to create HTML code from within JavaScript is useful for formatting the output of a script and to create professional-looking results  this is virtually impossible to do with JavaScript, since the language offers few formatting options  Example of writing HTML dynamically Example of writing HTML dynamically

41. Copyright (c) 2004 Prentice-Hall. All rights reserved. 40 Interacting with HTML Dynamically (continued) writehtml.html document.write(" so me text "); This code inserts HTML formatting into the text string sent to the document.write() method

42. Copyright (c) 2004 Prentice-Hall. All rights reserved. 41 Interacting with HTML Dynamically (continued) Interact with Dynamically Written HTML  JavaScript objects also represent HTML code that JavaScript creates  This feature is especially useful in advanced scripts Example of interacting with dynamically written HTML Example of interacting with dynamically written HTML

43. Copyright (c) 2004 Prentice-Hall. All rights reserved. 42 Interacting with HTML Dynamically (continued) writehtml.html document.write( " lin k "); document.write(document.links[0].href); The href property of the object displays, even though JavaScript created this object dynamically

44. Copyright (c) 2004 Prentice-Hall. All rights reserved. 43 Using the Form Object When you insert a tag into an HTML document, a form object is created  Traditionally, HTML forms allowed users to insert information that was sent to the server for processing  The server verified that the user entered the information correctly  Using server-side scripting to process the information on a form is often a waste of resources

45. Copyright (c) 2004 Prentice-Hall. All rights reserved. 44 Using the Form Object (continued)  For example: a user enters an invalid email address on a form and he doesn’t realize his error, and submits the form the information travels over the Internet to the server the server devotes processing time to determine if the user entered correct information when the server determines that the information is incorrect, the server responds to the end user and prompts him to fix the error the end user corrects his error, resubmits the form, and the process starts all over again

46. Copyright (c) 2004 Prentice-Hall. All rights reserved. 45 Using the Form Object (continued) A simpler method, client-side scripting, allows the client machine to check for errors before transmitting the information to the server  Using this method, JavaScript can interact with the information entered into the form and check for errors

47. Copyright (c) 2004 Prentice-Hall. All rights reserved. 46 Using the Form Object (continued) The form object and its methods and properties are useful in this situation  The element object represents individual fields in the form: each element in a form is represented by matching element object in JavaScript the value property represents the information stored in a form field  The form object is an excellent example of the usefulness of the object model and JavaScript

48. Copyright (c) 2004 Prentice-Hall. All rights reserved. 47 Using the Form Object (continued) Interact with an HTML Form  You can interact with a form object in JavaScript  Similar to many other objects, a form object results when you insert an HTML tag in your code Example of interaction with a form object in JavaScript Example of interaction with a form object in JavaScript

49. Copyright (c) 2004 Prentice-Hall. All rights reserved. 48 Using the Form Object (continued) form1.html Form Fill up the Form bellow to schedule an appointment: Name: document.write(window.document.forms[0].id); The id property of the form displays below the form; this property was established within the tag

50. Copyright (c) 2004 Prentice-Hall. All rights reserved. 49 Using the Form Object (continued) Write Object Paths  Some objects require that the word document be specified so JavaScript knows that the object exists within the document object  In many cases, you can refer to the object by the name assigned in the name property this is not consistent within JavaScript and it can create confusion for novice programmers  Examples of common ways to write pathways to objects Examples of common ways to write pathways to objects

51. Copyright (c) 2004 Prentice-Hall. All rights reserved. 50 Using the Form Object (continued) document.write(forms[0].id);Incorrect path document.write(document.forms[0].id)Correct path document.write(myForm.id);Correct path  Example of incorrect way to write pathways to objects Example of incorrect way to write pathways to objects

52. Copyright (c) 2004 Prentice-Hall. All rights reserved. 51 Using the Form Object (continued) form1.html Form Fill up the Form bellow to schedule an appointment: Name: document.write(forms[0].id); Most browsers generate errors, if error notifications are enabled, the code statement is not executed and the browser fails to recognize the form object

53. Copyright (c) 2004 Prentice-Hall. All rights reserved. 52 Using the Form Object Access an Element of a Form Tag  You can use the dot syntax and the object model to refer to a form element the form element is an object that represents the individual parts of a form the form exists within document object, which exists within the window object Two examples of ways to access an element of a Form Tag Two examples of ways to access an element of a Form Tag

54. Copyright (c) 2004 Prentice-Hall. All rights reserved. 53 Using the Form Object (continued) form1.html Form Fill up the Form bellow to schedule an appointment: Name: document.write(myForm.elements[0].name); The name of the form element displays in the browser window below the form Second example

55. Copyright (c) 2004 Prentice-Hall. All rights reserved. 54 Using the Form Object (continued) form1.html Form Fill up the Form bellow to schedule an appointment: Name: document.write(myForm.firstName.name); This code allows the name specified in the name attribute of the HTML tag to be accessed through the element object

56. Copyright (c) 2004 Prentice-Hall. All rights reserved. 55 Using the Form Object (continued) Return the Value Stored in a Form  The form element is an object that represents the individual parts of a form  When you extract information from an HTML form, always remember to include the value property when referring to a form element; otherwise, an error will be generated Example of returning the value stored in a Form Example of returning the value stored in a Form

57. Copyright (c) 2004 Prentice-Hall. All rights reserved. 56 Using the Form Object (continued) form2.html function checkValue() {alert(myForm.firstName.value);} Form Fill up the Form bellow to schedule an appointment: Name: This code creates the function checkValue(), which triggers when the user clicks the submit button

58. Copyright (c) 2004 Prentice-Hall. All rights reserved. 57 Using Non-Traditional Objects A constructor method is a method which can be used to generate a new object  A number of built-in objects exist in JavaScript - ones not typically considered “objects” : these objects include the Date object, Math object, and String object  the Date object is different from most of the objects you have created  you create the Date object specifically to hold date or time information, and to make this information easy to manipulate

59. Copyright (c) 2004 Prentice-Hall. All rights reserved. 58 Using Non-Traditional Objects (continued) Use a Constructor Method to Create an Object  You can use a constructor method to create a Date object  Most constructor methods use the keyword “new” followed by the type of object being created  The keyword new indicates that a new object is being created, based on the Date class of objects  Example of using a constructor method to create a Date object Example of using a constructor method to create a Date object

60. Copyright (c) 2004 Prentice-Hall. All rights reserved. 59 Using Non-Traditional Objects (continued) constructor.html // this code creates a new date object currentTime=new Date(); document.write(currentTime); This code uses a constructor method to create a new Date object named currentTime

61. Copyright (c) 2004 Prentice-Hall. All rights reserved. 60 Using Non-Traditional Objects (continued) Create a Date Object with a Specific Day and Time  You can create a Date object by creating a variable and using a constructor function  The Date object can also be created as a variable  Example of Creating a Date Object with a Specific Day and TimeExample of Creating a Date Object with a Specific Day and Time

62. Copyright (c) 2004 Prentice-Hall. All rights reserved. 61 Using Non-Traditional Objects (continued) constructor.html // this code creates a new date object specificDate=new Date("October 18, 1969 15:40:00"); document.write(specificDate); This code inserts a new Date object called specificDate, as well as stores October 18, 1969 as the date, and 3:40 pm as the time

63. Copyright (c) 2004 Prentice-Hall. All rights reserved. 62 Using Non-Traditional Objects (continued) Use a Variable as an Object  A variable is actually an object and can use object methods  The type of information stored within the variable determines the type of object  You can use string methods to manipulate string objects Example of Using a Variable as an Object

64. Copyright (c) 2004 Prentice-Hall. All rights reserved. 63 Using Non-Traditional Objects (continued) variable.html // this code creates a variable myName="Michael"; document.write(myName.toUpperCase()); The value stored in the string object converts to uppercase letters because of the toUpperCase() method

65. Copyright (c) 2004 Prentice-Hall. All rights reserved. 64 Using Non-Traditional Objects (continued) Use the History Object  The history object represents the browser’s history list  The history methods allow you to manipulate the history list  Example of Using the History Object Example of Using the History Object Did anybody say … History?

66. Copyright (c) 2004 Prentice-Hall. All rights reserved. 65 Using Non-Traditional Objects (continued) historyobject1.html This is the historyobject2.html page. go back Browser loads the file recorded in the browser’s history list

67. Copyright (c) 2004 Prentice-Hall. All rights reserved. 66 Using Non-Traditional Objects (continued) Use the String Object Example of Using the String Object alert("The dimensions of this image are “ + window.document.A17thCenturyHouse.height + ' X ‘ + window.document.A17thCenturyHouse.width);

68. Copyright (c) 2004 Prentice-Hall. All rights reserved. 67 Using Non-Traditional Objects (continued) stringobject.html firstName="mike"; document.write(firstName+" "); document.write(firstName.toUpperCase()); Code displayed in the IE browser