javascript sop xii science


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.


Answer:- js1.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>

FirstJs.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>





SecondJs.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>





SOP 3) [Javascript Practical]


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.


Answer:- index.html

<!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>












SOP 5) [Javascript Practical]


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.


Answer:- index.html

<!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>









Comments

Post a Comment