Java Programs and JSP Applications for Students: July 2018

5. Create a webpage to convert a given text from uppercase to lowercase using JavaScript.

<HTML>
    <HEAD>
    <STYLE Type="text/css">
input { height:25px; width:100px; color:blue}
th { text-align:left;}
</STYLE>
    <SCRIPT Language="JavaScript">
        function Convert()
        {
            if(( document.forms[0].elements[0].value != "" ) &&
            document.forms[0].elements[0].value != document.forms[0].elements[0].value.toLowerCase() )
            {
                document.forms[0].elements[1].value = document.forms[0].elements[0].value.toLowerCase();
            }
            else
                alert("Enter Text in UPPERCASE!");
        }
    </SCRIPT></HEAD>
    <BODY TEXT=blue BGCOLOR=BEIGE SIZE=22>
    <CENTER>
    <H3>CONVERSION OF TEXT FROM UPPERCASE TO LOWERCASE</H3>
    <FORM>
    <TABLE bgcolor=gray>
    <TR><TH>Enter Text in UpperCase</TH>
    <TH><INPUT TYPE="text" NAME="upper" value="" SIZE=10></TH></TR>
    <TR><TH>Text in LowerCase</TH>
    <TH><INPUT TYPE="text" DISABLED NAME="lower" value="" SIZE=10></TH></TR>
    <TABLE>
    <br>
    <INPUT TYPE="button" onClick="Convert()" value="CONVERT">
    <INPUT TYPE="reset" value="RESET">
    </FORM>
    </CENTER>
    </BODY>
</HTML>

4. Create a webpage with two textboxes and command buttons to perform arithmetic operations and display the result in appropriate dialog boxes using JavaScript.

<html>
<head>
<title>Arithmetic Operations</title>
<style type="text/css">
input { height:25px; width:100px; color:blue}
th { text-align:left;}
</style>

</head>
<body bgcolor=beige text=blue>
<center>
<h1> <u>ARITHMETIC OPERATIONS</u></h1>
<form>

<table bgcolor=gray>
<tr><th>Enter 1st Number</th><th><input type="text" size=10 name=text1></th><tr>
<tr><th>Enter 2nd Number</th><th><input type="text" size=10 name=text2></th><tr>
</table><br>

<input type=button value="ADD" onClick="add()">
<input type=button value="SUBTRACT" onClick="sub()"><br>
<input type=button value="MULTIPLY" onClick="multiply()">
<input type=button value="DIVIDE" onClick="divide()"><br>

</form>

<script language="JavaScript">
function add()
{
    var result = eval(document.forms[0].elements[0].value) + eval(document.forms[0].elements[1].value);
    alert("SUM = " + result);
}
function sub()
{
    var result = eval(document.forms[0].elements[0].value) - eval(document.forms[0].elements[1].value);
    alert("DIFFERENCE = " + result);
}
function multiply()
{
    var result = eval(document.forms[0].elements[0].value) * eval(document.forms[0].elements[1].value);
    alert("PRODUCT = " + result);
}
function divide()
{
    var result = eval(document.forms[0].elements[0].value) / eval(document.forms[0].elements[1].value);
    alert("QUOTIENT = " + result);
}
</script>
</center>
</body>
</html>

3. Create a webpage to demonstrate the use of span and div tags in DHTML.

<HTML>
<HEAD><TITLE>Using DIV and SPAN Tags</TITLE>
<style type="text/css">
    .c1{visibility:visible; text-align:center;}
    .c2{color:blue;font-family:Georgia;font-size:28}
</style>
</HEAD>
<BODY bgcolor=beige>
<SCRIPT Language="JavaScript">
    function img1_onmouseover()
    {
        text1.style.visibility = "visible";
        img1.style.visibility = "visible";
        text2.style.visibility = "hidden";
        img2.style.visibility = "hidden";
    }
    function img2_onmouseover()
    {
        text1.style.visibility = "hidden";
        img1.style.visibility = "hidden";
        text2.style.visibility = "visible";
        img2.style.visibility = "visible";
    }
</SCRIPT>
<DIV Class="c1" onMouseOver="img1_onmouseover();">

<SPAN ID="text1" Class="c2">
To Hide this Picture Move the Mouse Out of this Picture.
</SPAN>
<P><IMG ID="img1" Src="img1.jpg" Height="200" Width="200">
</DIV>
<DIV Class="c1" onMouseOver="img2_onmouseover();">

    <SPAN ID="text2" Class="c2">
    To Hide this Picture Move the Mouse Out of this Picture.
    </SPAN>
<P><IMG ID="img2" Src="img2.jpg" Height="200" Width="200">
</DIV>
</BODY>
</HTML>

2. Create a webpage to display system date in the given format: Ex: 01 January 2016

<HTML>
    <HEAD><TITLE>Display Date </TITLE>
    <SCRIPT language="JavaScript">
        var months = new Array(12);
        months[0]= "January";
        months[1]= "February";
        months[2]= "March";
        months[3]= "April";
        months[4]= "May";
        months[5]= "June";
        months[6]= "July";
        months[7]= "August";
        months[8]= "September";
        months[9]= "October";
        months[10]= "November";
        months[11]= "December";

        function CustomDate(date_obj)
        {
            var theday = date_obj.getDate();
            var themonth = months[date_obj.getMonth()];
            var theyear = date_obj.getYear()+1900;
            return theday + " " + themonth + " " + theyear;
        }
    </SCRIPT>
</HEAD>
<BODY bgcolor=beige text=green>
<center><font color=blue><H1>Webpage to Display System Date</H1></font></center>
    <H1>Today is:</H1>
<font size=22 color=magenta>
<SCRIPT>

        document.write(CustomDate( new Date()))
</SCRIPT>
</font>
</BODY>
</HTML>

1. Creating a webpage with two images which alternately changes on mouse over using CSS.

<html>
<head>
   <title>Alternate Image Rollover</title>
</head>
<style type="text/css">
Body{background-color:gray; font-size:12pt; text-align:center;}
H1{font-size:22pt; color:blue; text-decoration:underline;}
H3{font-size:18pt; color:yellow; text-decoration:underline;}
img{border-style:groove;}
</style>

<script language="JavaScript">
if(document.images)
    flag = "yes";
else
    flag = "no";

if(flag=="yes")
{
    img1On = new Image();
    img1Off = new Image();
}
function imageSwitchOn(imagename)
{
    if(flag =="yes")
        document['img1'].src = "img1.jpg";

}
function imageSwitchOff(imagename)
{
    if(flag =="yes")
        document['img1'].src = "img2.jpg";
}
</script>
<body>
<H1>Image Rollover</H1><br>
<H3>Place your Mouse on the Picture</H3>
<A onMouseOver = "imageSwitchOn('img1')" onMouseOut="imageSwitchOff('img1')">
<img src = "img2.jpg" height = 300 width =300 alt = "space" name = "img1">
</A>
</body>
</html>

Java Programs and JSP Applications for Students

Search This Blog

Sunday 22 July 2018

5. Create a webpage to convert a given text from uppercase to lowercase using JavaScript.

4. Create a webpage with two textboxes and command buttons to perform arithmetic operations and display the result in appropriate dialog boxes using JavaScript.

3. Create a webpage to demonstrate the use of span and div tags in DHTML.

2. Create a webpage to display system date in the given format: Ex: 01 January 2016

1. Creating a webpage with two images which alternately changes on mouse over using CSS.

Program List

Blog Archive

Followers