Exp 2.
Develop JavaScript to use decision making and looping statements
<!DOCTYPE htm>
<head>
<title>Javascript Decision Mkaing Example0</title>
</head>
<body>
<script type="text/javascript">
var number = 7;
if (number>5){
document.write('The number is greater than 5.<br>')
if(number %2==0){
document.write("The number is even.<br>");
} else {
document.writ("The number is odd.<br>");
var fruit = 'apple';
switch(fruit){
case 'banana':fruit
document.write('The fruit is a banana.<br>');
break;
case'apple':
document.write('The fruit is an apple.<br>');
break;
default:
document.write('unknown fruit.<br>');
break;
</script>
</body>
</html>
EXP 3. Develop JavaScript to implement Aray functionalities.
<html lang="en">
<head>
<title>Array Operations</title>
</head>
<body>
<h1>Array Operations</h1>
<input type="text" id="elementInput" placeholder="Enter element">
<button onclick="pushElement()">Push</button>
<button onclick="popElement()">Pop</button>
<button onclick="shiftElement()">Shift</button>
<button onclick="reverseArray()">Reverse</button>
<button onclick="sortArray()">Sort</button>
<h2>Array:</h2>
<div id="arrayDisplay">[ ]</div>
<script>
// Initialize an empty array
let myArray = [];
// Function to update the array display
function updateDisplay() {
document.getElementById('arrayDisplay').innerText = `[ ${myArray.join(', ')} ]`;
// Push an element into the array
function pushElement() {
const input = document.getElementById('elementInput').value;
if (input) {
myArray.push(input);
updateDisplay();
document.getElementById('elementInput').value = '';
} else {
alert('Please enter an element!');
// Pop the last element from the array
function popElement() {
if (myArray.length > 0) {
const popped = myArray.pop();
alert(`Popped element: ${popped}`);
updateDisplay();
} else {
alert('Array is empty!');
// Shift (remove) the first element from the array
function shiftElement() {
if (myArray.length > 0) {
const shifted = myArray.shift();
alert(`Shifted element: ${shifted}`);
updateDisplay();
} else {
alert('Array is empty!');
// Reverse the array
function reverseArray() {
myArray.reverse();
updateDisplay();
// Sort the array
function sortArray() {
myArray.sort();
updateDisplay();
</script>
</body>
</html>
EXP 4:- Develop JavaScript to implement functions.
<html>
<head>
<title>Javascript Functions Demo</title>
</head>
<body>
<h1>Javascript Functions Example</h1>
<script>
function greet(name, age) {
// Instead of template literals
document.write("Hello " + name + ", You are " + age + " years old <br>");
greet("Bob", 45);
function addnumbers(a, b) {
return a + b;
let result = addnumbers(12, 8);
document.write("The Sum of 12 and 8 is " + result + "<br>");
const multiply = new Function('a', 'b', 'return a * b;');
// Different values
let product = multiply(7, 6);
document.write("The product of 7 and 6 is " + product + "<br>");
</script>
</body>
</html>
EXP 6;- create webpage using Form Elements.(
<html>
<body>
<form action="">
Use name: <br>
<input type="text" name="userid"><br>
Use password: <br>
<input type="password" name="pwd"><br>
<input type="submit" value="Submit">
<input type="reset">
<br>
<input type="radio" name="gender" value="male" checked>Male<br>
<input type="radio" name="gender" value="female">Female<br>
<input type="radio" name="gender" value="other">Other<br>
<input type="checkbox" name="vehicle1" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car">I have a car<br>
</form>
</body>
</html>
EXP 7:- reate a webpage to implement Form Events.(
<html>
<head>
<script type="text/javascript">
function sayhello() {
alert ("Hello World");
function myfunction () {
document.getElementById("demo").innerHTML = "Hello World";
function changecolor (elemnt, clr) {
elmnt.style.color = clr;
</script>
</head>
<body>
<form>
<input type="button" onclick="sayHello()" value="sayhello"/>
<p ondbclick = "myFunction ()">
Double-click this paragroph to trigger a function.
</p>
<p id="demo"></p>
<h1 onmouseover="this.style.color = 'red'" onmouseout="this.style.color="black" >
Mouse over this text
</h1>
<p onmousedown="Changecolor (this,'red');" onmouseup="changecolor (this, 'green')" > hi now ru ?
</p>
</form>
</body>
</html>
EXP 8:- reate a webpage to implement Form Events.(
<html>
<head>
<script>
function myfunction() {
alert("You pressed a key inside the input field");
function myfunction1() {
var x = document.getElementById("tname");
x.value = x.value.toUpperCase();
function myfunction2() {
alert("You pressed a key inside the input field");
</script>
</head>
<body>
<input type="text" onkeypress="myfunction()">
Enter your name: <input type="text" id="tname" onkeyup="myfunction1()">
<input type="text" onkeydown="myfunction2()">
</body>
</html>
EXP 9:;= Develop a webpage using Intrinsic Java Functions
<!DOCTYPE html>
<html>
<head>
<title> Combine Form Example </title>
<script type="text/javascript">
function Enable Function () {
document.form.myform. name. disabled = fake.
function Disable function () {
Clocument. form. myform. name. disabled = true;
function Submit form (event) {
event. prevent Default();
alert("Form
Submitted
succesfully");
</script>
</head>
<body>
<form name="myform">
Roll number: <input type="text"
<br /> <br />
name = "roll" />
Name: <input type="text" name="name" />
<br /> <br />
<input type="button" value="submit" onclick="Submit Form (event);
<br><br/>
</body>
</html>
EXP 10 evelop a webpage for creating session and persistent cookies.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>Cookie Manager</h1>
<label for="cookie-name">Cookie Name:</label>
<input type="text" id="cookie-name" placeholder="Enter cookie name" required>
<label for="cookie-value">Cookie Value:</label>
<input type="text" id="cookie-value" placeholder="Enter cookie value" required>
<label for="cookie-expiry">Expiry Time (in days):</label>
<input type="number" id="cookie-expiry" placeholder="Enter expiry days (leave empty for session cookie)">
<button onclick="setCookie()">Set Cookie</button>
<button onclick="getCookies()">Get All Cookies</button>
<button onclick="deleteCookie()">Delete Cookie</button>
<div class="output" id="output"></div>
</div>
<script>
// Function to set a cookie
function setCookie() {
const name = document.getElementById('cookie-name').value;
const value = document.getElementById('cookie-value').value;
const expiryDays = document.getElementById('cookie-expiry').value;
if (!name || !value) {
alert("Please enter both cookie name and value.");
return;
let cookieString = `${name}=${value}; path=/;`;
if (expiryDays) {
const date = new Date();
date.setTime(date.getTime() + expiryDays * 24 * 60 * 60 * 1000);
cookieString += `expires=${date.toUTCString()};`;
document.cookie = cookieString;
alert("Cookie set successfully!");
// Function to get all cookies
function getCookies() {
const cookies = document.cookie;
const output = document.getElementById('output');
output.textContent = cookies ? `Cookies: ${cookies}` : "No cookies found.";
// Function to delete a specific cookie
function deleteCookie() {
const name = document.getElementById('cookie-name').value;
if (!name) {
alert("Please enter the cookie name to delete.");
return;
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
alert("Cookie deleted successfully!");
</script>
</body>
</html>
Exp 11:- Develop a webpage for placing the Window on the screen and working with child
window.(p
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>Window & Child Window Manager</h1>
<!-- Parent Window Controls -->
<h2>Parent Window Controls</h2>
<button onclick="moveWindow()">Move Main Window</button>
<!-- Child Window Controls -->
<h2>Child Window Controls</h2>
<button onclick="openChild()">Open Child Window</button>
<button onclick="moveChild()">Move Child Window</button>
<button onclick="resizeChild()">Resize Child Window</button>
<button onclick="closeChild()">Close Child Window</button>
<!-- Communication -->
<h2>Send Message to Child</h2>
<input type="text" id="messageToChild" placeholder="Enter message for child window">
<button onclick="sendMessageToChild()">Send Message</button>
<script>
let childWindow = null;
// Move the main window
function moveWindow() {
window.moveTo(200, 200);
alert("Main window moved to (200, 200)");
// Open a new child window
function openChild() {
if (childWindow && !childWindow.closed) {
alert("Child window is already open.");
return;
childWindow = window.open("", "ChildWindow", "width=400,height=400");
childWindow.document.write(`
<html>
<head><title>Child Window</title></head>
<body>
<h1>Child Window</h1>
<p id="parentMessage">No message from parent yet.</p>
<button onclick="sendMessageToParent()">Send Message to Parent</button>
<script>
function sendMessageToParent() {
if (window.opener && !window.opener.closed) {
window.opener.receiveMessageFromChild("Hello from Child Window!");
</script>
</body>
</html>
Exp 12:- Develop a webpage for validation of form fields using regular expressions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
margin: 20px;
.container {
max-width: 600px;
margin: auto;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
input {
width: calc(100% - 22px);
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
button {
padding: 10px;
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
width: 100%;
font-size: 16px;
border-radius: 4px;
button:hover {
background-color: #218838;
}
.error {
color: red;
font-size: 14px;
.success {
color: green;
font-size: 16px;
</style>
</head>
<body>
<div class="container">
<h1>Form Validation</h1>
<form id="validationForm">
<label for="name">Name (Only alphabets, min 3 characters):</label>
<input type="text" id="name" placeholder="Enter your name" required>
<span id="nameError" class="error"></span>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email" required>
<span id="emailError" class="error"></span>
<label for="phone">Phone Number (10 digits):</label>
<input type="tel" id="phone" placeholder="Enter your phone number" required>
<span id="phoneError" class="error"></span>
<label for="password">Password (Min 8 characters, 1 uppercase, 1 number):</label>
<input type="password" id="password" placeholder="Enter your password" required>
<span id="passwordError" class="error"></span>
<button type="button" onclick="validateForm()">Submit</button>
</form>
<div id="formMessage" class="success"></div>
</div>
<script>
// Validation function
function validateForm() {
let isValid = true;
// Name validation
const name = document.getElementById("name").value;
const nameError = document.getElementById("nameError");
const nameRegex = /^[A-Za-z]{3,}$/; // Only alphabets, at least 3 characters
if (!nameRegex.test(name)) {
nameError.textContent = "Invalid name. Only letters, min 3 characters.";
isValid = false;
} else {
nameError.textContent = "";
// Email validation
const email = document.getElementById("email").value;
const emailError = document.getElementById("emailError");
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Standard email regex
if (!emailRegex.test(email)) {
emailError.textContent = "Invalid email format.";
isValid = false;
} else {
emailError.textContent = "";
// Phone validation
const phone = document.getElementById("phone").value;
const phoneError = document.getElementById("phoneError");
const phoneRegex = /^\d{10}$/; // Exactly 10 digits
if (!phoneRegex.test(phone)) {
phoneError.textContent = "Invalid phone number. Must be 10 digits.";
isValid = false;
} else {
phoneError.textContent = "";
// Password validation
const password = document.getElementById("password").value;
const passwordError = document.getElementById("passwordError");
const passwordRegex = /^(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,}$/; // Min 8 chars, 1 uppercase, 1 number
if (!passwordRegex.test(password)) {
passwordError.textContent =
"Invalid password. Min 8 characters, 1 uppercase letter, 1 number.";
isValid = false;
} else {
passwordError.textContent = "";
// Form Message
const formMessage = document.getElementById("formMessage");
if (isValid) {
formMessage.textContent = "Form submitted successfully!";
} else {
formMessage.textContent = "";
</script>
</body>
</html>
Exp 14Develop a webpage for implementing Menus.(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Example</title>
</head>
<body>
<ul class="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">About</a>
<ul class="dropdown">
<li><a href="#">Team</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Vision</a></li>
</ul>
</li>
<li>
<a href="#">Services</a>
<ul class="dropdown">
<li><a href="#">Web Development</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Marketing</a></li>
</ul>
</li>
<li><a EXP 16ref="#">Contact</a></li>
</ul>
</body>
</html>
Exp16: Develop a webpage for implementing Slideshow, banner
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1 style="text-align: center; padding: 20px 0;">Slideshow & Banner</h1>
<div class="slideshow-container">
<!-- Slides -->
<div class="slide">
<img src="https://via.placeholder.com/1200x400/ff7c7c/333?text=Slide+1" alt="Slide 1">
</div>
<div class="slide">
<img src="https://via.placeholder.com/1200x400/7cafff/333?text=Slide+2" alt="Slide 2">
</div>
<div class="slide">
<img src="https://via.placeholder.com/1200x400/ffd27c/333?text=Slide+3" alt="Slide 3">
</div>
<!-- Navigation Buttons -->
<button class="prev" onclick="changeSlide(-1)">❮</button>
<button class="next" onclick="changeSlide(1)">❯</button>
<!-- Dots -->
<div class="dots">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</div>
<script>
let currentIndex = 0;
const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.dot');
// Initialize Slideshow
showSlide(currentIndex);
// Show Slide Function
function showSlide(index) {
if (index >= slides.length) currentIndex = 0;
if (index < 0) currentIndex = slides.length - 1;
// Hide all slides
slides.forEach((slide) => (slide.style.display = 'none'));
// Remove "active" class from dots
dots.forEach((dot) => dot.classList.remove('active'));
// Show the current slide and activate the corresponding dot
slides[currentIndex].style.display = 'block';
dots[currentIndex].classList.add('active');
// Change Slide
function changeSlide(step) {
currentIndex += step;
showSlide(currentIndex);
// Set Current Slide
function currentSlide(index) {
currentIndex = index - 1;
showSlide(currentIndex);
// Auto Slide
setInterval(() => {
changeSlide(1);
}, 5000); // Change slide every 5 seconds
</script>
</body>
</html>
