WEB APPLICATIONS PRACTICAL FILE
(2025-2026)
Name: ___________________________________________
Class: _______
1
WEB APPLICATIONS PRACTICAL FILE
REG NO:
Certify that this is the record of practical work done by
__________________________________________________________________ of
Standard XII during the academic year 2025-2026.
INTERNAL MARKS AWARDED:
DATE: TEACHER IN CHARGE PRINCIPAL
SEAL:
SUBMITTED FOR THE PRACTICAL EXAMINATION HELD ON ______________________ AT
AMRITA VIDYALAYAM, K K NAGAR, CHENNAI-78
INTERNAL EXAMINER EXTERNAL EXAMINER
2
INDEX
S NO TOPIC PG NO
JAVA SCRIPT PROGRAMS
1 SUM OF TWO NUMBERS 5
2 TO CHECK PALINDROME OR NOT 7
3 GREATEST OF THREE NUMBERS 9
4 SIMPLE INTEREST AND COMPOUND INTEREST CALCULATION 11
5 14
STRING UPPERCASE TO LOWERCASE
6 LENGTH OF THE STRING 15
7 SUBSTRING FROM A STRING 16
8 SEARCH AND REPLACE 17
9 18
TO SORT AN ARRAY
10 19
TO REVERSE AN ARRAY
11 ARRAY PUSH AND POP 20
12 ARRAY JOIN AND CONCAT 21
13 POWER AND SQUARE ROOT 22
14 ABSOLUTE VALUE AND ROUND OF A NUMBER 23
15 FLOOR AND CEIL OF A NUMBER 24
16 25
RANDOM NUMBERS
17 26
MOUSE CLICK EVENT
18 28
MOUSE OVER EVENT
3
19 30
KEY PRESS EVENT
20 32
CHANGING BACKGROUND COLOUR
4
[Link] OF TWO NUMBERS
AIM:
To write a JavaScript code to find the sum of two numbers using function
CODING:
<html>
<head>
<title>Function with User Input</title>
<script>
function addNumbers(a, b) {
return a + b;
var num1 = parseInt(prompt("Enter first number:"));
var num2 = parseInt(prompt("Enter second number:"));
var sum = addNumbers(num1, num2);
[Link]("The sum is: " + sum);
</script>
</head>
<body>
</body>
</html>
5
OUTPUT:
6
[Link] CHECK PALINDROME OR NOT
AIM:
To write a JavaScript code to check whether the given string is palindrome or not using
function
CODING
<!DOCTYPE html>
<html>
<head>
<title>Palindrome Check</title>
<script>
function isPalindrome(str) {
var reversed = [Link]("").reverse().join("");
return str === reversed;
var inputStr = prompt("Enter a string:");
if (isPalindrome([Link]())) {
[Link]("The string '" + inputStr + "' is a Palindrome.");
} else {
[Link]("The string '" + inputStr + "' is NOT a Palindrome.");
</script>
</head>
<body>
</body>
</html>
7
OUTPUT:
8
3. GREATEST OF THREE NUMBERS
AIM:
To write a JavaScript code to find the greatest of three numbers using function
CODING :
<html>
<head>
<title>Greatest of Three Numbers</title>
<script>
function findGreatest(a, b, c) {
if (a >= b && a >= c) {
return a;
} else if (b >= a && b >= c) {
return b;
} else {
return c;
var num1 = 25;
var num2 = 78;
var num3 = 49;
var greatest = findGreatest(num1, num2, num3);
[Link]("The numbers are: " + num1 + ", " + num2 + ", " + num3 + "<br>");
[Link]("The greatest number is: " + greatest);
</script>
</head>
<body></body>
</html>
9
OUTPUT:
10
4. SIMPLE INTEREST AND COMPOUND INTEREST CALCULATION
AIM:
To write a JavaScript code to calculate simple interest and compound interest using function
CODING:
<html>
<head>
<title>Simple & Compound Interest</title>
<script>
function simpleInterest(p, r, t) {
return (p * r * t) / 100;
function compoundInterest(p, r, t) {
let amount = p * [Link]((1 + r / 100), t);
return amount - p;
var p = parseFloat(prompt("Enter Principal Amount (P):"));
var r = parseFloat(prompt("Enter Rate of Interest (R in %):"));
var t = parseFloat(prompt("Enter Time (T in years):"));
var si = simpleInterest(p, r, t);
var ci = compoundInterest(p, r, t);
[Link]("<h2>Interest Calculation</h2>");
[Link]("Principal (P) = " + p + "<br>");
[Link]("Rate (R) = " + r + "%<br>");
[Link]("Time (T) = " + t + " years<br><br>");
[Link]("Simple Interest (SI) = " + [Link](2) + "<br>");
[Link]("Compound Interest (CI) = " + [Link](2) + "<br>");
</script>
</head>
11
<body>
</body>
</html>
OUTPUT
12
13
5. STRING UPPERCASE TO LOWERCASE
AIM:
To write a JavaScript code to convert string uppercase to lowercase using string method.
CODING:
<html>
<head>
<title>String Uppercase & Lowercase</title>
<script>
var str = "Hello World";
[Link]("<h3>Program 1: Uppercase & Lowercase</h3>");
[Link]("Original String: " + str + "<br>");
[Link]("Uppercase: " + [Link]() + "<br>");
[Link]("Lowercase: " + [Link]() + "<br>");
</script>
</head>
<body>
</body>
</html>
OUTPUT
14
6. LENGTH OF THE STRING
AIM:
To write a JavaScript code to find the length of the string using string method.
CODING:
<html>
<head>
<title>String Length</title>
<script>
var str = "JavaScript Programming";
[Link]("<h3> String Length</h3>");
[Link]("String: " + str + "<br>");
[Link]("Length of String: " + [Link] + "<br>");
</script>
</head>
<body>
</body>
</html>
OUTPUT
15
7. SUBSTRING FROM A STRING
AIM:
To write a JavaScript code to get the substring from a string using string method.
CODING:
<html>
<head>
<title>Substring </title>
<script>
var str = "Welcome to Class 12";
[Link]("<h3>Substring</h3>");
[Link]("Original String: " + str + "<br>");
[Link]("Substring (0,7): " + [Link](0,7) + "<br>");
[Link]("Substring (11,17): " + [Link](11,17) + "<br>");
</script>
</head>
<body>
</body>
</html>
OUTPUT
16
8. SEARCH AND REPLACE
AIM:
To write a JavaScript code to search and replace from a string using string method.
CODING:
<html>
<head>
<title>Search and Replace</title>
<script>
var str = "I like Java. Java is powerful.";
[Link]("<h3> Search & Replace</h3>");
[Link]("Original String: " + str + "<br>");
[Link]("Index of 'Java': " + [Link]("Java") + "<br>");
[Link]("After Replace: " + [Link]("Java","JavaScript") + "<br>");
</script>
</head>
<body>
</body>
</html>
OUTPUT
17
9. TO SORT AN ARRAY
AIM:
To write a JavaScript code to sort an array using array method.
CODING:
<html>
<head>
<title>Array Sort</title>
<script>
var arr = [40, 10, 30, 20, 50];
[Link]("<h3> Sort an Array</h3>");
[Link]("Original Array: " + arr + "<br>");
[Link]();
[Link]("Sorted Array: " + arr + "<br>");
</script>
</head>
<body>
</body>
</html>
OUTPUT
18
10. TO REVERSE AN ARRAY
AIM:
To write a JavaScript code to reverse an array using array method.
CODING:
<html>
<head>
<title>Array Reverse</title>
<script>
var arr = ["Apple", "Banana", "Mango", "Orange"];
[Link]("<h3> Reverse an Array</h3>");
[Link]("Original Array: " + arr + "<br>");
[Link]();
[Link]("Reversed Array: " + arr + "<br>");
</script>
</head>
<body>
</body>
</html>
OUTPUT:
19
11. ARRAY PUSH AND POP
AIM:
To write a JavaScript code to perform array push and pop using array method.
CODING:
<html>
<head>
<title>Array Push & Pop</title>
<script>
var arr = ["Red", "Green", "Blue"];
[Link]("<h3> Push & Pop</h3>");
[Link]("Original Array: " + arr + "<br>");
[Link]("Yellow"); // Add element
[Link]("After Push: " + arr + "<br>");
[Link]();
[Link]("After Pop: " + arr + "<br>");
</script>
</head>
<body>
</body>
</html>
OUTPUT:
20
12. ARRAY JOIN AND CONCAT
AIM:
To write a JavaScript code to join and concat arrays using array methods.
CODING:
<html>
<head>
<title>Array Join & Concat</title>
<script>
var arr1 = ["A", "B", "C"];
var arr2 = ["D", "E", "F"];
[Link]("<h3> Join & Concat</h3>");
[Link]("Array 1: " + arr1 + "<br>");
[Link]("Array 2: " + arr2 + "<br>");
[Link]("Join with '-': " + [Link]("-") + "<br>");
var arr3 = [Link](arr2);
[Link]("Concatenated Array: " + arr3 + "<br>");
</script>
</head>
<body>
</body>
</html>
OUTPUT:
21
13. POWER AND SQUARE ROOT
AIM:
To write a JavaScript code to calculate the power and square root of a number using math
methods.
CODING:
<html>
<head>
<title>Math Methods - sqrt & pow</title>
<script>
var num = 16;
[Link]("<h3> Square Root & Power</h3>");
[Link]("Number: " + num + "<br>");
[Link]("Square Root of " + num + " = " + [Link](num) + "<br>");
[Link]("2 to the power 5 = " + [Link](2, 5) + "<br>");
</script>
</head>
<body>
</body>
</html>
OUTPUT:
22
14. ABSOLUTE VALUE AND ROUND OF A NUMBER
AIM:
To write a JavaScript code to find the absolute value and round of a number using math
methods.
CODING:
<html>
<head>
<title>Math Methods - abs & round</title>
<script>
var x = -25.7;
[Link]("<h3> Absolute & Round</h3>");
[Link]("Number: " + x + "<br>");
[Link]("Absolute Value: " + [Link](x) + "<br>");
[Link]("Rounded Value: " + [Link](x) + "<br>");
</script>
</head>
<body>
</body>
</html>
OUTPUT
23
15. FLOOR AND CEIL OF A NUMBER
AIM:
To write a JavaScript code to find the floor value and ceil value of a number using math
methods.
CODING:
<html>
<head>
<title>Math Methods - floor & ceil</title>
<script>
var num = 7.8;
[Link]("<h3> Floor & Ceil</h3>");
[Link]("Number: " + num + "<br>");
[Link]("[Link](" + num + ") = " + [Link](num) + "<br>");
[Link]("[Link](" + num + ") = " + [Link](num) + "<br>");
</script>
</head>
<body>
</body>
</html>
OUTPUT:
24
16. RANDOM NUMBERS
AIM:
To write a JavaScript code to generate the random number using math method.
CODING:
<html>
<head>
<title>Math Methods - random</title>
<script>
[Link]("<h3> Random Numbers</h3>");
[Link]("Random Number (0 to 1): " + [Link]() + "<br>");
[Link]("Random Number (1 to 100): " + [Link]([Link]() * 100) + 1 +
"<br>");
</script>
</head>
<body>
</body>
</html>
OUTPUT:
25
17. MOUSE CLICK EVENT
AIM:
To write a JavaScript code to perform mouse click event using event handling.
CODING:
<html>
<head>
<title>Click Event</title>
<script>
function showMessage() {
[Link]("<h3>Button Clicked! Hello from JavaScript.</h3>");
</script>
</head>
<body>
<h3> Click Event</h3>
<button onclick="showMessage()">Click Me</button>
</body>
</html>
26
OUTPUT:
27
18. MOUSE OVER EVENT
AIM:
To write a JavaScript code to perform mouse over event using event handling.
CODING:
<html>
<head>
<title>Mouse Over Event</title>
<script>
function changeText() {
[Link]("demo").innerHTML = "You moved the mouse here!";
</script>
</head>
<body>
<h3>Mouse Over Event</h3>
<p id="demo" onmouseover="changeText()">Move your mouse over this text.</p>
</body>
</html>
28
OUTPUT:
29
19. KEY PRESS EVENT
AIM:
To write a JavaScript code to perform key press event using event handling.
CODING:
<html>
<head>
<title>Key Press Event</title>
<script>
function keyPressed() {
[Link]("output").innerHTML = "You pressed a key!";
</script>
</head>
<body>
<h3>Key Press Event</h3>
<input type="text" onkeypress="keyPressed()" placeholder="Type something here">
<p id="output"></p>
</body>
</html>
30
OUTPUT:
31
20. CHANGING BACKGROUND COLOUR
AIM:
To write a JavaScript code to change background colour of the web page using event
handling.
CODING:
<html>
<head>
<title>Change Event - Background Color</title>
<script>
function changeColor() {
var color = [Link]("clr").value;
[Link] = color;
</script>
</head>
<body>
<h3> Change Background Color</h3>
<select id="clr" onchange="changeColor()">
<option value="">Select Color</option>
<option value="lightblue">Light Blue</option>
<option value="lightgreen">Light Green</option>
<option value="yellow">Yellow</option>
<option value="pink">Pink</option>
</select>
</body>
</html>
32
OUTPUT:
33
