Scribd
Upload
5 views

CSS Program...

IMP

Uploaded by

darandalem505
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

CSS Program...

IMP

Uploaded by

darandalem505
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

Write a Java script to create person object with proper es firstname, lastname, age,

eyecolor, delete eyecolor property and display remaining proper es of person object.
<html>
<body>
<script> var
person = {
firstname:"John",
lastname:"Doe",
age:50,
eyecolor:"blue"
}; delete person.eyecolor; //delete person eyecolor
document.write("A er delete "+ person.firstname +" "+
person.lastname +" "
+person.age +" "+ person.eyecolor);
</script>
</body>
</html>

Write a Java script that ini alizes an array called flowers with the names of 3 flowers.
The script then displays array elements. <html>
<head>
< tle>Display Array Elements</ tle>
</head>
<body>
<script> var flowers = new
Array(); flowers[0] = 'Rose ';
flowers[1] = 'Mogra'; flowers[2] =
'Hibiscus'; for (var i = 0; i <
flowers.length; i++)
{ document.write(flowers[i] +
'<br>');
}
</script>
</body>
</html>

Write Javascript to call func on from HTML.


<html>
<head>
< tle>Calling func on from HTML</ tle>
<script> func on
welcome()
{ alert("Welcome
students");
} func on
goodbye() {
alert("Bye");
}
</script>
</head>
<body onload="welcome()" onunload="goodbye()">
</body>
</html>

Write a Javascript to design a form to accept values for user ID & password.
Ans <html>
<body>
<form name="login">
Enter Username<input type="text" name="userid"><br>
Enter Password<input type="password" name="pswrd">
<input type="bu on" onclick="display()" value="Display">
</form>
<script language="javascript">
func on display()
{ document.write("User ID "+ login.userid.value +
"Password :
"+login.pswrd.value);
}
</script>
</body>
</html>

Write a Java script program which computes, the average marks of the following students
then, this average is used to determine the corresponding grade.Student Name Marks
Sumit 80
Kalpesh 77
Amit 88
Tejas 93
Abhishek 65
The grades are computed as follows :
Range Grade
<60 E
<70 D
<80 C
<90 B
<100 A
Ans <html>
<head>
< tle>Compute the average marks and grade</ tle>
</head>
<body>
<script> var students = [['Summit', 80], ['Kalpesh', 77], ['Amit',
88], ['Tejas', 93], ['Abhishek', 65]];
var Avgmarks = 0;
for (var i=0; i < students.length; i++) {
Avgmarks += students[i][1];
} var avg = (Avgmarks/students.length);
document.write("Average grade: " +
(Avgmarks)/students.length); document.write("<br>"); if
(avg < 60){
document.write("Grade : E");
} else if (avg < 70) {
document.write("Grade :
D");
} else if (avg < 80) {
document.write("Grade :
C"); } else if (avg < 90) {
document.write("Grade :
B"); } else if (avg < 100) {
document.write("Grade :
A");
}
</script>
</body>
</html>

Write a JavaScript that will replace following specified value with another value in
string.String = “I will fail”
Replace “fail” by “pass”
<html>
<head>
<body>
<script> var myStr = ‘I will fail’; var
newStr = myStr.replace(fail, "pass");
document.write(newStr);
</script>
</body>
</head>
</html>

Write a Java Script code to display 5 elements of array in sorted order.


<html>
<head>
< tle> Array</ tle>
</head>
<body>
<script> var arr1 = [ “Red”, “red”,
“Blue”, “Green”]
document.write(“Before sor ng
arra1=” + arr1);
document.write(“<br>A er sor ng
arra1=” + arr1.sort());
</script>
</body>
</html>

Create a slideshow with the group of three images, also simulate next and previous
transi on between slides in your Java Script.
Ans <html>
<head> <script> pics = new
Array('1.jpg' , '2.jpg' , '3.jpg'); count =
0; func on slideshow(status)
{ if
(document.images
)
{ count = count + status;
if (count > (pics.length -
1))
{ count = 0; } if
(count < 0) { count =
pics.length - 1;
} documet.imag1.src =
pics[count];
}
}
</script>
</head>
<body>
<img src="1.jpg" width="200" name="img1">
<br>
<input type="bu on" value="Next" onclick="slideshow(1)">
<input type="bu on" value="Back" onclick="slideshow(-1)">
</body>
</html>

Write a Java script to modify the status bar using on MouseOver and on LMouseOut with
links. When the user moves his mouse over the links, it will display “MSBTE” in the
status bar. When the user moves his mouse away from the link the status bar will display
nothing.
Ans <html>
<head>
< tle>JavaScript Status Bar</ tle></head>
<body>
<a href=" h ps://msbte.org.in/"
onMouseOver="window.status='MSBTE';return true"
onMouseOut="window.status='';return true">
MSBTE
</a>
</body>
</html>

Write a HTML script which displays 2 radio bu ons to the users for fruits and vegetables
and 1 op on list. When user select fruits radio bu on op on list should present only fruits
names to the user
&
when user select vegetable radio bu on op on list should present only vegetable names
to the user.
Ans <html>
<head>
< tle>HTML Form</ tle>
<script language="javascript" type="text/javascript">
func on updateList(ElementValue)
{
with(document.forms.myfor
m)
{ if(ElementValue ==
1)
{
op onList[0].text="Mango
"; op onList[0].value=1;
op onList[1].text="Banana
"; op onList[1].value=2;
op onList[2].text="Apple";
op onList[2].value=3;
} if(ElementValue ==
2)
{
op onList[0].text="Potato"
; op onList[0].value=1;
op onList[1].text="Cabbag
e"; op onList[1].value=2;
op onList[2].text="Onion";
op onList[2].value=3;
}
}
}
</script>
</head>
<body>
<form name="myform" ac on="" method="post">
<p>
<select name="op onList" size="2">
<op on value=1>Mango
<op on value=2>Banana
<op on value=3>Apple
</select>
<br>
<input type="radio" name="grp1" value=1 checked="true"
onclick="updateList(this.value)">Fruits
<input type="radio" name="grp1" value=2
onclick="updateList(this.value)">Vegetables
<br>
<input name="Reset" value="Reset" type="reset">
</p>
</form>
</body>
</html>

Write a java script that displays textboxes for accep ng name & email ID & a submit
bu on.
Write java script code such that when the user clicks on submit bu on
(1) Name Valida on
(2) Email ID Valida on.
Ans <html>
<head>
< tle>Form Valida on</ tle>
</head>
<body>
<form ac on = "/cgi-bin/test.cgi" name = "myForm" onsubmit =
"return(validate());">
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td align = "right">Name</td>
<td><input type = "text" name = "Name" /></td>
</tr>
<tr>
<td align = "right">EMail</td>
<td><input type = "text" name = "EMail" /></td>
</tr>
<tr>
<td align = "right"></td>
<td><input type = "submit" value = "Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
<script type = "text/javascript">
<!-func on validate() { if(
document.myForm.Name.value == "" ) {
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false; } if(
document.myForm.EMail.value == "" ) {
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ; return
false; } var emailID =
document.myForm.EMail.value; atpos =
emailID.indexOf("@"); dotpos =
emailID.lastIndexOf("."); if (atpos < 1 || (
dotpos - atpos < 2 )) { alert("Please enter
correct email ID")
document.myForm.EMail.focus() ; return
false; } return( true );
}
//-->
</script>

Write a script for crea ng following frame structure

FRUITS, FLOWERS AND CITIES are links to the webpage fruits.html,


flowers.html, ci es.html respec vely. When these links are clicked
corresponding data appears in FRAME 3.
Ans <html>
<head>
< tle>Frame Demo</ tle>
</head>
<body>
<table border="1">
<tr>
<td align="center" colspan="2">
FRAME 1
</td>
</tr>
<tr>
<td>
FRAME 2
<ul>
<li>
<a href="fruits.html" target="mainframe">FRUITS</a>
</li>
<li>
<a href="flowers.html" target="mainframe">FLOWERS</a>
</li>
<li>
<a href="ci es.html" target="mainframe">CITIES</a>
</li>
</ul>
</td>
<td>
FRAME 3<BR>
<iframe name="mainframe"></iframe>
</td>
</tr>
</table>
</body>
</html>

Write a javascript to create a pull-down menu with three op ons [Google,


MSBTE, Yahoo] once the user will select one of the op ons then user will be
redirected to that site.
Ans <html>
<head>
< tle>HTML Form</ tle>
<script language="javascript" type="text/javascript">
func on getPage(choice)
{
page=choice.op ons[choice.selectedIndex].v
alue; if(page != "") { window.loca on=page;
}
}
</script>
</head>
<body>
<form name="myform" ac on="" method="post">
Select Your Favourite Website:
<select name="MenuChoice" onchange="getPage(this)">
<op on
value="h ps://www.google.com">Google</op on>
<op on
value="h ps://www.msbte.org.in">MSBTE</op on>
<op on
value="h ps://www.yahoo.com">Yahoo</op on>
</form>
</body>
</html>
Write a javascript program to check whether entered number is prime or not.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
<style>
body {
font-family: Arial, sans-
serif; text-align: center;
margin-top: 50px;
} input, bu on
{ padding:
10px; margin:
10px;
}
</style>
<script> func on
isPrime(number) {
if (number <= 1) { return false; } for (let i
= 2; i <= Math.sqrt(number); i++) {
if (number % i === 0) {
return false;
} } return true; }
func on
checkPrime() {
const userInput =
document.getElementById("numberInput").value; const num
= parseInt(userInput); if (isNaN(num)) {
alert("Please enter a valid number.");
} else { const result = isPrime(num); alert(result ? `${num} is a prime
number.` : `${num} is not a prime number.`); }
}
</script>
</head>
<body>
<h2>Prime Number Checker</h2>
<label for="numberInput">Enter a number:</label>
<input type="text" id="numberInput" placeholder="Enter a number">
<bu on onclick="checkPrime()">Check Prime</bu on>
</body>
</html>

Write a javascript program to changing the contents of a window.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
<style>
body {
font-family: Arial, sans-
serif; text-align: center;
margin-top: 50px;
} input, bu on
{ padding:
10px; margin:
10px;
}
</style>
<script> func on
changeContent() {
const userInput =
document.getElementById("contentInput").value;
document.getElementById("displayContent").innerText =
userInput; }
</script>
</head>
<body>
<h2>Content Changer</h2>
<label for="contentInput">Enter new content:</label>
<input type="text" id="contentInput" placeholder="Enter new content">
<bu on onclick="changeContent()">Change Content</bu on>
<div id="displayContent">Default Content</div>
</body>
</html>

Write a javascript program to validate user accounts for mul ple set of user ID and
password (using swith case statement).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
text-align: center; margin-
top: 50px;
} input, bu on
{ padding:
10px; margin:
10px;
}
</style>
<script> func on
validateUserAccount() {
const enteredUserID =
document.getElementById("userID").value; const
enteredPassword =
document.getElementById("password").value; switch
(enteredUserID) {
case "user1": return
enteredPassword === "pass1";
case "user2": return
enteredPassword === "pass2";
case "user3": return
enteredPassword === "pass3";
default:
return false;
} } func on
authen cateUser() {
if (validateUserAccount()) {
alert("Authen ca on successful. Welcome!");
} else { alert("Authen ca on failed. Please check your user ID and
password."); }
}
</script>
</head>
<body>
<h2>User Account Valida on</h2>
<label for="userID">User ID:</label>
<input type="text" id="userID" placeholder="Enter your user ID">
<br>
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Enter your password">
<br>
<bu on onclick="authen cateUser()">Login</bu on>
</body>
</html>

Write a javascript program to demonstrate java intrinsic func on


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Intrinsic Func on Demo</ tle>
<style>
body {
font-family: Arial, sans-
serif; text-align: center;
margin: 50px;
}
#output { font-
weight: bold;
color: green;
}
</style>
</head>
<body>
<h1>JavaScript Intrinsic Func on Demo</h1
<script> func on
demonstrateIntrinsicFunc on()
var randomNumber = Math.random(); var outputElement =
document.getElementById('output');
outputElement.textContent = 'Random Number: ' +
randomNumber; }
</script>
<bu on onclick="demonstrateIntrinsicFunc on()">Generate Random
Number</bu on> <p id="output"></p>
</body>
</html>

Write a javascript program to create read, update and delete cookies.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Cookie CRUD Demo</ tle>
<style>
body {
font-family: Arial, sans-
serif; text-align: center;
margin: 50px;
}
#output { font-
weight: bold;
color: green;
}
</style>
</head>
<body>
<h1>Cookie CRUD Demo</h1>
<script> func on
createCookie() {
var cookieName =
document.getElementById('cookieName').value; var
cookieValue = document.getElementById('cookieValue').value;
document.cookie = `${cookieName}=${cookieValue}`;
updateOutput('Cookie created!');
} func on
readCookie() {
var cookieName =
document.getElementById('cookieName').value; var cookies
= document.cookie.split(';'); for (var i = 0; i < cookies.length;
i++) {
var cookie = cookies[i].trim(); if
(cookie.startsWith(cookieName + '='))
{
var cookieValue = cookie.substring(cookieName.length
+ 1); updateOutput(`Cookie value: ${cookieValue}`);
return;
} } updateOutput('Cookie not
found.');
} func on
updateCookie() {
var cookieName =
document.getElementById('cookieName').value; var
cookieValue = document.getElementById('cookieValue').value;
document.cookie = `${cookieName}=${cookieValue}`;
updateOutput('Cookie updated!');
} func on
deleteCookie() {
var cookieName = document.getElementById('cookieName').value;
document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 UTC;
path=/;`; updateOutput('Cookie deleted!');
} func on
updateOutput(message) {
var outputElement = document.getElementById('output');
outputElement.textContent = message;
}
</script>
<label for="cookieName">Cookie Name:</label>
<input type="text" id="cookieName">
<label for="cookieValue">Cookie Value:</label>
<input type="text" id="cookieValue">
<br>
<bu on onclick="createCookie()">Create Cookie</bu on>
<bu on onclick="readCookie()">Read Cookie</bu on>
<bu on onclick="updateCookie()">Update Cookie</bu on>
<bu on onclick="deleteCookie()">Delete Cookie</bu on>
<p id="output"></p>
</body>
</html>

Write a javascript program to link banner adver sements to different URLs


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Banner Adver sements</ tle>
<style>
body {
font-family: Arial, sans-
serif; text-align: center;
margin: 50px;
}
.banner { width:
300px; height:
150px; border: 1px
solid #ddd;
overflow: hidden;
margin: 10px;
} img
{
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<h1>Banner Adver sements</h1>
<div class="banner" onclick="openUrl('h ps://example.com/page1')">
<img src="banner1.jpg" alt="Banner 1">
</div>
<div class="banner" onclick="openUrl('h ps://example.com/page2')">
<img src="banner2.jpg" alt="Banner 2">
</div>
<div class="banner" onclick="openUrl('h ps://example.com/page3')">
<img src="banner3.jpg" alt="Banner 3">
</div>
<script> func on
openUrl(url) {
window.open(url, '_blank');
}
</script>
</body>
</html>

Write a javascript program to calculate add, sub, mul plica on and division of two
number
(input from user). Form should contain two text boxes to input numbers of four bu ons
for addi on, subtrac on, mul plica on and division.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Calculator</ tle>
<style>
body {
font-family: Arial, sans-
serif; text-align: center;
margin: 50px;
} input, bu on
{ margin: 5px;
padding: 8px;
}
</style>
</head>
<body>
<h1>Simple Calculator</h1>
<label for="num1">Number 1:</label>
<input type="text" id="num1" placeholder="Enter number">
<label for="num2">Number 2:</label>
<input type="text" id="num2" placeholder="Enter number">
<br>
<bu on onclick="add()">Addi on</bu on>
<bu on onclick="subtract()">Subtrac on</bu on>
<bu on onclick="mul ply()">Mul plica on</bu on>
<bu on onclick="divide()">Division</bu on>
<p id="result"></p>
<script> func on add() {
performOpera on('+')
;
} func on subtract() {
performOpera on('-
');
} func on mul ply() {
performOpera on('*')
;
}
func on divide() {
performOpera on('/');
} func on
performOpera on(operator) {
var num1 = parseFloat(document.getElementById('num1').value); var
num2 = parseFloat(document.getElementById('num2').value); if
(isNaN(num1) || isNaN(num2)) {
document.getElementById('result').textContent = 'Please enter valid
numbers.';
} else {
var result; switch
(operator) { case
'+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
if (num2 !== 0) {
result = num1 / num2;
} else { document.getElementById('result').textContent = 'Cannot
divide by zero.'; return; } break;
default: document.getElementById('result').textContent =
'Invalid operator.'; return; }
document.getElementById('result').textContent = 'Result: ' + result;
}
}
</script>
</body>
</html>

Write a javascript func on that accepts a string as a parameter and find the length of the
string.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>String Length Finder</ tle>
<style>
body {
font-family: Arial, sans-
serif; text-align: center;
margin: 50px;
} input, bu on
{ margin: 5px;
padding: 8px;
}
</style>
</head>
<body>
<h1>String Length Finder</h1>
<label for="inputString">Enter a String:</label>
<input type="text" id="inputString" placeholder="Type a string">
<bu on onclick="findStringLength()">Find Length</bu on>
<p id="result"></p>
<script> func on
findStringLength() {
var inputString = document.getElementById('inputString').value;
var lengthOfInputString = inputString.length;
document.getElementById('result').textContent = 'Length of the
string: ' +
lengthOfInputString;
}
</script>
</body>
</html>

Write a javascript program to validate email ID of the user using regular expression.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Email Valida on</ tle>
<style>
body {
font-family: Arial, sans-
serif; text-align: center;
margin: 50px;
} input, bu on
{ margin: 5px;
padding: 8px;
}
#result { font-
weight: bold;
color: green;
}
</style>
</head>
<body>
<h1>Email Valida on</h1>
<label for="emailInput">Enter Email:</label>
<input type="text" id="emailInput" placeholder="Type your email">
<bu on onclick="validateEmail()">Validate Email</bu on>
<p id="result"></p>
<script> func on
validateEmail() {
var emailInput =
document.getElementById('emailInput').value; var
emailPa ern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if
(emailPa ern.test(emailInput)) {
document.getElementById('result').textContent = 'Valid
Email!'; document.getElementById('result').style.color =
'green';
} else { document.getElementById('result').textContent = 'Invalid Email. Please enter
a valid email
address.'; document.getElementById('result').style.color
= 'red'; }
}
</script>
</body>
</html>

Write a javascript program to design HTML page with books informa on in tabular
format, use rollovers to display the discount informa on.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Book Informa on</ tle>
<style>
body {
font-family: Arial, sans-
serif; text-align: center;
margin: 50px;
}
table
{
width: 80%; border-
collapse: collapse;
margin: 20px auto;
} th,
td {
border: 1px solid #ddd;
padding: 10px;
} th { background-color:
#f2f2f2;
}
tr:hover
{
background-color: #f5f5f5;
}
.discount-info { display:
none; posi on:
absolute;
background-color:
#fff; border: 1px
solid #ddd; padding:
10px; z-index: 1;
}
</style>
</head>
<body>
<h1>Books Informa on</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Price</th>
<th>Discount</th>
</tr>
</thead>
<tbody>
<tr onmouseover="showDiscount(this)" onmouseout="hideDiscount(this)">
<td>Book 1</td>
<td>Author 1</td>
<td>$20.00</td>
<td>10%</td>
</tr>
<tr onmouseover="showDiscount(this)" onmouseout="hideDiscount(this)">
<td>Book 2</td>
<td>Author 2</td>
<td>$25.00</td>
<td>15%</td>
</tr>
<!-- Add more books as needed -->
</tbody>
</table>
<div id="discountInfo" class="discount-info"></div>
<script> func on
showDiscount(row) {
var discount = row.cells[3].textContent;
var discountInfo = document.getElementById('discountInfo');
discountInfo.innerHTML = 'Discount: ' + discount; discountInfo.style.le =
(row.getBoundingClientRect().le + window.pageXOffset) + 'px';
discountInfo.style.top = (row.getBoundingClientRect().bo om +
window.pageYOffset) + 'px'; discountInfo.style.display = 'block';
} func on
hideDiscount() {
var discountInfo = document.getElementById('discountInfo');
discountInfo.style.display = 'none';
}
</script>
</body>
</html>

Write a javascript to checks whether a passed string is palindrome or not.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Palindrome Checker</ tle>
<style>
body {
font-family: Arial, sans-
serif; text-align: center;
margin: 50px;
} input, bu on
{ margin: 5px;
padding: 8px;
}
#result { font-
weight: bold;
color: green;
}
</style>
</head>
<body>
<h1>Palindrome Checker</h1>
<label for="inputString">Enter a String:</label>
<input type="text" id="inputString" placeholder="Type a string">
<bu on onclick="checkPalindrome()">Check Palindrome</bu on>
<p id="result"></p>
<script> func on
checkPalindrome() {
var inputString =
document.getElementById('inputString').value.toLowerCase(); var
reversedString = inputString.split('').reverse().join(''); if (inputString ===
reversedString) { document.getElementById('result').textContent = 'It's a
Palindrome!'; document.getElementById('result').style.color = 'green';
} else { document.getElementById('result').textContent = 'Not a Palindrome.
Try again.'; document.getElementById('result').style.color = 'red'; }
}
</script>
</body>
</html>

Develop javascript to convert the given character to unicode and vice-versa.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Character Converter</ tle>
<style>
body {
font-family: Arial, sans-
serif; text-align: center;
margin: 50px;
} input, bu on
{ margin: 5px;
padding: 8px;
}
#result { font-
weight: bold;
color: blue;
}
</style>
</head>
<body>
<h1>Character Converter</h1>
<label for="inputChar">Enter a Character:</label>
<input type="text" id="inputChar" placeholder="Type a character">
<bu on onclick="convertToUnicode()">Convert to Unicode</bu on>
<bu on onclick="convertToCharacter()">Convert to Character</bu on>
<p id="result"></p>
<script> func on convertToUnicode() { var inputChar =
document.getElementById('inputChar').value if
(inputChar.length === 1) {
var unicodeValue = inputChar.charCodeAt(0);
document.getElementById('result').textContent = `Unicode:
${unicodeValue}`;
document.getElementById('result').style.color = 'blue';
} else { document.getElementById('result').textContent = 'Please enter a
single character.'; document.getElementById('result').style.color = 'red'; } }
func on convertToCharacter() { var unicodeValue =
document.getElementById('inputChar').value;

if (!isNaN(unicodeValue)) {
var charValue = String.fromCharCode(parseInt(unicodeValue));
document.getElementById('result').textContent = `Character:
${charValue}`; document.getElementById('result').style.color = 'blue';
} else { document.getElementById('result').textContent = 'Please enter a valid
Unicode value.'; document.getElementById('result').style.color = 'red'; }
}
</script>
</body>
</html>
Write a javascript program to create a silde show with the group of six images, also
simulate the next and previous transi on between slides in your javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Image Slideshow</ tle>
<style>
body {
font-family: Arial, sans-
serif; text-align: center;
margin: 50px;
}
#slideshow-container {
max-width: 500px;
posi on: rela ve;
margin: auto;
}
.slide { display:
none; posi on:
absolute; width:
100%; height:
auto;
}
.prev, .next {
cursor: pointer;
posi on:
absolute; top:
50%; width:
auto; padding:
16px; margin-
top: -22px;
font-size: 20px;
color: white;
background-
color: #555;
border: none; }
.prev { le : 0; }
.next { right: 0; }
</style>
</head>
<body>
<h1>Image Slideshow</h1>
<div id="slideshow-container">
<img class="slide" src="image1.jpg" alt="Image 1">
<img class="slide" src="image2.jpg" alt="Image 2">
<img class="slide" src="image3.jpg" alt="Image 3">
<img class="slide" src="image4.jpg" alt="Image 4">
<img class="slide" src="image5.jpg" alt="Image 5">
<img class="slide" src="image6.jpg" alt="Image 6">
<bu on class="prev" onclick="changeSlide(-1)">❮</bu on>
<bu on class="next" onclick="changeSlide(1)">❯</bu on>
</div>
<script> var currentSlide
= 1;
showSlide(currentSlide
); func on
changeSlide(n) {
showSlide(currentSlide += n);
} func on
showSlide(n) {
var slides =
document.getElementsByClassName("slide"); if (n >
slides.length) { currentSlide = 1; } if (n < 1) {
currentSlide = slides.length; } for (var i = 0; i <
slides.length; i++) { slides[i].style.display = "none";
} slides[currentSlide - 1].style.display =
"block"; }
</script>
</body>
</html>

Write a javascript to open a new window and the new window is having two frames. One
frame containing buthon as “click here !”, and a er clicking this bu on an image should
open in the second frame of that child window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Two Frames Window</ tle>
<style>
body {
font-family: Arial, sans-
serif; text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<bu on onclick="openNewWindow()">Open New Window</bu on>
<script> func on
openNewWindow() {
var newWindow = window.open('', '_blank', 'width=600, height=400'); var
frame1Content = '<html><head><style>body {text-align:
center;}</style></head>' +
'<body><bu on onclick="openImage()">Click Here!</bu on></body></html>';
var frame2Content = '<html><head></head><body
id="imageContainer"></body></html>'; newWindow.document.open();
newWindow.document.write('<frameset cols="50%,50%">');
newWindow.document.write('<frame name="frame1" src="data:text/html,' +
encodeURIComponent(frame1Content) + '">');
newWindow.document.write('<frame name="frame2"
src="data:text/html,' +
encodeURIComponent(frame2Content) + '">');
newWindow.document.write('</frameset>');
newWindow.document.close();
} func on openImage() { var imageUrl = 'h ps://via.placeholder.com/300'; var
imageContainer =
window.frames['frame2'].document.getElementById('imageContainer');
imageContainer.innerHTML = '<img src="' + imageUrl + '" alt="Image">'; }
</script>
</body>
</html>

Write a javascript to create op on list containing list of images and then display images in
new window as per selec on.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Image Selector</ tle>
<style>
body {
font-family: Arial, sans-
serif; text-align: center;
margin: 50px;
}
select
{
padding: 8px; font-
size: 16px;
}
</style>
</head>
<body>
<label for="imageSelector">Select an Image:</label>
<select id="imageSelector" onchange="displayImage()">
<op on value="image1">Image 1</op on>
<op on value="image2">Image 2</op on>
<op on value="image3">Image 3</op on>
<!-- Add more op ons as needed -->
</select>
<script> func on
displayImage() {
var selectedValue =
document.getElementById('imageSelector').value; var
imageUrl; switch (selectedValue) {
case 'image1':
imageUrl = 'h ps://via.placeholder.com/300';
break;
case 'image2':
imageUrl = 'h ps://via.placeholder.com/350';
break;
case 'image3':
imageUrl = 'h ps://via.placeholder.com/400';
break;
// Add more cases as needed
default:
imageUrl = 'h ps://via.placeholder.com/300';
} var newWindow = window.open('', '_blank', 'width=400, height=400');
newWindow.document.write('<html><head></head><body>');
newWindow.document.write('<img src="' + imageUrl + '" alt="Selected
Image">'); newWindow.document.write('</body></html>');
}
</script>
</body>
</html>
Write a javascript func on to generate Fibonacci series ll user defined limit.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Fibonacci Series Generator</ tle>
<style>
body {
font-family: Arial, sans-
serif; text-align: center;
margin: 50px;
} input, bu on
{ margin: 5px;
padding: 8px;
}
#result { font-
weight: bold;
color: blue;
}
</style>
</head>
<body>
<h1>Fibonacci Series Generator</h1>
<label for="limit">Enter Limit:</label>
<input type="number" id="limit" placeholder="Enter limit">
<bu on onclick="generateFibonacci()">Generate Fibonacci Series</bu on>
<p id="result"></p>
<script> func on
generateFibonacci() {
var limit =
document.getElementById('limit').value; if (limit
=== '' || isNaN(limit) || limit <= 0) {
document.getElementById('result').textContent = 'Please enter a valid posi ve
number.'; document.getElementById('result').style.color = 'red'; return; } var
fibonacciSeries = [0, 1]; for (var i = 2; i <= limit; i++) {
fibonacciSeries[i] = fibonacciSeries[i - 1] + fibonacciSeries[i - 2];
} document.getElementById('result').textContent = 'Fibonacci Series: ' +
fibonacciSeries.join(',
');
document.getElementById('result').style.color =
'blue'; }
</script>
</body>
</html>

You might also like