Aim: [SOP1] 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.
Coding:
<!DOCTYPE html>
<html>
<head>
<title>Javascript program</title>
</head>
<body id="background">
<h1>Background Color is being changed every 1 seconds</h1>
<script>
var i = 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";
}
}
function click_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:
Aim:[SOP2]
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.
Coding:
<!DOCTYPE html>
<html>
<head>
<title>Program Validation</title>
<script type="text/javascript">
function ValidateEmail(inputText)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(inputText.value.match(mailformat))
{
document.form1.text1.focus();
return true;
}
else
{
alert("You have entered an invalid email address!");
document.form1.text1.focus();
return false;
}
}
</script>
</head>
<body>
<h1>Information Form</h1>
<form action="" method="" name="f1">
<table>
<tr>
<td>Your Name</td>
<td><input type="text" name="t1" required></td>
</tr>
<tr>
<td>Address</td>
<td><textarea rows="5" cols="20" name="a1" required placeholder="Enter
Address"></textarea></td>
</tr>
<tr>
<td>Contact</td>
<td><input type="number" name="n1" maxlength="10" required></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="email" name="e1" required></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="submit"
onclick="ValidateEmail(document.f1.e1)"></td>
</tr>
</table>
</form>
</body>
</html>
Output:
Aim:[SOP3] 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.
Coding:
<!DOCTYPE html>
<html>
<head>
<title>Convert String</title>
</head>
<body>
<script type="text/javascript">
function getVowels() {
var vowelsCount = 0;
var str = document.getElementById("t1").value;
var string = str.toString();
for (var i = 0; i <= string.length - 1; i++) {
if (string.charAt(i) == "a" || string.charAt(i) == "e" || string.charAt(i) == "i" || string.charAt(i) ==
"o" || string.charAt(i) == "u") {
vowelsCount += 1;
}
}
//document.write("Total Vowels : "+vowelsCount);
document.getElementById('demo').innerHTML = "Total Vowels : "+vowelsCount;
return vowelsCount;
}
</script>
<tr>
<td><input type="text" id="t1"></td>
<td><input type="submit" name="Check" onclick="getVowels()"></td>
</tr>
<p id="demo"></p>
</body>
</html>
Output:
Aim: [SOP4]
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.
Coding:
<!DOCTYPE html>
<html>
<head>
<title>Palindrom Program</title>
</head>
<body>
<script type="text/javascript">
function reverse_String() {
var str = document.getElementById('s1').value;
var final_str = str;
var split = str.split("");
var reverse = split.reverse();
var reverse_data = reverse.join("");
document.write("Reverse : "+reverse_data);
if (final_str==reverse_data) {
document.write("<br>It is palindrome ");
}
else{
document.write("<br>not palindrome ");
}
}
</script>
<input type="text" id="s1" placeholder="Enter a Striing">
<input type="submit" name="" value="Check" onclick="reverse_String()">
</body>
</html>
Output:
Aim: [SOP5] 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.
Coding
<!DOCTYPE html>
<html>
<head>
<title>Conversion Program</title>
<script type="text/javascript">
function get_Fahrenheit(){
var c = parseInt(document.getElementById('c1').value);
var f;
//(f-32)/9 = c/5;
f = c/5*(9)+32;
document.write("Fahrenheit : "+f);
}
function get_Celsius(){
var f = parseInt(document.getElementById('f1').value);
var c;
//(f-32)/9 = c/5;
c = ((f-32)/9)*5;
document.write("Celsius : "+c);
}
</script>
</head>
<body> <input type="text" id="c1" placeholder="Temperature in Celsius">
<input type="submit" onclick="get_Fahrenheit()">
<br>
<input type="number" id="f1" placeholder="Temperature in Fahrenheit">
<input type="submit" onclick="get_Celsius()">
</body>
</html>
Output:
