Scribd
Upload
104 views17 pages

Web Technology Lab

The document contains instructions for several JavaScript coding exercises for a web technology lab. It includes examples of code to: 1. Count the number of elements in a HTML form using JavaScript. 2. Validate fields in a registration form and check that required textboxes are filled out, alerting the user if any are empty. 3. Evaluate a mathematical expression entered in a form and display the result. 4. Create a page with dynamic effects like layers and basic animation. It also provides code snippets for additional exercises like calculating sums of natural numbers, generating the current date in words using arrays, and finding student exam results like total, average, grade.

Uploaded by

Kannan Thenmozhi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
104 views17 pages

Web Technology Lab

The document contains instructions for several JavaScript coding exercises for a web technology lab. It includes examples of code to: 1. Count the number of elements in a HTML form using JavaScript. 2. Validate fields in a registration form and check that required textboxes are filled out, alerting the user if any are empty. 3. Evaluate a mathematical expression entered in a form and display the result. 4. Create a page with dynamic effects like layers and basic animation. It also provides code snippets for additional exercises like calculating sums of natural numbers, generating the current date in words using arrays, and finding student exam results like total, average, grade.

Uploaded by

Kannan Thenmozhi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

DEPARTMENT OF COMPUTER

SCIENCE
III B.Sc. COMPUTER SCIENCE
WEB TECHNOLOGY LAB EXERCISE
1. Create a form having number of elements (Textboxes, Radio buttons, Checkboxes, and so on).
Write JavaScript code to count the number of elements in a form.

<!DOCTYPE html>
<html>
<head>
<title>Count Form Elements</title>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" /><br />
<label for="age">Age:</label>
<input type="number" id="age" name="age" /><br />
<label for="gender">Gender:</label>
<input type="radio" id="gender" name="gender" value="male" /> Male
<input type="radio" id="gender" name="gender" value="female" /> Female<br />
<label for="hobbies">Hobbies:</label>
<input type="checkbox" id="hobby1" name="hobbies" value="reading" /> Reading
<input type="checkbox" id="hobby2" name="hobbies" value="gaming" /> Gaming
<input type="checkbox" id="hobby3" name="hobbies" value="traveling" /> Traveling<br />
<input type="submit" value="Submit" />
</form>
<script>
// Get the form element
const form = document.getElementById('myForm');
// Count the number of elements in the form
const elementCount = form.querySelectorAll('*').length;
// Display the count
console.log('Number of elements in the form:', elementCount);
</script>
</body>
</html>

OUTPUT:

1|Page
DEPARTMENT OF COMPUTER
SCIENCE

2|Page
DEPARTMENT OF COMPUTER
SCIENCE
2. Create a HTML form that has number of Textboxes. When the form runs in the Browser fill the
Text boxes with data. Write JavaScript code that verifies that all textboxes has been filled. If a
textboxes has been left empty, popup an alert indicating which textbox has been left empty.

Source code:
<html>
<head>
<title>Registration Form</title>
<script type =
"text/javascript"> function
validate()
{
if(document.myForm.Name.value == "")
{
alert("Please Provide Your
Name");
document.myForm.Name.focus();
return false;
}
if(document.myForm.Email.value == "")
{
alert("Please Provide Your Email
ID");
document.myForm.Email.focus();
return false;
}
if ((document.myForm.Zip.value == "")||(document.myForm.Zip.value.length != 5))
{
alert("Please Provide a valid zip code format
#####"); document.myForm.Zip.focus();
return false;
}
if(document.myForm.Country.value == "-1")
{
alert("Please Provide Your Country
Name"); return false;
}
return true;
}
function validateEmail()
{
var emailID =
document.myForm.Email.value; atpos =
emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if(atpos < 1 || (dotpos - atpos < 2))
{
alert("Please Enter Correct Email ID");
document.myForm.Email.focus();
return false;
}
return true;
}
</script>
</head>
3|Page
DEPARTMENT OF COMPUTER
<body > SCIENCE
<form name = "myForm" onsubmit = "return(validate());" >
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>

4|Page
DEPARTMENT OF COMPUTER
<td>Name</td> SCIENCE
<td><input type = "text" name = "Name" /></td>
</tr>
<tr>
<td>Email ID</td>
<td><input type = "text" name = "Email" onchange = "validateEmail();"/></td>
</tr>
<tr>
<td>Zip Code</td>
<td><input type = "text" name = "Zip" /></td>
</tr>
<tr>
<td>Country</td>
<td><select name = "Country" >
<option value = "-1" selected> [Choose Yours]</option>
<option value = "1" >INDIA</option>
<option value = "2" >USA</option>
<option value = "3" >Srilanka</option>
</select>
</td>
</tr>
<tr>
<td colspan = "2" align = "center"><input type = "submit" value = "Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Output:

5|Page
DEPARTMENT OF COMPUTER
SCIENCE

3. Develop a HTML Form, which accepts any Mathematical expression. Write JavaScript code
to Evaluates the expression and Displays the result

Source Code:
<html>
<head>
<title>Mathematical Expression</title>
<script type =
"text/javascript"> function
math_exp()
{
var x = document.form1.exptext.value;
var result = eval(x);
document.form1.resulttext.value = result;
}
</script>
</head>
<body >
<form name = "form1">
<table>
<tr>
<td>Expression</td>
<td><input type = "text" name = "exptext" /></td>
</tr>
<tr>
<td>Result</td>
<td><input type = "text" name = "resulttext" /></td>
</tr>
<tr>
<td><input type = "button" value = "calculate" onclick = "math_exp()" /></td>
</tr>
</table>
</form>
</body>
</html>

Output:

6|Page
DEPARTMENT OF COMPUTER
SCIENCE

4. Create a page with dynamic effects. Write the code to include layers and basic animation.

Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
/* Define the styles for the layers */
.layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 0;
pointer-events: none;
}

/* Define the animation */


.animation {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
animation-name: move;
animation-duration: 2s;
animation-iteration-count: infinite;
z-index: 1;
pointer-events: none;
}

/* Define the keyframes for the animation */


@keyframes move {
0% { left: 0; top: 0; }
50% { left: 50%; top: 50%; }
100% { left: 0; top: 0; }
}
</style>
</head>
<body>
<div class="layer"></div>
<div class="animation"></div>

<script>
// Get the animation element
const animation = document.querySelector('.animation');

// Add event listener to start the animation when the page is loaded
window.addEventListener('load', () => {
animation.style.animationPlayState = 'running';
});
7|Page
DEPARTMENT OF COMPUTER
</script> SCIENCE
</body>
</html>

Output:

8|Page
DEPARTMENT OF COMPUTER
SCIENCE

5. Write a JavaScript code to find the sum of N natural Numbers.


Source Code:
function sumOfNNumbers(n) {
let sum = 0;

for (let i = 1; i <= n; i++) {


sum += i;
}

return sum;
}

// Example usage
const n = 10;
const result = sumOfNNumbers(n);
console.log("Sum of first", n, "natural numbers:", result);
Output:

9|Page
DEPARTMENT OF COMPUTER
SCIENCE
6. Write a JavaScript code block using arrays and generate the current date in words, this should include
the day, month and year

Source Code:

// Define arrays for day, month, and year


const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const monthsOfYear = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October',
'November', 'December'];

// Get the current date


const currentDate = new Date();

// Extract the day, month, and year from the current date
const day = currentDate.getDate();
const month =
currentDate.getMonth(); const year =
currentDate.getFullYear();

// Convert the day, month, and year to words


const dayWord = daysOfWeek[currentDate.getDay()];
const monthWord = monthsOfYear[month];

// Generate the current date in words


const currentDateInWords = `${dayWord}, ${monthWord} ${day}, ${year}`;

// Display the current date in


words
console.log(currentDateInWords);

Output:

10 | P a g
e
DEPARTMENT OF COMPUTER
SCIENCE
7. Create a form for Student information. Write JavaScript code to find Total, Average, Result and Grade.

Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Student Information</title>
</head>
<body>
<h1>Student Information</h1>

<form id="studentForm">
<label for="name">Name:</label>
<input type="text" id="name" required><br>

<label for="maths">Maths:</label>
<input type="number" id="maths" required><br>

<label for="science">Science:</label>
<input type="number" id="science" required><br>

<label for="english">English:</label>
<input type="number" id="english" required><br>

<button type="button" onclick="calculateResult()">Calculate</button>


</form>

<div id="resultContainer" style="display: none;">


<h2>Result</h2>
<p id="total"></p>
<p id="average"></p>
<p id="result"></p>
<p id="grade"></p>
</div>

<script>
function calculateResult() {
// Get the form input values
var name = document.getElementById("name").value;
var maths = parseInt(document.getElementById("maths").value);
var science = parseInt(document.getElementById("science").value);
var english = parseInt(document.getElementById("english").value);

// Calculate the total and average


marks var total = maths + science +
english; var average = total / 3;

// Determine the result and grade based on average


marks var result = average >= 40 ? "Pass" : "Fail";
var grade = "";

if (average >= 90)


{ grade = "A+";
} else if (average >= 80) {
10 | P a g e
DEPARTMENT OF COMPUTER
grade = "A"; SCIENCE
} else if (average >= 70)
{ grade = "B";
} else if (average >= 60)
{ grade = "C";
} else if (average >= 50)
{ grade = "D";
} else {
grade = "E";
}

// Display the result and grade


document.getElementById("total").textContent = "Total Marks: " + total;
document.getElementById("average").textContent = "Average Marks: " + average.toFixed(2);
document.getElementById("result").textContent = "Result: " + result;
document.getElementById("grade").textContent = "Grade: " + grade;

// Show the result container


document.getElementById("resultContainer").style.display = "block";
}
</script>
</body>
</html>

Output:

11 | P a g e
DEPARTMENT OF COMPUTER
SCIENCE
8. Create a form for Student information. Write JavaScript code to find Total, Average, Result and Grade.

Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Employee Information</title>
</head>
<body>
<h1>Employee Information</h1>

<form id="employeeForm">
<label for="name">Name:</label>
<input type="text" id="name" required><br>

<label for="salary">Salary:</label>
<input type="number" id="salary" required><br>

<button type="button" onclick="calculatePay()">Calculate</button>


</form>

<div id="payrollContainer" style="display: none;">


<h2>Payroll Details</h2>
<p id="da"></p>
<p id="hra"></p>
<p id="pf"></p>
<p id="tax"></p>
<p id="grossPay"></p>
<p id="deduction"></p>
<p id="netPay"></p>
</div>

<script>
function calculatePay() {
// Get the form input values
var name = document.getElementById("name").value;
var salary = parseFloat(document.getElementById("salary").value);

// Calculate the Dearness Allowance (DA), House Rent Allowance (HRA), Provident Fund (PF)
var da = salary * 0.1;
var hra = salary * 0.15;
var pf = salary * 0.12;

// Calculate the taxable income


var taxableIncome = salary - (da + hra + pf);

// Calculate the tax amount


var tax = taxableIncome *
0.1;

// Calculate the gross pay and deduction


var grossPay = salary + da + hra;
var deduction = pf + tax;

12 | P a g e
DEPARTMENT OF COMPUTER
// Calculate the net pay SCIENCE

13 | P a g e
DEPARTMENT OF COMPUTER
SCIENCE
var netPay = grossPay - deduction;

// Display the payroll details


document.getElementById("da").textContent = "Dearness Allowance (DA): $" + da.toFixed(2);
document.getElementById("hra").textContent = "House Rent Allowance (HRA): $" + hra.toFixed(2);
document.getElementById("pf").textContent = "Provident Fund (PF): $" + pf.toFixed(2);
document.getElementById("tax").textContent = "Tax: $" + tax.toFixed(2);
document.getElementById("grossPay").textContent = "Gross Pay: $" + grossPay.toFixed(2);
document.getElementById("deduction").textContent = "Deduction: $" + deduction.toFixed(2);
document.getElementById("netPay").textContent = "Net Pay: $" + netPay.toFixed(2);

// Show the payroll container


document.getElementById("payrollContainer").style.display = "block";
}
</script>
</body>
</html>

Output:

14 | P a g e
DEPARTMENT OF COMPUTER
SCIENCE
9. Create a form consists of a two Multiple choice lists and one single choice
list (a)The first multiple choice list, displays the Major dishes available.
(b) The second multiple choice list, displays the Starters available.
(c) The single choice list, displays the Soft drinks available.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Menu Selection</title>
</head>
<body>
<h1>Menu Selection</h1>

<form id="menuForm">
<label for="majorDishes">Major Dishes:</label>
<select id="majorDishes" multiple>
<option value="pizza">Pizza</option>
<option value="burger">Burger</option>
<option value="pasta">Pasta</option>
<option value="steak">Steak</option>
</select><br>

<label for="starters">Starters:</label>
<select id="starters" multiple>
<option value="salad">Salad</option>
<option value="soup">Soup</option>
<option value="bruschetta">Bruschetta</option>
<option value="wings">Chicken Wings</option>
</select><br>

<label for="softDrinks">Soft Drinks:</label>


<select id="softDrinks">
<option value="coke">Coke</option>
<option value="pepsi">Pepsi</option>
<option value="sprite">Sprite</option>
<option value="fanta">Fanta</option>
</select><br>

<button type="submit">Submit</button>
</form>
</body>
</html>
Output:

15 | P a g e
DEPARTMENT OF COMPUTER
SCIENCE

16 | P a g e

You might also like