Practical No.
-6
Create a web page in HTML having a white background and two Button Objects.
Write code using JavaScript such that when the mouse is placed over the first
button object without clicking, the color of the background of the page should
change after every 1 seconds. There should at least be 7 different and visibly
distinct background colors excluding the default color. When the second button
object is clicked, appropriate message should be displayed in Browsers status bar.
Create another web page using JavaScript where the background color
changes automatically after every seconds. This event must be triggered
automatically after the page gets loaded in the browser. There should at least be
7 different and visibly distinct background colors. When the page is unloaded, the
appropriate alert message should be displayed.
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>7 Different Colors</title>
</head>
<body>
<script type="text/javascript">
var colors = new Array("blue", "yellow", "red", "green",
"orange","cyan","indigo");
var i=0;
function changeColor()
{
document.body.style.backgroundColor = colors[i];
i++;
if(i>colors.length)
{
i=0;
}
window.setTimeout("changeColor()",2000);
}
function disp_mesg_status()
{
window.status="All Seven Colors Displayed";
}
</script>
<form>
<input type="button" name=btn_color value="changecolors"
onmouseover="changeColor()">
<input type="button" name="btn_mesg" value="Display Message"
onclick="disp_mesg_status()">
</form>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onload="changeColor()">
<script type="text/javascript">
var colors = new Array("blue", "yellow", "red", "green",
"orange","cyan","indigo");
var i=0;
function changeColor()
{
document.body.style.backgroundColor = colors[i];
i++;
if(i>colors.length)
{
i=0;
}
window.setTimeout("changeColor()",1500);
}
window.onbeforeunload = function()
{
var msg = "Seven Different Colors Displayed";
return msg;
}
</script>
</body>
</html>
Practical No.-7
Create JavaScript program for the following form validations. Make use of
HTML5 properties to do the following validations :
1. Name, address, contact number and email are required fields of the form.
2. Address field should show the hint value which will disappear when field
gets focus or key press event.
3. Telephone number should be maximum 10 digit number only.
4. Email field should contain valid email address, @ should appear only once
and not at the beginning or at end. It must contain at least one dot(.).
5. Make use of pattern attribute for email to accept lowercase, uppercase
alphabets, digits and specified symbols.
Formv.html
<!DOCTYPE html>
<html>
<head>
<title>Sop 2 JAVaScript</title>
</head>
<body>
<h1>Information Form</h1>
<form name="f1">
Your Name
<input type="text" name="txt_name">
<br>
<br>
Address
<textarea name="txt_address" placeholder="Permanent Address"/></textarea>
<br>
<br>
Contact
<input type="tel" name="telephone" maxlength="10">
<br><br>
Email
<input type="email" name="txt_email" pattern="[A-Z a-z]{0-9}-[@]{1}-[.]{1}">
<br>
<br>
<input type="button" name="b1" value="submit" onclick="validate_email()">
</form>
</body>
<script type="text/javascript">
function validate_email()
{
var x=f1.txt_email.value;
var at_pos=x.indexOf("@");
var last_pos=x.lastIndexOf("@");
var firstdot_pos=x.indexOf(".");
var dot_pos=x.lastIndexOf(".");
if
(at_pos<1||dot_pos<at_pos+2||dot_pos+2>=x.length||firstdot_pos<at_pos||at_pos<l
ast_pos)
{
alert("Not an Valid email address");
f1.txt_email.focus();
}
else
{
alert("Valid Email Address");
return true;
}
}
</script>
</html>
Practical No.-8
Create event driven JavaScript program for the following. Make use of appropriate
variables, JavaScript inbuilt string functions and control structures.
To accept string from user and count number of vowels in the given string.
Stringfun.html
<!DOCTYPE html>
<html>
<head>
<title>Sop 3 JAVasript Count vowels</title>
</head>
<body>
<form name="form1">
<h1>Enter the String whose vowel isto be counted</h1>
<input type="text" name="text1">
<input type="button" name="btn_checkvowel" value="Click to count"
onclick="count()">
</form>
<script type="text/javascript">
function count()
{
var i,ch,str,counter=0;
str=form1.text1.value;
for(i=0;i<str.length;i++)
{
ch=str.charAt(i);
if(ch=='A'||ch=='a'||ch=='e'||ch=='E'||ch=='i'||ch=='I'||ch=='o'||ch=='O'||ch=='u'|
|ch=='U')
counter++;
}
alert("Number of Vowels in Entered String is:"+counter);
}
</script>
</body>
</html>
Practical No.-9
Create event driven JavaScript program for the following. Make use of appropriate
variables, JavaScript inbuilt string functions and control structures.
To accept string from user and reverse the given string and check whether it
is palindrome or not.
INDEX.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript SOP 4 Example</title>
</head>
<body>
<form name="f1">
Enter the string to check it is palindrome or not!
<br>
<input type="text" name="t1">
<br>
<br>
<input type="button" name="check_palin" value="Check String"
onclick="chk_palindrome()">
</form>
<script type="text/javascript">
function chk_palindrome()
{
var str,str_case,i,len;
str=f1.t1.value;
str_case=str.toLowerCase();
len=str_case.length;
var p=1;
for(i=0;i<len/2;i++)
{
if(str_case.charAt(i)!=str_case.charAt(len-1-i))
{
p=0;
break;
}
}
if(p==1)
{
alert("Entered string is Palindrome");
}
else
{
alert("Entered string is Not a Palindrome")
}
}
</script>
</body>
</html>
