2. Document Object, Write text to the Output Screen <html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html>
3. Document Object: Write Text with Embedded HTML <html> <body> <script type="text/javascript"> document.write("<h1>Hello World!</h1>") </script> </body> </html>
4. Document Object: Use GetElementById() <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>
5. Document Object: Use getElementByName() <html> <head> <script type="text/javascript"> function getElements() { var x=document. getElementsByName (" myInput ") alert(x.length + " elements!") } </script> </head> <body> <input name=" myInput " type="text" size="20"><br /> <input name=" myInput " type="text" size="20"><br /> <input name=" myInput " type="text" size="20"><br /> <br /> <input type="button" onclick="getElements()" value="How many elements named 'myInput'?"> </body> </html>
6. 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>
7. 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>
8. Event Object: Coordinates of 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: What is 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: Which event 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>](https://image.slidesharecdn.com/week31-111019010638-phpapp02/85/Week31-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>](https://image.slidesharecdn.com/week31-111019010638-phpapp02/85/Week31-7-320.jpg)
