Scribd
Upload
10 views

CSS Pygame Solution

Uploaded by

sanskrutinile06
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

CSS Pygame Solution

Uploaded by

sanskrutinile06
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

Solved Programs of last year questions

srno. Chapter no Pageno


1. Chapter 6 2-5
2. Chapter 5 6-24
3. Chapter 4 25-30
4. Chapter 3 31-41
5. Chapter 2
6. Chapter 1

1
CHAPTER:6

slideshow :-
● Create a slideshow with the group of three/six images, also
simulate next and previous transition between slides in your Java
script.
<html>
<head>
<title>my slideshow</title>
<script>
pics = new Array("1.jpeg","2.jpeg","3.jpeg");
count=0;
function slideshow(status)
{
if(document.images)
{
count=count+status;
if(count>(pics.length-1))
{
count=0;
}
if(count<0)
{
count=pics.length-1;
}
document.images["img"].src=pics[count]
}
}
</script>
</head>
<body>
<img name="img" src="1.jpeg" widht="200" height="200"/>
<input type="button" value="next" onclick="slideshow(1)"/>
<input type="button" value="back" onclick="slideshow(-1)"/>
</body>
</html>

2
Banner :-

● Write a javascript program to link banner advertisements to


different URLs. or to create rotating banner.
<html>
<head>
<title>my banner</title>
<script>
banner = new Array("1.jpeg", "2.jpeg", "3.jpeg");
link = new Array("google.com", "yahoo.com", "youtube.com");
currentbanner = 0;
numberofbanner = banner.length;
function linkBanner()
{
document.location.href = "http://www." + link[currentbanner];
}
function display()
{
if (document.images)
{
currentbanner++;
if (currentbanner == numberofbanner)
{
currentbanner = 0;
}
document.rotatebanner.src = banner[currentbanner];
setTimeout("display()", 1000);
}
}
</script>
</head>
<body onload="display()">
<a href="javascript:linkBanner()"><img src="1.jpeg"
name="rotatebanner" height="200" width="200" /></a>
</body>
</html>

3
Statusbar :-

● Write a Java script to modify the status bar using on MouseOver


and on MouseOut with links. When the user moves his mouse over
the link, it will display “MSBTE” in the status bar. When the user
moves his mouse away from the link the status bar will display
nothing.
<html>
<head>
<title>JavaScript Status Bar</title></head>
<body>
<a href=" https://msbte.org.in/"
onMouseOver="window.status='MSBTE';return true"
onMouseOut="window.status='';return true">
MSBTE
</a>
</body>
</html>

● Write a javascript to display static message


<html>
<head>
<script>
function showstatus()
{
winobj=window.open("","windowname","toolbar=0,status=1,menubar=1,i
nnerheight=100,innerwidth=100");
winobj.status="hello";
}
</script>
</head>
<body onload="showstatus()">
</body>
</html>

4
● Write a JavaScript that sets a crawling status bar message to the
webpage. Message is "Welcome to the Mystic World of
JavaScript". The message must start crawling when the webpage
gets loaded.
<html>
<head>
<title>Scrolling Text</title>
<script language="JavaScript">
var scrollPos = 0; // initial position to start status bar
var maxScroll = 100; // maximum allowed position
var blanks = "";
function scrollText(text, milliseconds)
{
window.setInterval("displayText('"+text+"')", milliseconds);
}
function displayText(text)
{
window.defaultStatus = blanks + text;
++scrollPos;
blanks += " ";
if(scrollPos > maxScroll)
{
scrollPos = 0;
blanks = "";
}
}
</script>
</head>
<body onload="scrollText(‘Welcome to the Mystic World of JavaScript".’,
300)">
<p>Watch the text scroll at the bottom of this window!</p>
</body>
</html>

5
CHAPTER 5

Rollover:

● Write a javascript program to design HTML page with books


information in tabular format, use rollovers to display the discount
information.

<!DOCTYPE html>
<html>
<head>
<title>Book Rollover Example</title>
</head>
<body>
<table>
<tbody>
<tr valign="top">
<td>
<img src="ajp.jpeg" name="cover" height="200" width="200">
</td>
<td>
<img src="" height="1" width="50">
</td>
<td>
<a
onmouseover="document.cover.src='osy.jpeg';
document.getElementById('discount-info').innerHTML='Discount on
<b>Operating System</b>: 10% off';">
<b><u>Operating System</u></b>
</a>
<br>
<a
onmouseover="document.cover.src='ste.jpeg';
document.getElementById('discount-info').innerHTML='Discount on
<b>Software Testing</b>: 15% off';">
<b><u>Software Testing</u></b>
</a>
<br>

6
<a
onmouseover="document.cover.src='ajp.jpeg';
document.getElementById('discount-info').innerHTML='Discount on
<b>Advanced Java Programming</b>: No discount';">
<b><u>Advanced Java Programming</u></b>
</a>
</td>
</tr>
</tbody>
</table>
<div id="discount-info">Hover over a book name to see the discount.</div>
</body>
</html>

7
● Write a JavaScript to create rollover effect that involves text and
images. When the user places his or her mouse pointer over a book
title, the corresponding book images appear

<html>
<head>
<title> my rollver example</title>
</head>
<body>
<table>
<tbody>
<tr valign="top">
<td>
<img src="ajp.jpeg" name="cover" height="200" width="200">
</td>
<td>
<img src="" height="1" width="50">
</td>
<td>
<a img onmouseover="document.cover.src='osy.jpeg'">
<b><u>operating system</u></b>
</a>
<br>
<a img onmouseover="document.cover.src='ste.jpeg'">
<b><u>software testing</u></b>
</a>
<br>
<a img onmouseover="document.cover.src='ajp.jpeg'">
<b><u>advance java programiong </u></b>
</a>
<br>
</td>
</tr>
</tbody>
</table>
</body>
</html>

8
Frames:-

● Design frameset tag for representing following layout

Main frame
<html>
<head>
<title>my frame example</title>
</head>
<frameset rows="20%,*">
<frame src="frame1.html" />
<frameset cols="33%,33%,33%">
<frame src="frame2.html" />
<frame src="frame4.html" />
<frame src="frame3.html" />
</frameset>
</frameset>
</html>
Frame1.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h>frame1</h>
</body>
</html>
Frame2.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h>frame2</h>
</body>

9
</html>
Frame3.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h>frame3</h>
</body>
</html>
Frame4.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h>frame4</h>
</body>
</html>
● Write a script for creating following frame structure
FRUITS, FLOWERS and CITIES are links to the webpage fruits.html,
flowers.html, cities.html respectively. When these links are clicked
corresponding data appears in FRAME 3.

Mainframe
<html>
<head>
<title>my frame example</title>
</head>
<frameset rows="20%,*">

10
<frame src="frame1.html" name="a" />
<frameset cols="33%,33% ">
<frame src="frame2.html" name="b"/>
<frame src="frame3.html" name="mainframe" />
</frameset>
</frameset>
</html>

Frame1.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h>frame1</h>
</body>
</html>

Frame2.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h>frame2</h><br>
<a href= "fruits.html" target="mainframe">furits</a><br>
<a href= "flowers.html" target="mainframe">flowers</a><br>
<a href= "cities.html" target="mainframe">cities</a><br>
</body>
</html>

Frame3.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h>frame3</h>
</body>
</html>

11
Fruits.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h>banna pineapple apple </h>
</body>
</html>

Flowers.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h>rose sunflower jasmine </h>
</body>
</html>

Cities.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h>mumbai kalyan dombivali </h>
</body>
</html>

● Write a JavaScript for creating following frame structure


Chapter 1 & Chapter 2 are linked to the webpage Ch1 HTML
& Ch2.html respectively. When user click on these links
corresponding data appears in FRAME3.

12
Mainframe
<html>
<head>
<title>my frame example</title>
</head>
<frameset rows="20%,*">
<frame src="frame1.html" name="a" />
<frameset cols="33%,33% ">
<frame src="frame2.html" name="b"/>
<frame src="frame3.html" name="c" />
</frameset>
</frameset>
</html>

Frame1.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<Center>
<h>TYIF</h>
</center>
</body>
</html>

Frame2.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h>frame2</h><br>
<a href= "chapter1.html" target="c"><b><U> . chapter1</U></b></a><br>
<a href= "chapter2.html" target="c"><b><U>. chapter2</U></b></a><br>
</body>
</html>

Frame3.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h>frame3</h>

13
</body>
</html>

Chapter1.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h> this is chapter 1</h>
</body>
</html>

Chapter2.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h> this is chapter 2 </h>
</body>
</html>

● Write a script for creating following frame structure :


Frame 1 contains three buttons SPORT, MUSIC and DANCE that
perform following action :
When user clicks SPORT button, sport.html webpage will appear in
Frame 2.
When user clicks MUSIC button,music.html webpage will appear in
Frame 3.
When user clicks DANCE button,dance.html webpage will appear in
Frame 4.

14
Mainframe
<html>
<head>
<title>my frame example</title>
</head>
<frameset rows="20%,*">
<frame src="frame1.html" name="a" />
<frameset cols="33%,33% ,33%">
<frame src="frame2.html" name="b"/>
<frame src="frame3.html" name="c" />
<frame src="frame4.html" name="d" />
</frameset>
</frameset>
</html>

Frame1.html
<html>
<head>
<title>my frame example</title>
<script>
function show1()
{
window.open("sport.html","b")
}
function show2()
{
window.open("music.html","c")
}
function show3()
{
window.open("dance.html","d")
}
</script>
</head>
<body>
<Center>
<h>frame1</h>
<br>
<input type="button" value="sport" onclick="show1()" />
<input type="button" value="music" onclick="show2()" />
<input type="button" value="dance" onclick="show3()" />
</center>
</html>

Frame2.html

15
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h>frame2</h><br>
</body>
</html>

Frame3.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h>frame3</h>
</body>
</html>

Frame4.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h>frame4</h>
</body>
</html>

Sport.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h>sachin tendulkar </h>
</body>
</html>

Music.html
<html>
<head>
<title>my frame example</title>
</head>

16
<body>
<h>shreya ghosal </h>
</body>
</html>

Dance.html

<html>
<head>
<title>my frame example</title>
</head>
<body>
<h>nora fatehi </h>
</body>
</html>

● Write a javascript to open a new window and the new window is


having two frames. One frame containing button as “click here !”,
and after clicking this button an image should open in the second
frame of that child window.

Main.html
<html>
<head>
<title>my frame example</title>
<script>
function show1()
{
window.open("frame.html")
}
</script>
</head>
<body>
<input type="button" value="open a new window" onclick="show1()" />
</html>

Frame.html
<html>
<head>
<title>my frame example</title>
</head>
<frameset cols="33%,33% ">
<frame src="frame1.html" name="a" />
<frame src="frame2.html" name="b"/>

17
</frameset>
</html>

Frame1.html
<html>
<head>
<title>my frame example</title>
<script>
function show()
{
window.open("1.jpeg","b")
}
</script>
</head>
<body>
<Center>
<h>frame1</h>
<br>
<input type="button" value="clickhere" onclick="show()" />
</center>
</html>

Frame2.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<h>frame2</h><br>
</body>
</html>

18
Childwindow:-

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

Here contents are changed using frame


Main.html
<html>
<head>
<title>my frame example</title>
</head>
<frameset rows="33%,33% ">
<frame src="frame1.html" name="a" frameborder="0"/>
<frame src="frame2.html" name="b" frameborder="0"/>
</frameset>
</html>

Frame1.html
<html>
<head>
<title>my frame example</title>
<script>
function changecontent()
{
parent.a.location.href="frame3.html"
}
</script>
</head>
<body>
<input type="button" value="frame1" name="frame1" />
</html>

Frame2.html
<html>
<head>
<title>my frame example</title>
</head>
<body>
<input type="button" value="frame2" name="frame2"
onclick="parent.a.changecontent()"/>
</body>
</html>

19
Frame3.html

<html>
<head>
<title>my frame example</title>
</head>
<body>
<input type="button" value="frame3" name="frame3" />
</body>
</html>

● Write a javascript syntax to accessing elements of another child


window.

You can access elements of another child window by directly referencing the
element from within your javascript
Syntax:
parent.frame_windowname.functioname()

20
Regular expression :-

● 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
(1) Name Validation
(2) Email ID validation
<html lang>
<head>
<title>Name and Email Validation</title>
<script>
function validateForm(){
var name=document.getElementById("name").value;
var email=document.getElementById("email").value;
var namePattern=/^[A-Z][a-zA-Z]{1,}$/;
if(!namePattern.test(name)){
alert("Name must start with a capital letter and contain only alphabetic
characters.");
return false;
}
var emailPattern=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if(!emailPattern.test(email)){
alert("Please enter a valid email address.");
return false;
}
alert("Form submitted successfully!");
return true;
}
</script>
</head>
<body>
<h2>User Form</h2>
<form onsubmit="return validateForm()">
name:<input type="text" id="name" name="name" required><br><br>
email:<input type="text" id="email" name="email" required><br><br>
<input type="submit" value="Submit">
</form></body></html>

21
● Write HTML code to design a form that displays textboxes for
accepting UserID and Aadhar No. and a SUBMIT button. UserID
should contain 10 alphanumeric characters and must start with
Capital Letter. Aadhar No. should contain 12 digits in the format
nnnn nnnn nnnn. Write JavaScript code to validate the UserID and
Aadhar No. when the user clicks on SUBMIT button.

<html >
<head>
<title>User Form Validation</title>
<script>
function validateForm(){
var userID=document.getElementById("userID").value;
var aadharNo=document.getElementById("aadharNo").value;
var userIDPattern=/^[A-Z][A-Za-z0-9]{9}$/;
if(!userIDPattern.test(userID)){
alert("UserID must be 10 alphanumeric characters and start with a
capital letter.");
return false;
}
var aadharPattern=/^\d{4} \d{4} \d{4}$/;
if(!aadharPattern.test(aadharNo)){
alert("Aadhar No. must be in the format nnnn nnnn nnnn (12 digits).");
return false;
}
alert("Form submitted successfully!");
return true;
}
</script>
</head>
<body>
<h2>User Form</h2>
<form onsubmit="return validateForm()">
userid: <input type="text" id="userID" name="userID"
required><br><br>
adharno:<input type="text" id="aadharNo" name="aadharNo"
required><br><br>
<input type="submit" value="Submit">
</form></body></html>

22
● Give regular expressions for the following
1.IPaddress–
/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/

2.email address–
normal:
/ ^[^\s@]+@[^\s@]+\.[^\s@]+$/
Modelpaper:
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-
9-]+)*$/;

3.Phone number–
(ddd) -(dddddddd):
/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im;s
10 digits :
^\d{10}$

4.Adhar number –
nnnn nnnn nnnn:
/^\d{4} \d{4} \d{4}$/;
dddd - dddd – dddd:
/^[2-9]{1}[0-9]{3}\s[0-9]{4}\s[0-9]{4}$/gm

5.Name–
10 alphanumeric:
/^[A-Z][A-Za-z0-9]{9}$/
start with a capital letter and contain only alphabetic characters:
/^[A-Z][a-zA-Z]{1,}$/

23
● Write a JavaScript that accepts a string and searches for the
pattern "MSBTE" in the given string using regular expressions. If
the pattern is found, JavaScript will display that "Pattern is found"
else display "Pattern is not found".
<html>
<head>
<title>JavaScript RegExp exec Method</title>
</head>
<body>
<script type = "text/javascript">
var str= prompt("Enter a string");
var re = new RegExp( "MSBTE", "g" );
var result = re.exec(str);
if(result=="MSBTE")
{
document.write("pattern is found");
}
else
{
document.write("pattern is not found");
}
</script>
</body>
</html>

24
CHAPTER 4

Cookies:-

● Write a webpage that displays a form that contains an input for


students rollno and names user is prompted to enter the input
student rollno and name and rollno becomes value of the cookie
<html>
<head>
<script>
function storeCookie() {
var rollno = document.getElementById("rollno").value
document.cookie = "rollno=" + rollno + ";"
alert("Cookie Stored\n"+document.cookie);
}
</script>
</head>
<body>
<form name="myform">
Enter your name:
<input type="text" name="student" id="name"><br><br>
Enter your Roll No:
<input type="text" name="rollno" id="rollno"><br><br>
<input type="button" value="Submit" onclick="storeCookie()"/>
</form>
</body>
</html>

25
● Write a webpage that displays a form that contains an input for
username & password. User is prompted to entre the input &
password & password becomes the value of the cookie. Write a
JavaScript function for storing the cookie. It gets executed when
the password changes.
<html>
<head>
<script>
function storeCookie()
{
var pwd = document.getElementById('pwd').value
document.cookie = "Password=" + pwd + ";"
alert("Cookie Stored\n"+document.cookie);
}
</script>
</head>
<body>
<form name="myForm">
Enter Username <input type="text" id="uname"/><br/>
Enter Password <input type="password" id="pwd"/><br/>
<input type="button" value="Submit" onclick="storeCookie()"/>
</form>
</body>
</html>

Timers:-

● Give syntax of and explain the use of SetTime Out( ) function with
the help of suitable example.

Syntax: setTimeout(function ,delay);


<html><head><title>Timing Demonstration</title></head>
<body>
<script>
function greet() {
document.write('Hello world!');
}
document.write('This message is shown first');
setTimeout(greet, 3000);
</script></body></html>

26
● Write 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
displaying time.

<html>
<head>
<title>Digital Clock</title>
</head>
<script>
let timer;
function startClock() {
clearInterval(timer);
timer = setInterval(function() {
let now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
document.getElementById('clock').innerHTML = hours + ':' + minutes +
':' + seconds;
}, 1000);
}
function stopClock() {
clearInterval(timer);
document.getElementById('clock').innerHTML = 'Clock Stopped';
}
</script>
<body>
<h1>Digital Clock</h1>
<button onclick="startClock()">START</button>
<button onclick="stopClock()">STOP</button>
<div id="clock">Click START to begin</div>
</body>
</html>

27
Browser/Window:-

● Write a javascript to create option list containing list of images and


then display images in new window as per selection.

<html>
<head>
<title>Simple Image Viewer</title>
</head>
<body>
<h1>Image Selector</h1>
<select id="imageList" onchange="displayImage()">
<option value="">Choose an Image</option>
<option value="1.jpeg">rose</option>
<option value="2.jpeg">mogra</option>
<option value="3.jpeg">sunflower</option>
<option value="4.jpeg">jasmine</option>
</select>
<script>
function displayImage() {
var list = document.getElementById('imageList');
var display = document.getElementById('imageDisplay');
var url = list.value;
display.innerHTML = url
? '<img src="' + url + '" alt="Selected Image">'
: 'Please select an image';
}
</script>
</body>
</html>

28
● Write a JavaScript function that will open new window when the
user will clicks on the button
<html>
<script>
var myWindow;
function openWin()
{
myWindow = window.open("", "myWindow", "width=400,height=400");
myWindow.document.write("Hello Everyone.Welcome to new window.");
}
</script>
<body>
<input type="button" value="open new window" onclick="openWin()"/>
</body>
</html>

● Write a JavaScript that accepts user’s first name and domain name
of organization from user. The JavaScript then forms email
address as and displays the results in the browser window.

<html>
<head>
<script>
function myemail()
{
var s1 = document.getElementById("first").value;
var s2 = document.getElementById("domain").value;
var s3=s1+"@"+s2;
document.getElementById("email").innerHTML = s3;
}
</script>
</head>
<body>
<p>First Name: <input id="first"></p>
<p>Domain Name: <input id="domain"></p>
<button onclick="myemail()">create email id</button>
<br> Email ID is
<p id="email"> </p>
</body>
</html>

29
● Write a JavaScript that opens a new popup window with message
“WELCOME To SCRIPTING” when the page loads and a new popup
window displaying message “FUN WITH SCRIPTING” when the
page unloads.

<html>
<script>
var myWindow;
function openWin()
{
myWindow = window.open("", "myWindow", "width=200,height=100");
myWindow.document.write("WELCOME TO SCRIPTING");
}
function closeWin() {
if (myWindow) {
myWindow.close();
alert("Fun with Scripting");
}
}
</script>
<body onload="openWin()" onunload="myWindow.document.write('FUN
WITH SCRIPTING');>
</body>
</html>

30
CHAPTER 3

● Write a Java script to design a form to accept values for user ID &
password
<html>
<body>
<script language="javascript">
function display()
{
document.write("UserID"+login.userid.value+"Password:"+login.pswrd.value);
}
</script>
<body>
<form name="login">
Enter Username<input type="text" name="userid"><br>
Enter Password<input type="password" name="pswrd"><br>
<input type="button" onclick="display()" value="Display">
</form>
</body>
</html>
● Write a HTML script which displays 2 radiobuttons 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>HTML Form</title>
<script language="javascript" type="text/javascript">
function updateList(ElementValue)
{
with(document.forms.myform)

31
{
if(ElementValue == 1)
{
optionList[0].text="Mango";
optionList[0].value=1;
optionList[1].text="Banana";
optionList[1].value=2;
optionList[2].text="Apple";
optionList[2].value=3;
}
if(ElementValue == 2)
{
optionList[0].text="Potato";
optionList[0].value=1;
optionList[1].text="Cabbage";
optionList[1].value=2;
optionList[2].text="Onion";
optionList[2].value=3;
}
}
}
</script>
</head>
<body>
<form name="myform" action="" method="post">
<p>
<select name="optionList" size="2">
<option value=1>Mango
<option value=2>Banana
<option 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>

32
● Write a javascript program to calculate add, sub, multiplication and
division of two number (input from user). Form should contain two
text boxes to input numbers of four buttons for addition,
subtraction, multiplication and division

<html>
<head>
<script>
function add()
{
var num1, num2, r;
num1 = parseInt(document.getElementById("firstnumber").value);
num2 = parseInt(document.getElementById("secondnumber").value);
r= num1 + num2;
alert(r);
}
function sub()
{
var num1, num2, r;
num1 = parseInt(document.getElementById("firstnumber").value);
num2 = parseInt(document.getElementById("secondnumber").value);
r = num1 - num2;
alert(r);
}
function mul()
{
var num1, num2, r;
num1 = parseInt(document.getElementById("firstnumber").value);
num2 = parseInt(document.getElementById("secondnumber").value);
r = num1 * num2;
alert(r);
}
function div()
{
var num1, num2, r;
num1 = parseInt(document.getElementById("firstnumber").value);
num2 = parseInt(document.getElementById("secondnumber").value);
r = num1 / num2;
alert(r);
}

33
</script>
</head>
<body>
<fieldset>
<p>First Number: <input id="firstnumber"></p>
<p>Second Number: <input id="secondnumber"></p>
<button onclick="add()">Add</button>
<button onclick="sub()">Sub</button>
<button onclick="mul()">Mul</button>
<button onclick="div()">div</button>
</fieldset>
</body>
</html>

● Write HTML script that will display following structure

Write the JavaScript code for below operations: (1) Name, Email &
Pin Code should not be blank. (2) Pin Code must contain 6 digits &
it should not be accept any characters.
<html>
<head>
<style>
table,tr,td
{
border: solid black 1px;
border-collapse: collapse;
}
td
{
padding: 10px;
}
</style>
</head>
<body>
<table>
<tbody>

34
<tr>
<td>Name : </td>
<td> <input type="text" id="name" required></td>
</tr>
<tr>
<td>Email : </td>
<td> <input type="email" id="email" required></td>
</tr>
<tr>
<td>Pin code : </td>
<td> <input type="number" id="pin" required></td>
</tr>
<tr>
<td></td>
<td><button onclick="submit()">Submit</button></td>
</tr>
</tbody>
</table>
</body>
<script>
function submit()
{
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var pin = Number(document.getElementById("pin").value);
if(name.length==0 || email.length==0 || pin.length==0)
{
alert("Please enter value in all fields.")
}
else
{
var pinpattern =/^[4]{1}[0-9]{5}$/;
if( pinpattern.test(pin))
{
alert("Perfect Pin code");
}
else
{
alert("Wrong Pin code.");
} } }</script></html>

35
● Write HTML script that will display dropdown list containing
options such as Red, Green, Blue and Yellow. Write a JavaScript
program such that when the user selects any options. It will
change the background colour of webpage.
<html>
<script type="text/javascript">
function changeColor() {
var color = document.getElementById("color").value;
switch(color){
case "green":
document.body.style.backgroundColor = "green";
break;
case "red":
document.body.style.backgroundColor = "red";
break;
case "blue":
document.body.style.backgroundColor = "blue";
break;
case "yellow":
document.body.style.backgroundColor = "yellow";
break;
default:
document.body.style.backgroundColor = "white";
break;
}
}
<body>
<label for="color">Choose a Background Color:</label>
<select name="color" id="color" class="color"
onchange="changeColor()">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
</script>
</body>
</html>

36
● Write an HTML script that accepts Amount, Rate of Interest and
Period from user. When user submits the information a JavaScript
function must calculate and display simple interest in a message
box. (Use formula S.I. = PNR/100)
<html>
<head>
<title>Simple Interest Calculator</title>
</head>
<body>
<h1>Simple Interest Calculator</h1>
<script>
var P = parseInt(prompt("Enter the principal amount:"));
var N = parseInt(prompt("Enter the period:"));
var R = parseInt(prompt("Enter the Rate of interest:"));
var SI = (P * N * R) / 100;
alert("Simple Interest is " + SI);
</script>
</body>
</html>
● Write an HTML script that displays names of different brands of
Laptop and an image by default as :

When the mouse moves over the specific brand name the script
must display the image of respective Laptop in the adjacent box.
<html><head><title>
text rollovers</title>
<script>
b=new Image;
r=new Image;

37
g=new Image;
if(document.images)
{
b.src='1.jpeg';
r.src='2.jpeg';
g.src='3.jpeg';
}
</script>
</head>
<body>
<table border="0" width="100%">
<tbody>
<tr valign="top">
<td><H2><ul><li>
<a onmouseover="document.clr.src='1.jpeg'">
<b><u>Lenovo</u></b></a></li>
<li><a onmouseover="document.clr.src='2.jpeg'">
<b><u>HP</u></b></a></li>
<li><a onmouseover="document.clr.src='3.jpeg'">
<b><u>DELL</u></b></a></li></ul>
</H2>
</td>
<td width="50%">
<a><img height="200" src="vv.png" width=400" name="clr"></a></td>
</tr>
</tbody>
</table>
</body>
</html>

38
<html>
<body>
<html>
<script type="text/javascript">
function modifyList(x)
{
with(document.forms.myform)
{
if(x ==1)
{
optionList[0].text="Green Tea";
optionList[0].value=1;
optionList[1].text="Milk Tea ";
optionList[1].value=2;
optionList[2].text="Black Tea";
optionList[2].value=3;
}
if(x ==2)
{
optionList[0].text="Capaccino";
optionList[0].value=1;
optionList[1].text="Latte";
optionList[1].value=2;

39
optionList[2].text="Expression";
optionList[2].value=3;
}
if(x ==3)
{
optionList[0].text="MAAZA";
optionList[0].value=1;
optionList[1].text="SPRITE";
optionList[1].value=2;
optionList[2].text="COKA-COLA";
optionList[2].value=3;
}

}
}
</script>
</head>
<body>
<form name="myform" action=" " method="post">
<table><tr><td>
Select Beverage: </td><td>
<input type="checkbox" name="grp1" value=1 checked="true"
onclick="modifyList(this.value)"> TEA
<input type="checkbox" name="grp1" value=2
onclick="modifyList(this.value)">
COFFEE
<input type="checkbox" name="grp1" value=3
onclick="modifyList(this.value)">
SOFT DRINK
</td></tr></table>
<select name="optionList" size="3">
<option value=1>Kiwi
<option value=1>Pine-Apple
<option value=1>Apple
</tr> </table>
</select>
</form>
</body>
</html>

40
Intrinsic function:-
● Write a javascript program to demonstrate java intrinsic function

<html>
<head>
<title>HTML Form</title>
</head>
<body>
<form name="myform" action="" method="post">
<p>
First Name: <input type="text" name="Fname" /> <br>
Last Name: <input type="text" name="Lname" /> <br>
<img src="submit.jpg" alt="Submit" onclick="document.forms.myform.submit()"
/>
<img src="reset.jpg" alt="Reset" onclick="document.forms.myform.reset()" />
</p> </form>
</body>
</html>

41

You might also like