Rescued Document

CSS Practical Code Practice
Q.2 :- Develop JS for arithmetic expression evaluation.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body> <script> var num1 = 22; var num2 =
13; document.write("First Number :" + num1);
document.write("<br>Second Number :" + num2);
document.write("<br><br>Addition is : " + (num1 + num2));
document.write("<br>Subtraction is : " + (num1 - num2));
document.write("<br>Multiplication is : " + num1 * num2);
document.write("<br>Division is : " + num1 / num2);
</script>
</body>
</html>
Output:
Experiment No. 2:
Q.1 :- Develop JS to demonstrate the use of control flow statement.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body> <script> var a = 30; if (a
> 25) { document.write("Number is greater
than 25");
} else if (a < 20) {
document.write("Number is less than 20");
} else { document.write("Number is greater than 20 and
less than 25");
}
</script>
</body>
</html>
Output :
Q.2 :- Display odd numbers up to 20 by for loop in JS.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body> <script> document.write("Odd
numbers upto 20 : <br>"); for (var i = 0; i
< 21; i++) { if (i % 2 != 0) {
document.write(" " + i + "<br>");
}
}
</script>
</body>
</html>
Output :
Another way:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body> <script> document.write("Odd
numbers upto 20 : <br>"); var text = "<table
border=1px><tr>"; for (var i = 0; i < 21; i+
+) { if (i % 2 != 0) { text +=
"<td>" + i + "</td></tr>";
} }
text += "</table>";
document.write(text);
</script>
</body>
</html>
Output:
Q.3 : Declare, initialize and assign values to the given variable.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body> <script> var num1 = 22; var num2 =
13; document.write("First Number :" + num1);
document.write("<br>Second Number :" + num2);
document.write("<br><br>Addition is : " + (num1 + num2));
document.write("<br>Subtraction is : " + (num1 - num2));
document.write("<br>Multiplication is : " + num1 * num2);
document.write("<br>Division is : " + num1 / num2);
</script>
</body>
</html>
Output:
Q.4 :Demonstrate the use of while loop.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body> <script> var n = 0;
document.write("While loop starts here...<br>");
while (n < 11) { document.write(" " + n +
"<br>"); n++; }
document.write("While loop ends here...");
</script>
</body>
</html>
Output :
-
Q.5 : Create and access object properties to solve the given properties.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body> <script>
var stud = {
fname: "Shreyas",
lname: "Shinde",
roll: 233230,
}; document.write("First Name :" + stud.fname);
document.write("<br>Last Name :" + stud["lname"]);
document.write("<br>Full Name :" + stud.fname + " " + stud["lname"]);
document.write("<br>Roll Number :" + stud.roll);
</script>
</body>
</html>
Output:
Q.1 :-
Find maximum number from array of 10 numbers.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body> <script> var arr = new Array(12, 33, 22, 13, 70,
59, 349, 342, 123, 1322); document.write("Array contains :" +
arr); var max = arr[0]; for (i = 1; i < arr.length; i++) {
if (max < arr[i]) { max = arr[i];
} } document.write("<br>Largest number form this
array is :" + max);
</script>
</body>
</html>
Output :
Q.2 :-
Demonstrate stack implementation.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body> <script> var arr = ["Apple", "Mango",
"Pineapple", "Banana"]; document.write("Stack contains :"
+ arr); arr.push("Orange");
document.write("<br><br>Insertion in stack :" + arr); var
del = arr.pop(); document.write("<br><br>Deletion of
element :" + arr); document.write("<br>Deleted element
from last is :" + del);
</script>
</body>
</html>
Output :
Experiment No. 4:
Q.1 :-Demonstrate function call with argument.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body> <script> function funWithArg(fnm,
lnm, roll) { document.write("Full Name :" + fnm
+ " " + lnm); document.write("<br>Roll
Number :" + roll);
} funWithArg("Shreyas", "Shinde",
233230);
</script>
</body>
</html>
Output :
Q.2 :- Design a JavaScript to demonstrate function call with return value.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body> <script> var ans = first();
function first() { var fullnm = second("Shreyas",
"Suresh", "Shinde"); return fullnm;
} function second(fnm, mnm,
lnm) { return fnm + " " + mnm + "
" + lnm;
} document.write("Full Name is :
" + ans);
</script>
</body>
</html>
Output :
Experiment No. 5 :
Q.1 :- Develop a JavaScript to demonstrate use of CheckBox Control.

<!DOCTYPE html>
<html lang="en">
<head>
</head> <script> function check() { if
(document.getElementById("sub1").checked) {
document.getElementById("p1").innerHTML = "Selected Subject is AJP";
} else {
document.getElementById("p1").innerHTML = "";
} if (document.getElementById("sub2").checked) {
} else {
} else {
} else {
}
if (document.getElementById("sub5").checked) {
} else {
}
}
</script>
<body>
<form action="">
<center>
<h1>CheckBox Selection</h1>
<br />
<input type="checkbox" name="" id="sub1" onchange="check()" />AJP
<input type="checkbox" name="" id="sub2" onchange="check()" />CSS
<input type="checkbox" name="" id="sub3" onchange="check()" />OSY
<input type="checkbox" name="" id="sub4" onchange="check()" />STE
<input type="checkbox" name="" id="sub5" onchange="check()" />EST

<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<p id="p5"></p>
</form>
</center>
</body>
</html>
Output :
Q.2 :- Develop a JavaScript to demonstrate use of Option Control.
<!DOCTYPE html>
<html lang="en">
<head>
</head> <script> function check() { var ans =
sub.options[sub.selectedIndex].value;
document.getElementById("p1").innerHTML = "You Selected " + ans;
}
</script>
<body>
<form action="">
<center>
<h1>Option List Example</h1>
<br />
<select name="sub" id="sub" onchange="check()">
<option value="" hidden>Select Here</option>
<option value="AJP">AJP</option>
<option value="OSY">OSY</option>
<option value="CSS">CSS</option>
<option value="EST">EST</option>
<option value="STE">STE</option>
</select>
<p id="p1"></p>
</center>
</form>
</body> </html>
Output :
Q.3 :- Develop JavaScript to implement Student Profile Page.

<!DOCTYPE html>
<html lang="en">
<head>
</head> <script> function check() { var name =
document.getElementById("name").value;
document.getElementById("p1").innerHTML = "Name is :" + name;
document.getElementById("p2").innerHTML
=
"Address :" + document.getElementById("address").value;
=
"Selected Branch :" + branch.options[branch.selectedIndex].value;
if (document.getElementById("fy").checked) {
document.getElementById("p4").innerHTML = "You Selected Year : FY";
} if (document.getElementById("sy").checked) {
document.getElementById("p4").innerHTML = "You Selected Year : SY";
} if (document.getElementById("ty").checked) {
document.getElementById("p4").innerHTML = "You Selected Year : TY";
} var subs = ""; if (document.getElementById("sub1").checked)
{ subs += " AJP";
}
subs += " CSS";
} if
subs += " OSY";
}
subs += " STE";
} if
subs += " EST";
} document.getElementById("p5").innerHTML = "Selected
Subjects :" + subs;
=
"Selected File :" + document.getElementById("pho").value;

}
</script>
<body>
<form>
<center>
<h1>Student Registration Form</h1>
<br /><br />
<table>
<tr>
<td>Name :</td>
<td> <input
type="text" name=""
id="name" placeholder="Enter
Your Name"
/>
</td>
</tr>
<tr>
<td>Address :</td>
<td> <textarea
name="" id="address"
cols="30" rows="10"
placeholder="Enter Your Address"
></textarea>
</td>
</tr>
<tr>
<td>Branch :</td>
<td>
<select name="" id="branch">
<option value="AJP">AJP</option>
<option value="CSS">CSS</option>
<option value="OSY">OSY</option>
<option value="STE">STE</option>
<option value="EST">EST</option>
</select>
</td>
</tr>
<tr>
<td>Year :</td>
<td>
<input type="radio" name="yr" id="fy" />FY

<input type="radio" name="yr" id="sy" />SY
<input type="radio" name="yr" id="ty" />TY
</td>
</tr>
<tr>
<td>Subject :</td>
<td>
<input type="checkbox" name="" id="sub1" />AJP
<input type="checkbox" name="" id="sub2" />CSS
<input type="checkbox" name="" id="sub3" />OSY
<input type="checkbox" name="" id="sub4" />STE
<input type="checkbox" name="" id="sub5" />EST
</td>
</tr>
<tr>
<td>Photo :</td>
<td><input type="file" name="" id="pho" /><br /><br /></td>
</tr>
</table>
<input type="button" value="Submit" onclick="check()" />
</center>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<p id="p5"></p>
<p id="p6"></p>
</form>
</body>
</html>
Output:
Experiment No. 6:
Q.1 :- 1. Develop a JavaScript to demonstrate Mouse click Event.

2. Develop a JavaScript to demonstrate Mouse over Event.
<!DOCTYPE html>
<html lang="en">
<head>
</head> <script> function
clickon() { p1.innerHTML =
"Mouse Clicked";
} function over() {
p1.innerHTML = "Mouse Over";
}
</script>
<body> <input
type="button"
value="Try Here"
onclick="clickon()"
onmouseover="over()"
/>
<p id="p1"></p>
</body>
</html>
Output :
Q.2 :- Develop JavaScript to implement Calculator.

<!DOCTYPE html>
<html lang="en">
<head>
</head> <script>
function clearit() {
ans.value = " ";
} function
addval(val) {
ans.value += val;
} function solve() {
ans.value = eval(ans.value);
}
</script>
<body>
<center>
<table border="1px">
<tr>
<td colspan="3">
<input type="text" name="" id="ans" />
</td>
<td>
<input type="button" value="C" onclick="clearit()" />
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="1" onclick="addval('1')" />
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
<input type="button" value="/" onclick="addval('/')" />
</td>
</tr>
<tr>
<td align="center">
</td>
<td align="center">

</td>
<td align="center">
</td>
<td align="center">
<input type="button" value="*" onclick="addval('*')" />
</td>
</tr>
<tr>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
<input type="button" value="-" onclick="addval('-')" />
</td>
</tr>
<tr>
<td align="center">
</td>
<td align="center">
<input type="button" value="." onclick="addval('.')" />
</td>
<td align="center">
<input type="button" value="=" onclick="solve('=')" />
</td>
<td align="center">
<input type="button" value="+" onclick="addval('+')" />
</td>
</tr>
</table>
</center>
</body>
</html>
Output :
Experiment No.7 :
Q.1 :- Develop a JavaScript to demonstrate Key Event.

<!DOCTYPE html>
<html lang="en">
<head>
</head> <script> function keyDn(event) { var x = event.keyCode;
document.getElementById("p1").innerHTML = "Unicode for Key Down : " + x;
} function keyPr(event) { var y = event.keyCode;
document.getElementById("p2").innerHTML = "Unicode for Key Press : " + y;
} function keyup(event) { var z = event.keyCode;
document.getElementById("p3").innerHTML = "Unicode for Key Up : " + z;
}
</script>
<body> <input
type="text" name=""
id="inp"
onkeydown="keyDn(event)"
onkeypress="keyPr(event)"
onkeyup="keyup(event)"
/>
<br /><br />
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
</body>
</html>
Output :
*Values changed during taking screenshot.

-
Q.2 : Develop a JavaScript to demonstrate change attribute value dynamically.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body> <img
src="Exp2_St5_css.png"
alt="Code image"
width="200"
height="230"
id="MyImg" />
<br /><br />
Click on button to change attribute values
<br />
<input type="button" value="Click Here" onclick="change()" />
<p id="p1"></p> <script> function
change() { var x =
document.getElementById("MyImg");
x.attributes["src"].value = "Exp2_St5_OP.png";
x.attributes["height"].value = 300;
x.attributes["width"].value = 350;
x.attributes["alt"].value = "Output Image";
callit();
} function callit() { var txt = ""; var x
= document.getElementById("MyImg"); for (var i = 0; i < 5; i+
+) { txt += x.attributes[i].name + " = " +
x.attributes[i].value +
"<br>"; }
document.getElementById("p1").innerHTML = txt;
}
callit();
</script>
</body>
</html>
Output :
Q.3 : Develop JavaScript to implement addEventListener() method.

<!DOCTYPE html>
<html lang="en">
<head>
</head> <script> function clicked() {
document.getElementById("p1").innerHTML = "Mouse Clicked";
var b = document.getElementById("btn");
b.addEventListener("mouseleave", leave);
b.addEventListener("mouseenter", entered); }
function leave() {
document.getElementById("p1").innerHTML = "Mouse Leave";
} function entered() {
document.getElementById("p1").innerHTML = "Mouse Entered";
}
</script>
<body>
<input type="button" value="It's a Button" onclick="clicked()" id="btn"
/>
<br /><br />
<p id="p1"></p>
</body>
</html>
Output :
Experiment No. 8 :
Q.1 :- Develop a JavaScript to create checkbox element.

<!DOCTYPE html>
<html lang="en">
<head>
</head> <script> function dynamic() {
var x = document.createElement("INPUT");
x.setAttribute("type", "checkbox");
document.body.append(x); var lab =
document.createElement("LABEL");
lab.innerHTML = "Sports";
document.body.append(lab);
}
</script>
<body>
<b>Click on below button to create check box dynamicallyr</b>
<br /><br />
<input type="button" value="Create" onclick="dynamic()" />
</body>
</html>
Output :
Q.2 : Develop a JavaScript to create option element.

<!DOCTYPE html>
-
<html lang="en">
<head>
</head> <script> function create() {
var x = document.createElement("SELECT");
var op1 = document.createElement("OPTION");
op1.setAttribute("value", "Sub1"); var
txt1 = document.createTextNode("AJP");
op1.appendChild(txt1); var op2 =
document.createElement("OPTION");
op2.setAttribute("value", "Sub2"); var
txt2 = document.createTextNode("CSS");
op2.appendChild(txt2);
x.appendChild(op1);
x.appendChild(op2);
document.body.append(x);
}
</script>
<body>
<b>Click on button to create option list dynamically</b>
<br /><br />
<input type="button" value="Create" onclick="create()" />
</body>
</html>
Output :
Q.3 :- Develop JavaScript to implement intrinsic methods.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body> <script> document.write("isNaN(123) : " + isNaN(123));
document.write("<br>isNaN('abc') : " + isNaN("abc"));
document.write("<br>isInteger('abc') : " + Number.isInteger("abc"));
document.write("<br>isInteger(123) : " + Number.isInteger(123));
document.write("<br>isFinite(-0.10000) : " + Number.isFinite(-0.1));
document.write("<br>isFinite(0/0) : " + Number.isFinite(0 / 0));
document.write("<br>eval(22-13) : " + eval(22 - 13));
document.write("<br>parseInt('99') : " + parseInt("99"));
document.write("<br>parseFloat('99.1234') : " + parseFloat("99.1234"));
</script>
</body>
</html>
Output :
Experiment No. 9:
Q.1 :- Develop a JavaScript to create Cookies.

<!DOCTYPE html>
<html lang="en">
<head>
</head> <script> function
setCookies() { document.cookie =
"name=Shreyas Shinde"; alert("Cookie is
written...");
} function getCookies() {
alert("Cookie value is : " + document.cookie);
}
</script>
<body>
<input type="button" value="setCookie" onclick="setCookies()" />
<input type="button" value="getCookie" onclick="getCookies()" />
</body>
</html>
Output :
Q.2 :- Develop JavaScript to create cookies with different attributes such as Expiration,
MaxAge and Path.
<!DOCTYPE html>
<html lang="en">
<head>
</head> <script> function setCookie() {
var cval = escape(document.form1.val.value); var
now = new Date(); document.cookie = "name=" +
cval; now.setMonth(now.getMonth() + 1);
document.cookie = "expires=" + now.toUTCString();
document.cookie = "path=/"; document.cookie =
"max-age=" + 30 * 24 * 60 * 60;
document.write("Setting Cookie with : " + document.cookie);
}
</script>
<body>
<form action="#" name="form1">
Enter Cookie value :
<input type="text" name="val" id="val" />
<br /><br />
<input type="button" value="SetCookie" onclick="setCookie()" />
</form>
</body>
</html>
Output :
Q.3 :- Develop a JavaScript to change background colour of parent window from cookie. *
Make sure all cookies are deleted
<!DOCTYPE html>
<html lang="en">
<head>
</head> <script> function setit() { var
colour = document.getElementById("col").value;
document.cookie = "Color=" + colour;
} function change() { var
arr = document.cookie.split("=");
document.bgColor = arr[1];
}
</script>
<body>
Select your favourite color :
<select name="col" id="col" onchange="setit()">
<option value="RED">RED</option>
<option value="orange">ORANGE</option>
<option value="GRAY">GRAY</option>
<option value="PURPLE">PURPLE</option>
</select>
<input type="button" value="Change Color" onclick="change()" />
</body>
</html>
Output :
Experiment No. 10:
Q.1 :- Develop a JavaScript to access properties of window object.

<!DOCTYPE html>
<html lang="en">
<head>
</head> <script>
function acc() { for
(prop in window) {
document.write("<br>" + prop);
}
}
</script>
<body>
<input type="button" value="Access window properties" onclick="acc()" />
</body>
</html>
Output :
Some of them;
Q.2 :- Develop JavaScript to open different window with different URL and Features.
<!DOCTYPE html>
<html lang="en">
<head>

</head> <script>
function openit() {
var win = window;
var str =
"height=400,width=430,status=1,location=1,scrollbar=1,top=100,left=10
0
"; win.open("https://www.google.com", "Google it", str);
win.open("http://www.cnn.com", "CNN it", str);
win.open("http://www.latthepolytechnic.com", "LESP", str);
win.focus();
}
</script>
<body>
<input type="button" value="Open New Windows" onclick="openit()" />
</body>
</html>
Output :
Q.3 :- Develop a JavaScript to change background colour of parent window from child
windows.
Child Program :
<!DOCTYPE html>
<html lang="en">
<head>
</head> <script>
function change() {
document.bgColor = "gray";
parent.document.bgColor = "orange";
}
</script>
<body>
<h2>This is a child window</h2>
Click on button to change background color of parent window <br /><br />
<input type="button" value="Try it.." onclick="change()" />
</body>
</html>
Parent Program :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<iframe src="Exp10_3_Child.html" frameborder="1">
If your browser can't understand iframe the this message will be
displayed
</iframe>
<h2>This is a parent window Containing 1 child window</h2>
</body>
</html>
Output :
Experiment No. 11 :
Q.1 :- Write a JavaScript to display index of matching string inside input string.
<!DOCTYPE html>
<html lang="en">
<head>
</head> <script> function check() { var
str = document.getElementById("inp").value; var
pattern = document.getElementById("pat").value;
var patt = new RegExp(pattern, "g"); var ind =
str.search(patt);
document.getElementById("p").innerHTML =
"Your search string is at index : " + ind;
}
</script>
<body>
Enter Input String :
<input type="text" name="inp" id="inp" />
<br /><br />
Enter Search String :
<input type="text" name="pat" id="pat" />
<br /><br />
<input type="button" value="Find Index" onclick="check()" />
<br /><br />
<p id="p"></p>
</body>
</html>
Output :
Q.2 :- Write a JavaScript to Input Digit Only.

<!DOCTYPE html>
<html lang="en">
<head>

</head> <script>
function check() {
var inp = num.value;
patt = /^[\d]+$/; if
(patt.test(inp)) {
alert("Number accepted...");
} else { num.value = "
"; alert("Enter number
only...");
}
}
</script>
<body>
Enter a Number :
<input type="text" name="num" id="num" />
<br /><br />
<input type="button" value="Check" onclick="check()" />
</body>
</html>
Output :
Q.3 :- Develop a JavaScript to apply different regular expression for student profile Form.
<!DOCTYPE html>
<html lang="en">
<head>
</head> <script> function seterr(str, pat,

ele, msg) { if (pat.test(str)) {
document.getElementById(ele).innerHTML = "OK";
} else {
document.getElementById(ele).innerHTML = msg;
} } function validate() { var name =
document.getElementById("first_name").value; var pat =
new RegExp("^[A-Za-z]+$", "g"); seterr(name, pat,
"name_err", "Enter Characters only");
var uname = document.getElementById("username").value;
var pat = /^[\w]+$/; seterr(uname, pat, "uname_err", "Avoid
symbols except (-)");
if (document.getElementById("password").value == "")
{ document.getElementById("pass_err").innerHTML =
"Enter correct password";
} else {
document.getElementById("pass_err").innerHTML = "OK"; }
var mail = document.getElementById("address").value; var
patt = /^\w+\.\w+@\w+\.\w+$/gi; seterr(mail, patt,
"email_err", "Enter valid email address");
if (
AJP.checked != true &&
Css.checked != true &&
OSY.checked != true &&
STE.checked != true
) { document.getElementById("sub_err").innerHTML = "Select
subject here";
} else {
document.getElementById("sub_err").innerHTML = "OK"; }
if (FY.checked != true && SY.checked != true && TY.checked != true) {
document.getElementById("ace_year_err").innerHTML = "Select year

here";
} else { document.getElementById("ace_year_err").innerHTML =
"OK"; } if (dropdown.value == -1) {
document.getElementById("br_err").innerHTML = "Select Branch here";
} else {
document.getElementById("br_err").innerHTML = "OK";
}
}
</script>
<body>
<center>
<h2>Student Profile Page</h2>
<table>
<tr>
<td>First name:</td>
<td><input type="text" id="first_name" /></td>
<td>
<p id="name_err"></p>
</td>
</tr>
<tr>
<td>User name:</td>
<td><input type="text" id="username" /></td>
<td>
<p id="uname_err"></p>
</td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="password" /></td>
<td>
<p id="pass_err"></p>
</td>
</tr>
<tr>
<td>Email_id :</td>
<td><input type="text" id="address" /></td>
<td>
<p id="email_err"></p>
</td>
</tr>
<tr>
<td>Subject:</td>
<td>
<input type="checkbox" name="AJP" id="AJP" value="on" /> AJP

<input type="checkbox" name="CSS" id="Css" value="on" />CSS
<input type="checkbox" name="OSY" id="OSY" value="on" />OSY
<input type="checkbox" name="STE" id="STE" value="on" />STE
</td>
<td>
<p id="sub_err"></p>
</td>
</tr>
<tr>
<td>Year:</td>
<td>
<input type="radio" name="subject" id="FY" value="FY" /> FY
<input type="radio" name="subject" id="SY" value="SY" /> SY
<input type="radio" name="subject" id="TY" value="TY" /> TY
</td>
<td>
<p id="ace_year_err"></p>
</td>
</tr>
<tr>
<td>Branch:</td>
<td>
<select id="dropdown" onchange="validate()">
<option value="-1" selected="true">Select Branch</option>
<option value="Civil Engineering">Civil Engineering</option>
<option value="Computer Engineering">Computer
Engineering</option>
<option value="Electrical Engineering">
Electrical Engineering
</option>
<option value="Mechanical Engineering">
Mechanical Engineering
</option>
<option value="Electronics Engineering">
Electronics Engineering
</option>
</select>
</td>
<td>
<p id="br_err"></p>
</td>
</tr>
<tr>
<td float="center">
<input type="button" onclick="validate()" value="Submit" />
</td>
</tr>
</table>
</center>
</body>
</html>
Output :
Experiment No. 13:
Q.1 :- Develop a JavaScript to create text rollover effect.

<!DOCTYPE html>
<html lang="en">
<head>
</head> <script>
function gotoweb() {
var weblink = web.value;
if (weblink != "") {
window.location = weblink;
} else { alert("please
select website..");
}
}
</script>
<body>
Select your fevourite website :
<select name="web" id="web" onchange="gotoweb()">
<option value="">Select Here</option>
<option value="https://www.google.com">Google</option>
<option value="http://www.cnn.com">CNN</option>
<option value="http://www.latthepolytechnic.com">LESP, Sangli</option>
</select>
</body>
</html>
Output :
Q.2 :- Develop a JavaScript to dynamically changing menu.

<!DOCTYPE html>
<html lang="en">
<head>
</head> <script> function change() {
menu.options[menu.selectedIndex].text = "KWC";
menu.options[menu.selectedIndex].value = "http://www.kwcsangli.com";
}
</script>
<body>
<h2>Example of Dynamically changing menu</h2>
<br />
<select name="" id="menu">
<option value="https://www.google.com">Google</option>
<option value="http://www.cnn.com">CNN</option>
<option value="http://www.latthepolytechnic.com">LESP, Sangli</option>
</select>
<br /><br />
<input type="button" value="Chenge Menu" onclick="change()" />
</body>
</html>
Output :
Q.3 :- Develop JavaScript for popup menu and Sliding Menu.
1. popup menu:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<style>
.dropdownbtn { background-
color: cornflowerblue; color:
#fff; padding: 16px;
border: none; font-size: 16px;
}
.dropmenu {
position: relative;
display: inline-block;
}
.dropdownbtn:hover {
background-color: darkcyan;
}
.menucontent {
display: none; background-
color: darkgray; min-
width: 115px; position:
absolute; z-index: 1;
}
.menucontent a {
color: #fff;
padding: 16px, 25px;
display: block;
}
.menucontent a:hover {
background-color: aliceblue;
color: black;
}
.show {
display: block;
}
</style>
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="dropmenu">
<button class="dropdownbtn" id="dropdown" onclick="callit()">

DropDown
</button>
<div class="menucontent" id="mymenu">
<a href="#home">home</a>
<a href="#about">about</a>
<a href="#contact">contact</a>
</div>
</div> </body> <script> function callit() {
document.getElementById("mymenu").classList.toggle("show");
} window.onclick = function (event) { if (!
event.target.matches(".dropdownbtn")) { var dropdowns =
document.getElementsByClassName("menucontent"); var i; for
(i = 0; i < dropdowns.length; i++) { var openDropdown =
dropdowns[i]; if (openDropdown.classList.contains("show")) {
openDropdown.classList.remove("show");
}
}
}
};
</script> </html>
Output :
2. Sliding menu :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<style> .sliding {
height: 100%; width: 0;

top: 0; left: 0;
background-color: black;
overflow-x: hidden;
transition: 0.5s;
position: fixed;
padding-top: 60px; z-
index: 1;
}
.sliding a { padding:
8px 8px 8px 32px; color:
cornsilk; display: block;
text-decoration: none;
font-size: 20px;
}
.sliding .closebtn {
position: absolute;
top: 0; right:
25px; font-size:
36px; margin-left:
50px;
} a:hover
{ color:
blue;
}
</style>
<body>
<div class="sliding" id="menu">
<a href="#" class="closebtn" onclick="closeit()">&times</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">ABCD</a>
</div>
Example of Sliding Menu :
<br /><br />

<span onclick="showit()" class="closebtn">☰ open</span>
</body> <script> function closeit() {
document.getElementById("menu").style.width = 0;
} function showit() {
document.getElementById("menu").style.width = "250px";
}
</script>
</html>
Output :
Experiment No. 14 :
Q.1 :- Develop a JavaScript to create banner advertisement.

<!DOCTYPE html>
<html lang="en">
<head>

</head> <script> var imgarr = ["img1.jpg",
"img2.jpg", "img3.jpg"]; var count = 0;
function continueit() { if (document.images) {
count += 1; if (count == imgarr.length) {
count = 0;
} img.src =
imgarr[count];
setTimeout(continueit, 5000);
}
}
</script>
<body onload="continueit()">
<center> <img src="img1.jpg" id="img" height="400px"
width="400px" />
</center>
</body>
</html>
CSS Practical Code Practice Output
Q.2 :- Develop a JavaScript to link URL to banner advertisement.

<!DOCTYPE html>
<html lang="en">
<head>
</head> <script> const imgarr = ["img1.jpg", "img2.jpg",

"img3.jpg"]; var count = 0; const linkarr = ["google.com",
"latthepolytechnic.com", "cnn.com"]; function change() { if
(document.images) { count += 1; if (count ==
imgarr.length) { count = 0;
} img.src =
imgarr[count];
setTimeout(change, 5000);
} } function linkit() {
window.location = "https://www." + linkarr[count];
}
</script>
<body onload="change()">
<center>
<a href="javascript:linkit()" id="link"
><img src="img1.jpg" id="img" height="300px" width="330px" />
</a>
</center>
</body>
</html>
:
Q.3 :- Develop a JavaScript to implement Slide Show.

<!DOCTYPE html>
<html lang="en">
<head>
</head> <script> const imgarr = ["img1.jpg",
"img2.jpg", "img3.jpg"]; var count = 0;
function callit(val) { if (document.images) {
count += val; if (count == imgarr.length) {
count = 0;
} if (count < 0) {
count = imgarr.length - 1;
} img.src =
imgarr[count];
}
}
</script>
<body>
<center> <img src="img1.jpg" id="img" height="300px"
width="330px" />
<br /><br />
<input type="button" value="Back" onclick="callit(-1)" />
<input type="button" value="Next" onclick="callit(1)" />
</center>
</body>
</html>

Rescued Document

Uploaded by

Copyright:

Available Formats

Rescued Document

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Rescued Document

Uploaded by

Copyright:

Available Formats

CSS Practical Code Practice

Q.2 :- Develop JS for arithmetic expression evaluation.

Q.1 :- Develop JS to demonstrate the use of control flow statement.

Q.2 :- Display odd numbers up to 20 by for loop in JS.

Q.3 : Declare, initialize and assign values to the given variable.

Q.4 :Demonstrate the use of while loop.

Find maximum number from array of 10 numbers.

Demonstrate stack implementation.

Q.1 :-Demonstrate function call with argument.

Q.2 :- Design a JavaScript to demonstrate function call with return value.

Q.1 :- Develop a JavaScript to demonstrate use of CheckBox Control.

<input type="checkbox" name="" id="sub5" onchange="check()" />EST

Q.2 :- Develop a JavaScript to demonstrate use of Option Control.

Q.3 :- Develop JavaScript to implement Student Profile Page.

"Selected File :" + document.getElementById("pho").value;

<input type="radio" name="yr" id="fy" />FY

Q.1 :- 1. Develop a JavaScript to demonstrate Mouse click Event.

Q.2 :- Develop JavaScript to implement Calculator.

<input type="button" value="5" onclick="addval('5')" />

Q.1 :- Develop a JavaScript to demonstrate Key Event.

*Values changed during taking screenshot.

Q.3 : Develop JavaScript to implement addEventListener() method.

Q.1 :- Develop a JavaScript to create checkbox element.

Q.2 : Develop a JavaScript to create option element.

Q.3 :- Develop JavaScript to implement intrinsic methods.

Q.1 :- Develop a JavaScript to create Cookies.

Experiment No. 10:

Q.1 :- Develop a JavaScript to access properties of window object.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Q.2 :- Write a JavaScript to Input Digit Only.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

</head> <script> function seterr(str, pat,

document.getElementById("ace_year_err").innerHTML = "Select year

<input type="checkbox" name="AJP" id="AJP" value="on" /> AJP

Experiment No. 13:

Q.1 :- Develop a JavaScript to create text rollover effect.

Q.2 :- Develop a JavaScript to dynamically changing menu.

Q.3 :- Develop JavaScript for popup menu and Sliding Menu.

<button class="dropdownbtn" id="dropdown" onclick="callit()">

height: 100%; width: 0;

<br /><br />

Q.1 :- Develop a JavaScript to create banner advertisement.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Q.2 :- Develop a JavaScript to link URL to banner advertisement.

</head> <script> const imgarr = ["img1.jpg", "img2.jpg",

Q.3 :- Develop a JavaScript to implement Slide Show.

You might also like