Scribd
Upload
15 views15 pages

WT Lab

Web technologies

Uploaded by

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

WT Lab

Web technologies

Uploaded by

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

1.

Write a script to compare two strings using String object

<!DOCTYPE html>
<html>
<head>
<title>String Comparison</title>
</head>
<body>
<h1>String Comparison</h1>
<label for="string1">String 1:</label>
<input type="text" id="string1" placeholder="Enter the first string">
<br>
<label for="string2">String 2:</label>
<input type="text" id="string2" placeholder="Enter the second string">
<br>
<button onclick="compareStrings()">Compare</button>
<p id="output"></p>

<script>
function compare Strings() {
const string1 = document.getElementById('string1').value;
const string2 = document.getElementById('string2').value;

// Using the localeCompare method of String object


const result = string1.localeCompare(string2);

let output = '';


if (result < 0) {
output = `${string1} comes before ${string2}`;
} else if (result > 0) {
output = `${string1} comes after ${string2}`;
} else {
output = `${string1} and ${string2} are equal`;
}

document.getElementById('output').textContent = output;
}
</script>
</body>
</html>

1
2. Write a script to generate random numbers within 1 to 10 and display
the numbers in a table.

<!DOCTYPE html>
<html>
<head>
<title>Random Numbers Table</title>
</head>
<body>
<h1>Random Numbers Table</h1>
<button onclick="generateRandomNumbers()">Generate Random
Numbers</button>
<br>
<table id="randomTable" border="1">
<tr>
<th>Random Number</th>
</tr>
</table>

<script>
function generate Random Numbers() {
const table = document.getElementById('randomTable');
table.innerHTML = '<tr><th>Random Number</th></tr>'; // Clear previous
table content

for (let i = 0; i< 10; i++) {


constrain domNumber = Math.floor(Math.random() * 10) + 1; // Generate
random number between 1 to 10

const row = table.insertRow();


const cell = row.insertCell();
cell.textContent = randomNumber;
}
}
</script>
</body>
</html>

2
3. Write a Java Script to update the information into the array, in the
“onClick” event of the button “Update”.

<!DOCTYPE html>
<html>
<head>
<title>Update Array Information</title>
</head>
<body>
<h1>Update Array Information</h1>
<form id="updateForm">
<label for="name">Name:</label>
<input type="text" id="name" required>
<br>
<label for="age">Age:</label>
<input type="number" id="age" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" required>
<br>
<button type="button" onclick="updateArray()">Update</button>
</form>

<h2>Updated Array:</h2>
<ul id="output"></ul>

<script>
// Initialize an empty array to store the information
letinformationArray = [];

function updateArray() {
const name = document.getElementById('name').value;
const age = document.getElementById('age').value;
const email = document.getElementById('email').value;

// Create an object to store the information


const person = {
name: name,
age: age,
email: email
};

// Push the object into the array


informationArray.push(person);

// Display the updated array


displayUpdatedArray();
}

functiondisplayUpdatedArray() {
constoutputList = document.getElementById('output');

3
outputList.innerHTML = '';

informationArray.forEach(person => {
constlistItem = document.createElement('li');
listItem.textContent = `Name: ${person.name}, Age: ${person.age}, Email:
${person.email}`;
outputList.appendChild(listItem);
});
}
</script>
</body>
</html>

4
4.Create a web page for a shopping mall that allows the user to
tick off his purchases and obtain the bill with the total being
added up simultaneously

<!DOCTYPE html>
<html>
<head>
<title>Shopping Mall - Bill Calculator</title>
<style>
table {
border-collapse: collapse;
width: 50%;
margin: 20px auto;
}

th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}

th {
background-color: #f2f2f2;
}

#total {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Shopping Mall - Bill Calculator</h1>
<table>
<tr>
<th>Item</th>
<th>Price</th>
<th>Select</th>
</tr>
<tr>
<td>T-shirt</td>
<td>10.00</td>
<td><input type="checkbox" name="item" value="10.00"
onchange="calculateTotal()"></td>
</tr>
<tr>
<td>Jeans</td>
<td>20.00</td>
<td><input type="checkbox" name="item" value="20.00"
onchange="calculateTotal()"></td>
</tr>

5
<tr>
<td>Shoes</td>
<td>30.00</td>
<td><input type="checkbox" name="item" value="30.00"
onchange="calculateTotal()"></td>
</tr>
</table>

<p id="total">Total: $0.00</p>

<script>
function calculateTotal() {
const checkboxes = document.getElementsByName('item');
let total = 0;

for (let i = 0; i<checkboxes.length; i++) {


if (checkboxes[i].checked) {
total += parseFloat(checkboxes[i].value);
}
}

document.getElementById('total').textContent = `Total: $${total.toFixed(2)}`;


}
</script>
</body>
</html>

6
5. Using functions write a java script code that accepts user name
and password from user, Check their correctness and display
appropriate alert messages

<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1>Login Page</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" required>
<br>
<button type="button" onclick="validateLogin()">Login</button>
</form>

<script>
functionvalidateLogin() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;

// Replace the following username and password with your desired


values
constvalidUsername = 'user123';
constvalidPassword = 'password123';

if (username === validUsername&& password === validPassword) {


alert('Login successful! Welcome, ' + username);
} else if (username === validUsername) {
alert('Incorrect password. Please try again.');
} else {
alert('Invalid username. Please try again.');
}
}
</script>
</body>
</html>

7
6. Create an inline style sheet. Illustrate the use of an embedded
style sheet

<!DOCTYPE html>
<html>
<head>
<title>Style Sheets Example</title>
</head>
<body>
<h1 style="color: blue;">Inline Style Sheet</h1>
<p style="font-size: 18px; color: green;">This is a paragraph with inline styles
applied.</p>

<h1>Embedded Style Sheet</h1>


<p>This is a paragraph with styles applied from an embedded style sheet.</p>

<style>
/* Embedded Style Sheet */
h1 {
color: red;
}

p{
font-size: 16px;
color: orange;
}
</style>
</body>
</html>

8
7. Create an external style sheet to illustrate the “Font” elements

Step 1: Create a new file named "styles.css" and add the following CSS code:

styles.css:

/* External Style Sheet */

/* Apply font properties to h1 */


h1 {
font-family: "Arial", sans-serif;
font-size: 36px;
font-weight: bold;
color: navy;
}

/* Apply font properties to p */


p{
font-family: "Times New Roman", serif;
font-size: 20px;
line-height: 1.5;
color: #333;
}

Step 2: Create a new HTML file and link the external style sheet:

index.html:

<!DOCTYPE html>
<html>
<head>
<title>Font Elements - External Style Sheet</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to Our Website</h1>
<p>This is an example of using external style sheets to apply font properties to
HTML elements.</p>
</body>
</html>

9
8. Create a internal DTD file.

<!DOCTYPE html [
<!ELEMENT html (head, body)>
<!ELEMENT head (title)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT body (h1, p)>
<!ELEMENT h1 (#PCDATA)>
<!ELEMENT p (#PCDATA)>
]>

<html>
<head>
<title>Internal DTD Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example of using an internal DTD.</p>
</body>
</html>

10
9. Create an external DTD file.

Step 1: Create an external DTD file named "example.dtd" with the following
content:

example.dtd:

<!ELEMENT html (head, body)>


<!ELEMENT head (title)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT body (h1, p)>
<!ELEMENT h1 (#PCDATA)>
<!ELEMENT p (#PCDATA)>

Step 2: Create a new HTML file named "index.html" and link the external DTD
using the <!DOCTYPE> declaration:

index.html:

<!DOCTYPE html SYSTEM "example.dtd">


<html>
<head>
<title>External DTD Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example of using an external DTD.</p>
</body>
</html>

11
10. Write a PHP program that interacts with the user. Collect first
name lastname and date of birth and displays that information
back to the user.

<!DOCTYPE html>
<html>
<head>
<title>User Information Collection</title>
</head>
<body>
<h1>User Information Collection</h1>
<?php
// Check if the form has been submitted
if (isset($_POST['submit'])) {
$firstName = $_POST['first_name'];
$lastName = $_POST['last_name'];
$dateOfBirth = $_POST['date_of_birth'];

// Display the collected information back to the user


echo "<p><strong>First Name:</strong> $firstName</p>";
echo "<p><strong>Last Name:</strong> $lastName</p>";
echo "<p><strong>Date of Birth:</strong> $dateOfBirth</p>";
} else {
?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label for="first_name">First Name:</label>
<input type="text" name="first_name" required>
<br>
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" required>
<br>
<label for="date_of_birth">Date of Birth:</label>
<input type="date" name="date_of_birth" required>
<br>
<input type="submit" name="submit" value="Submit">
</form>
<?php } ?>
</body>
</html>

12
11. Write a JSP program for session tracking

index.jsp:

<!DOCTYPE html>
<html>
<head>
<title>Session Tracking Example</title>
</head>
<body>
<h1>Session Tracking Example</h1>
<form action="process.jsp" method="post">
<label for="username">Username:</label>
<input type="text" name="username" required>
<br>
<label for="password">Password:</label>
<input type="password" name="password" required>
<br>
<input type="submit" value="Login">
</form>
</body>
</html>

process.jsp:

<%@ page import="java.util.*" %>


<%@ page language="java" %>
<%
// Retrieve username from the form
String username = request.getParameter("username");

// Create a new session or retrieve an existing session


HttpSession session = request.getSession(true);

// Set the attribute "username" in the session


session.setAttribute("username", username);
%>
<!DOCTYPE html>
<html>
<head>
<title>Welcome Page</title>
</head>
<body>
<h1>Welcome, <%= session.getAttribute("username") %>!</h1>
<p>Your session ID: <%= session.getId() %></p>
</body>
</html>

13
12. Create Registration and Login Forms with Validations using
JScript Query

Step 1: Create an HTML file with the registration and login forms.

index.html:

<!DOCTYPE html>
<html>
<head>
<title>Registration and Login Forms</title>
<scriptsrc="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Registration Form</h1>
<form id="registrationForm">
<label for="username">Username:</label>
<input type="text" id="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" required>
<br>
<button type="submit">Register</button>
</form>

<h1>Login Form</h1>
<form id="loginForm">
<label for="loginUsername">Username:</label>
<input type="text" id="loginUsername" required>
<br>
<label for="loginPassword">Password:</label>
<input type="password" id="loginPassword" required>
<br>
<button type="submit">Login</button>
</form>
</body>
</html>

Step 2: Create a JavaScript file to handle form validations and submission.

script.js:

$(document).ready(function() {
// Registration Form Validation and Submission
$('#registrationForm').submit(function(e) {
e.preventDefault();
var username = $('#username').val();
var password = $('#password').val();

if (username === '' || password === '') {


alert('Please fill in all fields.');

14
return;
}

// Perform your registration logic here, e.g., send data to the server

alert('Registration successful!');

// Clear the form fields after successful registration


$('#username').val('');
$('#password').val('');
});

// Login Form Validation and Submission


$('#loginForm').submit(function(e) {
e.prevent Default();
varlogin Username = $('#loginUsername').val();
varlogin Password = $('#loginPassword').val();

if (loginUsername === '' || loginPassword === '') {


alert('Please fill in all fields.');
return;
}

// Perform your login logic here, e.g., check username and password with
server-side data

alert('Login successful!');

// Clear the form fields after successful login


$('#loginUsername').val('');
$('#loginPassword').val('');
});
});

15

You might also like