OBJECTIVE

• Assign and retrieve object properties.  
• Use object methods. 

DISCUSSION

• Use names of built-in objects. For example...
  • window.
  • document.
  • Math.
• Use name or ID attribute of form elements. 
  • If the element is in a form then you must preface the name/id with the form name.
• Use ID attribute of tags. Example for a div with an id = myDiv:
  • myDiv. //works in IE and ??
  • document.getElementById("mydiv")//Should work in all browsers
• Other ways to refer to an element:
  • document.all.myDiv (Internet Explorer)
  • document.layers (Netscape)

• Characteristics of an object
• Examples:
  • document.bgColor
  • window.status
  • btnSubmit.value
• Can assign property...
  • document.bgColor = "yellow"
  • myDiv.innerText = "hi"  //works in IE, NOT in Mozilla.
  • document.getElementById("myDiv").innerHTML = "hi" //should work in all browsers ?? 
  • document.getElementById("myDiv").innerText = "Hi"  //should work in all browsers
• Can use property...
  • alert(divMyDiv.innerText)  //works in IE and ??
  • alert (document.getElementById('myDiv').innerText) //works in IE, Mozilla does not support innerText 

Methods

• Actions that an object can do
• Examples:
  • window.alert()
  • window.prompt()
  • document.write()

Examples:  

• js6_3Demo1
• Copy and paste the following into the body section in CodeTester:

EXERCISES

1.  What happens if you have two objects in which the name of one is the same as the name of another? We will answer this question by using the following code.  

<input id="b1" onclick="alert(b1.value); alert(b2.value)" type="button" value="id = b1 and name = b2" name="b2" />
<input id="b2" onclick="alert(b2.value); alert(b1.value)" type="button" value="id = b2 and name = b1" name="b1" />

a.  Copy and paste the following code into code tester.  Run the program and observe the alerts. What happens?

b.  Change the name of the first button from "b2" to "b2n". Run the program.  What happens?

c.  Change the name of the second button from "b1" to "b1n".  Run the program.  What happens? 

d.  What are your conclusions from this experiment with respect to giving objects the same names and id's?

2.  Create a web page. When it loads, a prompt should appear.  The title of the document should be set to whatever the user types in the prompt.  The prompt method returns whatever the user typed into the box.

3. There are multiple ways that you can refer to an element in JavaScript.  List 4 different ways that you could use document.write to display the innerText of a div called myDiv.  You should demonstrate on a web page.   For example, you could use document.write(myDiv.innerText). Also, don't forget about document.all.

4.  Create a form with a textbox and a button.  Add some default text to the textbox. Add an alert to indicate that the page has loaded. After the alert is displayed, assign the value of the textbox to the button.

5. Create a form with two radio buttons labelled blue and red.  Make the blue button be checked by default.  When the page loads, display the values of each radio button in an alert and display the status of whether or not the button is checked.

6. Visit one of the links and determine the methods for the window and document objects.

7.  Create a page with a button.  When the page loads, a prompt should appear asking the user for a word.  After the user clicks the OK on the prompt, the word should appear on the face of the button.  Then an alert should appear. The alert should display the ID of the button.

8.  Create a page with a DIV.  When the page loads, a prompt should appear asking the user for a word.  After the user clicks the OK on the prompt, the word should appear in the DIV.  Then an alert should appear. The alert should display the ID of the DIV.

9. Create a page that meets the following requirements:

• It has two DIV's.
• When the page loads
• A PROMPT requests the user to enter a word. That word is displayed in one of the DIV's.
• Another PROMPT appears requesting the user to enter another word. That word is displayed in the other DIV.
• After the PROMPT's appear and the DIV's are set:
• An ALERT appears to display the title of the document.
• The status bar is then set to the word in the first DIV.
• The first DIV is set to the word in the second DIV.
• The second DIV is set to the word in the status bar.

LINKS AND HELP