• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Week31
 

Week31

on

  • 2,067 views

 

Statistics

Views

Total Views
2,067
Views on SlideShare
662
Embed Views
1,405

Actions

Likes
0
Downloads
21
Comments
0

5 Embeds 1,405

http://211.221.225.228 1223
http://223.195.109.161 119
http://211.221.225.228:8080 60
http://localhost 2
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Week31 Week31 Presentation Transcript

    • HTML DOM Object
    • 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>
    • 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>
    • 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>
    • 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>
    • 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>
    • 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>
    • 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>
    • 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>
    • 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>