1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe tag use</title>
</head>
<body>
<div id="menu">
<ul>
<a href="fruits.html" target="frame3">Fruits</a>
<a href="flower.html" target="frame3">Flower</a>
<a href="cities.html" target="frame3">Cities</a>
</ul>
</div>
<iframe id="frame3" name="frame3" src="" frameborder="2" height="100%" width="100%">This is
a frame</iframe>
<script>
document.querySelectorAll('#menu a').forEach(link =>{
document.getElementById("frame3").innerHTML=this.href;
});
</script>
</body>
</html>
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>replacing a word</title>
</head>
<body>
<script>
var str1= "I will Fail";
var ReplacedString=str1.replace('Fail','Pass');
document.write("Old String: "+str1);
document.write("<br>")
document.write("Updated String:"+ReplacedString);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cookie</title>
</head>
<body>
<!-- //Explain how to read and write cookie value by implementing an example. -->
<button onclick="setCookie()">Set Cookie</button>
<p id="cookieDisplay">Cookie will be displayed here.</p>
<script>
function setCookie() {
document.cookie = "MyName=Hello, Cookie!";
display();
function getCookie(name) {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
return "";
function display(){
var cookieValue = getCookie("MyName");
if (cookieValue) {
document.getElementById("cookieDisplay").innerText = "Cookie Value: " + cookieValue;
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validation</title>
</head>
<body>
<p id="vdresult">Registration Form</p>
<form action="">
<label>Enter Name:
<input type="text" id="name" name="name" required>
Enter Email:
<input type="text" id="Email" name="Email" required>
</label>
</form>
<script>
function Validation(){
var nameInput=document.getElementById("name");
var mailInput=document.getElementById("Email");
var validationResult=document.getElementById("vdresult");
var name = nameInput.value.trim();
var Email = mailInput.value.trim();
var mailpattern=/^[a-zA-Z0-9._-]+@[a-zA-z0-9.-]+\.[a-zA-Z]{2,4}$/;
if(name=== ""|| Email=== ""){
vdresult.textContent="Both Name and Email are required";
else if(!Email.match(mailpattern)){
vdresult.textContent="Invalid email address";
else{
vdresult.textContent="Name and email are valid. Form submitted!";
}
</script>
<button onclick="Validation()" value="Submit">Submit</button>
</body>
</html>
<!-- Write a JavaScript function to create Fibonacci series till user defines it. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fibbonessi</title>
</head>
<body>
<button onclick="startFibbo()">Start Fibbo here</button>
<p id="fibbos">Your series will be displayed here</p>
<script>
function startFibbo() {
let maxNumber = parseInt(prompt("Enter a maximum number:"));
if (isNaN(maxNumber) || maxNumber < 0) {
document.getElementById("fibbos").textContent = "Please Eneter a valid Non editable
number";
return;
let fibSeries = [0, 1];
let nextfib = 1;
while (nextfib <= maxNumber) {
fibSeries.push(nextfib);
nextfib = fibSeries[fibSeries.length - 1] + fibSeries[fibSeries.length - 2];
document.getElementById("fibbos").textContent = "Fibbinessi Series up to:" + maxNumber +
": " + fibSeries.join(", ");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RadioSelection</title>
</head>
<body>
<script>
function updateOption() {
const fruits = ["Apple", "Banana", "Cherry", "Date"];
const vegetables = ["Carrot", "Broccoli", "Spinach", "Pepper"];
//Get the dropdown element by its ID
const select = document.getElementById("options");
select.innerHTML = "";
// Check which radio button is selected (fruits or vegetables)
const isFruitSelected = document.getElementById("fruits").checked;
const options = isFruitSelected ? fruits : vegetables;
options.forEach(option => {
const opt = document.createElement("option");
opt.value = option;
opt.textContent=option;
select.appendChild(opt);
});
</script>
<script>
updateOption();
</script>
<h1> Select Fruits or vegetables</h1>
<label for="">
<input type="radio" id="fruits" name="category" value="fruits" onclick="
updateOption()"checked>
Fruits
</label>
<label for="">
<input type="radio" id="vegetables" name="category" value="vegetables"
onclick="updateOption()">
Vegetables
</label>
<br>
<br>
<label for="option">Choose an option</label>
<select id="options">
<!-- options will be populated here -->
</select>
</body>
</html>
;;;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruits and Vegetables Selector</title>
<script>
// Function to update the dropdown options based on the selected category
function updateOptions() {
// Arrays containing fruits and vegetables
const fruits = ["Apple", "Banana", "Cherry", "Date"];
const vegetables = ["Carrot", "Broccoli", "Spinach", "Pepper"];
// Get the dropdown element by its ID
const select = document.getElementById("options");
select.innerHTML = ""; // Clear any existing options in the dropdown
// Check which radio button is selected (fruits or vegetables)
const isFruitsSelected = document.getElementById("fruits").checked;
// Choose the appropriate array based on the selected radio button
const options = isFruitsSelected ? fruits : vegetables;
// Loop through the selected options and create dropdown items
options.forEach(option => {
// Create a new option element
const opt = document.createElement("option");
opt.value = option; // Set the value of the option
opt.textContent = option; // Set the displayed text of the option
select.appendChild(opt); // Add the option to the dropdown
});
</script>
</head>
<body>
<h1>Select Fruits or Vegetables</h1>
<!-- Radio buttons to select either Fruits or Vegetables -->
<label>
<input type="radio" id="fruits" name="category" value="fruits" onclick="updateOptions()"
checked>
Fruits
</label>
<label>
<input type="radio" id="vegetables" name="category" value="vegetables"
onclick="updateOptions()">
Vegetables
</label>
<br><br>
<!-- Label and dropdown for selecting an option -->
<label for="options">Choose an option:</label>
<select id="options">
<!-- Options will be populated here -->
</select>
<script>
// Call the function to initialize the dropdown with fruits by default
updateOptions();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Evaluate Checkbox Selection</title>
</head>
<body>
<form action="" name="selection">
<p>
<input type="checkbox" name="HS" id="HS">High School
<input type="checkbox" name="AD" id="AD">Associate Degree
<input type="checkbox" name="BD" id="BD">Backlor Degree
<button onclick="Education()">Check for selections!</button>
</p>
</form>
<script>
function Education(){
var selection="You selected:"
with (document.forms.selection)
if (HS.checked== true) {
selection+="High School";
if(AD.checked == true){
selection+=", Associate Degree";
if(BD.checked ==true){
selection+=", BAchlor Degree";
document.write("Your Selection"+selection);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration</title>
</head>
<body>
<form action="">
<label for="name">
Enter your name:
<input type="text" name="name" id="name">
<br>
Enter Your Email Address:
<input type="text" name="Email" id="Email" required placeholder="[email protected]">
<br>
Gender:
<input type="radio" name="Gender" id="Male">Male
<input type="radio" name="Gender" id="Female"> Female
</label>
</form>
<button type="button" value="submit" onclick="Register()">Register</button>
<h1 id="validation">Registration Result will be Displayed here>>></h1>
<script>
function Register() {
const FullName = document.getElementById("name").value;
const EmailAdd = document.getElementById("Email").value;
const radiosignal = document.getElementsByName("Gender");
var mailpattern = /^[a-zA-Z0-9._-]+@[a-zA-z0-9.-]+\.[a-zA-Z]{2,4}$/;
let selectedGender = "";
for (let radio of radiosignal) {
if (radio.checked) {
selectedGender = radio.value;
break;
}
if (FullName != "" && EmailAdd.match(mailpattern) && selectedGender != "") {
document.getElementById("validation").textContent = "Registration successfull";
else {
document.getElementById("validation").textContent = "Registration Unsuccessfull";
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- Status bar is disabled in modern browsers we need to set a proper css to see effects but this is
not like our intention -->
<body>
<p id="scrollingMsg">Status bar will be displayed here....</p>
<script>
let msg = "This is an example of a scrolling message";
let spacer = "...";
let pos = 0; // Starting position
function ScrollMessage() {
// Create the scrolling message
const scrollingText = msg.substring(pos) + spacer + msg.substring(0, pos);
document.getElementById("scrollingMsg").textContent = scrollingText;
// Update position
pos++;
if (pos > msg.length) {
pos = 0; // Reset position
// Call ScrollMessage again after a timeout
setTimeout(ScrollMessage,100);
window.onload = ScrollMessage;
</script>
</body>
</html>
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click n Open</title>
</head>
<body style="background-color: green; color: black;">
<h3>Selct a option to navigate to....</h3>
<select onchange="show(this)" name="selction" id="selction">
<option value="https://www.google.com">Msbte</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.tutorialspoint.com">Tutorials Point</option>
</select>
<script>
function show(select){
window.location.href=select.value;
</script>
</body>
</html>
11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Concealing</title>
</head>
<body>
<label for="email">
Enter your Email address:
<input type="email" name="email" id="email" placeholder="[email protected]">
</label>
<p id="result"></p>
<button onclick="ConcealEmail()">Conceal</button>
<script>
function ConcealEmail()
const email=document.getElementById("email").value;
const atIndex=email.indexOf('@');
if(atIndex > 2){
const sliced=email.slice(atIndex)
const consealing=email[0] + "****" +sliced;
document.getElementById("result").innerText="Concealedmail:"+consealing;
else
document.getElementById("result").innerText="Email Format is not valid";
</script>
</body>
</html>
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Hover Example</title>
<style>
#hovertext {
margin-bottom: 20px;
font-size: 18px;
font-weight: bold;
</style>
</head>
<body>
<h1>Hover Over the Elements</h1>
<div id="hovertext"
onmouseover="changeText('Hovered over Text Boxes!!')"
onmouseout="changeText('Hover over the boxes for different actions')">
Hover over this text box!
</div>
<div
onmouseover="changeImage('hover.jpg')"
onmouseout="changeImage('default.jpg')">
<img id="img" src="default.jpg" alt="default image" width="200" height="150">
</div>
<script>
function changeText(newText) {
document.getElementById("hovertext").innerHTML = newText;
function changeImage(newImage) {
document.getElementById("img").src = newImage;
</script>
</body>
</html>
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="ShowBanners()">
<a href="javascript: ShowLinks()">
<img src="" width="100" height="500" name="ChangeBanner" /></a>
</body>
<script>
MyBanners = new Array('ajp.jpg', 'css.jpg')
banner = 0
MyBannerLinks = new Array('https://www.amazon.in/Advanced-Java-Programming-
Ramaraj/dp/9388005392', 'https://www.amazon.in/CSS-Basic-Fundamental-Guide-Beginners-
ebook/dp/B07DX74TZ2')
function ShowLinks() {
document.location.href = MyBannerLinks[banner]
function ShowBanners() {
if (document.images) {
banner++
if (banner == MyBanners.length) {
banner = 0
}
document.ChangeBanner.src = MyBanners[banner]
setTimeout("ShowBanners()", 3000)
</script>
</html>
13.1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner Advertisement</title>
</head>
<body onload="showBanners()">
<a href="javascript: showLinks()">
<img src="" alt="banner" height="500" width="100" name="ChangeBanner" style="border: 1px
solid black;">
</a>
<script>
const MyBanner = ['ajp.jpg', 'css.jpg'];
const MyBannerLinks = [
'https://www.amazon.in/Advanced-Java-Programming-Ramaraj/dp/9388005392',
'https://www.amazon.in/CSS-Basic-Fundamental-Guide-Beginners-ebook/dp/B07DX74TZ2'
];
let banner = 0;
function showLinks() {
document.location.href = MyBannerLinks[banner];
function showBanners() {
if (document.images) {
banner++;
if (banner >= MyBanner.length) {
banner = 0;
document.ChangeBanner.src = MyBanner[banner];
setTimeout(showBanners, 5000);
</script>
</body>
</html>
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide Show</title>
<script>
let img_array = ['/college.png', '/logo.jpg', '/profile.jpg', '/speech.jpg', '/university.jpg'];
let img = 0;
function DisplayingImg(num) {
img = img + num;
if (img > img_array.length - 1) {
img = 0;
if (img < 0) {
img = img_array.length - 1;
document.getElementById("slideImg").src = img_array[img]; // Update the src attribute of the
image
window.onload = function() {
document.getElementById("slideImg").src = img_array[img]; // Set initial image on page load
};
</script>
</head>
<body>
<img id="slideImg" src="college.png" alt="Slide Image" width="400" height="220" />
<input type="button" value="Previous" onclick="DisplayingImg(-1)">
<input type="button" value="Next" onclick="DisplayingImg(1)">
</body>
</html>
15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="result"></p>
<input type="button" value="Back" onclick="previousPage()">
<input type="button" value="Forward" onclick="NextPage()">
<input type="button" value="go" onclick="go1()">
<script>
//This is function for history properties::::
function NextPage(){
window.history.forward();
function previousPage(){
window.history.back();
function go()
window.history.go1(2);
// let host=window.location.host;
// let protocol=window.location.protocol;
// let port=window.location.port;
// let href=window.location.href;
// let Origin=window.location.origin;
// let pathname=window.location.pathname;
// document.write("Properties are as follows:: "+"Host:"+host+", Protocol:"+protocol+",
Port:"+port+", Href:"+href+", Origin: "+Origin+", Pathaname: "+pathname);
let array = ['host', 'protocol', 'port', 'href', 'origin', 'pathname'];
let result = [];
for (let i = 0; i < array.length; i++) {
result.push(window.location[array[i]]);
let outputString = "Properties are as follows: " +
array.map((prop, index) => `${prop}: ${result[index]}`).join(", ");
// Display the results in the output div
document.getElementById("result").innerText = outputString;
</script>
</body>
</html>
16
<html>
<head>
<title>Getter & Setters</title>
</head>
<body>
<script>
var mycar={
carName: "MG Hector",
get nameCar(){
return this.carName;
},
set nameCar(newName){
return this.carName=newName;
},
};
document.write("Car Name is:"+mycar.carName);
mycar.nameCar = "Bugatti";
document.write("cars new name is:"+mycar.nameCar);
</script>
</body>
</html>
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flowers array</title>
</head>
<body>
<p id="flr"></p>
<script>
let flower=['Mogra', 'Lotus', 'Rose'];
flower.forEach(element => {
document.write(element+", ");
});
</script>
</body>
</ html >
18
<html>
<script>
function calAvg(){
var sub1 = 56;
var sub2 = 66;
var sub3 = 89;
var sub4 = 99;
var sub5 = 78;
var avg = (sub1+sub2+sub3+sub4+sub5)/5;
if(avg >= 90){
document.write("A Grade");
else if(avg >= 80){
document.write("B Grade");
else if(avg >= 70){
document.write("C Grade");
else{
document.write("F Grade");
</script>
<body>
<input type="button" value="Check Average" onclick="calAvg()">
</body>
</html>
