JAVASCRIPT PROGRAM
1. Hello Program
<html>
<body>
<script type="text/javascript">
var firstname,XYZ;
firstname="Welcome";
document.write(firstname);
document.write("<br />");
XYZ="COPA";
document.write(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="train.jpg"></CENTER>
<script>
var element = document.getElementById("header");
element.innerHTML = "Hello ITI COPA";
var img = document.getElementById("myImage");
img.style.width = "850px";
img.style.height = "800px";
</script>
</body>
2.external JavaScript files
<html>
<head>
<script type="text/javascript" src=" myscript.js">
</script>
</head>
<body>
<h1>My Web Page</h1>
<button type="button" onclick="myFunction()">Tryit</button>
</body>
</html>
Myscript js file
function myFunction() {
document.write("hello iti");
document.write("belapur");
3.information
<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>
4.Use 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: " + e.description);
}
}
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="ClickMe" onclick="myFunc();" />
</form>
</body>
</html>
5.Use 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: " + e.description );
}
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>
6.throw 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: " + e.message);
}
}
</script>
</head>
<body>
<p>Click the button to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>
7.Use onerror() Method in javascript
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onerror = 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>
8.add 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>
9.Take 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)
document.write("Invalid choice");
else
document.write("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>
10.Take confirmation using confirm method
<html>
<head>
<title>Confirm</title>
<script>
var a=confirm("Want to play a game?");
if(a)
document.write("We will play a game now!");
else
document.write("May be next time");
</script>
</head>
<body>
</body>
</html>
11.Using global variable
<html>
<body>
<script>
function m() {
window.value = 100; // Declaring global variable using window object
}
function n() {
alert(window.value); // Accessing global variable from another function
}
m();
n();
</script>
</body>
</html>
12.Manual Animation
<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
var imgObj = null;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position = 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 100 + 'px';
}
window.onload = init;
</script>
</head>
<body>
<form>
<img id="myImage" src="monkey.jpg" />
<p>Click button below to move the image to right</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html>
13.Automated Animation
<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
var imgObj = null;
var animate;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position = 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight, 100); // call moveRight in 20 msec
}
function stop() {
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload = init;
</script>
</head>
<body>
<form>
<img id="myImage" src="train.jpg" />
<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>
14.JavaScript 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>
15.JavaScript 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 = document.getElementById("percentage").value;
x=parseInt(p);
if (x>90 && x <= 100) {
document.getElementById("demo").innerHTML =
"A+";
} else if (x>75 && x <= 90) {
document.getElementById("demo").innerHTML =
"Distinction";
} else if (x>60 && x <= 75) {
document.getElementById("demo").innerHTML =
"First Class";
}
}
</script>
</body>
</html>
16.CSS with JavaScript in DHTML
<html>
<head>
<title>
getElementById.style.property 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 = document.getElementById
('demo').style.color = newColor;
}
</script>
</body>
</html>
