Lab Manual WT

Web Technology Lab
Department of Computer Science & Engineering Session

2023-2024
SHRI JAGDISHPRASAD JHABARMAL TIBREWALA UNIVERSITY

Vidya Nagari, Jhunjhunu-Churu Road, Village-Chudela, Dist.-Jhunjhunu, Rajasthan-
333001
Conducted by-Shri Rajasthani Seva Sangh (Mumbai)
Faculty Name:
Arti Panwar
Student Name: Devender Singh
Roll No. : 21BC8011
Course: BCA
Semester: V
Batch: 2023-2024
INDEX
S. Name of the Exercise Date Signature Remarks

N. & Date
1 Design the following static web pages required 12-7-23
for an online book store web site.
HOME PAGE: The static home page must contain three

frames.
LOGIN PAGE
CATOLOGUE PAGE: The catalogue page should
contain the details of all the books available in the web
site in a table.
REGISTRATION PAGE
2 Develop and demonstrate the usage of inline, internal, 16-7-23
and external style sheet using CSS.
3 Develop and demonstrate JavaScript with POP-UP 14-8-23
boxes and functions for the following problems:
Input: Click on Display Date button using onclick ()
function Output: Display date in the textbox
Input: A number n obtained using prompt Output:
Factorial of n number using alert
4 Write an HTML page that contains a selection box with 16-8-3
a list of 5 countries. When the user selects a country, its
capital should be printed next in the list. Add CSS to
customize the properties of
the font of the capital (color,bold and font size)
5 Develop and demonstrate PHP Script for the following 6-9-23
problems:
a) Write a PHP Script to find out the Sum of the
Individual Digits. b) Write a PHP Script to check
whether the given number
is Palindrome or not
6 Write a program to design a simple calculator using 20-9-23
JavaScript
7 Write a program to design a simple calculator using 2—10-23
PHP
8 Write JavaScript to validate the following fields 10-10-23
of the Registration page. 1. First Name (Name
should contains alphabets and the length should
not be less than 6 characters). 2. Password
(Password should not be less than 6 characters
length).
3. E-mail id (should not contain any invalid and
must follow the standard pattern
[email protected]) 4. Mobile Number (Phone
number should contain 10 digits only). Last
Name and Address
(should not be Empty)
9 Develop and demonstrate JavaScript with POP- 12-11-23
UP boxes and functions for the following
problems:
Input: A number n obtained using prompt
Output: A multiplication table of numbers from 1
to 10 of n using alert
Input: A number n obtained using prompt and
add another number using confirm
Output: Sum of the entire n numbers using alert 15-11-23
1.Design the following static web pages required for an online book
store web site.
HOME PAGE: The static home page must contain three frames.
LOGIN PAGE
CATOLOGUE PAGE: The catalogue page should contain the details of all
the books available in the web site in a table.
REGISTRATION PAGE
Program code:
1. Home page
<!DOCTYPE html>
<html>
<head>
<title>Online Book Store</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to our Online Book Store</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="catalogue.html">Catalogue</a></li>
</ul>
</nav>
<section>
<h2>Featured Books</h2>
<! -- Add book thumbnails and descriptions here -->
</section>
<footer>
© 2023 Online Book Store
</footer>
</body>
</html>
Output
Login.html
<!DOCTYPE html>
<html>
<head>
<title>Login - Online Book Store</title>
</head>
<body>
<header>
<h1>Login to your account</h1>
</header>
<section>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"
required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
required><br><br>
<input type="submit" value="Login">
</form>
</section>
<footer>
</footer>
</body>
</html>
OUTPUT
Catalogue.html
<!DOCTYPE html>
<html>
<head>
<title>Book Catalogue - Online Book Store</title>
</head>
<body>
<header>
<h1>Book Catalogue</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="catalogue.html">Catalogue</a></li>
</ul>
</nav>
<section>
<h2>Available Books</h2>
<table>
<tr>
<th>Title</th>
<th>Author</th>
<th>Price</th>
</tr>
<tr>
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>800</td>
</tr>
<tr>
<td>To Kill a Mockingbird</td>
<td>Harper Lee</td>
<td>Rs300</td>
</tr>
<tr>
<td>1984</td>
<td>George Orwell</td>
<td>Rs 200</td>
</tr>
</table>
</section>
<footer>
</footer>
</body>
</html>
OUTPUT
2. Develop and demonstrate the usage of inline, internal, and external
style sheet using CSS.
Program code:
Inline CSS:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue;">This is a heading with inline CSS</h1>
<p style="font-size: 18px;">This is a paragraph with inline CSS.</p>
</body>
</html>
OUTPUT:
Internal CSS:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
h1 {
color: green;
}
p{
font-size: 24px;
}
</style>
</head>
<body>
<h1>This is a heading with internal CSS</h1>
<p>This is a paragraph with internal CSS.</p>
</body>
</html>
OUTPUT
External CSS:
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
</head>
<body>
<h1>This is a heading with external CSS</h1>
<p>This is a paragraph with external CSS.</p>
</body>
</html>
OUTPUT
3.Develop and demonstrate JavaScript with POP-UP boxes and

functions for the following problems: a) Input: Click on Display Date
button using onclick () function Output: Display date in the textbox b)
Input: A number n obtained using prompt Output: Factorial of n
number using alert
Program code:
a) Display Date:
<!DOCTYPE html>
<html>
<head>
<title>Display Date</title>
<script>
function display Date() {
// Get the current date
var current Date = new Date();
// Extract the date components (day, month, year)
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1; // Months are zero-
based
var year = currentDate.getFullYear();
// Display the date in the textbox with id "dateTextbox"

document.getElementById("dateTextbox").value = day + "/" +
month + "/" + year;
}
</script>
</head>
<body>
<h1>Display Date</h1>
<input type="text" id="dateTextbox" placeholder="Date will be
displayed here">
<button onclick="displayDate()">Display Date</button>
</body>
</html>
OUTPUT:
b. Factorial of a Number:
<!DOCTYPE html>
<html>
<head>
<title>Factorial Calculator</title>
<script>
function calculateFactorial() {
// Get a number from the user using prompt
var num = parseInt(prompt("Enter a number:"));
// Check if the input is a valid number

if (!isNaN(num)) {
var factorial = 1;
// Calculate the factorial

for (var i = 1; i <= num; i++) {
factorial *= i;
}
// Display the factorial using alert

alert("Factorial of " + num + " is: " + factorial);
} else {
alert("Invalid input. Please enter a valid number.");
}
}
</script>
</head>
<body>
<h1>Factorial Calculator</h1>
<button onclick="calculateFactorial()">Calculate Factorial</button>
</body>
</html>
Output
4. Write an HTML page that contains a selection box with a list of 5
countries. When the user selects a country, its capital should be printed
next in the list. Add CSS to customize the properties of the font of the
capital (color,bold and font size)
PROGRAM CODE:
<!DOCTYPE html>
<html>
<head>
<title>Country Capitals</title>
<style>
/* CSS to style the font of the capital */
#capital {
color: blue; /* Change the color to your preferred color */
font-weight: bold; /* Make it bold */
font-size: 18px; /* Change the font size to your preferred size */
}
</style>
<script>
// JavaScript function to display the capital based on the selected
country
function displayCapital() {
var countrySelect = document.getElementById("countrySelect");
var capitalDisplay = document.getElementById("capital");
// Define an object with country-capital pairs

var countryCapitals = {
"Select a Country": "",
"USA": "Washington, D.C.",
"Canada": "Ottawa",
"UK": "London",
"France": "Paris",
"Germany": "Berlin"
};
// Get the selected country from the selection box

var selectedCountry = countrySelect.value;
// Display the capital for the selected country

capitalDisplay.textContent = countryCapitals[selectedCountry];
}
</script>
</head>
<body>
<h1>Country Capitals</h1>
<label for="countrySelect">Select a Country:</label>
<select id="countrySelect" onchange="displayCapital()">
<option value="Select a Country">Select a Country</option>
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="UK">UK</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
</select>
<p>Capital: <span id="capital"></span></p>
</body>
</html>
OUTPUT:
5.Develop and demonstrate PHP Script for the following problems: a)
Write a PHP Script to find out the Sum of the Individual Digits. b)
Write a PHP Script to check whether the given number is Palindrome
or not.
Here are PHP scripts for both of the problems you mentioned:
a) Sum of Individual Digits:
Program code:
OUTPUT
(b)Check if a Number is Palindrome:
PROGRAM CODE
OUTPUT
6. Write a program to design a simple calculator using JavaScript
Program code
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<style>
input[type="text"] {
width: 150px;
}
</style>
</head>
<body>
<h1>Simple Calculator</h1>
<form name="calculator">
<input type="text" name="display" id="display" readonly>
<br>
<input type="button" value="1" onclick="appendToDisplay('1')">
<input type="button" value="+" onclick="appendToDisplay('+')">
<br>
<input type="button" value="-" onclick="appendToDisplay('-')">
<br>
<input type="button" value="*" onclick="appendToDisplay('*')">
<br>
<input type="button" value="C" onclick="clearDisplay()">
<input type="button" value="=" onclick="calculate()">
<input type="button" value="/" onclick="appendToDisplay('/')">
</form>
<script>
function appendToDisplay(value) {
document.calculator.display.value += value;
}
function clearDisplay() {
document.calculator.display.value = '';
}
function calculate() {
try {
document.calculator.display.value =
eval(document.calculator.display.value);
} catch (error) {
document.calculator.display.value = 'Error';
}
}
</script>
</body>
</html>
OUTPUT
Write a program to design a simple calculator using PHP
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
</head>
<body>
<h1>Simple Calculator</h1>
<form method="post" action="">

<input type="text" name="num1" placeholder="Enter first number"
required>
<select name="operator">
<option value="+">Addition</option>
<option value="-">Subtraction</option>
<option value="*">Multiplication</option>
<option value="/">Division</option>
</select>
<input type="text" name="num2" placeholder="Enter second number"
required>
<input type="submit" name="calculate" value="Calculate">
</form>
<?php
if (isset($_POST['calculate'])) {
$num1 = $_POST['num1'];
$num2 = $_POST['num2'];
$operator = $_POST['operator'];
switch ($operator) {
case "+":
$result = $num1 + $num2;
break;
case "-":
$result = $num1 - $num2;
break;
case "*":
$result = $num1 * $num2;
break;
case "/":
if ($num2 == 0) {
echo "Division by zero is not allowed.";
} else {
$result = $num1 / $num2;
}
break;
default:
echo "Invalid operator";
}
echo "Result: " . $result;

}
?>
</body>
</html>
7.Write JavaScript to validate the following fields of the Registration page.

1. First Name (Name should contains alphabets and the length should not be
less than 6 characters). 2. Password (Password should not be less than 6
characters length). 3. E-mail id (should not contain any invalid and must
follow the standard pattern [email protected]) 4. Mobile Number (Phone
number should contain 10 digits only). Last Name and Address (should not
be Empty)
Program code
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<script>
function validateForm() {
var firstName =
document.forms["registrationForm"]["firstName"].value;
var lastName =
document.forms["registrationForm"]["lastName"].value;
var password =
document.forms["registrationForm"]["password"].value;
var email = document.forms["registrationForm"]["email"].value;
var mobile = document.forms["registrationForm"]["mobile"].value;
var address = document.forms["registrationForm"]["address"].value;
// Regular expressions for validation

var nameRegex = /^[A-Za-z]{6,}$/;
var passwordRegex = /^.{6,}$/;
var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-
Z]{2,4}$/;
var mobileRegex = /^\d{10}$/;
// Validate First Name

if (!nameRegex.test(firstName)) {
alert("First Name should contain alphabets and be at least 6
characters long.");
return false;
}
// Validate Password
if (!passwordRegex.test(password)) {
alert("Password should be at least 6 characters long.");
return false;
}
// Validate Email
if (!emailRegex.test(email)) {
alert("Invalid Email format. Please use [email protected].");
return false;
}
// Validate Mobile Number

if (!mobileRegex.test(mobile)) {
alert("Mobile Number should contain exactly 10 digits.");
return false;
}
// Validate Last Name

if (lastName.trim() === "") {
alert("Last Name cannot be empty.");
return false;
}
// Validate Address
if (address.trim() === "") {
alert("Address cannot be empty.");
return false;
}
// If all validations pass, the form is valid

return true;
}
</script>
</head>
<body>
<h1>Registration Form</h1>
<form name="registrationForm" onsubmit="return validateForm()">
<label for="firstName">First Name:</label>
<input type="text" name="firstName" required><br><br>
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" required><br><br>
<label for="password">Password:</label>
<input type="password" name="password" required><br><br>
<label for="email">Email:</label>
<input type="email" name="email" required><br><br>
<label for="mobile">Mobile Number:</label>
<input type="text" name="mobile" required><br><br>
<label for="address">Address:</label>
<textarea name="address" required></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
OUTPUT
8. Develop and demonstrate JavaScript with POP-UP boxes and functions
for the following problems: a) Input: A number n obtained using prompt
Output: A multiplication table of numbers from 1 to 10 of n using alert b)
Input: A number n obtained using prompt and add another number using
confirm Output: Sum of the entire n numbers using alert
Program code
Multiplication Table:
<!DOCTYPE html>
<html>
<head>
<title>Multiplication Table</title>
</head>
<body>
<h1>Multiplication Table</h1>
<script>
function displayMultiplicationTable() {
// Prompt user for a number
var n = parseInt(prompt("Enter a number:"));
if (!isNaN(n)) {
var table = "Multiplication table of " + n + ":\n";
for (var i = 1; i <= 10; i++) {

table += n + " x " + i + " = " + (n * i) + "\n";
}
alert(table);
} else {
alert("Invalid input. Please enter a valid number.");
}
}
</script>
<button onclick="displayMultiplicationTable ()">Show Multiplication

Table</button>
</body>
</html>
OUTPUT
(b) Sum of Numbers:

<!DOCTYPE html>
<html>
<head>
<title>Sum of Numbers</title>
</head>
<body>
<h1>Sum of Numbers</h1>
<script>
function calculateSum() {
// Prompt user for a number
var n = parseInt(prompt("Enter a
number:"));
if (!isNaN(n)) {
// Confirm if the user wants to
add another number
var addAnother = confirm("Do you want to add another
number?");
if (addAnother) {
var additionalNumber = parseInt(prompt("Enter another
number:"));
if (!isNaN(additionalNumber)) {
n += additionalNumber;
} else {
alert("Invalid input for the additional number.");
}
}
alert("Sum of the numbers is: " + n);

} else {
alert("Invalid input for the first number.");
}
}
</script>
<button onclick="calculateSum()">Calculate Sum</button>

</body>
</html>
OUTPUT

Lab Manual WT

Uploaded by

Copyright:

Available Formats

Lab Manual WT

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab Manual WT

Uploaded by

Copyright:

Available Formats

Web Technology Lab

Department of Computer Science & Engineering Session

SHRI JAGDISHPRASAD JHABARMAL TIBREWALA UNIVERSITY

S. Name of the Exercise Date Signature Remarks

HOME PAGE: The static home page must contain three

3.Develop and demonstrate JavaScript with POP-UP boxes and

// Display the date in the textbox with id "dateTextbox"

// Check if the input is a valid number

// Calculate the factorial

// Display the factorial using alert

// Define an object with country-capital pairs

// Get the selected country from the selection box

// Display the capital for the selected country

(b)Check if a Number is Palindrome:

<form method="post" action="">

echo "Result: " . $result;

7.Write JavaScript to validate the following fields of the Registration page.

// Regular expressions for validation

// Validate First Name

// Validate Mobile Number

// Validate Last Name

// If all validations pass, the form is valid

for (var i = 1; i <= 10; i++) {

<button onclick="displayMultiplicationTable ()">Show Multiplication

(b) Sum of Numbers:

alert("Sum of the numbers is: " + n);

<button onclick="calculateSum()">Calculate Sum</button>

You might also like