Scribd
Upload
5 views9 pages

12th Javascript Practical

The document outlines several experiments related to JavaScript programming, including creating web pages with dynamic background colors, form validations, counting vowels in a string, and checking for palindromes. Each experiment includes a description of the task, the expected functionality, and the corresponding HTML and JavaScript code. The experiments aim to enhance understanding of event-driven programming and DOM manipulation in web development.

Uploaded by

5whzkvf727
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
5 views9 pages

12th Javascript Practical

The document outlines several experiments related to JavaScript programming, including creating web pages with dynamic background colors, form validations, counting vowels in a string, and checking for palindromes. Each experiment includes a description of the task, the expected functionality, and the corresponding HTML and JavaScript code. The experiments aim to enhance understanding of event-driven programming and DOM manipulation in web development.

Uploaded by

5whzkvf727
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/ 9

RayatShikshanSanstha’s

Mahatma Gandhi Sec. & Higher Sec. School, Umbraj


Name: Class: Batch:

Subject: Roll no:

Title of experiment:

Expt no: Date: / /

Experiment No : 6
SOP 1: 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 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.

Solution Code:
js1.html
<!DOCTYPE html>
<html>
<head>
<title> Background Color is being changed </title>
</head>
<body id="background">
<h1>Background Color is being changed every 1 seconds</h1>
<script>
vari = 0;
function change()
{
var doc = document.getElementById("background");

var color = ["red", "blue", "brown", "green","yellow","pink","orange"];


doc.style.backgroundColor = color[i];
i = i+1;
if(i==7){
doc.style.backgroundColor = "white";
}
}
functionclick_btn() {
window.status = "Background Color is being changed every 1
seconds";
}
</script>
<input type="button" name="b1" value="over here"
onmouseover="setInterval(change, 1000)">
<input type="submit" name="b2" value="click here" onclick="click_btn()">
</body>
</html>
Output :-

SecondJs.html

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body id="background" onload="setInterval(change,
onload="setInterval(change, 1000)">
<h1>Background Color is being changed every 1 seconds</h1>
<script>
vari = 0;
function change() {

var doc = document.getElementById("background");

var color = ["red", "blue", "brown", "green","yellow","pink","orange"];


doc.style.backgroundColor
tyle.backgroundColor = color[i];
i = i+1;
if(i==7){
doc.style.backgroundColor = "white";
alert("Page unload")
}
}
</script>
</body>
</html>

Output :-
-
RayatShikshanSanstha’s
RayatShikshanSanstha’s
Mahatma Gandhi Sec. & Higher Sec. School, Umbraj
Name: Class: Batch:

Subject: Roll no:

Title of experiment:

Expt no: Date: / /

Experiment No : 7
SOP 2 : 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 whwhen
en 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
se of pattern attribute for email to accept lowercase, uppercase alphabets, digits
and specified symbols.

Solution Code:

<!DOCTYPE html>
<html>
<head><title>Sop 2 JAVaScript</title>
</head>
<body>
<h1>Information Form</h1>
<form name="f1">
Your Name <input
<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
pattern="[A Z a-z]{0-9}-[@]{1}
a [@]{1}-[.]{1}"><br><br>
[.]{1}"><br><br>
<input type="button" name="b1" value="submit" onclick="validate_email()">
</form>
</body>
<script type="text/javascript">
functionvalidate_email()
{
var x=f1.txt_email.value;
varat_pos=x.indexOf("@");
varlast_pos=x.lastIndexOf("@");
st_pos=x.lastIndexOf("@");
varfirstdot_pos=x.indexOf(".");
vardot_pos=x.lastIndexOf(".");
if
(at_pos<1||dot_pos<at_pos+2||dot_pos+2>=x.length||firstdot_pos<at_pos||at_pos<last_pos)
{
alert("Not an Valid email address");
f1.txt_email.focus();
}
else
{
alert("Valid Email Address");
return true;
}
}
</script>
</html>

Output :-
-
RayatShikshanSanstha’s
Mahatma Gandhi Sec. & Higher Sec. School, Umbraj
Name: Class: Batch:

Subject: Roll no:

Title of experiment:

Expt no: Date: / /

Experiment No : 8

SOP 3: Create event driven javascript program for the following. Make use of
appropriate variables.,Javascript inbuilt variables string functions and control
structures.
To accept string form user and count number of vowels in the given string.

Code Solution:

<!DOCTYPE html>
<html>
<head>
<title>Sop 3 Javascript 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()
{
vari,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>

Output :-
-
RayatShikshanSanstha’s
Mahatma Gandhi Sec. & Higher Sec. School, Umbraj
Name: Class: Batch:

Subject: Roll no:

Title of experiment:

Expt no: Date: / /

Experiment No : 9

SOP 4: Create event driven javascript program for the following. Make use of
appropriate variables.,Javascript inbuilt variables string functions and control
structures.
To accept string from user and reverse the given string and check whether it is
palindrome or not.

Solution Code:

<!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">
functionchk_palindrome()
{
varstr,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)
p==1)
{
alert("Entered string is Palindrome");
}
else
{
alert("Entered string is Not a Palindrome")
}
}
</script>
</body>
</html>

Output :-
-

You might also like