link and embed objects. link object properties, methods, and event handlers propertiesmethodsevent...

Link and embed objects

Link ObjectProperties, Methods, and Event Handlers

Properties Methods Event Handlerslinks[i].target (none) onclicklinks[i].hash ondblclick

links[i].host onmousedown

links[i].hostname onmouseout

links[i].href onmouseover

links[i].pathname onmouseup

links[i].port

links[i].protocol

links[i].search

Using Link Object PropertiesAll of the Link object properties are both read and write.

For example:var URL = document.links[0].href;document.links[0].href =

“http://robertstanek.com”

Example: Accessing Link Properties

<html><head><title>Working with Links</title></head><body><h1>My Links</h1><p><a href="http://www.robertstanek.com/">Robert Stanek Page</a></p><p><a href="http://www.ruinmist.com/">Ruin Mist Page</a></p><p><a href="http://ruinmist.proboards23.com/">Ruin Mist Discussion</a></p>

<script type="text/javascript">document.write("<p>I hope you'll visit " + document.links[0].href + ". You might also like to visit " + document.links[1].href + ". And if you are interested in discussion, stop by " + document.links[2].href + ".</p>");</script></body></html>

Using Anchor Object PropertiesThe number of anchors in a document can be determined by using the .anchors object and the length property.

For example:numOfAnchors = document.anchors.length;alert(numOfAnchors);

Using Anchor Objects for Navigation<html><head><title>Using the Anchor Object</title><script type="text/javascript"> function nextAnchor(theAnchor) { window.location.hash = theAnchor; } </script></head><body><h1><a id="intro" name="intro">Introduction</a></h1><p>This is the introduction.</p><form> <input type="button" name="next" value="Next Section" onclick="nextAnchor('section1')" /></form><hr size="2"/>

Using Anchor Objects for Navigation(continued)<h1><a id="section1" name="section1">Section 1</a></h1><p>This is section 1.</p><form> <input type="button" name="next" value="Next Section" onclick="nextAnchor('section2')" /></form><hr size="2"/>

<h1><a id="section2" name="section2">Section 2</a></h1><p>This is section 2.</p><form> <input type="button" name="next" value="Next Section" onclick="nextAnchor('section3')" /></form><hr size="2"/>

<h1><a id="section3" name="section3">Section 3</a></h1><p>This is section 3.</p><form> <input type="button" name="next" value="Next Section" onclick="nextAnchor('section4')" /></form><hr size="2"/>

Using Anchor Objects for Navigation(continued)<h1><a id="section4" name="section4">Section 4</a></h1><p>This is section 4.</p><form> <input type="button" name="next" value="Back To Top" onclick="nextAnchor('intro')" /></form><hr size="2"/><p><script type="text/javascript">document.write("<p>This page has " + document.anchors.length + "

anchors defined</p>")</script></p></body></html>

Embedded Object Properties, Methods, and Event Handlers

Properties Methods Event Handlersalign (Object Methods) oncellchange

alt ondatavailablealtHTML ondatasetchangedarchive ondatasetcomplete

BaseHref onloadbaseURI onrowenterborder onrowexitclassid onrowsdeletecode onrowsinserted

codeBase onscrollcontentDocument

codeType

Embedded Object Properties, Methods, and Event HandlersProperties Methods Event Handlers

dataform

heighthspacenameobjecttype

useMapvspacewidth

(Object Variables)

Example:Displaying Detail Information of an Embedded Object<html><head><title>Using Embedded Objects</title></head><body>

<h1>Media Player</h1><object id="mediaPlayer" width="300" height="200"classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"codebase="#Version=1,0,0,0"></object>

<h1>Details</h1>

<script type="text/javascript">document.write("<p>Classid : " + document.getElementById('mediaPlayer').classid + "</p>");document.write("<p>Codebase : " + document.getElementById('mediaPlayer').codeBase +

"</p>");document.write("<p>Height : " + document.getElementById('mediaPlayer').height + "</p>");document.write("<p>Width : " + document.getElementById('mediaPlayer').width + "</p>");</script>

</body></html>

LabStep 1: <html> <head> <title> Week 8 Practice </title> // Enter your script here </head> <body> <h1>Welcome to My Home Page!</h1>

// Enter your form here</body>

</html>

LabStep 2:Write a multiple choice quiz. It has 3

questions and for each question, the user can only select 1 answer. After the user submit his choices, alert him which question is right and which question is wrong.

link and embed objects. link object properties, methods, and event handlers propertiesmethodsevent...

Documents