JAVASCRIPT PROGRAM
1. Hello Program
<html>
<body>
<script type="text/javascript">
var firstname,XYZ;
firstname="Welcome";
[Link](firstname);
[Link]("<br />");
XYZ="COPA";
[Link](firstname);
</script>
<p>The script above declares a variable,
assigns a value to it, displays the value, change the value,
and displays the value again.</p>
</body>
</html>
1.1Hello Program with id
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<CENTER><img id="myImage" src="[Link]"></CENTER>
<script>
var element = [Link]("header");
[Link] = "Hello ITI COPA";
var img = [Link]("myImage");
[Link] = "850px";
[Link] = "800px";
</script>
</body>
[Link] JavaScript files
<html>
<head>
<script type="text/javascript" src=" [Link]">
</script>
</head>
<body>
<h1>My Web Page</h1>
<button type="button" onclick="myFunction()">Tryit</button>
</body>
</html>
Myscript js file
function myFunction() {
[Link]("hello iti");
[Link]("belapur");
[Link]
<html>
<head>
<title>A Web page</title>
<script type="text/javascript">
function anotherAlert(textAlert) {
alert(textAlert);
}
anotherAlert("This is a COPA");
</script>
<body>
<h1>Web Page with Alert</h1>
</body>
</html>
[Link] try-catch in javascript
<html>
<head>
<script type="text/javascript">
function myFunc()
{
var a = 500;
try {
alert("Value of variable a is: " + a);
}
catch (e) {
alert("Error: " + [Link]);
}
}
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="ClickMe" onclick="myFunc();" />
</form>
</body>
</html>
[Link] finally in javascript
<html>
<head>
<script type="text/javascript">
function myFunc()
{
var a = 100;
try {
alert("Value of variable a is : " + a );
}
catch ( e ) {
alert("Error: " + [Link] );
}
finally {
alert("Finally block will always execute!" );
}
}
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<button type="button" onclick="myFunc()"> click me</button>
</form>
</body>
</html>
[Link] in javascript
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunc() {
var a = 100;
var b = 0;
try {
if (b == 0) {
throw new Error("Divide by zero error.");
} else {
var c = a / b;
alert("Result: " + c);
}
} catch (e) {
alert("Error: " + [Link]);
}
}
</script>
</head>
<body>
<p>Click the button to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>
[Link] onerror() Method in javascript
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
[Link] = function (message, source, lineno, colno, error) {
alert("An error occurred: " + message);
};
function myFunc() {
var a = 100;
var b = 2;
var c = a / b; // This will trigger an error.
}
</script>
</head>
<body>
<p>Click the button to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>
[Link] two numbers using function
<html>
<head>
<title>Adder</title>
<script>
function add(a, b) {
return a + b;
}
var a = 6;
var b = 10;
var c = add(a,b);
alert(c);
</script>
</head>
<body>
</body>
</html>
[Link] input using prompt function
<html>
<head>
<title>Prompt</title>
<script>
var a = Number(prompt("Enter a Number:"));
var b = Number(prompt("Enter another Number:"));
var ch = Number(prompt("1->Add 2->Sub 3->Mul 4->Div\nEnter Choice:"));
var r = 0, fl = 0;
switch(ch) {
case 1:
r = add(a, b);
break;
case 2:
r = sub(a, b);
break;
case 3:
r = mul(a, b);
break;
case 4:
r = div(a, b);
break;
default:
fl = 1;
}
if (fl)
[Link]("Invalid choice");
else
[Link]("Result is: " + r);
function add(a, b) {
return a + b;
}
function sub(a, b) {
return a - b;
}
function mul(a, b) {
return a * b;
}
function div(a, b) {
return b !== 0 ? a / b : "Error: Division by zero";
}
</script>
</head>
<body>
</body>
</html>
[Link] confirmation using confirm method
<html>
<head>
<title>Confirm</title>
<script>
var a=confirm("Want to play a game?");
if(a)
[Link]("We will play a game now!");
else
[Link]("May be next time");
</script>
</head>
<body>
</body>
</html>
[Link] global variable
<html>
<body>
<script>
function m() {
[Link] = 100; // Declaring global variable using window object
}
function n() {
alert([Link]); // Accessing global variable from another function
}
m();
n();
</script>
</body>
</html>
[Link] Animation
<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
var imgObj = null;
function init() {
imgObj = [Link]('myImage');
[Link] = 'relative';
[Link] = '0px';
}
function moveRight() {
[Link] = parseInt([Link]) + 100 + 'px';
}
[Link] = init;
</script>
</head>
<body>
<form>
<img id="myImage" src="[Link]" />
<p>Click button below to move the image to right</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html>
[Link] Animation
<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
var imgObj = null;
var animate;
function init() {
imgObj = [Link]('myImage');
[Link] = 'relative';
[Link] = '0px';
}
function moveRight() {
[Link] = parseInt([Link]) + 10 + 'px';
animate = setTimeout(moveRight, 100); // call moveRight in 20 msec
}
function stop() {
clearTimeout(animate);
[Link] = '0px';
}
[Link] = init;
</script>
</head>
<body>
<form>
<img id="myImage" src="[Link]" />
<p>Click the buttons below to handle animation</p>
<input type="button" value="Start" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>
</html>
[Link] and HTML event
<html>
<head>
<title>
DHTML with JavaScript
</title>
<script type="text/javascript">
function dateandtime()
{
alert(Date());
}
</script>
</head>
<body bgcolor="orange">
<font size="4" color="blue">
<center> <p>
<a href="#" onClick="dateandtime();">
Date and Time </a>
to check the today's date and time.
</p> </center>
</font>
</body>
</html>
[Link] and HTML DOM
<html>
<head>
<title> Check Student Grade
</title>
</head>
<body>
<p>Enter the percentage of a Student:</p>
<input type="text" id="percentage">
<button type="button" onclick="checkGrade()">
Find Grade
</button>
<p id="demo"></p>
<script type="text/javascript">
function checkGrade()
{
var x,p, text;
p = [Link]("percentage").value;
x=parseInt(p);
if (x>90 && x <= 100) {
[Link]("demo").innerHTML =
"A+";
} else if (x>75 && x <= 90) {
[Link]("demo").innerHTML =
"Distinction";
} else if (x>60 && x <= 75) {
[Link]("demo").innerHTML =
"First Class";
}
}
</script>
</body>
</html>
[Link] with JavaScript in DHTML
<html>
<head>
<title>
[Link] example
</title>
</head>
<body>
<p id="demo"> This text changes color when click
on the following different buttons. </p>
<button onclick="change_Color('green');"> Green </button>
<button onclick="change_Color('blue');"> Blue </button>
<script type="text/javascript">
function change_Color(newColor) {
var element = [Link]
('demo').[Link] = newColor;
}
</script>
</body>
</html>
