F 3

Lab Exercise 3
Q1. Design a Web page for CYBERSHOP INC, using style sheets with the following
specifications:
1. Define a style class .Maxx with the following attributes
Font-size: 26pt
Color: green
Font weight: bold
Font family: cursive, use the defined Style class wherever the text CYBERSHOP INC
appears on the web document.
2. Use unordered listing giving the list of services offered by CYBERSHOP INC.
3. Define three segments using <DIV></DIV> tags with background colors Blue, Green
and Goldenrod positioned accordingly with the given text.
Ans.
<html>
<head>
<title>Cybershop Inc</title>
<style type="text/css">
ul{List-style:square}
.MAXX{Font-Size:26pt;Color:green;Font-weight:BOLD;Font-family:CURSIVE}
</style>
<body bgcolor="pink">
<center>
<P CLASS="MAXX">CYBERSHOP INC</P>
</center>
<ul>
<li>Chatting
<li>Printing
<li>Hacking class
<li>Ebusiness
</ul>
<b>
<div id=box1 style="backgroundcolor:blue;position:absolute;left:300;top:200;height:50;width:100">
<center>Chat</center></div>
<div id=box2 style="backgroundcolor:green;position:absolute;left:300;top:300;height:50;width:100">
<center>Print</center></div>
<div id=box2 style="backgroundcolor:goldenrod;position:absolute;left:300;top:400;height:50;width:100">
Hacking class</div>
<b>
</body>
</html>
Q2. Write a JavaScript code to perform all arithmetic operation.
Ans.
<html>
<head>
<title>Calculator</title>
<script language="JavaScript">
function add1(aa,bb)
{
var a,b
a=parseInt(aa)
b=parseInt(bb)
document.f1.t3.value=a+b
}
function sub1(aa,bb)
{
var a,b
a=parseInt(aa)
b=parseInt(bb)
document.f1.t3.value=a-b
}
function multiply1(aa,bb)
{
var a,b
a=parseInt(aa)
b=parseInt(bb)
document.f1.t3.value=a*b
}
function div1(aa,bb)
{
var a,b
a=parseInt(aa)
b=parseInt(bb)
document.f1.t3.value=a/b
}
</script>
</head>
<body bgcolor="pink">
<form name="f1">
<p>Enter first number:<input type=textbox name=t1>
<p>Enter second number:<input type=textbox name=t2>
<p>Result <input type=textbox name=t3>
<p>
<input type=button name=b1 value=ADD onclick=add1(t1.value,t2.value)>
<input type=button name=b2 value=SUBSTRACT onclick=sub1(t1.value,t2.value)>
<input type=button name=b3 value=MULTIPLY onclick=multiply1(t1.value,t2.value)>
<input type=button name=b4 value=DIVIDE onclick=div1(t1.value,t2.value)>
</form>
</body>
</html>
Q3. Write a JavaScript code to change the background colour of the web page on a button
click event.
Ans.
<html>
<head>
<title>Background change</title>
function color(code)
{
document.bgColor=code
}
</script>
</head>
<body>
<form>
<input type="button" name=b1 value=red onclick=color('red')>
<input type="button" name=b2 value=green onclick=color('green')>
<input type="button" name=b3 value=blue onclick=color('blue')>
</form>
</body>
</html>
Q4. Write a JavaScript code, create two buttons named as START COLOR CHANGE and
STOP COLOR CHANGE. On click of start color change the background color of the web
page should change after every one second. The color change should get stop on clicking stop
color change.
Ans.
<html>
<head>
<title>Background change</title>
var index
index=0
color=new Array{"red","blue","green","yellow"}
function startbk()
{
ref = setInterval(func(),1000)
}
function stopbk(ref)
{
clearInterval(ref)
}
void func()
{
if(index>3)
{
index=0
document.bgColor=color[index]
index++
}
else
{
document.bgColor=color[index]
index++
}
}
</script>
</head>
<body>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<form>
<input type="button" name="a1" value="START COLOR CHANGE" onClick=startbk()>
<input type="button" name="a2" value="STOP COLOR CHANGE" onClick=stopbk(ref)>
</form>
</body>
</html>
Q5. Write a JavaScript code to change the background color of the web page to red color on
selection of the radio button.
Ans.
<html>
<head>
<title>radio button</title>
function change()
{
document.bgColor='red'
}
</script>
</head>
<body bgColor="pink">
<form>
<input type="radio" name=r1 onChange=change()>Change background
</form>
</body>
</html>
Q6. Create a web page using two image files, which switch between one another as the
mouse pointer moves over the images. Use the onMouseOver and onMouseOut event.
Ans.
<html>
<head>
<title>Changing Image</title>
</head>
<body>
<img src="file:/C:\images\url.jpg" onMouseOver="this.src='file:/C:\images\pic.jpg';"
onMouseOut="this.src='file:/C:\images\url.jpg';">
</body>
</html>
Q7. Write a JavaScript code block, which validates a username and password against hard
coded values.
Ans.
<html>
<head>
<title>Form Validation</title>
<script language="javascript">
function validate()
{
if(document.getElementById('uID').value=="myuid" &&
document.getElementById('pswd').value=="Cdac")
document.writeln("Username and Password is Correct")
else
document.writeln("Username and Password is Invalid")
}
</script>
</head>
<body>
<h1>Validation</h1>
<form>
Username: <input type="text" id="uID"><br>
Password: <input type="password" id="pswd"><br>
<input type="button" onclick="validate()" value="Verify!">
</form>
</body>
</html>
Q8.Write a JavaScript code block, which checks the contents entered in a forms Text
element. If the text entered is in the lower case, convert to upper case.
Ans.
<html>
<head><title>Change content to Upper case</title>
function changeit()
{
var x=document.myform.name1.value
var txt=x.toUpperCase()
document.myform.name1.value=txt
confirm(txt)
}
</script>
</head>
<body>
<form name="myform">
Text:<input type="text" name="name1" width="20"><br>
<input type="button" name="Upper" value="Change" onclick="changeit()">
</form>
</body>
</html>
Q9. WAP, which accepts a string, color (valid colors are blue, black, red and green) and the
size of the text from the user using separate dialog boxes. The text entered by the user must
be displayed in the browser in the specified color and size.
Ans.
<html>
<head>
<title>Change Color and Font</title>
<script language = "javascript">
var str=prompt("Enter the String:");
var color1=prompt("Enter the Color:");
var size1=prompt("Enter the size:");
if(color1=="blue" || color1=="black" || color1=="red" || color1=="green")
{
str=str.fontcolor(color1);
str=str.fontsize(size1);
document.write(str);
}
</script>
</head>
<body>
</body>
</html>
Q10. WAP to accept the size for the Heading tag and the string to be displayed in the
specified heading size.
Ans.
<html>
<head>
<title>Print the size of Heading</title>
var str=prompt("Enter the Heading:");
var size=prompt("Enter the size:");
switch(size)
{
case "1": document.write("<h1>"+str+"</h1>");
break;
break;
break;
break;
break;
break;
}
</script>
</head>
<body>
</body>
</html>
Q11. Write a JavaScript code block using arrays and generate the current date in words, this
should include the day, the month and the year.
Ans.
<html>
<head>
<title>Date</title>
<script language="javascript">
var d=new Date();
var dt=d.getDate();
var day=d.getDay();
var month=d.getMonth();
var year=d.getFullYear();
var dayy=new
Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var monthh=new
Array("January","February","March","April","May","June","July","August","September","O
ctober","November","December");
document.write("Current date is: "+dayy[day]+", "+dt+" "+monthh[month]+", "+year+".");
</script>
</head>
<body bgcolor=pink>
</body>
</html>

F 3

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

F 3

Caricato da

Copyright:

Formati disponibili

Lab Exercise 3

Q2. Write a JavaScript code to perform all arithmetic operation.

Potrebbero piacerti anche