Rescued Document
Uploaded by
Samarth MhetreRescued Document
Uploaded by
Samarth MhetreCSS 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:
CSS Practical Code Practice
Experiment No. 2:
Q.1 :- Develop JS to demonstrate the use of control flow statement.
<!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 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 :
CSS Practical Code Practice
Q.2 :- Display odd numbers up to 20 by for loop in JS.
<!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> 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 :
CSS Practical Code Practice
Another way:
<!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> 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:
CSS Practical Code Practice
Q.3 : Declare, initialize and assign values to the given variable.
<!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:
CSS Practical Code Practice
Q.4 :Demonstrate the use of while loop.
<!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 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 :
CSS Practical Code Practice
-
Q.5 : Create and access object properties to solve the given properties.
<!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 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:
CSS Practical Code Practice
Q.1 :-
Find maximum number from array of 10 numbers.
<!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 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 :
CSS Practical Code Practice
Q.2 :-
Demonstrate stack implementation.
<!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 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 :
CSS Practical Code Practice
Experiment No. 4:
Q.1 :-Demonstrate function call with argument.
<!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> 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 :
CSS Practical Code Practice
Q.2 :- Design a JavaScript to demonstrate function call with return value.
<!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 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 :
CSS Practical Code Practice
Experiment No. 5 :
Q.1 :- Develop a JavaScript to demonstrate use of CheckBox Control.
<!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> <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) {
document.getElementById("p2").innerHTML = "Selected Subject is AJP";
} else {
document.getElementById("p2").innerHTML = "";
} if (document.getElementById("sub3").checked) {
document.getElementById("p3").innerHTML = "Selected Subject is AJP";
} else {
document.getElementById("p3").innerHTML = "";
} if (document.getElementById("sub4").checked) {
document.getElementById("p4").innerHTML = "Selected Subject is AJP";
} else {
document.getElementById("p4").innerHTML = "";
}
if (document.getElementById("sub5").checked) {
document.getElementById("p5").innerHTML = "Selected Subject is AJP";
} else {
document.getElementById("p5").innerHTML = "";
}
}
</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
CSS Practical Code Practice
<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 :
CSS Practical Code Practice
Q.2 :- Develop a JavaScript to demonstrate use of Option Control.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</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 :
CSS Practical Code Practice
Q.3 :- Develop JavaScript to implement Student Profile Page.
<!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> <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;
document.getElementById("p3").innerHTML
=
"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";
}
if (document.getElementById("sub2").checked) {
subs += " CSS";
} if
(document.getElementById("sub3").checked) {
subs += " OSY";
}
if (document.getElementById("sub4").checked) {
subs += " STE";
} if
(document.getElementById("sub5").checked) {
subs += " EST";
} document.getElementById("p5").innerHTML = "Selected
Subjects :" + subs;
document.getElementById("p6").innerHTML
=
CSS Practical Code Practice
"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="" hidden>Select Here</option>
<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>
CSS Practical Code Practice
<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:
CSS Practical Code Practice
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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</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 :
CSS Practical Code Practice
Q.2 :- Develop JavaScript to implement Calculator.
CSS Practical Code Practice
<!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> <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">
<input type="button" value="2" onclick="addval('2')" />
</td>
<td align="center">
<input type="button" value="3" onclick="addval('3')" />
</td>
<td align="center">
<input type="button" value="/" onclick="addval('/')" />
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="4" onclick="addval('4')" />
</td>
<td align="center">
CSS Practical Code Practice
<input type="button" value="5" onclick="addval('5')" />
</td>
<td align="center">
<input type="button" value="6" onclick="addval('6')" />
</td>
<td align="center">
<input type="button" value="*" onclick="addval('*')" />
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="7" onclick="addval('7')" />
</td>
<td align="center">
<input type="button" value="8" onclick="addval('8')" />
</td>
<td align="center">
<input type="button" value="9" onclick="addval('9')" />
</td>
<td align="center">
<input type="button" value="-" onclick="addval('-')" />
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="0" onclick="addval('0')" />
</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>
CSS Practical Code Practice
Output :
CSS Practical Code Practice
Experiment No.7 :
Q.1 :- Develop a JavaScript to demonstrate Key Event.
<!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> <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>
CSS Practical Code Practice
Output :
*Values changed during taking screenshot.
CSS Practical Code Practice
-
Q.2 : Develop a JavaScript to demonstrate change attribute value dynamically.
<!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> <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>
CSS Practical Code Practice
Output :
CSS Practical Code Practice
Q.3 : Develop JavaScript to implement addEventListener() method.
<!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> <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 :
CSS Practical Code Practice
Experiment No. 8 :
Q.1 :- Develop a JavaScript to create checkbox element.
<!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> <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>
CSS Practical Code Practice
-
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</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.
CSS Practical Code Practice
<!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> 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 :
CSS Practical Code Practice
Experiment No. 9:
Q.1 :- Develop a JavaScript to create Cookies.
<!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> <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 :
CSS Practical Code Practice
Q.2 :- Develop JavaScript to create cookies with different attributes such as Expiration,
MaxAge and Path.
<!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> <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
CSS Practical Code Practice
<!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> <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.
CSS Practical Code Practice
<!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> <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>
<meta charset="UTF-8" />
CSS Practical Code Practice
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</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 :
CSS Practical Code Practice
Q.3 :- Develop a JavaScript to change background colour of parent window from child
windows.
Child Program :
CSS Practical Code Practice
<!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> <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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</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 :
CSS Practical Code Practice
Experiment No. 11 :
Q.1 :- Write a JavaScript to display index of matching string inside input string.
<!DOCTYPE html>
<html lang="en">
CSS Practical Code Practice
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</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>
<meta charset="UTF-8" />
CSS Practical Code Practice
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
CSS Practical Code Practice
</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";
CSS Practical Code Practice
} 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
CSS Practical Code Practice
</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>
CSS Practical Code Practice
Output :
CSS Practical Code Practice
CSS Practical Code Practice
Experiment No. 13:
Q.1 :- Develop a JavaScript to create text rollover effect.
<!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> <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 :
CSS Practical Code Practice
Q.2 :- Develop a JavaScript to dynamically changing menu.
<!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> <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="" hidden>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>
<br /><br />
<input type="button" value="Chenge Menu" onclick="change()" />
</body>
</html>
Output :
CSS Practical Code Practice
Q.3 :- Develop JavaScript for popup menu and Sliding Menu.
1. popup menu:
<!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>
<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">
CSS Practical Code Practice
<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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style> .sliding {
CSS Practical Code Practice
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()">×</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">ABCD</a>
</div>
Example of Sliding Menu :
CSS Practical Code Practice
<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>
<meta charset="UTF-8" />
CSS Practical Code Practice
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
CSS Practical Code Practice
</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>
CSS Practical Code Practice Output
:
CSS Practical Code Practice
Q.3 :- Develop a JavaScript to implement Slide Show.
<!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> <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>
CSS Practical Code Practice Output
You might also like
- Javascript Practical Programs by VJTech Academy-2No ratings yetJavascript Practical Programs by VJTech Academy-211 pages
- Develop and Demonstrate A XHTML Document That Illustrates The Use External Style Sheet, Ordered List, Table, Borders, Padding, Color, and The TagNo ratings yetDevelop and Demonstrate A XHTML Document That Illustrates The Use External Style Sheet, Ordered List, Table, Borders, Padding, Color, and The Tag53 pages
- Program 1: Develop & Demonstrate A XHTML Document That Illustrates The Use of External Style Sheet, Ordered List, Table, Borders, Padding, Color & The Tag. m1.htmlNo ratings yetProgram 1: Develop & Demonstrate A XHTML Document That Illustrates The Use of External Style Sheet, Ordered List, Table, Borders, Padding, Color & The Tag. m1.html26 pages
- 7th Sem-Web Programming Lab Manual 2009No ratings yet7th Sem-Web Programming Lab Manual 200933 pages
- Web Design Lab Part-B Java Script Laboratory Manual For 3 Sem Is and Cs (2011-2012)No ratings yetWeb Design Lab Part-B Java Script Laboratory Manual For 3 Sem Is and Cs (2011-2012)17 pages
- HTML Programs: 1. Program To Print The ColorsNo ratings yetHTML Programs: 1. Program To Print The Colors17 pages
- 1) Develop and Demonstrate A XHTML Document That Illustrates The Use External Style Sheet, Ordered List, Table, Borders, Padding, Color, and The TagNo ratings yet1) Develop and Demonstrate A XHTML Document That Illustrates The Use External Style Sheet, Ordered List, Table, Borders, Padding, Color, and The Tag23 pages
- Mastering Dependency Injection in Flutter 1721730422No ratings yetMastering Dependency Injection in Flutter 172173042210 pages
- Visual Studio 2022 - JavaScript - User GuideNo ratings yetVisual Studio 2022 - JavaScript - User Guide165 pages
- Mod Menu Log - Com - Storytaco.p29clientNo ratings yetMod Menu Log - Com - Storytaco.p29client41 pages
