Link and embed objects

1
Link and embed objects
2
Link ObjectProperties, Methods, and Event
Handlers
3
Using Link Object Properties

• All of the Link object properties are both read
  and write.
• For example
• var URL document.links0.href
• document.links0.href http//robertstanek.com
  

4

• Example Accessing Link Properties

lthtmlgt ltheadgt lttitlegtWorking with
Linkslt/titlegt lt/headgt ltbodygt lth1gtMy
Linkslt/h1gt ltpgtlta href"http//www.robertstanek.com
/"gtRobert Stanek Pagelt/agtlt/pgt ltpgtlta
href"http//www.ruinmist.com/"gtRuin Mist
Pagelt/agtlt/pgt ltpgtlta href"http//ruinmist.proboards
23.com/"gtRuin Mist Discussionlt/agtlt/pgt ltscript
type"text/javascript"gt document.write("ltpgtI hope
you'll visit " document.links0.href ". You
might also like to visit " document.links1.hre
f ". And if you are interested in discussion,
stop by " document.links2.href
".lt/pgt") lt/scriptgt lt/bodygt lt/htmlgt
5
Using Anchor Object Properties

• The 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)

6
Using Anchor Objects for Navigation

• lthtmlgt
• ltheadgt
• lttitlegtUsing the Anchor Objectlt/titlegt
• ltscript type"text/javascript"gt
• function nextAnchor(theAnchor)
• window.location.hash theAnchor
• lt/scriptgt
• lt/headgt
• ltbodygt
• lth1gtlta id"intro" name"intro"gtIntroductionlt/agtlt/h
  1gt
• ltpgtThis is the introduction.lt/pgt
• ltformgt
• ltinput type"button" name"next" value"Next
  Section"
• onclick"nextAnchor('section1')" /gt
• lt/formgt
• lthr size"2"/gt

7
Using Anchor Objects for Navigation(continued)

• lth1gtlta id"section1" name"section1"gtSection
  1lt/agtlt/h1gt
• ltpgtThis is section 1.lt/pgt
• ltformgt
• ltinput type"button" name"next" value"Next
  Section"
• onclick"nextAnchor('section2')" /gt
• lt/formgt
• lthr size"2"/gt
• lth1gtlta id"section2" name"section2"gtSection
  2lt/agtlt/h1gt
• ltpgtThis is section 2.lt/pgt
• ltformgt
• ltinput type"button" name"next" value"Next
  Section"
• onclick"nextAnchor('section3')" /gt
• lt/formgt
• lthr size"2"/gt
• lth1gtlta id"section3" name"section3"gtSection
  3lt/agtlt/h1gt
• ltpgtThis is section 3.lt/pgt
• ltformgt

8
Using Anchor Objects for Navigation(continued)

• lth1gtlta id"section4" name"section4"gtSection
  4lt/agtlt/h1gt
• ltpgtThis is section 4.lt/pgt
• ltformgt
• ltinput type"button" name"next" value"Back To
  Top"
• onclick"nextAnchor('intro')" /gt
• lt/formgt
• lthr size"2"/gt
• ltpgt
• ltscript type"text/javascript"gt
• document.write("ltpgtThis page has "
  document.anchors.length " anchors definedlt/pgt")
• lt/scriptgt
• lt/pgt
• lt/bodygt
• lt/htmlgt

9
Embedded Object Properties, Methods, and Event
Handlers
10
Embedded Object Properties, Methods, and Event
Handlers
11
ExampleDisplaying Detail Information of an
Embedded Object

• lthtmlgt
• ltheadgt
• lttitlegtUsing Embedded Objectslt/titlegt
• lt/headgt
• ltbodygt
• lth1gtMedia Playerlt/h1gt
• ltobject id"mediaPlayer" width"300" height"200"
• classid"CLSID22d6f312-b0f6-11d0-94ab-0080c74c7e9
  5"
• codebase"Version1,0,0,0"gtlt/objectgt
• lth1gtDetailslt/h1gt
• ltscript type"text/javascript"gt
• document.write("ltpgtClassid "
  document.getElementById('mediaPlayer').classid
  "lt/pgt")
• document.write("ltpgtCodebase "
  document.getElementById('mediaPlayer').codeBase
  "lt/pgt")
• document.write("ltpgtHeight "
  document.getElementById('mediaPlayer').height
  "lt/pgt")
• document.write("ltpgtWidth " document.getElement
  ById('mediaPlayer').width "lt/pgt")
• lt/scriptgt

12
Lab

• Step 1 lthtmlgt
• ltheadgt
• lttitlegt Week 8 Practice lt/titlegt
• // Enter your script here
• lt/headgt
• ltbodygt
• lth1gtWelcome to My Home Page!lt/h1gt
• // Enter your form here
• lt/bodygt
• lt/htmlgt

13
Lab

• Step 2Write 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.