Your SlideShare is downloading. ×
0
Week31
Week31
Week31
Week31
Week31
Week31
Week31
Week31
Week31
Week31
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Week31

1,975

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,975
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML DOM Object
  • 2. Document Object, Write text to the Output Screen <ul><li>&lt;html&gt; </li></ul><ul><li>&lt;body&gt; </li></ul><ul><li>&lt;script type=&amp;quot;text/javascript&amp;quot;&gt; </li></ul><ul><li>document.write(&amp;quot;Hello World!&amp;quot;) </li></ul><ul><li>&lt;/script&gt; </li></ul><ul><li>&lt;/body&gt; </li></ul><ul><li>&lt;/html&gt; </li></ul>
  • 3. Document Object: Write Text with Embedded HTML <ul><li>&lt;html&gt; </li></ul><ul><li>&lt;body&gt; </li></ul><ul><li>&lt;script type=&amp;quot;text/javascript&amp;quot;&gt; </li></ul><ul><li>document.write(&amp;quot;&lt;h1&gt;Hello World!&lt;/h1&gt;&amp;quot;) </li></ul><ul><li>&lt;/script&gt; </li></ul><ul><li>&lt;/body&gt; </li></ul><ul><li>&lt;/html&gt; </li></ul>
  • 4. Document Object: Use GetElementById() <ul><li>&lt;html&gt; </li></ul><ul><li>&lt;head&gt; </li></ul><ul><li>&lt;script type=&amp;quot;text/javascript&amp;quot;&gt; </li></ul><ul><li>function getElement() { </li></ul><ul><li>var x=document. getElementById (&amp;quot; myHeader &amp;quot;) </li></ul><ul><li>alert(&amp;quot;I am a &amp;quot; + x.tagName + &amp;quot; element&amp;quot;) </li></ul><ul><li>} </li></ul><ul><li>&lt;/script&gt; </li></ul><ul><li>&lt;/head&gt; </li></ul><ul><li>&lt;body&gt; </li></ul><ul><li>&lt;h1 id=&amp;quot; myHeader &amp;quot; onclick=&amp;quot;getElement()&amp;quot;&gt;Click to see what element I am!&lt;/h1&gt; </li></ul><ul><li>&lt;/body&gt; </li></ul><ul><li>&lt;/html&gt; </li></ul>
  • 5. Document Object: Use getElementByName() <ul><li>&lt;html&gt; </li></ul><ul><li>&lt;head&gt; </li></ul><ul><li>&lt;script type=&amp;quot;text/javascript&amp;quot;&gt; </li></ul><ul><li>function getElements() { </li></ul><ul><li>var x=document. getElementsByName (&amp;quot; myInput &amp;quot;) </li></ul><ul><li>alert(x.length + &amp;quot; elements!&amp;quot;) </li></ul><ul><li>} </li></ul><ul><li>&lt;/script&gt; </li></ul><ul><li>&lt;/head&gt; </li></ul><ul><li>&lt;body&gt; </li></ul><ul><li>&lt;input name=&amp;quot; myInput &amp;quot; type=&amp;quot;text&amp;quot; size=&amp;quot;20&amp;quot;&gt;&lt;br /&gt; </li></ul><ul><li>&lt;input name=&amp;quot; myInput &amp;quot; type=&amp;quot;text&amp;quot; size=&amp;quot;20&amp;quot;&gt;&lt;br /&gt; </li></ul><ul><li>&lt;input name=&amp;quot; myInput &amp;quot; type=&amp;quot;text&amp;quot; size=&amp;quot;20&amp;quot;&gt;&lt;br /&gt; </li></ul><ul><li>&lt;br /&gt; </li></ul><ul><li>&lt;input type=&amp;quot;button&amp;quot; onclick=&amp;quot;getElements()&amp;quot; value=&amp;quot;How many elements named </li></ul><ul><li>&apos;myInput&apos;?&amp;quot;&gt; </li></ul><ul><li>&lt;/body&gt; </li></ul><ul><li>&lt;/html&gt; </li></ul>
  • 6. Document Object: Using innerHTML Property <ul><li>&lt;html&gt; </li></ul><ul><li>&lt;body&gt; </li></ul><ul><li>&lt;a name=&amp;quot;first&amp;quot;&gt;First anchor&lt;/a&gt;&lt;br /&gt; </li></ul><ul><li>&lt;a name=&amp;quot;second&amp;quot;&gt;Second anchor&lt;/a&gt;&lt;br /&gt; </li></ul><ul><li>&lt;a name=&amp;quot;third&amp;quot;&gt;Third anchor&lt;/a&gt;&lt;br /&gt; </li></ul><ul><li>&lt;br /&gt; </li></ul><ul><li>InnerHTML of the first anchor in this document: </li></ul><ul><li>&lt;script type=&amp;quot;text/javascript&amp;quot;&gt; </li></ul><ul><li>document.write( document.anchors[0].innerHTML ) </li></ul><ul><li>&lt;/script&gt; </li></ul><ul><li>&lt;/body&gt; </li></ul><ul><li>&lt;/html&gt; </li></ul>
  • 7. Document Object: Using Collection <ul><li>&lt;html&gt; </li></ul><ul><li>&lt;body&gt; </li></ul><ul><li>&lt;form id=&amp;quot;Form1&amp;quot; name=&amp;quot;Form1&amp;quot;&gt; </li></ul><ul><li>Your name: &lt;input type=&amp;quot;text&amp;quot;&gt; </li></ul><ul><li>&lt;/form&gt; </li></ul><ul><li>&lt;form id=&amp;quot;Form2&amp;quot; name=&amp;quot;Form2&amp;quot;&gt; </li></ul><ul><li>Your car: &lt;input type=&amp;quot;text&amp;quot;&gt; </li></ul><ul><li>&lt;/form&gt; </li></ul><ul><li>&lt;p&gt; </li></ul><ul><li>To access an item in a collection you can either use the number or the name of the item: </li></ul><ul><li>&lt;/p&gt; </li></ul><ul><li>&lt;script type=&amp;quot;text/javascript&amp;quot;&gt; </li></ul><ul><li>document.write(&amp;quot;&lt;p&gt;The first form&apos;s name is: &amp;quot; + document.forms[0].name + &amp;quot;&lt;/p&gt;&amp;quot;) </li></ul><ul><li>document.write(&amp;quot;&lt;p&gt;The first form&apos;s name is: &amp;quot; + document.getElementById(&amp;quot;Form1&amp;quot;).name </li></ul><ul><li>+ &amp;quot;&lt;/p&gt;&amp;quot;) </li></ul><ul><li>&lt;/script&gt; </li></ul><ul><li>&lt;/body&gt; </li></ul><ul><li>&lt;/html&gt; </li></ul>
  • 8. Event Object: Coordinates of the Cursor <ul><li>&lt;html&gt; </li></ul><ul><li>&lt;head&gt; </li></ul><ul><li>&lt;script type=&amp;quot;text/javascript&amp;quot;&gt; </li></ul><ul><li>function show_coords( event ) { </li></ul><ul><li>x= event.clientX </li></ul><ul><li>y= event.clientY </li></ul><ul><li>alert(&amp;quot;X coords: &amp;quot; + x + &amp;quot;, Y coords: &amp;quot; + y) </li></ul><ul><li>} </li></ul><ul><li>&lt;/script&gt; </li></ul><ul><li>&lt;/head&gt; </li></ul><ul><li>&lt;body onmousedown=&amp;quot;show_coords( event )&amp;quot;&gt; </li></ul><ul><li>&lt;p&gt;Click in the document. An alert box will alert the x and y coordinates of the </li></ul><ul><li>cursor.&lt;/p&gt; </li></ul><ul><li>&lt;/body&gt; </li></ul><ul><li>&lt;/html&gt; </li></ul>
  • 9. Event Object: What is the unicode of the key pressed? <ul><li>&lt;head&gt; </li></ul><ul><li>&lt;script type=&amp;quot;text/javascript&amp;quot;&gt; </li></ul><ul><li>function whichButton(event) { </li></ul><ul><li>alert(event.keyCode) </li></ul><ul><li>} </li></ul><ul><li>&lt;/script&gt; </li></ul><ul><li>&lt;/head&gt; </li></ul><ul><li>&lt;body onkeyup=&amp;quot;whichButton(event)&amp;quot;&gt; </li></ul><ul><li>&lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; Make sure the right frame has focus when trying this example!&lt;/p&gt; </li></ul><ul><li>&lt;p&gt;Press a key on your keyboard. An alert box will alert the unicode of the key </li></ul><ul><li>pressed.&lt;/p&gt; </li></ul><ul><li>&lt;/body&gt; </li></ul><ul><li>&lt;/html&gt; </li></ul>
  • 10. Event Object: Which event type occurred? <ul><li>&lt;html&gt; </li></ul><ul><li>&lt;head&gt; </li></ul><ul><li>&lt;script type=&amp;quot;text/javascript&amp;quot;&gt; </li></ul><ul><li>function whichType( event ) { </li></ul><ul><li>alert( event.type ) </li></ul><ul><li>} </li></ul><ul><li>&lt;/script&gt; </li></ul><ul><li>&lt;/head&gt; </li></ul><ul><li>&lt;body onmousedown=&amp;quot;whichType( event )&amp;quot;&gt; </li></ul><ul><li>&lt;p&gt; </li></ul><ul><li>Click on the document. An alert box will alert which type of event occurred. </li></ul><ul><li>&lt;/p&gt; </li></ul><ul><li>&lt;/body&gt; </li></ul><ul><li>&lt;/html&gt; </li></ul>

×