Q 1 a.
Write a HTML script which displays 2 radio buttons to the users for fruits and
vegetable and 1 option list. When user select fruits radio button option list should
present only fruits names to the user & when user select vegetable radio button
option list should present only vegetable names to the user.
<html>
<head>
<title>D1</title>
<script>
function DisplayList(ElementValue)
with(document.forms.frm1)
if(ElementValue==1)
op1[0].text="mango";
op1[0].value=1
op1[1].text="Banana";
op1[1].value=2
op1[1].text="Banana";
op1[1].value=3
if(ElementValue==2)
op1[0].text="Onion";
op1[0].value=1
op1[1].text="Potato";
op1[1].value=2
op1[1].text="Spinich";
op1[1].value=3
</script>
</head>
<body>
<form name="frm1" action="" method="post">
<select name="op1" size="3">
<option value=1>Mango
<option value=2>Banana
<option value=3>Apple
</select>
<br>
<input type="radio" name="group" checked="true" value=1
onClick="DisplayList(this.value)">Fruits
<input type="radio" name="group" value=2 onClick="DisplayList(this.value)">Vegetables
</form>
</body>
</html>
Output
Q Describe, how to read cookie value and write a cookie value. Explain with example.-
6 marks
<html>
<head>
<script>
function write()
var cookievalue=username.value;
document.cookie="username="+cookievalue+";expires=T
hu";
alert("cookie is write");
function read()
var cookievalue=username.value;
var a=document.cookie="username="+cookievalue;
alert("cookie is read "+a);//read cookie
</script>
</head>
<body>
enter username:<input type="text" id="username" >
<input type="button" value="write" onclick="write()">
<input type="button" value="read" onclick="read()">
</body>
</html>
Q. Write a Java script that displays textboxes for accepting name & email ID & a
submit button. Write Java script code such that when the user clicks on submit
button.- 6marks
1: Name Validation
(ii) Email ID validation
<html>
<head>
</head>
<title>
form1</title>
<body>
<form action="" name="myfrom" onsubmit="return(validate())">
name<input type="text" name="name">
email<input type="text" name="email">
submit<input type="submit" name="Submit">
</form>
</body>
</html>
<script type="text/javascript">
function validate()
if(document.myfrom.name.value=="")
alert("please provide your name!");
document.myfrom.name.focus();
return false;
if(document.myfrom.email.value=="")
alert("please provide your email!");
document.myfrom.email.focus();
return false;
var emailId=document.myfrom.email.value;
atpos=emailId.indexOf("@");
dotpos=emailId.lastIndexOf(".");
if(atpos<1||(dotpos-atpos<2))
alert("please enter email id!");
document.myfrom.email.focus();
return false;
return(true);
</script>
Output
Q6.2
[9:07 pm, 09/12/2023] Malegaon Gaikwad Sir: Que. IMPLEMENTING BANNER
<html>
<head>
</style>
<script>
mybanners=new Array('santu.jpg','viru.jpg','dinesh.jpg');
banner_count=0;
function Display()
if(document.images)
banner_count++;
if(banner_count==mybanners.length)
banner_count=0;
document.BannerChange.src=mybanners[banner_count];
setTimeout("Display()",3000);
</script>
</head>
<body onload="Display()">
<center>
<h1>* Displaying Banners *</h1>
<img src="santosh.jpg" width="800" heigth="120" name="BannerChange"/>
</br></br>
</center>
</form>
</body>
</html>
[9:07 pm, 09/12/2023] Malegaon Gaikwad Sir: Que. FRAME
Mainframe.html
<html>
<head>
<title> frame </title>
</head>
<body>
<center>
<table border="1">
<tr>
<td align="center" colspan="4" width="50" height="50"><h1> Frame1 </h1></td>
</tr>
<tr>
<td>
frame2<ul>
<li><a href="frame1.html" target="mainframe1"> fruits </a>
</li>
<li><a href="frame2.html" target="mainframe1"> flowers </a>
</li>
<li><a href="frame3.html" target="mainframe1"> cities </a>
</li>
</ul></td>
<td align="center" colspan="2" width="20" height="20">Products<BR>
<iframe name="mainframe1" width="450" height="600"></iframe>
</td>
</tr>
</table>
</center>
</body>
</html>
Frame1.html
<html>
<body>
<h1> mango </h1>
<h2> apple </h2>
<h3> orange </h3>
</body>
</html>
Frame2.html
<html>
<body>
<h1> lotus </h1>
<h2> rose </h2>
<h3> jasmine </h3>
</body>
</html>
Frame3.html
<html>
<body>
<h1> pune </h1>
<h2> baramati </h2>
<h3> mumbai </h3>
</body>
</html>
Q.Write a Javascript to create a pull-down menu with three options [Google, MSBTE,
Yahoo] once the user will select one of the options then user will be redirected to that
site.
<html>
<head>
</head>
<title></title>
<script language="javascript" type="text/javascript">
function getPage(choice)
page=choice.options[choice.selectedIndex].value;
if(page!="")
window.location=page;
</script>
<body>
<from name="m1" action="" method="post">
select your favourite website:
<select name="m2" onchange="getPage(this)">
<option value="https://www.google.com">GOOGLE</option>
<option value="https://www.msbte.com">MSBTE</option>
<option value="https://www.yahoo.com">YAHOO</option>
</form>
</body>
</html>
Output
Q. Fibbonacci Series :
<html>
<script>
function fibbo(num)
{
var n=0;
var n1=1;
var i=0;
var temp;
for(i=0;i<num;i++)
temp=n+n1;
n=n1;
n1=temp;
return n1;
var f=parseFloat(prompt("Enter a number sum of fibbonacci series"));
document.write("The sum of fibbonacci series :"+fibbo(f));
</script>
</html>
Winter-22
Q.5)A).Write a javascript to check whether the passed string or number is palindrome
or not- 6marks
<html>
<head>
<title>Palindrome</title>
</head>
<script>
function display(str)
var len=str.length;
var flag=1;
for(var i=0;i<len/2;i++)
if(str[i] !==str[len-1-i])
flag=0;
if(flag==1)
document.write("it is a palindrome");
else
document.write("it is not a palindrome");
var str=prompt("Enter a String");
display(str);
</script>
</html>
Output:-
Q.5}B)Develop javascript to convert the given string character to unicode and vice-
versa – 6 marks
<html>
<head>
<title>String demo</title>
</head>
<script>
document.write("<br>Unicode="+String.fromCharCode(115));
document.write("<br>Unicode="+String.fromCharCode(70,71,72,115));
</script>
</html>
Output:-
Q.5)C) Write a javscript to create a slideshow with the group of six images, also
simulate the next and previous transition between slides in your js
<html>
<head>
<title> Slideshow</title>
<Script>
img_array=new Array('google.png','apple.png','msbte.jpeg');
img=0;
function DisplayImg(num)
img=img+num;
if(img>img_array.length-1)
img=0;
if(img<0)
img=img_array.length-1;
document.Slide.src=img_array[img];
</script>
</head>
<body>
<img src="google.png" width="400" height="220" name="slide"/>
<br><br>
<input type="button" value="privious" onclick="DisplayImg(-1)">
<input type="button" value="next" onclick="DisplayImg(1)">
</body>
</html>
Output:-
Q. Write a html code to design a form that display two textboxes for accepting two
numbers , one textbox for accepting result and two buttons as addition and
subtraction.
<html>
<head>
<title>Arithmetic operation</title>
<script>
function addition()
var a=document.getElementById("t1").value;
var b=document.getElementById("t2").value;
var sum=parseInt(a)+parseInt(b);
document.getElementById("t3").value=sum;
}
function subtraction()
var a=document.getElementById("t1").value;
var b=document.getElementById("t2").value;
var diff=parseInt(a)-parseInt(b);
document.getElementById("t3").value=diff;
</script>
<body>
1st No:<input type="text" id="t1">
2nd No:<input type="text" id="t2"><br><br>
Result:<input type="text" id="t3"><br><br><br>
<input type="button" value="ADDITION" onclick="addition()">
<input type="button" value="SUBTRACTION" onclick="subtraction()">
</body>
</head>
</html>
o/p:
Q. Write a html code to design a form that displays two buttons START and STOP .
write a javascript code such that when user clicks on start button , real time digital
clock will be displayed on screen. When user clicks on stop button ,clock will stop
dislaying time.(use timer method)
<!DOCTYPE html>
<html>
<head>
<title>Digital Clock</title>
</head>
<script>
function updateClock()
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var meridiem = "AM";
if (hours > 12)
hours -= 12;
meridiem = "PM";
if (hours === 0)
hours = 12;
if (minutes < 10)
minutes = "0" + minutes;
if (seconds < 10)
{
seconds = "0" + seconds;
var time = hours + ":" + minutes + ":" + seconds + " " + meridiem;
document.getElementById("clockDisplay").innerHTML = time;
setInterval(updateClock, 1000);
function stopClock()
setTimeout(display,1000);
function display()
alert("time out");
</script>
<body>
<p id="clockDisplay"></p>
<input type="button" value="start" onclick="updateClock()">
<input type="button" value="stop" onclick="stopClock()">
</body>
</html>
o/p:
When click start button
When click stop button
Q. write a js code to change option list dynamically with example (Evaluate radio button
in js).
<html>
<head>
<title>radio button</title>
</head>
<script>
function displayList(eleval)
with(document.forms.frm1)
if(eleval==1)
op1[0].text="wpd"
op1[0].value="1"
op1[1].text="pic"
op1[1].value="2"
op1[2].text="maths"
op1[2].value="3"
if(eleval==2)
{
op1[0].text="oop"
op1[0].value="1"
op1[1].text="dsu"
op1[1].value="2"
op1[2].text="dbms"
op1[2].value="3"
</script>
</head>
<body>
<form name="frm1" action="">
<select name="op1" size="3">
<option value=1>WPD
<option value=2>PIC
<option value=3>MATHS
</select>
<input type="radio" name="subjects" checkes="true" value=1
onclick="displayList(this.value)">First Year
<input type="radio" name="subjects" checkes="true" value=2
onclick="displayList(this.value)">second Year
<input name="submit" value="submit" type="submit">
</form>
</body>
</html>
Protection web page
<html>
<head>
<script>
function RightClickDisable()
alert("not allowed to right click");
return false;
function InternetExploreBrowser()
if(event.button==2)
RightClickDisable();
return false;
document.oncontextmenu=new Function("RightClickDisable(); return false")
</script>
</head>
<body>
<h1> this is sample web page</h1>
<h4> test disability og right click button by clicking right button</h4>
</body>
</html>
Folding Trees menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
ul {
list-style: none;
padding-left: 20px;
}
li {
cursor: pointer;
}
</style>
<title>Folding Tree Menu</title>
</head>
<body>
<ul id="tree">
<li>Root
<ul>
<li>Child 1</li>
<li>Child 2
<ul>
<li>Grandchild 1</li>
<li>Grandchild 2</li>
</ul>
</li>
<li>Child 3</li>
</ul>
</li>
</ul>
<script>
document.addEventListener('DOMContentLoaded', function () {
const tree = document.getElementById('tree');
// Add click event listener to toggle visibility
tree.addEventListener('click', function (event) {
if (event.target.tagName === 'LI') {
const childNodes = event.target.children;
for (let i = 0; i < childNodes.length; i++) {
const child = childNodes[i];
if (child.tagName === 'UL') {
child.style.display = (child.style.display === 'none') ? 'block' : 'none';
}
}
}
});
});
</script>
</body>
</html>
