Scribd
Upload
1 views

Important program for css exam (1)

The document contains various HTML and JavaScript code snippets demonstrating different functionalities such as dynamic option lists based on radio button selection, cookie handling, form validation, digital clock display, and creating a slideshow. It also includes examples of implementing a folding tree menu and disabling right-click on a webpage. Each section provides a brief description of the functionality along with the corresponding code implementation.

Uploaded by

Shreyash Nigade
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

Important program for css exam (1)

The document contains various HTML and JavaScript code snippets demonstrating different functionalities such as dynamic option lists based on radio button selection, cookie handling, form validation, digital clock display, and creating a slideshow. It also includes examples of implementing a folding tree menu and disabling right-click on a webpage. Each section provides a brief description of the functionality along with the corresponding code implementation.

Uploaded by

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

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>

You might also like