1)write a javascript to create person object with properties firstname,
Lastname, age, eyecolor, detect eyecolor property and displaying remaining
properties of person object.
<!DOCTYPE html>
<html>
<head>
<title>Person Object</title>
</head>
<body>
<h1>Person Object</h1>
<p id="output"></p>
<script>
// Create a Person object
let person = { firstname: "John", lastname: "Doe", age: 30, eyecolor: "blue" };
// Detect eyecolor and display the output
let output = `Eye color: ${person.eyecolor || "not found"}. `;
output += `Remaining: firstname: ${person.firstname}, lastname: ${person.lastname},
age: ${person.age}`;
document.getElementById("output").innerText = output;
</script>
</body>
</html>
Output:- Eye color: blue. Remaining: firstname: John, lastname: Doe, age: 30
2)write a javascript program to print sum of even numbers between 1 to 100
using for loop.
<!DOCTYPE html>
<html>
<head>
<title>Sum of Even Numbers</title>
</head>
<body>
<h1>Sum of Even Numbers (1 to 100)</h1>
<p id="result"></p>
<script>
let sum = 0;
for (let i = 2; i <= 100; i += 2) { // Increment by 2 to iterate only even numbers
sum += i;
}
document.getElementById("result").innerText = `The sum of even numbers between 1
and 100 is: ${sum}`;
</script>
</body>
</html>
Output:- The sum of even numbers between 1 and 100 is: 2550
3) Develop javascript to implement array functionalities. (push(), pop(),
shift(), unshift(), concat(), slice(), etc.)
<!DOCTYPE html>
<html>
<head>
<title>Array Functionalities</title>
</head>
<body>
<h1>JavaScript Array Functionalities</h1>
<p id="output"></p>
<script>
// Initialize an array
let fruits = ["Apple", "Banana", "Mango"];
// Array functionalities
fruits.push("Orange"); // Adds an element at the end
fruits.pop(); // Removes the last element
fruits.unshift("Grapes"); // Adds an element at the beginning
fruits.shift(); // Removes the first element
// Concatenation
let vegetables = ["Carrot", "Potato"];
let combined = fruits.concat(vegetables);
// Slicing
let sliced = combined.slice(1, 4); // Extracts elements from index 1 to 3
// Display the results
let output = `
Original Array: ["Apple", "Banana", "Mango"]<br>
After push and pop: ${JSON.stringify(fruits)}<br>
After unshift and shift: ${JSON.stringify(fruits)}<br>
Combined Array: ${JSON.stringify(combined)}<br>
Sliced Array (index 1 to 3): ${JSON.stringify(sliced)}
`;
document.getElementById("output").innerHTML = output;
</script>
</body>
</html>
Output:- Original Array: ["Apple", "Banana", "Mango"]
After push and pop: ["Apple","Banana","Mango"]
After unshift and shift: ["Apple","Banana","Mango"]
Combined Array: ["Apple","Banana","Mango","Carrot","Potato"]
Sliced Array (index 1 to 3): ["Banana","Mango","Carrot"]
4)write a javascript function to count the number of vowels in a given string
<!DOCTYPE html>
<html>
<head>
<title>Vowel Counter</title>
</head>
<body>
<h1>Count Vowels in a String</h1>
<p>Enter a string to count its vowels:</p>
<input type="text" id="inputString" placeholder="Type something...">
<button onclick="countVowels()">Count Vowels</button>
<p id="result"></p>
<script>
function countVowels() {
// Get the input string
let str = document.getElementById("inputString").value;
// Define the vowels
const vowels = "aeiouAEIOU";
// Initialize a counter
let count = 0;
// Loop through the string and count vowels
for (let char of str) {
if (vowels.includes(char)) {
count++;
}
}
// Display the result
document.getElementById("result").innerText = `Number of vowels: ${count}`;
}
</script>
</body>
</html>
Output:-
5)write a javascript function that checks whether a passed string is
palindrome or not.
<!DOCTYPE html>
<html>
<head>
<title>Palindrome Checker</title>
</head>
<body>
<h1>Palindrome Checker</h1>
<p>Enter a string to check if it's a palindrome:</p>
<input type="text" id="inputString" placeholder="Type something...">
<button onclick="checkPalindrome()">Check</button>
<p id="result"></p>
<script>
function checkPalindrome() {
// Get the input string
let str = document.getElementById("inputString").value;
// Remove non-alphanumeric characters and convert to lowercase
let cleanedStr = str.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
// Reverse the cleaned string
let reversedStr = cleanedStr.split("").reverse().join("");
// Check if the string is a palindrome
if (cleanedStr === reversedStr) {
document.getElementById("result").innerText = `"${str}" is a palindrome!`;
} else {
document.getElementById("result").innerText = `"${str}" is not a palindrome.`;
}
}
</script>
</body>
</html>
Output:-
6)write a javascript function to insert a string within a string at a string at a
particular position.
<!DOCTYPE html>
<html>
<head>
<title>Insert String</title>
</head>
<body>
<h1>Insert String at a Specific Position</h1>
<p>Enter the main string, the string to insert, and the position:</p>
<input type="text" id="mainString" placeholder="Main string">
<input type="text" id="insertString" placeholder="String to insert">
<input type="number" id="position" placeholder="Position">
<button onclick="insertString()">Insert</button>
<p id="result"></p>
<script>
function insertString() {
// Get the main string, the string to insert, and the position
let mainStr = document.getElementById("mainString").value;
let insertStr = document.getElementById("insertString").value;
let position = parseInt(document.getElementById("position").value);
// Validate position
if (position < 0 || position > mainStr.length) {
document.getElementById("result").innerText = "Invalid position!";
return;
}
// Insert the string
let result = mainStr.slice(0, position) + insertStr + mainStr.slice(position);
// Display the result
document.getElementById("result").innerText = `Result: ${result}`;
}
</script>
</body>
</html>
Output:-
7)write a javascript that will replace following specified value withanother
value in string. 1)String-"I wiil fail". 2)Replace "fail" by "pass".
<!DOCTYPE html>
<html>
<head>
<title>String Replacement</title>
</head>
<body>
<h1>Replace String Value</h1>
<p>Original String: <strong>"I will fail"</strong></p>
<button onclick="replaceString()">Replace</button>
<p id="result"></p>
<script>
function replaceString() {
// Original string
let originalString = "I will fail";
// Replace 'fail' with 'pass'
let modifiedString = originalString.replace("fail", "pass");
// Display the result
document.getElementById("result").innerText = `Modified String: "$
{modifiedString}"`;
}
</script>
</body>
</html>
Output:-
8)create a webpage using Form Elements.
<!DOCTYPE html>
<html>
<head>
<title>Form Example</title>
</head>
<body>
<h1>Form Example</h1>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="Submit">
</form>
<script>
const form = document.getElementById('myForm');
form.addEventListener('submit', (event) => {
event.preventDefault(); // Prevent default form submission behavior
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
// Do something with the form data, e.g., send it to a server:
console.log(`Name: ${name}`);
console.log(`Email: ${email}`);
console.log(`Message: ${message}`);
// You can also display the data on the page:
const output = document.createElement('p');
output.textContent = `You entered: Name: ${name}, Email: ${email}, Message: $
{message}`;
document.body.appendChild(output);
// Clear the form fields
form.reset();
});
</script>
</body>
</html>
Output:-
9)write a javascript to changing option list dynamically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Options</title>
</head>
<body>
<label for="country">Country:</label>
<select id="country" onchange="updateCities()">
<option value="usa">USA</option>
<option value="india">India</option>
<option value="uk">UK</option>
</select>
<label for="city">City:</label>
<select id="city">
<option>Select a city</option>
</select>
<script>
function updateCities() {
var country = document.getElementById("country").value;
var citySelect = document.getElementById("city");
var cities = {
usa: ["New York", "Los Angeles", "Chicago"],
india: ["Delhi", "Mumbai", "Bangalore"],
uk: ["London", "Manchester", "Birmingham"]
};
citySelect.innerHTML = "<option>Select a city</option>"; // Reset city options
cities[country].forEach(function(city) {
var option = document.createElement("option");
option.text = city;
citySelect.add(option);
});
}
</script>
</body>
</html>
Output:-
10.write javascript to perform Disabling Elements and ReadOnly Elements.
<!DOCTYPE html>
<html>
<head>
<title>Disabling and Enabling Elements</title>
</head>
<body>
<input type="checkbox" id="enableDisableCheckbox"> Enable/Disable
<div>
<input type="text" id="textInput" disabled>
<button id="myButton" disabled>Click Me</button>
</div>
<script>
const checkbox = document.getElementById('enableDisableCheckbox');
const input = document.getElementById('textInput');
const button = document.getElementById('myButton');
checkbox.addEventListener('change', () => {
if (checkbox.checked) {
input.disabled = false;
button.disabled = false;
} else {
input.disabled = true;
button.disabled = true;
}
});
</script>
</body>
</html>
Output:-
11.Develop a webpage using intrinsic java functions.
<!DOCTYPE html>
<html>
<head>
<title>Simple JavaScript Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
// Declaring variables
let name = "Alice";
let age = 30;
// Using arithmetic operators
let sum = 10 + 5;
let difference = 15 - 7;
let product = 3 * 4;
let quotient = 20 / 5;
// Using string concatenation
let greeting = "Hello, " + name + "!";
// Using conditional statements
if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");
}
// Using loops
for (let i = 0; i < 5; i++) {
console.log("Iteration:", i);
}
// Using functions
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("Bob");
// Displaying output on the webpage
document.write("The sum is: " + sum);
document.write("<br>");
document.write("The greeting is: " + greeting);
</script>
</body>
</html>
Output:- Hello, World!
The sum is: 15
The greeting is: Hello, Alice!
12. Develop a webpage for creating persistent cookies. Observe the effects
with Browser cookie settings.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Persistent Cookies</title>
</head>
<body>
<h1>Set a Persistent Cookie</h1>
<input type="text" id="username" placeholder="Enter your name">
<button onclick="setCookie()">Set Cookie</button>
<p id="cookieOutput"></p>
<script>
function setCookie() {
var username = document.getElementById("username").value;
if (username) {
var expiryDate = new Date();
expiryDate.setFullYear(expiryDate.getFullYear() + 1);
document.cookie = "username=" + username + "; expires=" +
expiryDate.toUTCString() + "; path=/";
displayCookies();
}
}
function displayCookies() {
document.getElementById("cookieOutput").innerText = "Stored Cookie: " +
document.cookie;
}
window.onload = displayCookies;
</script>
</body>
</html>
Output:-
13.Develop a webpage for placing the window on the screen and working
with child window.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent-Child Window</title>
</head>
<body>
<h1>Parent Window</h1>
<button onclick="openChild()">Open Child Window</button>
<script>
function openChild() {
// Open a child window and position it
var child = window.open("", "", "width=300,height=200");
child.moveTo(200, 100); // Position the child window at (200, 100)
child.document.write("<h2>Child Window</h2>");
child.document.write("<button onclick='window.close()'>Close</button>");
}
</script>
</body>
</html>
Output:-
14. write a javascript function to check whether a given value is valid IP value
or not.
<!DOCTYPE html>
<html>
<head><title>IP Validator</title></head>
<body>
<input type="text" id="ip" placeholder="Enter IP">
<button onclick="checkIP()">Check</button>
<p id="result"></p>
<script>
function checkIP() {
var ip = document.getElementById("ip").value;
var regex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9]
[0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
document.getElementById("result").innerText = regex.test(ip) ? "Valid IP" : "Invalid
IP";
}
</script>
</body>
</html>
Output:-
15.create a webpage with Rollovers effect.
<HTML>
<head></head>
<Body>
<textarea rows=”2″ cols=”50″ name=”rollovertext” onmouseover=”this.value=’What is
rollover?'”
onmouseout=”this.value=’Rollover means a webpage changes when the user moves his or
her mouse over an object on the page'”></textarea>
</body>
</html>
Output:-
16.Develop a javascript 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>Simple Menu</title>
<style>
ul { list-style-type: none; }
li { display: inline; margin-right: 10px; }
a { text-decoration: none; color: black; }
</style>
</head>
<body>
<h1>Simple Menu</h1>
<ul>
<li><a href="#" onclick="alert('Home clicked')">Home</a></li>
<li><a href="#" onclick="alert('About clicked')">About</a></li>
<li><a href="#" onclick="alert('Contact clicked')">Contact</a></li>
</ul>
</body>
</html>
Output:-
