If you want something you've never had, you must be willing to do something you've never done!

Powered by Blogger.
Welcome Cerita Semalam Blog - Community Indonesia - Community We are together, we Belong Together, For Our Common!
Photobucket
Showing posts with label Java Script Tutorials. Show all posts
Showing posts with label Java Script Tutorials. Show all posts

JavaScript Tutorials 0

Cerita Semalam Aaz | 1:21 PM | ,

Event Object 0

Cerita Semalam Aaz | 9:40 AM | ,



Event Object: What are the 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>


Event Object: What is the unicode of the key pressed?


<html>
<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>

Event Object: Which element was clicked?

<html>
<head>
<script type="text/javascript">
function whichElement(e) {
var targ if (!e) var e = window.event if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode var tname tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>

<body onmousedown="whichElement(event)">
<p>Click somewhere in the document. An alert box will alert the tag name of the element you clicked on.</p>

<h3>This is a header</h3>
<p>This is a paragraph</p>
<img border="0" src="ball16.gif" width="29" height="28" alt="Ball">
</body>
</html>                                                                                                                                                                       




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>




    SEE VIDEO




Document Object 0

Cerita Semalam Aaz | 9:33 AM | ,


Document Object: Write text to the output
<html>
<body>


<script type="text/javascript">
document.write("Hello World!")
</script>


</body>
</html>



Document Object: Write text with
Formatting to the output
<html>
<body>


<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>


</body>
</html>


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>


DocumentObject:UsegetElementsByName()


<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>                                                                                                                                                                        59


Document Object: Return the innerHTML
of the first anchor in a document



<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>


Document Object: Access an item in a 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>




SEE VIDEO



Related Post

 
Back To Top