Sample Programs On J

SAMPLE PROGRAMS
Onfocus and Onblur:

<html>
<body>
<p>When you enter the input field, a function is triggered
which sets the background color to yellow. When you leave the
input field, a function is triggered which sets the background
color to red.</p>
Enter your name: <input type="text" id="myInput"
onfocus="focusFunction()" onblur="blurFunction()">
<script>
function focusFunction() {
// Focus = Changes the background color of input to yellow
document.getElementById("myInput").style.background =
"yellow";
}
function blurFunction() {
// No focus = Changes the background color of input to red
document.getElementById("myInput").style.background =
"red";
}
</script>
</body>
</html>
Onkeypress:
<html>
<body>
<p>This example demonstrates how to assign an "onkeypress"

event to an input element.</p>
<p>Press a key inside the text field to set a red background
color.</p>
<input type="text" id="demo" onkeypress="myFunction()">
<script>
function myFunction() {
document.getElementById("demo").style.backgroundColor =
"red";
}
</script>
</body>
</html>
Onkeydown and onkeyup:
<html>
<body>
<p>Press and hold down a key inside the text field to set a red
background color. Release the key to set a green background
color.</p>
<input type="text" id="demo"
onkeydown="keydownFunction()" onkeyup="keyupFunction()">
<script>
function keydownFunction() {
"red";
}
function keyupFunction() {
"green";
}
</script>
</body>
</html>
Onchange:
<html>
<head>
<script>
function preferedBrowser() {
prefer = document.forms[0].browsers.value;
alert("You prefer browsing internet with " + prefer);
}
</script>
</head>
<body>
<form>
Choose which browser you prefer:
<select id="browsers" onchange="preferedBrowser()">
<option value="Chrome">Chrome</option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
</select>
</form>
</body>
</html>
Onload:
<html>
<body>
<img src="w3javascript.gif" onload="loadImage()"
width="100" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
</body>
</html>
Onmouseup and Onmousedown:
<html>
<head>
<script>
function myFunction(elmnt, clr) {
elmnt.style.color = clr;
}
</script>
</head>
<body bgcolor="lightblue">
<p onmousedown="myFunction(this,'red')"
onmouseup="myFunction(this,'green')">
Click the text to change the color. A function, with parameters,
is triggered when the mouse button is pressed down, and
again, with other parameters, when the mouse button is
released.
</p>
</body>
</html>
Onmousemove and Onmouseover:

<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
float: left;
padding: 30px;
text-align: center;
background-color: lightgray;
}
p{
background-color: white;
}
</style>
</head>
<body>
<h3>This example demonstrates the difference between
onmousemove, onmouseenter and onmouseover.</h3>
<p>The onmousemove event occurs every time the mouse
pointer is moved over the div element.</p>
<p>The mouseenter event only occurs when the mouse

pointer enters the div element. </p>
<p>The onmouseover event occurs when the mouse pointer
enters the div element, and its child elements (p and
span).</p>
<div onmousemove="myMoveFunction()">
<p>onmousemove: <br> <span id="demo">Mouse over me!
</span></p>
</div>
<div onmouseenter="myEnterFunction()">
<p>onmouseenter: <br> <span id="demo2">Mouse over
me!</span></p>
</div>
<div onmouseover="myOverFunction()">
<p>onmouseover: <br> <span id="demo3">Mouse over me!
</span></p>
</div>
<script>
var x = 0;
var y = 0;
var z = 0;
function myMoveFunction() {
document.getElementById("demo").innerHTML = z+=1;
}
function myEnterFunction() {
document.getElementById("demo2").innerHTML = x+=1;
}
function myOverFunction() {
document.getElementById("demo3").innerHTML = y+=1;
}
</script>
</body>
</html>
Anchors[]:
<html>
<body>
<a name="html">HTML Tutorial</a><br>
<a name="css">CSS Tutorial</a><br>
<a name="xml">XML Tutorial</a><br>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Number of anchors are: " + document.anchors.length;
</script>
</body>
</html>
Forms[]:
<html>
<body>
<form action="">
First name: <input type="text" name="fname"
value="Donald">
<input type="submit" value="Submit">
</form>
<p id="demo"></p>
<script>
"Number of forms: " + document.forms.length;
</script>
</body>
</html>
Images[]:
<html>
<body>
<img src="pic_htmltree.gif">
<img src="pic_navigate.gif">
<p id="demo"></p>
<script>
"Number of images: " + document.images.length;
</script>
</body>
</html>
Navigator Object Properties:
<html>
<body>
<div id="demo"></div>
<script>
var txt = "";
txt += "<p>Browser CodeName: " + navigator.appCodeName

+ "</p>";
txt += "<p>Browser Name: " + navigator.appName + "</p>";
txt += "<p>Browser Version: " + navigator.appVersion +
"</p>";
txt += "<p>Cookies Enabled: " + navigator.cookieEnabled +
"</p>";
txt += "<p>Browser Language: " + navigator.language +
"</p>";
txt += "<p>Browser Online: " + navigator.onLine + "</p>";
txt += "<p>Platform: " + navigator.platform + "</p>";
txt += "<p>User-agent header: " + navigator.userAgent +
"</p>";
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
Document Object Methods:
<html>
<body>
<p>Click the button to open an output stream, add some text,
and close the output stream.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.open("text/html", "replace");
document.write("<html><body><p>Hello World!
</p></body></html>");
document.close();
}
</script>
</body>
</html>

Sample Programs On J

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Sample Programs On J

Uploaded by

Copyright:

Available Formats

SAMPLE PROGRAMS

Onfocus and Onblur:

<p>This example demonstrates how to assign an "onkeypress"

Onmousemove and Onmouseover:

<p>The mouseenter event only occurs when the mouse

txt += "<p>Browser CodeName: " + navigator.appCodeName

You might also like