Google Ad
SOP 1) [Javascript Practical] 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. js1.html FirstJs.html SecondJs.html SOP 2) [Javascript Practical] index.html SOP 3) [Javascript Practical] index.html SOP 4) [Javascript Practical] index.html SOP 5) [Javascript Practical] index.html SOP 6) [Javascript Practical] Range Grade 35 to 60 F 61 to 70 D 71 to 80 C 81 to 90 B 91 to 100 A index.html Javascript HSC SOP Practicals
with codes and output
Answer:-
<!DOCTYPE html>
<html>
<head>
<title></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>
<!DOCTYPE html>
<html>
<head>
<title></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>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body id="background" onload="setInterval(change, 1000)">
<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";
alert("Page unload")
}
}
</script>
</body>
</html>
Create JavaScript program for the following form validations. Make use of HTML5 properties to do the following validations :
Answer:-
<!DOCTYPE html>
<html>
<head>
<title></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>
Create event driven JavaScript program for the following. Make use of appropriate variables, JavaScript inbuilt string functions and control structures.
Answer:-
<!DOCTYPE html>
<html>
<head>
<title></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="submit" onclick="getVowels()"></td>
</tr>
<p id="demo"></p>
</body>
</html>
Create event driven JavaScript program for the following. Make use of appropriate variables, JavaScript inbuilt string functions and control structures.
Answer:-
<!DOCTYPE html>
<html>
<head>
<title></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="" onclick="reverse_String()">
</body>
</html>
Create event driven JavaScript program for the following. Make use of appropriate variables, JavaScript inbuilt string functions and control structures.
Answer:-
<!DOCTYPE html>
<html>
<head>
<title></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>
Create JavaScript program which compute the average marks of students. Accept six subject marks of student from user. Calculate average marks of student which is used to determine the corresponding grades.
Answer:-
<!DOCTYPE html>
<html>
<head>
<title>Enter Marks</title>
<script type="text/javascript">
function submit_marks() {
var sub1 = parseInt(document.getElementById('s1').value);
var sub2 = parseInt(document.getElementById('s2').value);
var sub3 = parseInt(document.getElementById('s3').value);
var sub4 = parseInt(document.getElementById('s4').value);
var sub5 = parseInt(document.getElementById('s5').value);
var sub6 = parseInt(document.getElementById('s6').value);
var total = sub1+sub2+sub3+sub4+sub5+sub6;
var per = total/6;
var grade;
if (per>=35 && per<=60) {
grade = 'F';
}
else if(per>=61 && per<=70){
grade = 'D';
}
else if(per>=71 && per<=80){
grade = 'C';
}
else if(per>=81 && per<=90){
grade = 'B';
}
else if(per>=91 && per<=100){
grade = 'A';
}
else{
grade = "Invalid or Failed";
}
document.getElementById("demo").innerHTML = "Your Total Marks : "+total+"<br>Your Percentage : "+per+"<br>Your Grade : "+grade;
// document.write("Your Total Marks : "+total);
// document.write("<br>Your Percentage : "+per);
// document.write("<br>Your Grade : "+grade);
}
</script>
</head>
<body>
<h1>Enter Students Marks</h1>
<input type="text" id="s1" placeholder="Enter English Marks"><br>
<input type="text" id="s2" placeholder="Enter IT Marks"><br>
<input type="text" id="s3" placeholder="Enter OCM Marks"><br>
<input type="text" id="s4" placeholder="Enter Economics Marks"><br>
<input type="text" id="s5" placeholder="Enter Maths Marks"><br>
<input type="text" id="s6" placeholder="Enter Account Marks"><br>
<input type="submit" onclick="submit_marks()">
<div id="demo"></div>
</body>
</html>