Scribd
Upload
4 views

BCom_Web_Programs

Description

Uploaded by

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

BCom_Web_Programs

Description

Uploaded by

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

1.

Write a HTML program to implement Formatting tags

<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>

2. Write a HTML program to demonstrate all Logical tags

<html>
<head>
<title>Using Logical tags</title>
</head>
<body>
<em>This is emphasized text</em><br/>
<cite>This is cited text</cite><br/>
<code>This is code text</code><br/>
<strong>This is strong text</strong><br/>
<del>This is deleted text</del>
</body>
</html>

3. Write a HTML program to implement all Header tags

<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

4. Write a HTML program to illustrate Anchor tag along with all its attributes

<!DOCTYPE html>
<html>
<body>
<a href="https://www.google.com">Visit google.com!</a>
</body>
</html>

5. Write a HTML program to insert Image tag with all its attributes

<!DOCTYPE html>
<html>
<body>
<img src="smiley.jpg" alt="Smiley face" width="42" height="42">
</body>
</html>

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

<!DOCTYPE html>
<html>
<body>
<h2>All the Best!!!!</h2>
<img src="wish.jpg" alt="All the best" width="500" height="600">
</body>
</html>

7. Write a HTML program to implement Font tags along with its attributes

<!DOCTYPE html>
<html>
<body>
<p><font size="3" color="red">This is some text!</font></p>
<p><font size="2" color="blue">This is some text!</font></p>
<p><font face="verdana" color="green">This is some text!</font></p>
<p><strong>Note:</strong> The font element is not supported in HTML5. Use CSS
instead.</p>
</body>
</html>

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

<!DOCTYPE html>
<html>
<body>
<h2>College Course List Using Unordered List</h2>
<ul>
<li>B.Com(Computers)</li>
<li>B.Com(Generals)</li>
<li>B.Com(Honours)</li>
<li>B.Com(Taxation)</li>
<li>B.Com(Comp Applications)</li>
<li>BBA</li>
</ul>
<h2>College Course List Using ordered List</h2>
<ol>
<li>B.Com(Computers)</li>
<li>B.Com(Generals)</li>
<li>B.Com(Honours)</li>
<li>B.Com(Taxation)</li>
<li>B.Com(Comp Applications)</li>
<li>BBA</li>
</ol>
<h2>A Description List</h2>
<dl>
<dt>B.Com</dt>
<dd> Bachelor of Commerce</dd>
<dt>BBA</dt>
<dd>Bachelor of Business Administration</dd>
</dl>
</body>
</html>

9. create a Web Page to display ordered list, unordered list on the subjects
available in Fifth semester

<!DOCTYPE html>
<html>
<body>
<h2>Fifth semester subjects Using unordered List</h2>
<ul>
<li>Web Technology</li>
<li>Excel Foundation</li>
<li>Cost Accounting</li>
<li>Computerized Accounting</li>
<li>B.Law</li>
<li>Banking</li>
<li>Indian Economy</li>
<li>Principles of General Insurance</li>
</ul>
<h2>Fifth semester subjects Using ordered List</h2>
<ol>
<li>Web Technology</li>
<li>Excel Foundation</li>
<li>Cost Accounting</li>
<li>Computerized Accounting</li>
<li>B.Law</li>
<li>Banking</li>
<li>Indian Economy</li>
<li>Principles of General Insurance</li>
</ol>
</body>
</html>

10. Create a Table with Four rows and Four columns in HTML

<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<table border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Male</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>Male</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
<td>Male</td>
</tr>
</table>
</body>
</html>

11. Write a HTML program to create a Time-table of your College using necessary
options such as Cellpadding, Cellspacing ,colspan , rowspan
<html>
<body>
<br>
<h1 align="center"><u>TIME TABLE</u></h1>
<table border="1" bgcolor="lightblue" cellpadding="5" align="center">
<!-- 1st row of the time table -->
<tr>
<th>&nbsp;</th>
<th>1<sup>st</sup>&nbsp;hour</th>
<th><i>2<sup>nd</sup>&nbsp;hour</th>
<!-- 4th column heading which is spanned into all the 7 rows -->
<th rowspan="7"><b>B<BR>R<BR>E<BR>A<BR>K<BR><BR>1</th>
<th>3<sup>rd</sup>&nbsp;hour</th>
<th>4<sup>th</sup>&nbsp;hour</th>
<!-- 6th column heading which is spanned into all the 7 rows -->
<th rowspan="7"><b>B<BR>R<BR>E<BR>A<BR>K<BR><BR>2</th>
<th>5<sup>th</sup>&nbsp;hour</th>
<th>6<sup>th</sup>&nbsp;hour</th>
</tr>
<!-- 2nd row of the time table -->
<tr>
<th>MONDAY</th>
<td>WEB</td>
<td>BTP</td>
<td>EXCEL</td>
<td>IE</td>
<td>POG</td>
<td>COST</td>
</tr>
<!-- 3rd row of the time table -->
<tr>
<th>TUESDAY</th>
<td>BLAW</td>
<td>BTP</td>
<td>COMP A/C</td>
<td>EXCEL</td>
<td>POG</td>
<td>COST</td>
</tr>
<!-- 4th row of the time table -->
<tr>
<th>WEDNESDAY</th>
<td>BLAW</td>
<td>WEB</td>
<td>COMP A/C</td>
<td>POG</td>
<td>BTP</td>
<td>COST</td>
</tr>
<!-- 5th row of the time table -->
<tr>
<th>THURSDAY</th>
<td>IE</td>
<td>WEB</td>
<td>EXCEL</td>
<td>EXCEL</td>
<td>BTP</td>
<td>COST</td>
</tr>
<!-- 6th row of the time table -->
<tr>
<th>FRIDAY</th>
<td>COMP A/C</td>
<td>COMP A/C</td>
<td>BLAW</td>
<td>BTP</td>
<td>WEB</td>
<td>COST</td>
</tr>
<!-- 7th row of the time table -->
<tr>
<th>SATURDAY</th>
<td>WEB</td>
<td>WEB</td>
<td>BLAW</td>
<td>EXCEL</td>
<td>IE</td>
<td>COMP A/C</td>
</tr>
</table>
</body>
</html>

12. Write a HTML program to marquee the image and text

<!DOCTYPE html>
<html>
<body>
<marquee>
<h2>HTML Image</h2>
<img src="images.jpg" alt="Trulli" width="500" height="333">
</marquee>
</body>
</html>

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

<!DOCTYPE html>
<html>
<body>
<marquee behavior="scroll" direction="left">Web Technology</marquee>
<marquee behavior="scroll" direction="right">Web Technology</marquee>
<marquee behavior="scroll" direction="up">Web Technology</marquee>
<marquee behavior="scroll" direction="down">Web Technology</marquee>
</body>
</html>

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

SNO Name Specialization

1. Ada Lovelace She is World's first Computer Programmer.

Creator of the first commercially available Portable


2. Adam Osborne Computer .
3. Abhay Bhushan Author of the File Transfer Protocol .
4. Alan Cooper Father of Visual Basic .

5. Alan Emtage Developer of " Archie " which is considered to be the


first
search engine.
6. Alan Schaaf Founder of " Imgur " which is the world's largest
image hosting site

7. Alexander Douglas Created the first graphical Computer game, OXO .


8. Andreas Bechtolsheim Co-founder of Sun Microsystems.

<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<table border="1">
<tr>
<th>SNo</th>
<th>Name</th>
<th>Specialization</th>
</tr>
<tr>
<td>1.</td>
<td>Ada Lovelace</td>
<td>She is World's first Computer Programmer.</td>
</tr>
<tr>
<td>2.</td>
<td>Adam Osborne</td>
<td>Creator of the first commercially available Portable Computer .</td>
</tr>
<tr>
<td>3.</td>
<td>Abhay Bhushan</td>
<td>Author of the File Transfer Protocol .</td>
</tr>
<tr>
<td>4.</td>
<td>Alan Cooper</td>
<td>Father of Visual Basic .</td>
</tr>
<tr>
<td>5.</td>
<td>Alan Emtage</td>
<td>Developer of " Archie " which is considered to be the first
search engine.</td>
</tr>
<tr>
<td>6.</td>
<td>Alan Schaaf</td>
<td>Founder of " Imgur " which is the world's largest image hosting
site .</td>
</tr>
<tr>
<td>7.</td>
<td>Alexander Douglas</td>
<td>Created the first graphical Computer game, OXO .</td>
</tr>
<tr>
<td>8.</td>
<td>Andreas Bechtolsheim</td>
<td>Co-founder of Sun Microsystems.</td>
</tr>
</table>
</body>
</html>

15. Create a Program on the concept of Form containing Textboxes, Radio Buttons
and Check boxes

<!DOCTYPE html>
<html>
<body>
<form action="">
User name:
<input type="text" name="userid">
<br><br>
Gender:
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female<br><br>
Select:
<input type="checkbox" name="vehicle1" value="Bike">I have a bike
<input type="checkbox" name="vehicle2" value="Car">I have a car
<br><br>
<input type="submit">
</form>
</body>
</html>

16. Create a Program on Employee Information Form

<!DOCTYPE html>
<html>
<body>
<h2>Employee Application Form</h2>
<form action="">
Employee name:
<input type="text" name="userid"><br><br>
E-mail:
<input type="email" name="email">
<br><br>
Gender:
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female<br><br>
Applying for:
<input type="checkbox" name="n1" value="">S/W Developer
<input type="checkbox" name="n2" value="">Analyst
<br><br>
Prefered Location:
<select>
<option>Hyderabad</option>
<option>Delhi</option><option>Bengluru</option></select><br>
<br>
<input type="submit">
</form>
</body>
</html>

17. Write a program to create Pull down menu on the universities available in
Telangana State

<!DOCTYPE html>
<html>
<body>
<h1>Universities in Telengana</h1><br>
<select>
<option value="v1">Osmania University</option>
<option value="v2">JNTU</option>
<option value="v3">HCU</option>
<option value="v4">Telangana University</option>
<option value="v5">PottiSreeramulutelugu University</option>
<option value="v6">Nizam Institute of Medical Science</option>
<option value="v7">Kakatiya University</option>
<option value="v8">Satavahana University</option>
</select>
</body>
</html>

18. Write a program to create Pull down menu on various Web Designing Softwares

<!DOCTYPE html>
<html>
<body>
<h1>List of Web Designing Softwares</h1><br>
<select>
<option value="v1">Google Web Designer</option>
<option value="v2">Sketch</option>
<option value="v3">Macaw</option>
<option value="v4">Figma</option>
<option value="v5">Photoshop</option>
<option value="v6">Pixlr</option>
<option value="v7">Hologram</option>
<option value="v8">Canva</option>
</select>
</body>
</html>

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

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Student Registration Form</TITLE>
</HEAD>
<BODY>
<H1>Student Registration Form</H1>
<FORM onsubmit ="alert('All the details of this form are submitted')">
<B>Application Form</B>
<P>Fill the form and click the SUBMIT button</P>
<BR>
<B>Name:</B><INPUT type="text" name="fname" value="">
<BR>
<B>Roll Number:</B><INPUT type="text" id="fnumber" value="">
<BR>
<B>Address:</B><INPUt type="text" name="faddress" value="">
<BR>
<B>Email id:</B><INPUT type="text" name="femail" value="">
<BR>
<INPUt type="submit" value="SUBMIT">
</FORM>
</BODY>
</HTML>

20. Write a HTML program to create Four Vertical Frames

<!DOCTYPE html>
<html>
<frameset cols="25%,25%,25%,25%">
<frame src="Web-Prog-01.html">
<frame src="Web-Prog-02.html">
<frame src="Web-Prog-03.html">
<frame src="Web-Prog-04.html">
</frameset>
</html>

21. Write a HTML program to create Four Horizontal Frames

<!DOCTYPE html>
<html>
<frameset rows="25%,25%,25%,25%">
<frame src="Web-Prog-01.html">
<frame src="Web-Prog-02.html">
<frame src="Web-Prog-03.html">
<frame src="Web-Prog-04.html">
</frameset>
</html>

22. Write a DHTML program for Cascading style Sheets

<html>
<head>
<style>
body
{
background-color:pink;
}
h1
{
color: purple;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

23. Write a DHTML program to demonstrate Inline Style Sheets

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Some people dream of success, while other people get up every morning and make it
happen.
</p>
</body>
</html>

24. Write a DHTML program to demonstrate External Style Sheets

style.css
h1
{
color: red;
border: thin groove;
}

Web-Prog-24.html

<html>
<head>
<title>Simple Stylesheet</title>
<link rel="stylesheet" type="text/css" href="style.css"></head>
<body>
<h1>Simple Stylesheet</h1>
<p>The first paragraph is left unaltered.</p>
<p style="margin-left: 10%; border: ridge; background: #ffffcc">
But this paragraph undergoes some fairly radical alterations
</p>
<p>And we finish with an unaltered paragraph.</p>
</body>
</html>

25. Write a DHTML program to demonstrate Embedded Style Sheets

<html>
<head>
<style>
body
{
background-color: linen;
}
h1
{
color: maroon;
margin-left: 40px;
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

26. Write a DHTML program to illustrate Id and Class Selectors using CSS
<html>
<head>
<title>Anonymous Classes</title>
<style>
.fred
{
color: #eeebd2;
background-color: #d8a29b;
font-family: "Book Antiqua", Times, serif;
border: thin groove #9baab2;
}
#fred1
{
color:red;
}
</style>
</head>
<body>
<h1 class="fred">A Simple Heading</h1>
<p id="fred1">Applying the style fred to a paragraph of text</p>
</body>
</html>

27. Write a DHTML program to demonstrate Filters

<!DOCTYPE html>
<html>
<head>
<style>
.blur
{
filter: blur(4px);
}
.brightness
{
filter: brightness(0.30);
}
.contrast
{
filter: contrast(180%);
}
.grayscale
{
filter: grayscale(100%);
}
.huerotate
{
filter: hue-rotate(180deg);
}
.invert
{
filter: invert(100%);
}
.opacity
{
filter: opacity(50%);
}
.saturate
{
filter: saturate(7);
}
.sepia
{
filter: sepia(100%);
}
.shadow
{
filter: drop-shadow(8px 8px 10px green);
}
</style>
</head>
<body>
<h1>The filter Property</h1>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300"
height="300">
<img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300"
height="300">
<img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300"
height="300">
<img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300"
height="300">
<img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300"
height="300">
<img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300"
height="300">
<img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300"
height="300">
<p><strong>Note:</strong> The filter property is not supported in Internet Explorer,
Edge 12, or Safari 5.1 and earlier.</p>
</body>
</html>

28. Write a DHTML program to demonstrate Transitions

<!DOCTYPE html>
<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>
<style>
h1
{
text-decoration: overline;
}
h2
{
text-decoration: line-through;
}
h3
{
text-decoration: underline;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>

30. Write a Java Script program to calculate Area and circumference of a Circle

<html>
<head>
<title>Area and Perimeter of a Circle</title>
</head>
<body>
<script>
var area,perimeter,r=3;
var pi=3.14;
area=pi*r*r;
perimeter=2*pi*r;
document.write("Radius of Circle = "+r);
document.write("<br>Area of Circle = "+area);
document.write("<br>Perimeter of Circle = "+perimeter);
</script>
</body>
</html>

31. Write a Java Script program to display Greatest Number among Three
Numbers

<html>
<head>
<h1>Greatest Among Three Numbers</h1>
</head>
<body>
<script type="text/javascript">
var a=10,b=20,c=7;
document.write("<b>A = " + a + ", B = " + b + ", C = " + c + "</b><br><br>");
/* checks a>b and a>c if both conditions satisfied, A is greater */
if (a>b && a>c)
{
document.write("<b>A is greater</b>");
}
/* checks b>a and b>c if both conditions satisfied, b is greater */
if (b>a && b>c)
{
document.write("<b>B is greater</b>");
}
/* if the above two conditions were false c is greater */
else
{
document.write("<b>C is greater</b>");
}
</script>
</body>
</html>

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


Switch case

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Switch Case </title>
</head>
<h1> JavaScript Switch Case </h1>
<body>
<script>
var operator = '*';
var number1 = 10, number2 = 2;
document.write("Number1 = " + number1 + ", Number2 = " + number2 +
"<br><br>");
document.write("Arithmetic Operator selected is: " + operator + "<br><br>");
switch (operator)
{
case '+':
document.write("Addition of above two numbers is: " + (number1 + number2));
break;
case '-':
document.write("Subtraction of above two numbers is: " + (number1 - number2));
break;
case '*':
document.write("Multiplication of above two numbers is: " + (number1 * number2));
break;
case '/':
document.write("Division of above two numbers is: " + (number1 / number2));
break;
case '%':
document.write("Module of above two numbers is: " + (number1 % number2));
break;
default:
document.write("<b> You have entered Wrong operator </b>");
document.write("<br \> Please enter Correct operator such as +, -, *, /, %");
}
</script>
</body>
</html>

33. Write a Java Script program to print Odd numbers using while loop

<html>
<head>
<title> Java Script program to print Odd numbers using while loop.</title>
</head>
<body>
<h1>Odd numbers between 1 and 10.</h1>
<script language="javascript">
var i = 1;
// this while loop prints odd numbers between 1 and 10.
while (i <= 10)
{
document.write (i + "<br>");
i += 2;
}
</script>
</body>
</html>

34. Write a Java Script program to demonstrate multiplication table

<html>
<head>
<title>Multiplication</title>
</head>
<body>
<script type='text/javascript'>
var num = prompt("Enter Number", "0") //prompt user to enter the number
var num = parseInt(num); //parse the string to integer
var i = 0;
document.write('<table border="1" cellspacing="0">');
for(i=1;i<10;i++)
{
document.write("<tr><td>" + num + " x " + i + " = " + num*i + "</td></tr>");
}
document.write("</table>");
</script>
</body>
</html>

35. Write a Java Script program using any five events

<html>
<head>
<title>Event Handling Examples</title>
</head>
<body onmousedown="document.bgColor='orange'"
onmouseup="document.bgColor='blue'" onclick="document.bgColor='yellow'">
<center>
<h1>See the page in the orange when mouse down<br><br>And in the blue when
up<br><br>In yellow when clicked it's great!!!!!!<br><br>
</center>
</body>
</html>

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

<html>
<head>
<title>js natural numbers</title>
<script language="javascript">
var i;
function myFunction()
{
var n=document.getElementById("myText").value;
document.write("The natural numbers upto " + n + " are: <br><br>");
for(i=1;i<=n;i++)
{
document.write(i +"<br>");
}
}
</script>
</head>
<body>
enter value of N to get natural numbers upto that
<input type="text" id="myText">
<button onclick="myFunction()">Get Natural numbers</button>
</body>
</html>
37. Write a Java Script program to print Factorial of a given number

<!doctype html>
<html>
<head>
<title>Factorial</title>
</head>
<body>
<script type="text/javascript">
var input = prompt("Enter the number to get factorial of: ");
var result = input;
for(var i=1;i<input;i++)
{
result = i * result;
}
document.write("<h1>Factorial of "+input+" is "+result +"</h1>");
</script>
</body>
</html>

38. Write a Java Script program to demonstrate Arrays

<!DOCTYPE HTML>
<HEAD>
<TITLE>Array Functions</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
myarray1=new Array("Sunday", "Monday", "Tuesday","Wednesday","Thursday");
myarray2=new Array(1,2,3,4,5);
document.write("Array 1 : "+myarray1+"<BR/>")
document.write("Array 2 : "+myarray2+"<BR/>")
document.write("Concatenated two arrays : "+myarray1.concat(myarray2+"<BR/>"))
document.write("Joined two arrays : "+myarray1.join(myarray2)+"<BR/>")
document.write("Array 1 pop out : "+myarray1.pop()+"<BR/>")
document.write("Reversed array 1: "+myarray1.reverse()+"<BR/>")
document.write("Shifted array 1 : "+myarray1.shift()+"<BR/>")
document.write("Sorted array 1 : "+myarray1.sort()+"<BR/>")
document.write("Array 2 in string format "+myarray2.toString()+"<BR/>")
</SCRIPT>
</BODY>
</HTML>

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


<!DOCTYPE HTML>
<HEAD>
<TITLE>Different String Functions</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
var mystring="Twinke Twinkle Little Star";
document.write("String: "+mystring+"<BR/>");
document.write("Length: "+mystring.length+"<BR/>");
document.write("Bold text: "+mystring.bold()+"<BR/>");
document.write("Uppercase text: "+mystring.toUpperCase()+"<BR/>");
document.write("Big text: "+mystring.big()+"<BR/>");
document.write("Lowercase text: "+mystring.toLowerCase()+"<BR/>");
document.write("Strike text: "+mystring.strike()+"<BR/>");
document.write("Small text: "+mystring.small()+"<BR/>");
document.write("Substring after 8 characters: "+mystring.substring(8) + "<BR/>")
document.write("Splitted text: "+mystring.split('Twinkle') + "<BR/>")
document.write("Index of text: "+mystring.indexOf('Twinkle') + "<BR/>")
document.write("Character at 8th position: "+mystring.charAt(8) + "<BR/>")
document.write("Blinking text: "+mystring.blink() + "<BR/>")
</SCRIPT>
</BODY>
</HTML>

40. Write a Java Script program to demonstrate Math objects

<!DOCTYPE HTML>
<html>
<head>
<title>JavaScript Math Object</title>
<style>
body
{
font-family:Helvetica;
}
</style>
<script>
var value = 25.67;
document.write("Rounding 25.6 using <b><i>Math.floor(value)</i></b> results in :
<b>"
+ Math.floor(value)+ "</b></br>");
document.write("Rounding 25.6 using <b><i>Math.ceil(value)</i></b> results in :
<b>"
+ Math.ceil(value)+ "</b></br>");
document.write("Rounding 25.6 using <b><i>Math.round(value)</i></b> results in :
<b>"
+ Math.round(value)+ "</b></br>");
var maximum = Math.max(23, 34, 43, 89);
document.write("The maximim of (23,34,43,89): <b>" + maximum + " </b><br>");
var minimum = Math.min(23, 34, 43, 89);
document.write("The minimum of (23,34,43,89): <b>" + minimum + " </b><br>");
</script>
</head>
<body>
</body>
</html>

41. Create a Web page with an image, when the mouse is doubled clicked new image
should replace the existing

<html>
<head>
<title>mouse events</title>
</head>
<body>
<h2>Mouse Events</h2>
<img src="on.jpg" height=200 width=200 ondblclick="this.src='on1.jpg'"></body>
</html>

42. Create a Web page and apply mouse effects to change text color, size, family etc
on the text

<!DOCTYPE html>
<html>
<head>
<title>Apply mouse effects to text</title>
<style>
a.ex1:hover, a.ex1:active{color:red;}
a.ex2:hover, a.ex2:active{font-size:150%;}
a.ex3:hover, a.ex3:active{font-family: Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<p>Mouse over the below links to see changes in text color, size and family</p>
<p><a class="ex1">Font Color</p>
<p><a class="ex2">Font Size</p>
<p><a class="ex3">Font Family</p>
</body>
</html>

43. Create a Web page which displays a line of text, when you click on the text a new
line of text should overwrite the existing text
<!DOCTYPE html>
<html>
<body>
<p>Click the below text "College Name" to replace it with "Avinash Degree
College"</p>
<p id="demo" onclick="demo.innerText='Avinash Degree College'">College
Name</p>
</body>
</html>

44. Create a program on the event onkeypress

<!DOCTYPE html>
<html>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" onkeypress="myFunction()">
<script>
function myFunction()
{
alert("You pressed a key inside the input field");
}
</script>
</body>
</html>

45. Create a program on the event onreset

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>onreset Event</TITLE>
</HEAD>
<BODY>
<H1>The onreset Event</H1>
<FORM onreset="alert('onReset event is triggered when the user clicks the RESET
button')">
<B>Application Form</B>
<P>Fill the form and click the RESET button</P>
<BR>
<B>Name:</B><INPUT type="text" name="fname" value="">
<BR>
<B>Roll Number:</B><INPUT type="text" id="fnumber" value="">
<BR>
<B>Address:</B><INPUt type="text" name="faddress" value="">
<BR>
<B>Email id:</B><INPUT type="text" name="femail" value="">
<BR>
<INPUt type="reset" value="RESET">
</FORM>
</BODY>
</HTML>

46. Create a XML document for employee database with 10 records and 5 columns
in each record

<?xml version="1.0"?>
<Employees>
<Employee>
<Name>Anil</Name>
<Codeno>1001</Codeno>
<DOJ>12-06-2017</DOJ>
<Dept>Commerce</Dept>
<Salary>15000</Salary>
</Employee>
<Employee>
<Name>Sunil</Name>
<Codeno>1002</Codeno>
<DOJ>19-06-2017</DOJ>
<Dept>Commerce</Dept>
<Salary>17000</Salary>
</Employee>
<Employee>
<Name>Mahesh</Name>
<Codeno>1003</Codeno>
<DOJ>21-06-2017</DOJ>
<Dept>Computers</Dept>
<Salary>18000</Salary>
</Employee>
<Employee>
<Name>Suresh</Name>
<Codeno>1004</Codeno>
<DOJ>23-06-2017</DOJ>
<Dept>Chemistry</Dept>
<Salary>18000</Salary>
</Employee>
<Employee>
<Name>Naresh</Name>
<Codeno>1005</Codeno>
<DOJ>26-06-2017</DOJ>
<Dept>Computers</Dept>
<Salary>21000</Salary>
</Employee>
<Employee>
<Name>Radhika</Name>
<Codeno>1006</Codeno>
<DOJ>03-07-2017</DOJ>
<Dept>Life Sciences</Dept>
<Salary>17000</Salary>
</Employee>
<Employee>
<Name>Hansika</Name>
<Codeno>1007</Codeno>
<DOJ>03-07-2017</DOJ>
<Dept>Maths</Dept>
<Salary>16000</Salary>
</Employee>
<Employee>
<Name>Ramya</Name>
<Codeno>1008</Codeno>
<DOJ>10-07-2017</DOJ>
<Dept>Statistics</Dept>
<Salary>18000</Salary>
</Employee>
<Employee>
<Name>Archana</Name>
<Codeno>1009</Codeno>
<DOJ>10-07-2017</DOJ>
<Dept>Maths</Dept>
<Salary>19000</Salary>
</Employee>
<Employee>
<Name>Sravani</Name>
<Codeno>1010</Codeno>
<DOJ>17-07-2017</DOJ>
<Dept>Electronics</Dept>
<Salary>18000</Salary>
</Employee>
</Employees>

47. Create a XML document for student database and apply the style sheet effects

student-47.css

rollno
{
display:block;
width: 50%;
background-color: red;
color: blue;
text-align: center;
font-weight: bold;
}

studentname
{
display:block;
width: 50%;
color:green;
text-align: center;
font-weight: bold;
}

course
{
display:block;
width: 50%;
color:blue;
text-align: center;
font-weight: bold;
background-color: lightgray;
}

Web-Prog-47.html

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="student-47.css"?>
<students>
<student>
<rollno>1001</rollno>
<studentname>Anil</studentname>
<course>BCom</course>
</student>
<student>
<rollno>1002</rollno>
<studentname>Mahesh</studentname>
<course>BCom</course>
</student>
<student>
<rollno>1003</rollno>
<studentname>Srinivas</studentname>
<course>BCom</course>
</student>
</students>
48. Create a XML document with simple links

<?xml version="1.0" encoding="UTF-8"?>


<homepages xmlns:xlink="http://www.w3.org/1999/xlink">
<homepage xlink:type="simple" xlink:href="https://www.w3schools.com">
Visit W3Schools
</homepage>
<homepage xlink:type="simple" xlink:href="http://www.w3.org">
Visit W3C
</homepage>
</homepages>

49. Create a XML document for the Marketing department of an organization and
apply style effects

sales-49.css

PRODUCTNAME
{
display: block;
width: 50%;
background-color: orange;
color: blue;
text-align: center;
font-weight: bold;
font-size: 35px;
}

QUANTITY
{
display:block;
width: 50%;
background-color: yellow;
color:green;
text-align: center;
font-weight: bold;
font-size: 30px;
}

PRICE
{
display:block;
width: 50%;
color:blue;
text-align: center;
font-weight: bold;
background-color: lightgray;
font-size: 20px;
}

Web-Prog-49.html

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="sales-49.css"?>
<SALESDATA>
<SALES>
<PRODUCTNAME>i-Phone 5S</PRODUCTNAME>
<QUANTITY>200</QUANTITY>
<PRICE>35000</PRICE>
</SALES>
<SALES>
<PRODUCTNAME>i-Phone 6S</PRODUCTNAME>
<QUANTITY>100</QUANTITY>
<PRICE>45000</PRICE>
</SALES>
<SALES>
<PRODUCTNAME>i-Phone 7S</PRODUCTNAME>
<QUANTITY>150</QUANTITY>
<PRICE>48000</PRICE>
</SALES>
</SALESDATA>

50. Create a program on XML Document Object Model

Web-Prog-50.xml

<?xml version="1.0"?>
<bookstore>
<book category="excel">
<title>Excel Foundation</title>
<author>abc</author>
<year>2019</year>
<price>150</price>
</book>
<book category="web">
<title>Web Technology</title>
<author>xyz</author>
<year>2019</year>
<price>175</price>
</book>
</bookstore>
Web-Prog-50.html

<html>
<head>
<title>XML Document Object Model</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
</head>
<body>
<xml id="bookstore" src="Web-Prog-50.xml"></xml>
<table width="50%" cellspacing="2" border="1" datasrc="#bookstore"
datapagesize="10">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Year</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">
<span datafld="title"></span>
</td>
<td align="center">
<span datafld="author"></span>
</td>
<td align="center">
<span datafld="year"></span>
</td>
<td align="center">
<span datafld="price"></span>
</td>
</tr>
</tbody>
</table>
</body>
</html>

You might also like