Scribd
Upload
10 views

Alan HTML

Uploaded by

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

Alan HTML

Uploaded by

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

LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

PROGRAM 1

Develop a HTML document using <image> and <table> to produce the following screen.

<html>
<head>
<title>AMBULANCE PROGRAM</title>
</head>
<style>
tr {
background-color:#e4f2f2;
}
th,td {
background-color:#e4f2f2;
}
</style>
<body >
<table border="3" cell padding="3" cell spacing="4">
<caption>MOBILE AMBULANCE 108</caption>
<tr >
<th>SPECIAL REQUIREMENTS</th>
<th colspan="4">SPECIFICATIONS</th>
</tr>
<tr>
<td>rectractable protective armour</td>
<td>engine type</td>
<td>jet turbine</td>
</tr>
<tr>
<td>weapons system</td>
<td>thrust</td>
<td>150lbs @<br>10% ros</td>
</tr>
<tr>
<td>instruments aircraft</td>
<td>torque</td>
<td>170lbs @<br>98.7% ros</td>
</tr>
<tr>
<td rowspan="7"><img src="C:\Users\BCA\Desktop\OIP.jpg" height="200"
width="400"></td>
<td>0.60mph</td>
<td>3.7 sec</td>
</tr>
<tr>
<td>topspeed</td>
<td>unknown</td>

III SEM BCA Page | 1


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

</tr>
<tr>
<td>break rate</td>
<td>excellent</td>
</tr>
<tr>
<td>length</td>
<td>300.5cm</td>
</tr>
<tr>
<td>width</td>
<td>100 cm</td>
</tr>
<tr>
<td>wheel</td>
<td>cast alloy 15*75</td>
</tr>
<tr>
<td>fuel required</td>
<td>99.9% carbon free petrol</td>
</tr>
</table>
</body>
</html>

OUTPUT

III SEM BCA Page | 2


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

PROGRAM 2

Develop a HTML document to implement Quick View of your collage calender.Create a


document with the name,”Sidebar.html” with an unordered list of four links.Add a
target property to each link.Use horizontal and vertical frames and hyperlinks to design
the page.

File for frameset.html

<html>
<frameset rows="25%,* "framespacing="5" frameborder="1" border="3">
<frame name="top" src="title.html">
<frameset cols="35%,* "framespacing="5" border="3" >
<frame name="left" src="sidebar.html">
<frame name="right">
</frameset>
</frameset>
</html>

File for title.html

<html>
<head>
<body bgcolor="#e4f2f2">
<h1 align="center">SRINIVAS UNIVERSITY</h1>
</body>
</head>
</html>

File for sidebar.html

<html>
<body bgcolor="#C0DEDF">
<ul type="disc" style="font-size:20px" >
<li>
<a href="Aboutus.html" target="right">Aboutus</a>
</li>
<li>
<a href="Course.html" target="right">Course</a>
</li>
<li>
<a href="Faculty.html" target="right">Faculty</a>
</li>
<li>
<a href="Rules.html" target="right">Rules</a>
</li>
</ul>

III SEM BCA Page | 3


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

</body>
</html>

File for about.html

<html>
<head>
<body bgcolor="#e4f2ec">
<h1>ABOUT US</h1>
</head>
<body>
<p>Srinivas University, Mangalore, is a Private Research and skill focused University in
Mangalore, Karnataka, India established in 2013 by Karnataka State Act.Srinivas University
is the flagship of 18 Srinivas Group of Institutions started by A. Shama Rao Foundation,
Mangalore, India, a private Charitable Trust founded in 1988 by an Eminent Chartered
Accountant A. Raghavendra Rao..</p>
</body>
</html>

File for faculty.html

<html>
<head>
<h1>FACULTY</h1>
</head>
<body bgcolor="#e4f2ec">
<ul type="disc">
<li>Prof. P. Sridhara Acharya</li>
<li>Prof.Swathi Kumari</li>
<li>Prof.Priyadarshini</li>
<li>Prof.Anusha S</li>
<li>Prof.Krishna Prasad</li>
</ul>
</html>

File for course.html

<html>
<head>
<h1>COURSES</h1>
</head>
<body bgcolor="#e4f2ec">
<ul type="disc">
<li>BCA SOFTWARE DEVELOPMENT</li>
<li>BCA Robotics, Artificial intelligence and virtual reality</li>
<li>BCA Cloud Technology and Information Security</li>
<li>B.Sc. Animation,Digital FilmMaking & VFX</li>

III SEM BCA Page | 4


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

<li> MCA Cyber Security and Forensics</li>


</ul>
</html>

File for rules.html

<html>
<head>
<h1>RULES</h1>
</head>
<body bgcolor="#e4f2ec">
<ul type="disc">
<li>The disciplinary standards set forth, through the rules ensure that behaviour on campus is
consistent with the proper functioning and best interests of the University</li>
<li>To prohibit, prevent and eliminate the menace of ragging in any form, including any
conduct by any student or group of students</li>
<li>We insist on a minimum of 90 % attendance for the theory classes and 100 % attendance
for all the labs.</li>
<li>All students should wear only formals dress and dress should be neatly.</li>
<li>Everyone is encouraged and expected to be punctual. The college starts at 09.15 a.m. in
the morning and closes at 4.15 p.m. in the afternoon.</li>
<li>Everyone is expected to comply with all the instructions conveyed by authorised notices
displayed on campus.</li>
<li>Strict disciplinary action is taken against those who don't abide by the campus rules.</li>
</ul>
</html>

OUTPUT

III SEM BCA Page | 5


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

PROGRAM 3

Develop a html document to display admission form for a course(use all available form
controls).

File for student registration.html

<html>
<head>
<title>Student regstration</title>
</head>
<style>
#grad {
background-image: linear-gradient(to right,#e9f1f7,#098eed );
margin-left:300px;
width: 700px;
}
</style>
<body>
<div class="form-body" id="grad">
<table border="2" cellspacing="3" width="700px" cellpadding="8">
<form action="success.html" method="post" target="blank" >
<th colspan="2" style="font-size: 20px;
font-family: helvetica;"> STUDENT REGISTRATION FORM</th><tr>
<td>Student Name</td>
<td><input type="text" placeholder="Student name"></td>
</tr>
<tr>
<td>Father's Name</td>
<td><input type="text" placeholder="Father's name"></td>
</tr>
<tr>
<td>Mother's Name</td>
<td><input type="text" placeholder="Mother's name"></td>
</tr>
<tr>
<td>Address</td>
<td><textarea rows="6" cols="50">Enter your address</textarea></td>
</tr>
<tr>
<td>Date of birth</td>
<td><select name="dd">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>

III SEM BCA Page | 6


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">10</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option></select>
<select name="mm">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option></select>
<select name="yyyy">
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>

III SEM BCA Page | 7


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
</select></td></tr>
<tr>
<td>Gender</td>
<td><input type=radio name="gender" value="Male" >Male
<input type=radio name="gender" value="Female" >Female</td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" placeholder="Enter your email"></td>
</tr
<tr>
<td>+2/PUC</td>
<td><input type=radio name="stream" value="Science" >Science<br>
<input type=radio name="stream" value="Commerce" >Commerce<br>
<input type=radio name="stream" value="Arts" >Arts</td>
</tr>
<tr>
<td>Subjects</td>
<td><select size="6" multiple>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Maths">Maths</option>
<option value="Accountancy">Accountancy</option>
<option value="Business">Business</option>
<option value="Arts">Arts</option></select></td></tr>
<tr>
<td>Interested in</td>
<td><input type=checkbox name="Designing" value=on>Designing
<input type=checkbox name="Coding" value=on>Coding
<input type=checkbox name="Hacking" value=on>Hacking</td>
<tr>
<td>Photo</td>
<td><input type="file" name="pic" accept="image/*"></td>
</tr>
<tr>
<td>Password</td>

III SEM BCA Page | 8


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

<td><input type="Password" name="Password"></td>


</tr>
<tr><td></td>
<td><input type="submit" value="submit">
<input type="reset" value="reset"></td>
</tr>
</form>
</table>
</body>
</div>
</html>

File for success.html

<html>
<head>
<title>Student registration</title>
</head>
<body>
<h1>Submitted Successfully</h1>
</body>
</html>

OUTPUT

III SEM BCA Page | 9


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

III SEM BCA Page | 10


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

PROGRAM 4

Write a html and css program illustrating margins and padding.

<html>
<head>
<title>html and css</title>
<body >
<div style="background-color:#03fc6f; border:5px solid black;padding:0px;">
<div style="border:5px solid black;background:#03fcc6;
margin-top:30px;
margin-right:30px;
margin-bottom:30px;
margin-left:30px;">
margin-top:30px;<br>
margin-right:30px;<br>
margin-bottom:30px;<br>
margin-left:30px;<br>
</div></div>
<hr>
<div style="background-color:#fc5e03; border:5px solid #fc2803;padding:0px;">
<div style="border:5px solid black;background:yellow;
padding-top:30px;
padding-right:30px;
padding-bottom:30px;
padding-left:30px;">
padding-top:30px;<br>
padding-right:30px;<br>
padding-bottom:30px;<br>
padding-left:30px;<br>
</div></div>
</body>
</head>
</html>

OUTPUT

III SEM BCA Page | 11


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

PROGRAM 5

Write a html and css program to display background image with styles.

<html>
<head>
<title>Background-image</title>
<style>
body{
background-image:url("background2.jpeg");
background-color:grey;
color:grey;
font:15px/2;
font-weight:bold;
margin:0px;

}
article{
width:480px;
padding:20px;
margin:auto;
background-color:rgba(0,0,0.....2);
}
h1{
text-align:center;
color:white;
font-size:30px;
}
p{
color:white;
text-align:justify;
font-weight:bold;
}

</style>
</head>
<body>
<article>
<h1>TOURIST PLACES</h1>
<hr>
<p>The Taj Mahal is located on the right bank of the Yamuna River in a vast Mughal garden
that encompasses nearly 17 hectares, in the Agra District in Uttar Pradesh. It was built by
Mughal Emperor Shah Jahan in memory of his wife Mumtaz Mahal with construction
starting in 1632 AD and completed in 1648 AD, with the mosque, the guest house and the
main gateway on the south, the outer courtyard and its cloisters were added subsequently and
completed in 1653 AD. The existence of several historical and Quaranic inscriptions in
Arabic script have facilitated setting the chronology of Taj Mahal. For its construction,

III SEM BCA Page | 12


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

masons, stone-cutters, inlayers, carvers, painters, calligraphers, dome builders and other
artisans were requisitioned from the whole of the empire and also from the Central Asia and
Iran. Ustad-Ahmad Lahori was the main architect of the Taj Mahal.
</p>
<img src="D:\alanhtml\tajmahal.jpg" width="480" height="220">
<p>Agra fort is a historical fort in the city of Agra in India also know as red fort. It was built
during 1565-1573 for Mughal Emperor Akbar. It was the main residence of the rulers of
Sikarwar clan of Rajputs until mughals occupied it and Mughal Dynasty until 1638, when the
capital was shifted from Agra to Delhi. It was also known as the “Lal-Qila”, “Fort Rouge” or
“Qila-i-Akbari”.[1] Before capture by the British, the last Indian rulers to have occupied it
were the Marathas. In 1983, the Agra fort was life inscribed as a UNESCO World Heritage
Site. It is about 2.5 km northwest of its more famous sister monument, the Taj Mahal. The
fort can be more accurately described as the walled city.</p>
<img src="D:\alanhtml\agrafort.jpg" width="480" height="220">
<p>This sacred mountain also known as Revatak Parvata, rising dramatically from the plains,
is covered with Jain and Hindu temples. Pilgrims from far and wide come to tackle the long
climb up 10,000 stone steps to the summit, which is best begun at dawn. Be prepared to
spend a full day if you want to reach the uppermost temples. Ascending in the early morning
light is a magical experience, as pilgrims and porters trudge up the steps.
The Jain temples, a cluster of mosaic-decorated domes interspersed with elaborate stupas, are
about two-thirds of the way up. The largest and oldest is the 12th-century Temple of
Neminath, dedicated to the 22nd Tirthankar: go through the first left-hand doorway after the
first gate. Many temples are locked from around 11 am to 3 pm, but this one is open all day.
The nearby triple Temple of Mallinath, dedicated to the ninth Tirthankar, was erected in 1177
by two brothers. During festivals, this temple is visited by several monks and spiritual
heads.</p>
<img src="D:\alanhtml\girnar.jpg" width="480" height="220">
</article>
</body>
</html>

III SEM BCA Page | 13


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

OUTPUT

III SEM BCA Page | 14


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

PROGRAM 6

Write a html and css program for blockquote text with styles.

<html>
<head>
<title>Blockquote</title>
<style>
body{
font:13px/2 arial,helvetica,sans-serif;
margin-left:400px;
background-color:#ebfaed;
}
article{
width:500px
}
.pquote{
float:left;
width:100px;
background:#cdf7d3;
font-weight:bold;
padding:13px;
margin:0 13px 13px 0;
}
.one{
text-align:center;
color:#0ccc28;
font-size:20px
}
p{
text-align:justify
}
</style>
</head>
<body>
<article>
<h3><p class=one>PROGRAMMING LANGUAGES</p></h3>
<p>A programming language is a computer language that is used by programmers
(developers) to communicate with computers. It is a set of instructions written in any specific
language ( C, C++, Java, Python) to perform a specific task.
The main advantage of a high-level language is that it is easy to read, write, and maintain.
High-level programming language includes Python, Java, JavaScript, PHP, C#, C++,
Objective C, Cobol, Perl, Pascal, LISP, FORTRAN, and Swift programming language.</p>
<div class="pquote">
<p>Description of ASP.NET,PHP AND PYTHON</p>
</div>

III SEM BCA Page | 15


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

<p>ASP.NET is a web development platform, which provides a programming model, a


comprehensive software infrastructure and various services required to build up robust web
applications for PC, as well as mobile devices.
it works on top of the HTTP protocol, and uses the HTTP commands and policies to set a
browser-to-server bilateral communication and cooperation.
ASP.NET is a part of Microsoft .Net platform. ASP.NET applications are compiled codes,
written using the extensible and reusable components or objects present in .Net framework.
These codes can use the entire hierarchy of classes in .Net framework.
</p>
<p>PHP is an open-source server-side scripting language that many devs use for web
development. It is also a general-purpose language that you can use to make lots of projects,
including Graphical User Interfaces (GUIs).The abbreviation PHP initially stood for Personal
Homepage. But now it is a recursive acronym for Hypertext Preprocessor. (It's recursive in
the sense that the first word itself is an abbreviation, so the full meaning doesn't follow the
abbreviation.)
</p>
<p>Python is a high-level, general-purpose programming language. Its design philosophy
emphasizes code readability with the use of significant indentation.
Guido van Rossum began working on Python in the late 1980s as a successor to the ABC
programming language and first released it in 1991 as Python 0.9.0.[36] Python 2.0 was
released in 2000 and introduced new features such as list comprehensions, cycle-detecting
garbage collection, reference counting, and Unicode support. Python 3.0, released in 2008,
was a major revision that is not completely backward-compatible with earlier versions.
Python 2 was discontinued with version 2.7.18 in 2020.[37]
Python consistently ranks as one of the most popular programming languages.</p>
<article>
</body>
</html>

OUTPUT

III SEM BCA Page | 16


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

PROGRAM 7

Write a html and css program to create vertical navigation bar.

<html>
<head>
<style>
ul{
list-style:none;margin:0;
padding:0;
width:200px;
background-color:#f1f1f1;
}
li a{
display:block;
color:#000;
padding:8px 16px;
text-decoration:none;
}
li a:hover{
background-color:#555;
color:white;
}
</style>
</head>
<body>
<h2>Vertical navigation bar</h2>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

III SEM BCA Page | 17


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

OUTPUT

III SEM BCA Page | 18


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

PROGRAM 8

Write a html and css program to display simple image gallery .

<html>
<head>
<style>
h1{
text-align:center;
color:black;
}
div.gallery{
margin:20px;
border:1px solid #ccc;
height:auto;
width:150px;
float:right;
}
div.gallery:hover{
border:1px solid blue;
}
div.gallery img{
width:100%;
height:auto;
}
div.desc{
padding:15px;
text-align:center;
}

body {
background-image: url("D:\alanhtml\background.jpeg");
}
</style>
</head>
<body>
<h1>Image Gallery</h1>
<div class="gallery">
<a target="_blank" href="D:\alanhtml\tajmahal.jpg" >
<img src="D:\alanhtml\tajmahal.jpg" alt="tajmahal" width="600" height="400">
</a>
<div class="desc">The Taj Mahal was commissioned by Shah Jahan in 1631, to be built in
the memory of his wife Mumtaz Mahal, who died on 17 June that year, while giving birth to
their 14th child</div>
</div>
<div class="gallery">

III SEM BCA Page | 19


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

<a target="_blank" href="D:\alanhtml\agrafort.jpg" >


<img src="D:\alanhtml\agrafort.jpg" alt="agrafort" width="600" height="400">
</a>
<div class="desc">Agra fort is a historical fort in the city of Agra in India also known as red
fort. It was built during 1565-1573 for Mughal Emperor Akbar.</div>
</div>
<div class="gallery">
<a target="_blank" href="D:\alanhtml\sanchi.jpg" >
<img src="D:\alanhtml\sanchi.jpg" alt="sanchi" width="600" height="400">
</a>
<div class="desc">Sanchi is a Buddhist complex, famous for its Great Stupa, on a hilltop at
Sanchi Town in Raisen District of the State of Madhya Pradesh, India.</div>
</div>
<div class="gallery">
<a target="_blank" href="D:\alanhtml\rome.jpg" >
<img src="D:\alanhtml\rome.jpg" alt="rome" width="600" height="400">
</a>
<div class="desc">Rome is the capital city of Italy. It is also the capital of the Lazio region,
the centre of the Metropolitan City of Rome, and a special comune named Comune di Roma
Capitale.</div>
</div>
<div class="gallery">
<a target="_blank" href="D:\alanhtml\sou.jpg" >
<img src="D:\alanhtml\sou.jpg" alt="sou" width="600" height="400">
</a>
<div class="desc">"The Statue of Liberty Enlightening the World" was a gift of friendship
from the people of France to the United States and is recognized as a universal symbol of
freedom and democracy</div>
</div>
<div class="gallery">
<a target="_blank" href="D:\alanhtml\girnar.jpg" >
<img src="D:\alanhtml\girnar.jpg" alt="girnar" width="600" height="400">
</a>
<div class="desc">Mount Girnar is a major igneous plutonic complex which intruded into
the basalts towards the close of the Deccan Trap period. </div>
</div>
<div class="gallery">
<a target="_blank" href="D:\alanhtml\redfort.jpg" >
<img src="D:\alanhtml\redfort.jpg" alt="redfort" width="600" height="400">
</a>
<div class="desc">The Red Fort Complex was built as the palace fort of Shahjahanabad – the
new capital of the fifth Mughal Emperor of India, Shah Jahan,named for its massive
enclosing walls of red sandstone</div>
</div>
</body>
</html>

III SEM BCA Page | 20


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

OUTPUT

III SEM BCA Page | 21


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

PROGRAM 1

Write a program to display fibonacci series using javascript.

<html>
<head>
<title>Fibonacci Series</title>
</head>
<body>
<script type="text/javascript">
var fib1=0;
var fib2=1;
var fib3;
var num=prompt("Enter limit");
if (num!=null&&num>0)
{
document.write("<h2> First "+num+" numbers in the fibonacci series are </h2>");
if (num==1)
{
document.write("<h2>"+fib1+"</h2>");
}
else
{
document.write(fib1+"<br />");
document.write(fib2+"<br />");
}

for( var i=3; i<=num;i++)


{
fib3=fib1+fib2;
document.write(fib3+"<br />");
fib1=fib2;
fib2=fib3;
}
}
else
{
alert("Invalid input");
}
</script>
</body>
</html>

III SEM BCA Page | 22


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

OUTPUT

III SEM BCA Page | 23


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

PROGRAM 2

Write a program to display the square of a given numbers using Javascript.

<html>
<head>
<title>Square of a number</title>
</head>
<body>
<script type="text/javascript">
var num=prompt("enter number of terms")
var message;
if(num>0&&num!=null)
{
message="Numbers and its squares are\n";
for(i=1;i<=num;i++)
{
message=message+i+"^2="+i*i+"\n";
}
alert(message);
}
else
{
alert("invalid input");
}
</script>
</body>
</html>

OUTPUT

III SEM BCA Page | 24


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

III SEM BCA Page | 25


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

PROGRAM 3

Write a program to reverse a number using Javascript.

<html>
<head>
<title>reverse</title>
</head>
<body onload="function_reverse()">
<script>
function function_reverse()
{
var number=prompt("enter the number to be reversed");
var n=number;
var temp=0,r;
while(n>0)
{
r=n%10;
temp=temp*10+r;
n=Math.floor(n/10);
}
document.write("<b>Given number:</b>"+number+"<br/>");
document.write("<b>Reverse of the number:</b>"+temp+"");
}
</script>
</body>
</html>

OUTPUT

III SEM BCA Page | 26


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

PROGRAM 4

Create a calculator using CSS and Javascript.

<html>
<head>
<title>Calculator</title>
<style>
*{
font-family:monospace;
color:#555;
}
body{
background-color:#3fb399;
}
.container{
width:320px;
background-color:white;
margin:120px auto;
}
table{
width:100%;
border-color:#f4f4f4;
}
td{
width:25%;
}
button{
width:100%;
height:70px;
font-size:24px;
background-color:white;
border:none;
}
#inputLabel{
height:120px;
font-size:40px;
vertical-align:bottom;
text-align:right;
padding-right:16px;
background-color:#ececec;
}
</style>
</head>
<body>
<div class="container">
<table border="1" cellspacing="0">

III SEM BCA Page | 27


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

<tr>
<td colspan="4" id="inputLabel">0</td>
</tr>
<tr>
<td colspan="3"><button onclick="pushBtn(this);">AC</button></td>
<td><button onclick="pushBtn(this)">/</button></td>
</tr>
<tr>
<td ><button onclick="pushBtn(this);">7</button></td>
<td ><button onclick="pushBtn(this);">8</button></td>
<td ><button onclick="pushBtn(this);">9</button></td>
<td ><button onclick="pushBtn(this);">*</button></td>
</tr>
<tr>
<td ><button onclick="pushBtn(this);">4</button></td>
<td ><button onclick="pushBtn(this);">5</button></td>
<td ><button onclick="pushBtn(this);">6</button></td>
<td ><button onclick="pushBtn(this);">+</button></td>
</tr>
<tr>
<td ><button onclick="pushBtn(this);">1</button></td>
<td ><button onclick="pushBtn(this);">2</button></td>
<td ><button onclick="pushBtn(this);">3</button></td>
<td ><button onclick="pushBtn(this);">-</button></td>
</tr>
<tr>
<td colspan="2" ><button onclick="pushBtn(this);">0</button></td>
<td ><button onclick="pushBtn(this);">.</button></td>
<td ><button onclick="pushBtn(this);">=</button></td>
</tr>
</table>
</div>
<script>
var inputLabel=document.getElementById('inputLabel');
function pushBtn(obj){
var pushed=obj.innerHTML;
if(pushed=="="){
inputLabel.innerHTML=eval(inputLabel.innerHTML);
}
else if(pushed=="AC"){
inputLabel.innerHTML="0";
}
else{
if(inputLabel.innerHTML=="0"){
inputLabel.innerHTML=pushed;
}

III SEM BCA Page | 28


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

else{
inputLabel.innerHTML+=pushed;
}
}
}
</script>
</body>
</html>

OUTPUT

III SEM BCA Page | 29


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

PROGRAM 5

Write a Javascript Program to locate the Mouse Pointer in the screen.

<html>
<head>
<title>mouse pointer</title>
<script type="text/javascript">
function displayPtr(evt)
{
var dom=document.getElementById("message")
dom.style.left=(evt.clientX-130)+'px';
dom.style.top=(evt.clientY-25)+'px';
dom.style.visibility="visible";
}
function hidePtr()
{
document.getElementById("message").style.visibility="hidden";
}
</script>
</head>
<body onmousedown="displayPtr(event);"
onmouseup="hidePtr();">
<p>
<span id="message" style="color:red;position:relative;
font-size:26pt; font-weight:bold;">You just cliked here</span>
</p>
</body>
</html>

OUTPUT

III SEM BCA Page | 30


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

PROGRAM 6

Write a javascript program to Animate a Box.

<html>
<head>
<title>Animate a box</title>
<style>
#container{
width:400px;
height:400px;
position:relative;
background:yellow;
}
#animate{
width:50px;
height:50px;
position:absolute;
background:red;
}
</style>
</head>
<body>
<p>
<button onmousedown="myMove()">Click</button>
</p>
<div id="container">
<div id="animate"></div></div>
<script type="text/javascript">
function myMove(){
var ele=document.getElementById("animate");
var pos=0;
var id=setInterval(frame,5);
function frame()
{
if(pos==350)
{
clearInterval(id);
}
else{
pos++;
ele.style.top=pos+'px';
ele.style.left=pos+'px';
}
}
}
</script>

III SEM BCA Page | 31


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

</body>
</html>

OUTPUT

III SEM BCA Page | 32


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

PROGRAM 7

Write a JavaScript Program to create a Hotel Menu and Generate total bill.

<html>
<head>
<title>HOTEL MENU</title>
<script type="text/javascript">
function computecost()
{
var salad=document.getElementById("salad").value;
var biryani=document.getElementById("biryani").value;
var paneer=document.getElementById("paneer").value;
document.getElementById("cost").value=totalcost=salad*55+biryani*100+paneer*80;
}
</script>
<style>
*{
font-family:'Times New Roman','Arial';
color:#555;
}
body{
background-color:#3fb399;
}
h2{
color:red;
text-align:center;

}
.container{
width:320px;
background-color:lightblue;
margin:120px auto;
padding:20px;
}
table{
text-align:center;
border-color:#f4f4f4;
background-color:white;
}
td{
width:25%;
}
</style>
</head>
<body>

III SEM BCA Page | 33


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

<div class="container">
<form action="">
<h2>ORDER FORM</h2>
<table boder="1" cellspacing="0">
<tr>
<th>ITEM</th>
<th>PRICE</th>
<th>QUANTITY</th>
</tr>
<tr>
<th>salad</th>
<td>55</td>
<td><input type="text" id="salad" size="2"></td>
</tr>
<tr>
<th>biryani</th>
<td>100</td>
<td><input type="text" id="biryani" size="2"></td>
</tr>
<tr>
<th>paneer</th>
<td>80</td>
<td><input type="text" id="paneer" size="2"></td>
</tr>
</table>
<p>
<input type="button" value="totalcost" onclick="computecost();"/>
<input type="text" id="cost" size="5" onfocus="this.blur();"/></p>
<p>
<input type="submit" value="order"/>
<input type="reset" value="clear"/>
</p>
</form>
</div>
</body>
</html>

III SEM BCA Page | 34


LAB ON HTML JAVASCRIPT AND VBSCRIPT 3SU21AI009

OUTPUT

III SEM BCA Page | 35

You might also like