JavaScript Practical Programs
Prog 1. Find the sum of two numbers without using a function.
<html>
<head>
<title>JavaScript Sum Program</title>
</head>
<body>
<h1>JavaScript program to add two nos.</h1>
<p id="college"></p>
<script>
var x = 50;
var y = 60;
var z = x + y;
[Link]("college").innerHTML = "The value of z is: " + z;
</script>
</body>
</html>
Prog 2. Add two numbers using a function.
<html lang="en">
<head>
<script>
function add() {
var a = 200;
var b = 60;
var sum = a + b;
[Link]("The sum of two numbers is: " + sum);
}
</script>
</head>
<body>
<p>A javascript program to add two numbers.</p>
<button onclick="add()">Click to Add</button>
</body>
</html>
Prog 3. Find the sum of two numbers using user input via textboxes.
<html>
<head>
<script>
function add() {
var x = [Link]("box1").value;
var y = [Link]("box2").value;
var z = parseInt(x) + parseInt(y);
[Link]("box3").value = z;
}
</script>
</head>
<body>
Input a First Number: <input type="text" id="box1"><br><br>
Input Second Number: <input type="text" id="box2"><br><br>
Result: <input type="text" id="box3"><br><br>
<input type="button" value="sum" onclick="add()">
</body>
</html>
Prog 4. Multiply two numbers using a function and user input.
<html>
<head>
<script>
function mul() {
var x = [Link]("box1").value;
var y = [Link]("box2").value;
var z = parseInt(x) * parseInt(y);
[Link]("box3").value = z;
}
</script>
</head>
<body>
Input a First Number: <input type="text" id="box1"><br><br>
Input Second Number: <input type="text" id="box2"><br><br>
Result: <input type="text" id="box3"><br><br>
<input type="button" value="Multiply" onclick="mul()">
</body>
</html>
Prog 5. Perform addition, subtraction, multiplication, and division using functions.
<html>
<head>
<script>
function add() {
var x = [Link]("box1").value;
var y = [Link]("box2").value;
[Link]("box3").value = parseInt(x) + parseInt(y);
}
function sub() {
var x = [Link]("box1").value;
var y = [Link]("box2").value;
[Link]("box3").value = parseInt(x) - parseInt(y);
}
function mul() {
var x = [Link]("box1").value;
var y = [Link]("box2").value;
[Link]("box3").value = parseInt(x) * parseInt(y);
}
function div() {
var x = [Link]("box1").value;
var y = [Link]("box2").value;
[Link]("box3").value = parseInt(x) / parseInt(y);
}
</script>
</head>
<body>
Input first number: <input type="text" id="box1"><br>
Input second number: <input type="text" id="box2"><br>
Answer: <input type="text" id="box3"><br>
<input type="button" value="sum" onClick="add()">
<input type="button" value="sub" onClick="sub()">
<input type="button" value="mul" onClick="mul()">
<input type="button" value="div" onClick="div()">
</body>
</html>
Prog 6. Find the factorial of a number using a loop and function.
<html>
<head>
<script>
function factorial() {
var n = [Link]("box1").value;
var fact = 1;
for(var i = 1; i < = n; i++) {
fact = fact * i;
}
[Link]("box2").value = fact;
}
</script>
</head>
<body>
Input any positive Number: <input type="text" id="box1"><br><br>
<input type="button" value="Calculate" onclick="factorial()"><br><br>
Answer: <input type="text" id="box2">
</body>
</html>
Prog 7. Check if a number is positive or negative (Method: [Link]).
<html>
<head>
<script>
var x = -41;
if(x > = 0)
[Link]("x is positive number");
else
[Link]("x is negative number");
</script>
</head>
<body>
</body>
</html>
Prog 8. Check if a number is positive or negative (Method: alert).
<html>
<head>
<script>
var x = 21;
if(x > 0)
alert("x is positive number");
else
alert("x is negative number");
</script>
</head>
<body>
</body>
</html>
Prog 9. Check if a number is positive or negative (Method: prompt).
<html>
<head>
<script>
var x;
x = prompt("Input a number");
if(x > 0)
alert(x + " is positive number");
else
alert(x + " is negative number");
</script>
</head>
<body>
</body>
</html>
Prog 10. Check if a number is positive, negative, or zero using DOM manipulation.
<html>
<head>
<script>
function posneg() {
var x = [Link]("data").value;
var y;
if(x > 0) y = x + " is positive number";
else if(x < 0) y = x + " is negative number";
else if(x == 0) y = x + " is equal to zero";
else y = "invalid input";
[Link]("result").innerHTML = y;
}
</script>
</head>
<body>
<h2>Input a number:</h2>
<input type="text" id="data"><br>
<button onclick="posneg()">Check</button>
<h1 id="result"></h1>
</body>
</html>
Prog 11. Check whether a number is even or odd using a function.
<html>
<head>
<script>
function checkEvenOdd() {
var num = [Link]("mynum").value;
if (num % 2 == 0) {
[Link]("display").innerHTML = num + " is Even";
} else {
[Link]("display").innerHTML = num + " is Odd";
}
}
</script>
</head>
<body>
Enter Number: <input type="text" id="mynum">
<button onclick="checkEvenOdd()">Check</button>
<h2 id="display"></h2>
</body>
</html>
Prog 12. Find the largest number among three numbers using a function.
<html>
<head>
<script>
function findLargest() {
var a = [Link]("n1").value;
var b = [Link]("n2").value;
var c = [Link]("n3").value;
if (a > = b && a > = c) {
[Link]("res").innerHTML = a + " is largest";
} else if (b > = a && b > = c) {
[Link]("res").innerHTML = b + " is largest";
} else {
[Link]("res").innerHTML = c + " is largest";
}
}
</script>
</head>
<body>
Num 1: <input type="text" id="n1"><br><br>
Num 2: <input type="text" id="n2"><br><br>
Num 3: <input type="text" id="n3"><br><br>
<button onclick="findLargest()">Find Largest</button>
<h2 id="res"></h2>
</body>
</html>
Prog 13. Find the smallest number among three numbers using a function.
<html>
<head>
<script>
function findSmallest() {
var a = [Link]("num1").value;
var b = [Link]("num2").value;
var c = [Link]("num3").value;
if (a < = b && a < = c) {
[Link]("out").innerHTML = a + " is smallest";
} else if (b < = a && b < = c) {
[Link]("out").innerHTML = b + " is smallest";
} else {
[Link]("out").innerHTML = c + " is smallest";
}
}
</script>
</head>
<body>
Number 1: <input type="text" id="num1"><br><br>
Number 2: <input type="text" id="num2"><br><br>
Number 3: <input type="text" id="num3"><br><br>
<button onclick="findSmallest()">Find Smallest</button>
<h2 id="out"></h2>
</body>
</html>
© 5hrabin