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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Week31

1,946
views

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