Document Object, Writetext to the Output Screen <html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html>
3.
Document Object: WriteText with Embedded HTML <html> <body> <script type="text/javascript"> document.write("<h1>Hello World!</h1>") </script> </body> </html>
4.
Document Object: UseGetElementById() <html> <head> <script type="text/javascript"> function getElement() { var x=document. getElementById (" myHeader ") alert("I am a " + x.tagName + " element") } </script> </head> <body> <h1 id=" myHeader " onclick="getElement()">Click to see what element I am!</h1> </body> </html>
Document Object: UsinginnerHTML Property <html> <body> <a name="first">First anchor</a><br /> <a name="second">Second anchor</a><br /> <a name="third">Third anchor</a><br /> <br /> InnerHTML of the first anchor in this document: <script type="text/javascript"> document.write( document.anchors[0].innerHTML ) </script> </body> </html>
7.
Document Object: UsingCollection <html> <body> <form id="Form1" name="Form1"> Your name: <input type="text"> </form> <form id="Form2" name="Form2"> Your car: <input type="text"> </form> <p> To access an item in a collection you can either use the number or the name of the item: </p> <script type="text/javascript"> document.write("<p>The first form's name is: " + document.forms[0].name + "</p>") document.write("<p>The first form's name is: " + document.getElementById("Form1").name + "</p>") </script> </body> </html>
8.
Event Object: Coordinatesof the Cursor <html> <head> <script type="text/javascript"> function show_coords( event ) { x= event.clientX y= event.clientY alert("X coords: " + x + ", Y coords: " + y) } </script> </head> <body onmousedown="show_coords( event )"> <p>Click in the document. An alert box will alert the x and y coordinates of the cursor.</p> </body> </html>
9.
Event Object: Whatis the unicode of the key pressed? <head> <script type="text/javascript"> function whichButton(event) { alert(event.keyCode) } </script> </head> <body onkeyup="whichButton(event)"> <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: Whichevent type occurred? <html> <head> <script type="text/javascript"> function whichType( event ) { alert( event.type ) } </script> </head> <body onmousedown="whichType( event )"> <p> Click on the document. An alert box will alert which type of event occurred. </p> </body> </html>
![Document Object: Using innerHTML Property <html> <body> <a name="first">First anchor</a><br /> <a name="second">Second anchor</a><br /> <a name="third">Third anchor</a><br /> <br /> InnerHTML of the first anchor in this document: <script type="text/javascript"> document.write( document.anchors[0].innerHTML ) </script> </body> </html>](/proxy?url=https%3A%2F%2Fimage.slidesharecdn.com%2Fweek31-111019010638-phpapp02%2F85%2FWeek31-6-320.jpg)
![Document Object: Using Collection <html> <body> <form id="Form1" name="Form1"> Your name: <input type="text"> </form> <form id="Form2" name="Form2"> Your car: <input type="text"> </form> <p> To access an item in a collection you can either use the number or the name of the item: </p> <script type="text/javascript"> document.write("<p>The first form's name is: " + document.forms[0].name + "</p>") document.write("<p>The first form's name is: " + document.getElementById("Form1").name + "</p>") </script> </body> </html>](/proxy?url=https%3A%2F%2Fimage.slidesharecdn.com%2Fweek31-111019010638-phpapp02%2F85%2FWeek31-7-320.jpg)
