Step by step procedure Implementing about JavaScript Timer

Timer Demo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Validation On Submit</title>

<script language=”JavaScript”>

function showClientTime() {

var dt = new Date()

spnTime.innerHTML = dt.toLocaleTimeString();

setTimeout(“showClientTime ()”, 1000);

}

</script>

</head>

<body onload=”showClientTime()”>

<span id=”spnTime”></span>

</body>

</html>

To show and close window:

<script type=”text/JavaScript”>

var win;

function ShowWindow() {

win = window.open(“JS1.htm”, “win1”, “menubar=no,scrollbars=no,width=400,height=500,location=no,resizable=yes”)

}

function CloseWindow() {

win.close();

}

</script>

ShowTime.js:

Code for displaying time

document.write(“<span id=’spnTime’></span>”)

function setClientTime() {

document.getElementById(“spnTime”).innerHTML = new Date().toTimeString();

setTimeout(“setClientTime()”, 1000)

}

setClientTime()

In any HTML Page, add the following to show System time:

<script type=”text/JavaScript” src=”ShowTime.js”></script>

 

 

JavaScript Mouse Events

Example to handle Images, Mouse events and“this” Keyoword: Example: Changing images :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Image Page</title>
<script type=”text/JavaScript”>
function changeImage() {
document.images[“img1”].src = “Desert.jpg”
}
function restoreImage() {
document.images[0].src = “Jellyfish.jpg”
}
</script>
</head>
<body>
<img src=”Jellyfish.jpg” alt=”Demo” name=”img1″ onmouseover=”changeImage()” onmouseout=”restoreImage()”
width=”100″ height=”100″ />
<img src=”Desert.jpg” alt=”Demo” onmouseover=”this.src=’Jellyfish.jpg'” onmouseout=”this.src=’Desert.jpg'”
width=”100″ height=”100″ />
</body>

Steps for Debugging JavaScript :
1. Browser ? Tools ? Internet Options… ? Advanced ? Uncheck – Disable Script Debugging (Internet Explorer) ? OK
2. Close the browser and start a new instance.
3. In JavaScript code, to start debugging write the statement: “debugger;”
4. Open the page the in browser
5. When the statement “debugger” is executed, browser shows a dialog for selecting the debugger…
6. Select the already exiting Visual Studio Instance –> OK
7. Continue Debugging using Debug toolbar (right click on menubar and select debug)

Example to show/hide a block using “Style” :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>JS Demo</title>
<script type=”text/JavaScript”>
function r1_click() {
if (document.form1.r1[0].checked)
document.getElementById(“spn”).style[“display”] = “”;
else
document.getElementById(“spn”).style[“display”] = “none”;
}
function ShowHTMLOutput(ta) {
spn.innerHTML = ta.value
}
</script>
</head>
<body>
<form name=”form1″ action=””>
<input type=”radio” name=”r1″ value=”show” checked=”checked” onclick=”r1_click()” />Show
<input type=”radio” name=”r1″ value=”hide” onclick=”r1_click()” />Hide <span id=”spn”>
This is some text…</span>
<textarea name=”taDemo” rows=”5″ cols=”20″ onchange=”ShowHTMLOutput(this)”></textarea>
</form>
</body>
</html>

JavaScript Handling Events in Asp.Net

Event

Raised when

HTML tags

onfocus

Form field gets focus

select, text, textarea

onblur

Form field looses focus

select, text, textarea

onchange

Content of a field changes

select, text, textarea

onselect

Text is selected

text, textarea

onmouseover

Mouse moves over a link

A

onmouseout

Mouse moves out of a link

A

onclick

Mouse clicks an object

A, button, checkbox, radio, reset, submit

onload

Page is finished loading

body, frameset

onunload

Browser opens new document

body, frameset

onSubmit

Submit button is clicked

form

Example: Handling an event

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>General Examples</title>
<script language=”JavaScript” type=”text/JavaScript”>
function SayHello() {
window.alert(“Hello ” +
document.forms[0].txtName.value);
}
</script>
</head>
<body>
<form name=”form1″>
Name: <input type=”text” name=”txtName” />
<input type=”button” value=”Say Hello” onclick=”JavaScript:SayHello()” />
</form>
</body>
</html>

Using Dropdown List (Select tag):

Example: DropdownList
 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>General Examples</title>
<script type=”text/JavaScript”>
function Calculate() {
var n1 = document.form1.txtN1.value;
var n2 = document.form1.txtN2.value;
var ddl = document.form1.selOperation
var opt = ddl.options[ddl.selectedIndex]; //returns selected option
switch (opt.value) {
case “+”:
document.form1.txtResult.value = parseInt(n1) + parseInt(n2);
break;
case “-“:
document.form1.txtResult.value = n1 – n2;
break;
case “*”:
document.form1.txtResult.value = n1 * n2;
break;
case “/”:
document.form1.txtResult.value = n1 / n2;
break;
}
}
</script>
</head>
body>
<form name=”form1″>
<input type=”text” name=”txtN1″ />
<select name=”selOperation” onchange=”Calculate()”>
<option value=”+”>+</option>
<option value=”-“>-</option>
<option value=”*”>*</option>
<option value=”/”>/</option>
</select>
<input type=”text” name=”txtN2″ />
=
<input type=”text” name=”txtResult” readonly=”readonly” />
</form>
</body>
</html>