Scribd
Upload
25 views40 pages

WT Lab Programs (Prog.1 - Prog.40)

The document contains a series of HTML programs demonstrating various HTML tags and their attributes, including formatting tags, header tags, anchor tags, image tags, list formatting, tables, and forms. Each section provides examples of how to implement these tags in a web page, along with explanations of their functions. The document serves as a comprehensive guide for learning HTML basics.

Uploaded by

saimahadev14
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
25 views40 pages

WT Lab Programs (Prog.1 - Prog.40)

The document contains a series of HTML programs demonstrating various HTML tags and their attributes, including formatting tags, header tags, anchor tags, image tags, list formatting, tables, and forms. Each section provides examples of how to implement these tags in a web page, along with explanations of their functions. The document serves as a comprehensive guide for learning HTML basics.

Uploaded by

saimahadev14
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/ 40

<!--1. Write a HTML program to implement Formatting tags .

-->

<html>

<head>

</head>

<body>

<B>B.Com.(C.A.) </B> <br>

<I>B.Com.(C.A.) </I> <br>

<U>B.Com.(C.A.) </U> <br>

<H1>B.Com.(C.A.) </H1>

<H2>B.Com.(C.A.) </H2>

<H3>B.Com.(C.A.) </H3>

<H4>B.Com.(C.A.) </H4>

<H5>B.Com.(C.A.) </H5>

<H6>B.Com.(C.A.) </H6>

<S>B.Com.(C.A.) </S> <br>

a<sup>2</sup>+b<sup>2</sup>+2ab <br>

x<sub>1</sub>+x<sub>2</sub>=0 <br>

<font color=red size=5 face="Arial">IIMC</font> <br>

<font color="RGB(100,150,200)" size=7 face="Arial Black">IIMC</font> <br>

<font color="#15cdef" size=6 face="Times New Roman">IIMC</font> <br>

</body>

</html>

<!--

B=bold

I=Italic

U=Underline

H1..H6 = Header Tags, <H1> is largest and <H6> is smallest

<sup> means superscript

<sub> means subscript


<font> has 3 attributes: color, size & face.

color - gave the name of the color or RGB(r,g,b) or #rrggbb Total no. of colors =16 Million colors

RGB is binary/octal numbering system and # is Hexadecimal(0-9,A-F) RGB(0,0,0) and ends with
RGB(255,255,255)

# starts with #000000 and ends with #ffffff

size ranges from 1 to 7. 1 is smallest and 7 is largest

face is font name available in MS-Word/Excel/PPT

-->

<!--2. Write a HTML program to demonstrate all Logical tags..-->

<html>

<head>

</head>

<body>

<Strong>B.Com.(C.A.) </Strong> <br>

<EM>B.Com.(C.A.) </EM> <br>

<strike>B.Com.(C.A.) </strike> <br>

<Big>B.Com.(C.A.) </Big> <br>

<small>B.Com.(C.A.) </small> <br>

</body>

</html>

<!--3. Write a HTML program to implement all Header tags.-->

<html>

<head>

<title>Header Tags</title>

</head>

<body>

<H1>B.Com.(C.A.) </H1>

<H2>B.Com.(C.A.) </H2>

<H3>B.Com.(C.A.) </H3>
<H4>B.Com.(C.A.) </H4>

<H5>B.Com.(C.A.) </H5>

<H6>B.Com.(C.A.) </H6>

</body>

</html>

<!--4. Write a HTML program to illustrate Anchor tag along with all its attributes.-->

<html>

<head>

</head>

<body>

<a href="http://www.iimchyderabad.com">Go to college website</a> <br><br>

<a href="http://www.iimchyderabad.com" target="_blank" name="abc">Go to college website in new


page</a>

</body>

</html>

<!--

a means Anchor tag

href means hyper reference

-->

<!--5. Write a HTML program to insert Image tag with all its attributes.-->

<html>

<head>

<title>Image Tag with Attributes</title>

</head>

<body>

<img src="C:\Users\Comp_24\Desktop\Desert.jpg" width=1366 height=768 alt="BCA-IIC">

</body>

</html>

<!--

img stands for image

src, width, height and alt - Attributes of <img>

src is mandatory attribute.


src=source (Location of image including image name and extension)

alt = alternate text(gives tooltip about the image)

we can take support of <marquee> to scroll the images

<marquee behavior="slide" scrollamount="10" scrolldelay="10" align="middle" direction="right">


<img src="C:\Users\Comp_24\Desktop\Desert.jpg" width=625 height=360 alt="BCA-IIC">

</marquee>

-->

<!--6. Create a Web Page to display the text “ALL THE BEST" aligned with images.-->

<html>

<head>

<title>Image Tag with Attributes</title>

</head>

<body>

<img src="C:\Users\Comp_24\Desktop\Desert.jpg" width=400 height=300 alt="This is Desert" align="top">


IIMC <br>

<img src="C:\Users\Comp_24\Desktop\Desert.jpg" width=400 height=300 alt="This is Desert"


align="middle">B.Com.(CA)<br>

<img src="C:\Users\Comp_24\Desktop\Desert.jpg" width=400 height=300 alt="This is Desert"


align="bottom">II C<br>

</body>

</html>

<!--

align attribute of <img> allows the web developer to display the Text along with image using the following
alignment values:

middle, top, bottom

-->

<!--7. Write a HTML program to implement Font tags along with its attributes.-->

<html>

<head>

<title>Font Tag</title>

</head>

<body>
<font color="red" size=7 face="Arial"> IIMC</font>

</body>

</html>

<!--

<font> has 3 attributes

1. color

2. size

3. face

-->

<!-- 8. Write a HTML program to illustrate List formatting tags for the streams available in College :

a. Ordered list b. Unordered list c. Definition List. -->

<html>

<head>

<title>List Tags in HTML</title>

</head>

<body>

<ol type="I">

<li>Desktop</li>

<li>Laptop</li>

<li>Mobile</li>

<li>Alexa</li>

</ol>

<ul type="square">

<li>Desktop</li>

<li>Laptop</li>

<li>Mobile</li>

<li>Alexa</li>

</ul>

<dl>

<dt> Internet</dt>

<dd> Collection of Networks</dd>


<dt>Web</dt>

<dd> Collection of Web Pages</dd>

</dl>

</body>

</html>

<!--

<ol> means Ordered List. type is either "1" or "a" or "i" or "I" . Default is 1. It is similar to Numbering in MS-
Word.

<ul> means Unordered List . type is either "disc" or "circle" or "square". Default is disc. It is similar to Bullets in
MS-Word.

<dl> means Definition List/Description List.

<dt> means Defintion Term

<dd> means Defintion Term-Defintion

-->

<!-- 9. create a Web Page to display ordered list, unordered list on the subjects available in Fourth semester -->

<html>

<head>

<title>List Tags in HTML</title>

</head>

<body>

<ol type="1">

<li>English</li>

<li>Second Language</li>

<li>Leadership & Management Skills</li>

<li>Practice of Life and General Insurance</li>

<li>Income Tax</li>

<li>Business Statistics-II</li>

<li>Web Technologies</li>

</ol>

<ul type="circle">

<li>English</li>

<li>Second Language</li>
<li>Leadership & Management Skills</li>

<li>Practice of Life and General Insurance</li>

<li>Income Tax</li>

<li>Business Statistics-II</li>

<li>Web Technologies</li>

</ul>

</body>

</html>

<!--

<ol> means Ordered List. type is either "1" or "a" or "i" or "I" . Default is 1. It is similar to Numbering in MS-
Word.

<ul> means Unordered List . type is either "disc" or "circle" or "square". Default is disc. It is similar to Bullets in
MS-Word.

-->

<!-- 10. create a Table with Four rows and Four columns in HTML . -->

<html>

<head>

<title>Table Tag</title>

</head>

<body>

<table border=5>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>
<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

</tr>

</table>

</body>

</html>

<!--

Tr means table row

Td means table data

-->

<!-- 11. Write a HTML program to create a Time-table of your College using necessary options such as
Cellpadding, Cellspacing , colspan , rowspan . -->

<html>

<head>

<title>Timetable</title>

</head>

<body>

<table border=5 cellpadding=5 cellspacing=5>

<tr>

<th>Day&Timing</th>
<th>9.30-10.30</th>

<th>10.30-11.30</th>

<th>11.30-12.30</th>

<th>12.30-1.00</th>

<th>1.00-1.50</th>

<th>1.50-2.40</th>

</tr>

<tr>

<th>Monday</th>

<td>WT</td>

<td>BS</td>

<td>IT</td>

<td rowspan=6>Break</td>

<td>SL</td>

<td>SEC</td>

</tr>

<tr>

<th>Tuesday</th>

<td>BS</td>

<td>English</td>

<td>IT</td>

<td>SEC</td>

<td>SL</td>

</tr>

<tr>

<th>Wednesday</th>

<td>WT</td>

<td>English</td>

<td>IT</td>

<td>BS</td>

<td>SL</td>

</tr>
<tr>

<th>Thursday</th>

<td>WT</td>

<td>BS</td>

<td>IT</td>

<td>SL</td>

<td>SEC</td>

</tr>

<tr>

<th>Friday</th>

<td>BS</td>

<td>English</td>

<td>IT</td>

<td>SEC</td>

<td>SL</td>

</tr>

<tr>

<th>Saturday</th>

<td>WT</td>

<td>English</td>

<td>IT</td>

<td colspan=2>Business Statistics</td>

</tr>

</table>

</body>

</html>

<!--

cellpadding provides the space between cell border and content of the cell

cellspacing provides the space between the cells.

-->

<!--12. Write a HTML program to marquee the image and text.-->

<html>
<head>

<title>Marquee</title>

</head>

<body>

<marquee>

<img src="Desert.jpg" width=200 height=200> <br> <br>

Web Technologies

</marquee>

</body>

</html>

<!--

we can take support of <marquee> to scroll the image and text

<marquee behavior="slide" scrollamount="10" scrolldelay="10" align="middle" direction="right">

<img src="C:\Users\Comp_24\Desktop\Desert.jpg" width=625 height=360 alt="BCA-IIC">

</marquee>

Absolute URL needs complete address of the image/document - C:\Users\Comp_24\Desktop\Desert.jpg

Relative URL needs only the image/document(filename.extension) - Desert.jpg

-->

<!--13. Create a Web Page in which the text " WEB TECHNOLOGY " should scroll in different directions for four
times .-->

<html>

<head>

<title>Marquee</title>

</head>

<body>

<marquee direction=left>

WEB TECHNOLOGY

</marquee>

<marquee direction=right >

WEB TECHNOLOGY
</marquee>

<marquee direction=up>

WEB TECHNOLOGY

</marquee>

<marquee direction=down>

WEB TECHNOLOGY

</marquee>

</body>

</html>

<!--

<marquee> direction attribute has four values: left, right, up & down

-->

14. Create a table using all its attributes and sub tags to execute the following Information .

<html>

<head>

<title>timetable</title>

</head>

<body>

<table border=5 cellpadding=20 cellspacing=5>

<tr>

<th>SNO</th>
<th>NAME</th>

<th>SPECIALIZATION</th>

</tr>

<tr>

<th>1</th>

<td>Ada Lovelace</td>

<td>she is world first computer progmmer</td>

</tr>

<tr>

<th>2</th>

<td>Adam Osborne</td>

<td>creater of first commercially available portable computer</td>

</tr>

<tr>

<th>3</th>

<td>Abhay Bhushan</td>

<td>author of first file transfer protocol</td>

</tr>

<tr>

<th>4</th>

<td>Alan copper</td>

<td>father of visual basic</td>

</tr>

<tr>

<th>5</th>

<td>Alan emtage</td>

<td>Developer of "archie"</td>

</tr>

<tr>

<th>6</th>

<td>Alan schaaf</td>
<td>Founder of imgur</td>

</tr>

<tr>

<th>7</th>

<td>Alexander Douglas</td>

<td>created the first geographical computer game OXO</td>

</tr>

<tr>

<th>8</th>

<td>Andreas Bechtolsheim</td>

<td>co-founder of sun microsystem </td>

</tr>

</table>

</body>

</html>

<!--15. Create a Program on the concept of Form containing Textboxes, Radio Buttons and Checkboxes-->

<html>

<head>

</head>

<body>

<form name=f1>

First Name: <input type="text"> <br>

Last Name: <input type="text"> <br>

Course:

<input type="radio" name=c>B.Com.(C.A.)

<input type="radio" name=c>B.Com.(Hons.)

<input type="radio" name=c>B.Com.(Gen.)

<input type="radio" name=c>B.B.A.

<input type="radio" name=c>B.Sc.(M.S.Cs.)


<input type="radio" name=c>M.Com. <br>

Languages known:

<input type="checkbox" name=L1>English

<input type="checkbox" name=L2>Hindi

<input type="checkbox" name=L3>Telugu <br>

<input type="submit">

</form>

</body>

</html>

<!--16. Create a Program on Employee Information Form.-->

<html>

<head>

</head>

<body>

<form name=f1>

Employee No: <input type="text" name="empno" size=5 maxlength=2> <br>

Employee Name: <input type="text" name="ename" size=15 maxlength=10 value="Enter your name"> <br>

Dept.Name: <input type="text" name="dname" size=15 maxlength=10> <br>

House Address:<br>

<textarea name="add" rows=6 cols=30></textarea> <br>

DOB: <input type="datetime-local"> <br>

Gender : <input type="radio" name=g>Male

<input type="radio" name=g>Female <br>

Qualification: <select>

<option>Graduation</option>

<option>Post-Graduation</option>

<option>Doctorate</option>

</select> <br>

Computer Skills : <input type="checkbox" name=cs1>C


<input type="checkbox" name=cs2>C++

<input type="checkbox" name=cs3>SQL<br>

Company Name: <input type="text" name="cname" size=15 maxlength=10> <br>

<input type="submit"> <input type="reset">

</form>

</body>

</html>

<!--17. Write a Program to create Pull Down Menu on the universities available in Telangana State.-->

<html>

<head>

</head>

<body>List of Universities in TS<br>

<select>

<option>Osmania University, Hyd</option>

<option>Mahatma Gandhi University, Nalgonda</option>

<option>JNTU, Hyderabad</option>

<option>Telangan University, Nizamabad</option>

<option>Dr.B.R.Ambedkar University, Hyderabad</option>

<option>Kakatiya University, Warangal</option>

<option>Palamuru University, Mahabubnagar</option>

</select>

</body>

</html>

<!--18. Write a Program to create Pull Down Menu on various Web Designing Softwares-->

<html>

<head>

</head>

<body>Web Designing Softwares<br>

<select>

<option>Photoshop</option>
<option>Notepad++</option>

<option>Web Browser</option>

<option>JavaScript</option>

<option>Adobe Corel Draw</option>

<option>WordPress</option>

</select>

</body>

</html>

<!--19. Create a Web Page of student information form, when the information is submitted message should be
displayed .-->

<html>

<head>

<title>student details</title>

<script language="javascript">

function send()

var fname=document.f1.fname.value;

var email=document.f1.email.value;

var mobile=document.f1.mobile.value;

var city=document.f1.city.value;

var course=document.f1.course.value;

document.write("<center><table border=5>");

document.write("<tr><th>Full Name:</th><td>"+fname+"</td></tr>");

document.write("<tr><th>E-mail:</th><td>"+email+"</td></tr>");

document.write("<tr><th>Mobile:</th><td>"+mobile+"</td></tr>");

document.write("<tr><th>City:</th><td>"+city+"</td></tr>");

document.write("<tr><th>Course:</th><td>"+course+"</td></tr>");

document.write("</table></center>");

</script>
</head>

<body bgcolor="cyan">

<font>Indian Institue of Management of Commerce[IIMC],Hyderabad</font><BR>

<br>

<form name=f1>

Full Name:<input type="text" name="fname"><br>

<br>

Email Address:<input type="text" name="email"><br>

<br>

Mobile Number:<input type="text" name="mobile"><br>

<br>

City You Live in

<select name="city">

<option>hyderabad</option>

<option>mumbai</option>

<option>delhi</option>

<option>chennai</option>

<option>jaipur</option>

</select>

<br><br>

Course Studying:

<input type="radio" name=course value="BCA">B.com(CA)

<input type="radio" name=course value="BH">B.com(hons)

<input type="radio" name=course value="BG">B.com(gen)

<input type="radio" name=course value="BSC">Bsc

<input type="radio" name=course value="BBA">BBA

<br>

<br>

<input type="submit" value="submit" onClick="send()">

</form>

</body>
</html>

<!--20. Write a HTMl Program to create Four Vertical Frames-->

<html>

<head>

<title>Frameset Program</title>

</head>

<frameset cols="25%,25%,25%,25%">

<frame src="prog20-1.html">

<frame src="prog20-2.html">

<frame src="prog20-3.html">

<frame src="prog20-4.html">

</frameset>

</html>

Prog20-1.html

<html>

<head> </head>

<body bgcolor="red">

</body>

</html>

Prog20-2.html

<html>

<head> </head>

<body bgcolor="green">

</body>

</html>

Prog20-3.html

<html>

<head> </head>

<body bgcolor="blue">

</body>

</html>
Prog20-4.html

<html>

<head> </head>

<body bgcolor="yellow">

</body>

</html>

<!--21. Write a HTMl Program to create Four Horizontal Frames-->

<html>

<head>

<title>Frameset Program</title>

</head>

<frameset cols="25%,25%,25%,25%">

<frame src="prog21-1.html">

<frame src="prog21-2.html">

<frame src="prog21-3.html">

<frame src="prog21-4.html">

</frameset>

</html>

Prog21-1.html

<html>

<head> </head>

<body bgcolor="red">

</body>

</html>

Prog21-2.html

<html>

<head> </head>

<body bgcolor="green">

</body>

</html>
Prog21-3.html

<html>

<head> </head>

<body bgcolor="blue">

</body>

</html>

Prog21-4.html

<html>

<head> </head>

<body bgcolor="yellow">

</body>

</html>

<!--22. Write a DHTML program for Cascading Style Sheet-->

<html>

<head>

<title>External StyleSheet</title>

<link rel="stylesheet" type="text/css" href="prog24.css">

</head>

<body>

<h1>Laptop</h1>

<font>Desktop</font>

<p>Mobile</p>

</body>

</html>

CSS file:

h1{

color:red;

font{

color:green;

p{
color:blue;

<!--23. Write a program to demonstrate inline StyleSheet-->

<html>

<head>

<title>Inline StyleSheet</title>

</head>

<body>

<h1 style="color:red">Laptop</h1>

<font style="color:green">Desktop</font>

<p style="color:blue">Mobile</p>

</body>

</html>

<!--24. Write a program to demonstrate External StyleSheet-->

<html>

<head>

<title>External StyleSheet</title>

<link rel="stylesheet" type="text/css" href="prog24.css">

</head>

<body>

<h1>Laptop</h1>

<font>Desktop</font>

<p>Mobile</p>

</body>

</html>

CSS file:

h1{

color:red;

font{

color:green;

}
p{

color:blue;

<!--25. Write a program to demonstrate Embedded StyleSheet/Internal StyleSheet-->

<html>

<head>

<title>Embedded/Internal StyleSheet</title>

<style>

h1{

color:red;

font{

color:green;

p{

color:blue;

</style>

</head>

<body>

<h1>Laptop</h1>

<font>Desktop</font>

<p>Mobile</p>

</body>

</html>

<!--26. Write a program to illustrate Id and Class selector using CSS.-->

<html>

<head>

<title>Id and Class Selectors</title>

<style>

#p1{color:red;}

#p2{color:green;}
.design{color:blue;}

</style>

</head>

<body>

<p id="p1">This is My Subject</p>

<p id="p2">This is another Subject</p>

<h1 class="design">Laptop</h1>

<font class="design">Desktop</font>

<p class="design">Mobile</p>

</body>

</html>

<!--

27. Write a DHTML program to demonstrate Filters

-->

<html>

<head>

<style>

#blur

filter:blur(5px);

#gray

filter:grayscale(100%);

#drop

filter:drop-shadow(2px 5px red);


}

#bright

filter:brightness(100%);

#const

filter:contrast(50%);

#inv

filter:invert(50);

#sat

filter:saturate(10);

#hue

filter:hue-rotate(45deg);

#fv

filter:flipV();

</style>

</head>

<body>

<table border=5>

<tr>

<th>Original Image</th>

<td><img src="Desert.jpg" width=200 height=200></td>


<th>Shadow</th>

<td><img src="Desert.jpg" width=200 height=200 id="drop"></td>

<th>Invert</th>

<td> <img src="Desert.jpg" width=200 height=200 id="inv"> </td>

<th>Opacity</th>

<td> <img src="Desert.jpg" width=200 height=200 style="filter: opacity(50%)"> </td>

</tr>

<tr>

<th>Blur</th>

<td> <img src="Desert.jpg" width=200 height=200 id="blur"></td>

<th>Brightness</th>

<td><img src="Desert.jpg" width=200 height=200 id="bright"></td>

<th>Hue-Rotate</th>

<td><img src="Desert.jpg" width=200 height=200 id="hue"></td>

<th>FlipH</th>

<td> <img src="Desert.jpg" width=200 height=200 style="filter:fliph"> </td>

</tr>

<tr>

<th>Gray</th>

<td> <img src="Desert.jpg" width=200 height=200 id="gray"> </td>

<th>Contrast</th>

<td><img src="Desert.jpg" width=200 height=200 id="const"></td>

<th>Saturate</th>

<td><img src="Desert.jpg" width=200 height=200 id="sat"></td>

<th>FlipV</th>

<td> <img src="Desert.jpg" width=200 height=200 id="fv"> </td>

</tr>

<tr>

</tr>

</table>

</body>

</html>
<!--

28. Write a DHTML program to demonstrate Transitions

-->

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

transition: width 2s;

div:hover {

width: 300px;

</style>

</head>

<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>

</html>

<!--29. Write a DHTML program to demonstrate changing text and

attributes using CSS-->

<html>

<head>

<title>Id and Class Selectors</title>

<script language="javascript">
function changetext()

p1.innerText="IIMC";

p1.style.color="red";

</script>

</head>

<body>

<p id="p1" onMouseOver="changetext()">Osmania University</p>

</body>

</html>

<!--29. Write a DHTML program to demonstrate changing text and attributes using CSS-->

<html>

<head>

<title>Id and Class Selectors</title>

<script language="javascript">

function changetext()

p1.innerText="IIMC";

p1.style.color="red";

</script>

</head>

<body>

<p id="p1" onMouseOver="changetext()">Osmania University</p>

</body>

</html>
<!-- 30.Write a javascript program to calulate Area and Circumefernce of a circle-->

<html>

<head>

<script language="javascript">

function areacir()

var pi=3.14,r,area,cir;

r=document.f1.radius.value;

area=pi*r*r;

cir=2*pi*r;

document.write("<center><table border=2>");

document.write("<tr><th>Radius</th><td>"+r+"</td></tr>");

document.write("<tr><th>Area</th><td>"+area+"</td></tr>");

document.write("<tr><th>Circumference</th><td>"+cir+"</td></tr>");

document.write("</table></center>");

</script>

</head>

<body>

<form name=f1>

Radius: <input type="text" name="radius"> <br>

<input type="button" value="Calculate" onClick="areacir()">

</form>

</body>

</html>
<!--31. Write a Java Script program to display Greatest Number among Three Numbers .-->

<html>

<head>

<script>

function grnum()

var n1,n2,n3;

n1=document.f31.num1.value;

n2=document.f31.num2.value;

n3=document.f31.num3.value;

if(n1>=n2 && n1>=n3)

document.write("Greatest value=" + n1);

else if (n2>=n1 && n2>=n3)

document.write("Greatest value=" + n2);

else

document.write("Greatest value=" + n3);

</script>

</head>

<body>

<form name=f31>

Number1: <input type="text" name="num1" size=4> <br><br>

Number2: <input type="text" name="num2" size=4> <br><br>

Number3: <input type="text" name="num3" size=4> <br><br>

<input type="button" value="Greatest Num" onClick="grnum()">

</form>

</body>

</html>
<!--

32 . Write a Java Script program to demonstrate Arithmetic Operations using Switch case.

+ Addition

- Subtraction

* Multiplication

/ Division

% Modulo Division(Remainder)

-->

<html>

<head>

<script>

function ArtOp()

var n1,n2,res;

n1=parseInt(document.f32.n1.value);

n2=parseInt(document.f32.n2.value);

//n1=parseInt(prompt("Enter value 1"));

//n2=parseInt(prompt("Enter value 2"));

var ch;

ch=document.f32.ch.value;

//ch=window.prompt("Enter + or - or * or / or %");

switch(ch)

case '+': res=n1+n2;

break;

case '-': res=n1-n2;

break;

case '*': res=n1*n2;

break;

case '/': res=n1/n2;


break;

case '%': res=n1%n2;

break;

default: alert("invalid");

document.write("Result=" + res);

</script>

</head>

<body>

<form name="f32">

Number 1: <input type="text" name=n1> <br>

Number 2: <input type="text" name=n2><br>

Arithemetic Operation:<select name=ch>

<option>+</option>

<option>-</option>

<option>*</option>

<option>/</option>

<option>%</option>

</select><br><br>

<input type="button" value="CALCULATE" onClick="ArtOp()">

</form>

</body>

</html>

<!--33. Write a Java Script program to print Odd numbers using while loop-->

<html>

<head>

<script language="javascript">

var n=prompt("Enter a number:");


document.write("Odd numbers upto " + n +"<br>")

var i=1;

while(i<=n)

document.write(i+"<br>");

i=i+2;

</script>

</head>

<body>

</body>

</html>

<!--34. Write a Java Script program to demonstrate multiplication table.-->

<html>

<head>

<script>

function mult()

var n;

n=document.f34.num.value;

document.write("<center><table border=5>");

for(var i=1;i<=10;i++)

//document.write(n+"*"+i+"="+n*i+"<br>");

document.write("<tr><td>"+n+"*"+i+"="+n*i+"</td></tr>");

document.write("</table></center>");

</script>

</head>

<body>
<form name=f34>

Number: <input type="text" name="num" size=4> <br><br>

<input type="button" value="Mult Table" onClick="mult()">

</form>

</body>

</html>

<!--

35. Write a Java Script program using any five events .

-->

<html>

<head>

<script>

function omd()

alert("Executed the event-onMouseDown");

function omm()

alert("Executed the event-onMouseMove");

function omo()

alert("Executed the event-onMouseOut");

function omv()

alert("Executed the event-onMouseOver");

function omu()
{

alert("Executed the event-onMouseUp");

function oc()

alert("Executed the event-onClick");

function odc()

alert("Executed the event-onDblClick");

function okd()

alert("Executed the event-onKeyDown");

function okp()

alert("Executed the event-onKeyPress");

function oku()

alert("Executed the event-onKeyUp");

</script>

</head>

<body>

<input type="button" value="MouseDown" onMouseDown="omd()"><br><br>

<input type="button" value="MouseMove" onMouseMove="omm()"> <br><br>

<input type="button" value="MouseOut" onMouseOut="omo()"> <br><br>

<img src="image1.jpeg" onMouseOut="omo()"><br><br>

<img src="image2.jpeg" onMouseOver="omv()"> <br><br>


<a href="#" onMouseUp="omu()">MouseUp</a> <br><br>

<input type="Checkbox" onClick="oc()"><br><br>

<input type="Radio" onDblClick="odc()"><br><br>

<input type="button" value="KeyDown" onKeyDown="okd()"><br><br>

<a href="#" onKeyPress="okp()">KeyPress</a> <br><br>

<a href="#" onKeyUp="oku()">KeyUp</a> <br><br>

</body>

</html>

<!--36. Write a Java Script program to print N-natural numbers using For loop.-->

<html>

<head>

<script language="javascript">

var n=prompt("Enter a number:");

document.write("Natural numbers upto " + n +"<br>")

for(var i=1;i<=n;i++)

document.write(i+"<br>");

</script>

</head>

<body>

</body>

</html>

<!--37. Write a Java Script program to print Factorial of a given number.-->

<html>

<head>

<script language="javascript">

var n=prompt("Enter a number");

var f=1;

for(var i=n;i>=1;i--)
{

f=f*i;

document.write("Fact=" + f);

</script>

</head>

<body>

</body>

</html>

<!--38. Write a Java Script program to demonstrate Arrays-->

<html>

<head>

<script language="javascript">

var a=new Array();

var n=prompt("Enter the size of Array");

for(var i=0;i<n;i++)

a[i]=parseInt(prompt("Enter the value"));

document.write("The elements of Array:");

for(var i=0;i<n;i++)

document.write("<br>" + a[i]);

var sum=0;

for(var i=0;i<n;i++)

sum=sum+a[i];

document.write("<br>Sum of elements in Array:" + sum);

</script>

</head>

<body>

</body>

</html>
<!--

39. Write a Java Script program to demonstrate String manipulating functions.

-->

<html>

<head>

<script>

var s="Web Technologies";

document.write("Given String="+ s);

document.write("<br>String length=" + s.length +"<br>");

for(var i=0;i<s.length;i++)

document.write(s.charAt(i));

document.write("<br>String in small letters=" + s.toLowerCase());

document.write("<br>String in capital letters=" + s.toUpperCase());

var s1="web ";

var s2="Technologies";

document.write("<br>Merged String is: "+ s1+s2);

document.write("<br>Index of "+ s.indexOf("W"));

document.write("<br>Splitted string: "+ s.split(" "));

document.write("<br> Substring:"+ s.substring(0,3)); // it prints Web

</script>

</head>

<body>

</body>

</html>
<!--40 . Write a Java Script program to demonstrate Math objects-->

<html>

<head>

<script>

document.write("Absolute value="+Math.abs(-3456));

//document.write("<br>"+Math.sin(90*Math.PI/180));

//document.write("<br>"+Math.sin(45*Math.PI/180));

document.write("<br>Next Integer="+Math.ceil(9.4));

document.write("<br>Previous Integer="+Math.floor(9.4));

document.write("<br>Rounded value="+Math.round(9.6));

document.write("<br>Truncated value="+Math.trunc(9.9));

document.write("<br>Power value="+Math.pow(5,3));

document.write("<br>Square Root value="+Math.sqrt(4));

document.write("<br>Minimum="+Math.min(20,45,34,67,12,9));

document.write("<br>Minimum="+Math.max(20,45,34,67,12,9));

document.write("<br>Log="+Math.log(1));

</script>

</head>

<body>

</body>

</html>

<!--

Math is an object. It has various functions/methods.

some of them are abs(),min(),max(),ceil(),floor(),round()..

Math.abs()-Returns an absolute(positive) value of a num.

|10|=10

|-10|=10
Math.acos()- Returns the arc-cosine value(in radians) of a number.

Math.PI

-->

You might also like