ch-2 coding and installation for respected JavaScript

1.<!DOCTYPE html>

<html lang="en-US">
<head>
<title>
javascript
</title>
</head>
<body>
<script>
window.alert("wap institute");
</script>
</body>
</html>

2.<!DOCTYPE html>
<html lang="en-US">
<head>
<title>
javascript
</title>
</head>
<body>
<script>
console.log("wap institute");
</script>
</body>
</html>

3.<!DOCTYPE html>
<html lang="en-US">
<head>
<title>
javascript
</title>
</head>
<body>
<script>
document.write("wap institute");
</script>
</body>
</html>

4.<fieldset>
<legend>Mr rahul singh</legend>
<ol>
<li>9097406673</li>
<li>9097406672</li>
<i class="fa fa-trash" id="delete-icon" title="Delete Contact"></i>
</ol>
</fieldset>

var con=document.getElementById("contacts");
var fieldset=document.createElement("FIELDSET");
var legend=document.createElement("LEGEND");
var ol=document.createElement("OL");
var li_one=document.createElement("LI");
var li_two=document.createElement("LI");
var trash=document.createElement("I");
trash.setAttribute("class","fa fa-trash");
trash.setAttribute("id","delete-icon");
trash.setAttribute("title","Delete Contact");
con.appendChild(fieldset);
fieldset.appendChild(legend);
fieldset.appendChild(ol);
ol.appendChild(li_one);
ol.appendChild(li_two);
legend.appendChild(document.createTextNode(json_extract.fullname));
li_one.appendChild(document.createTextNode(json_extract.pnum));
li_two.appendChild(document.createTextNode(json_extract.snum));

ch-3 keywords and functions in respected JavaScript

1.<!DOCTYPE html>

<html lang="en-US">
<head>
<meta charset="utf-8">
<title>
javascript
</title>
</head>
<body>
<script>
function wap()
{
window.alert("wap institute");
}
</script>
<button onclick="wap()">click</button>
</body>
</html>

ch-4 respected JavaScript predefined functions

1.<body>

<script>

alert("wap institute");

</script>

</body>

2.<body>

<script>

document.write("wap institute");

</script>

</body>

</html>

3.<body>
<button onclick="window.alert('wap institute')">click here</button>
</body>
</html>

4.<body>

<button onmouseover="window.alert('wap institute')">click here</button>

</body>

</html>

5.<body>

<button onmouseout="window.alert('wap institute')">click here</button>

</body>

</html>

6.<body>

<button onclick="window.close()">click here to close this page</button>

</body>

</html>

7.<body>

<h1>hello sir</h1>

<button onclick="window.print()">click here to print this page</button>

</body>

</html>

8.<body>

<h1>hello sir</h1>

<button onclick="window.open('1.jpg')">click here to see my photo</button>

</body>

</html>

9.<body>

<h1>hello sir</h1>

<button onclick="window.open('images/1.jpg')">click here to see my photo</button>

</body>

</html>

ch-5 user defined functions in respected JavaScript

1.<body>

<h1>do you know my name</h1>

<button>click here to check author name</button>

<script>

window.alert("my name is saurav");

</script>

</body>

</html>

2.<body>

<h1>do you know my name</h1>

<button onclick="wap()">click here to check author name</button>

<script>

function wap()

{

window.alert("my name is saurav");

}

</script>

</body>

</html>

3.<head>

<script>

function a()

{

document.write("welcome");

}

</script>

</head>

<body>

<button onclick="a()">click me</button>

</body>

</html>

4.<head>

<script>

function saurav()

{

window.alert("saurav");

}

function gaurav()

{

window.alert("gaurav");

}

</script>

</head>

<body>

<button onclick="saurav()">first</button>

<button onclick="gaurav()">second</button>

</body>

</html>

ch-6 user defined function clearity in respected JavaScript

1.<head>

<script>

function wap()

{

window.alert("saurav");

}

</script>

</head>

<body>

<button onclick="wap()">click</button>

</body>

</html>

2.<head>

<script>

var x=6;

window.alert(x);

</script>

</head>

<body>

</body>

</html>

2.<head>

<script>

function wap()

{

var x=6;

window.alert(x);

}

</script>

</head>

<body>

<button onclick="wap()">check</button>

</body>

</html>

ch-8 mathematical calculations with variable in respected JavaScript

1.<head>

<script>

var x="saurav";

window.alert(x);

</script>

</head>

<body>

</body>

</html>

2.<head>

<script>

var x='a';

window.alert(x);

</script>

</head>

<body>

</body>

</html>

3.<head>

<script>

var x=6+6;

window.alert(x);

</script>

</head>

<body>

</body>

</html>

4.<head>

<script>

var x="6+6";

window.alert(x);

</script>

</head>

<body>

</body>

</html>

5.<head>

<script>

var x=2;

var y=4;

var z=x+y;

window.alert(z);

</script>

</head>

<body>

</body>

</html>

6.<head>

<script>

function wap()

{

var x=2;

var y=4;

var z=x+y;

window.alert(z);

}

</script>

</head>

<body>

<button onclick="wap()">click</button>

</body>

</html>

7.<head>

<script>

var x=5+6-2/8*4;

window.alert(x);

</script>

</head>

<body>

</body>

</html>

8.<head>

<script>

var a=5;

var b=6;

var c=2;

var d=8;

var e=4;

var f=a+b-c/d*e;

window.alert(f);

</script>

</head>

<body>

</body>

</html>

9.<head>

<script>

function wap()

{

var a=5;

var b=6;

var c=2;

var d=8;

var e=4;

var f=a+b-c/d*e;

window.alert(f);

}

</script>

</head>

<body>

<button onclick="wap()">click</button>

</body>

</html>

ch-9 complete variables in respected JavaScript

1.<head>

<script>

var a,b,c;

a=9;

b=10;

c=11;

document.write(a);

document.write(b);

document.write(c);

</script>

</head>

<body>

</body>

</html>

2.<head>

<script>

var x=2+9;

window.alert(x);

</script>

</head>

<body>

</body>

</html>

3.<head>

<script>

var x="2+9";

window.alert(x);

</script>

</head>

<body>

</body>

</html>

4.<head>

<script>

var a,b,c,d;

a=1000;

b=5;

c=100;

d=a*b/c;

window.alert(d);

</script>

</head>

<body>

</body>

</html>

5.<head>

<script>

var a=1000*5/100;

window.alert(a);

</script>

</head>

<body>

</body>

</html>

6.<head>

<script>

function wap()

{

var a,b,c;

a=6;

b=2;

c=a/b;

window.alert(c)

}

</script>

</head>

<body>

<button onclick="wap()">click me to check</button>

</body>

</html>

7.<head>

<script>

function wap()

{

var x='s';

window.alert(x)

}

</script>

</head>

<body>

<button onclick="wap()">click me to check</button>

</body>

</html>

8.<head>

<script>

var a=6;

function one()

{

window.alert(a+1);

}

function two()

{

window.alert(a+2);

}

</script>

</head>

<body>

<button onclick="one()">one</button>

<button onclick="two()">two</button>

</body>

</html>

9.<head>

<script>

function wap()

{

var x=6;

window.alert(x);

}

</script>

</head>

<body>

<button onclick="wap()">one</button>

</body>

</html>

10.<head>

<script>

function one()

{

var x=6;

window.alert(x);

}

function two()

{

var x=10;

window.alert(x);

}

</script>

</head>

<body>

<button onclick="one()">one</button>

<button onclick="two()">two</button>

</body>

</html>

ch-10 selectors in respected JavaScript

1.<body>

<h1 id="result"></h1>

<script>

document.getElementById("result").innerHTML="saurav";

</script>

</body>

</html>

2.<body>

<p id="wap"></p>

<script>

document.getElementById("wap").innerHTML="saurav";

</script>

</body>

</html>

3.<body>

<h4 id="wap"></h4>

<button onclick="wap()">click me</button>

<script>

function wap()

{

document.getElementById("wap").innerHTML="saurav";

}

</script>

</body>

</html>

4.<head>

<script>

function wap()

{

document.getElementById("wap").innerHTML="saurav";

}

</script>

</head>

<body>

<h4 id="wap"></h4>

<button onclick="wap()">click me</button>

</body>

</html>

5.<head>

<script>

function wap()

{

var x=document.getElementById("wap");

x.innerHTML="saurav";

}

</script>

</head>

<body>

<h4 id="wap"></h4>

<button onclick="wap()">click me</button>

</body>

</html>

ch-11 css implimentation in respected JavaScript

1.<body>

<h1 id="wap"></h1>

<script>

document.getElementById("wap").innerHTML="saurav";

</script>

</body>

</html>

2.<body>

<h1 id="wap"></h1>

<script>

document.getElementById("wap").innerHTML="saurav";

document.getElementById("wap").style.color="red";

</script>

</body>

</html>

3.<body>

<div id="wap"></div>

<script>

document.getElementById("wap").style.width="720px";

document.getElementById("wap").style.height="480px";

document.getElementById("wap").style.border="1px solid red";

</script>

</body>

</html>

4.<body>

<div id="wap"></div>

<script>

var x=document.getElementById("wap");

x.style.width="720px";

x.style.height="480px";

x.style.border="1px solid red";

</script>

</body>

</html>

5.<head>

<script>

function wap()

{

var x=document.getElementById("result");

x.style.color="red";

}

</script>

</head>

<body>

<h1 id="result">saurav</h1>

<button onclick="wap()">click me change the color of text</button>

</script>

</body>

</html>

ch-12 respected JavaScript basic web app development part 1

1.<body>

<div id="brand-name">

<h1 id="result">CSS PROPERTIES RESULT VEIWER</h1>

</div>

<div id="page">

<button id="pro-btn" onclick="color()">COLOR</button>

<button id="pro-btn" onclick="font_family()">FONT-FAMILY</button>

<button id="pro-btn" onclick="font_weight()">FONT-WEIGHT</button>

</div>

</body>

</html>

=>c.css

@charset "utf-8";

body{

padding:0;

margin:0;

}

box-sizing:border-box;

}

#brand-name{

width:80%;

height:120px;

margin:0 auto;

border-top:30px groove red;

margin-top:20px;

box-shadow:0px 0px 5px grey;

}

#result{

text-align:center;

font-family:sans-serif;

font-size:50px;

}

#page{

width:80%;

height:440px;

border-bottom:30px groove red;

box-shadow:0px 0px 5px grey;

margin:30px auto;

}

#pro-btn{

width:150px;

height:60px;

border:0.5px solid #ccc;

float:left;

background-color:white;

}

=>j.js

function color()

{

var x=document.getElementById("result");

x.style.color="red";

}

function font_family()

{

var x=document.getElementById("result");

x.style.fontFamily="calibri";

}

function font_weight()

{

var x=document.getElementById("result");

x.style.fontWeight="bold";

}

ch-12 respected JavaScript basic web app development part 2

1.<body>

<button id="btn" onclick="text()">SHOW IMAGES</button>

</body>

=>j.js

function text()

{

var x=document.getElementById("btn");

x.innerHTML="HIDE IMAGES";

}

2.<body>

<button id="btn" onclick="text()">SHOW IMAGES</button>

</body>

=>j.js

function text()

{

var x=document.getElementById("btn");

x.innerHTML="HIDE IMAGES";

x.style.backgroundColor="red";

x.style.color="white";

x.style.border="none";

x.style.outline="none";

}

3.<head>

<style>

button:focus{

outline:none;

}

</style>

</head>

<body>

<button id="btn" onclick="text()">SHOW IMAGES</button>

</body>

</html>

=>j.js

function text()

{

var x=document.getElementById("btn");

x.innerHTML="HIDE IMAGES";

x.style.backgroundColor="red";

x.style.color="white";

x.style.border="none";

}

4.<body>

<button id="btn" onclick="text()">SHOW IMAGES</button>

<h1 id="name" onclick="wap()">saurav</h1>

</body>

=>j.js

function text()

{

var x=document.getElementById("btn");

x.innerHTML="HIDE IMAGES";

x.style.backgroundColor="red";

x.style.color="white";

x.style.border="none";

x.style.outline="none";

}

function wap()

{

var x=document.getElementById("name");

x.innerHTML="gaurav";

}

5.<body id="demo" bgcolor="red">

<button onclick="wap()">click me to change the color of your webpage</button>

</body>

=>j.js

function wap()

{

var x=document.getElementById("demo");

x.style.backgroundColor="blue";

}

6.<body id="demo" bgcolor="red">

<button onclick="wap()">click me to change the color of your webpage</button>

</body>

=>j.js

function wap()

{

var x=document.getElementById("demo");

x.bgColor="blue";

}

7.<body>

<form>

<input type="checkbox" value="show password" onclick="demo()">show password

</form>

</body>

=>j.js

function demo()

{

var x=document.getElementById("wap");

x.type="text";

}

ch-12 respected JavaScript basic web app development part 3

1.<head>

function demo()

{

var x=document.getElementById("show");

x.src="2.png";

}

</script>

</head>

<body>

</body>

2.<head>

function demo()

{

var x=document.getElementById("show");

x.width="480";

}

</script>

</head>

<body>

</body>

3.<head>

function demo()

{

var x=document.getElementById("show").src;

window.alert(x);

}

</script>

</head>

<body>

</body>

4.<head>

function demo()

{

var x=document.getElementById("show").width;

window.alert(x);

}

</script>

</head>

<body>

</body>

5.<head>

function demo()

{

var x=document.getElementById("show").id;

window.alert(x);

}

</script>

</head>

<body>

</body>

6.<head>

function demo()

{

var x=document.getElementById("user").value;

window.alert(x);

}

</script>

</head>

<body>

<button onclick="demo()">click me</button>

</body>

ch-12 respected JavaScript basic web app development part 4

1.<head>

function demo()

{

var x=document.getElementById("wap").bgcolor;

window.alert(x);

}

</script>

</head>

<button onclick="demo()">click</button>

</body>

2.<head>

function demo()

{

var x=document.getElementById("wap").align;

window.alert(x);

}

</script>

</head>

<button onclick="demo()">click</button>

</body>

3.<head>

function demo()

{

var x=document.getElementById("wap").value;

window.alert(x);

}

</script>

</head>

<button onclick="demo()">click</button>

</body>

4.<head>

function demo()

{

var x=document.getElementById("upload").value;

window.alert(x);

}

</script>

</head>

</body>

5.<head>

function demo()

{

var x=document.getElementById("upload").value.replace(/.*(\/|\\)/, '');

window.alert(x);

}

</script>

</head>

</body>

ch-12 respected JavaScript basic web app development part 6

1.<head>

window.alert("my name is");

</script>

</head>

<body>

</body>

2.<head>

window.alert("my name is 123");

</script>

</head>

<body>

</body>

3.<head>

window.alert("my name is "+123);

</script>

</head>

<body>

</body>

4.<head>

window.alert("my name is "+12*3);

</script>

</head>

<body>

</body>

5.<head>

window.alert("i am"+35+"years old");

</script>

</head>

<body>

</body>

6.<head>

window.alert("i am "+35+" years old");

</script>

</head>

<body>

7.<head>

<style>

input{

float:left;

}

#show{

width:150px;

height:150px;

border:1px solid #ccc;

float:left;

clear:left;

margin-top:10px;

background-size:cover;

}

</style>

function demo()

{

var x=document.getElementById("upload").value.replace(/.*(\/|\\)/, '');

var y=document.getElementById("show");

y.style.backgroundImage="url("+x+")";

}

</script>

</head>

<body>

</div>

</body>

ch-12 respected JavaScript basic web app development part 7

1.<head>

<style>

box-sizing:border-box;

}

header{

width:982px;

height:100px;

background:black;

margin:0 auto;

}

section{

width:982px;

height:555px;

margin:0 auto;

border:5px solid black;

}

footer{

width:982px;

height:50px;

background:black;

margin:0 auto;

}

video{

width:100%;

height:100%;

}

h1{

color:white;

font-family:sans-serif;

padding-top:20px;

}

button{

width:180px;

height:40px;

border:none;

background:white;

float:left;

margin-left:110px;

border-radius:50px;

}

#upload{

border:1px solid red;

width:180px;

height:40px;

position:fixed;

left:25.2%;

bottom:7.5%;

opacity:0;

border:1px solid red;

}

button:focus{

outline:none;

border-radius:0;

}

</style>

function playvideo()

{

var x=document.getElementById("video");

x.play();

}

function pausevideo()

{

var x=document.getElementById("video");

x.pause();

}

function vload()

{

var x=document.getElementById("upload").value.replace(/.*(\/|\\)/, '');

var y=document.getElementById("video");

y.src=x;

}

</script>

</head>

<body>

<h1 align="center">WAP VIDEO PLAYER</h1>

</header>

</section>

<button><input type="file" id="upload" onchange="vload()">Upload Video</button>

<button onclick="playvideo()">Play Video</button>

<button onclick="pausevideo()">Pause Video</button>

</footer>

</body>

ch-14 booleans and return statements in respected JavaScript

1.<body>

var x=4<2;

window.alert(x);

</script>

</body>

2.<body>

var x=2==2;

window.alert(x);

</script>

</body>

3.<body>

var x=Boolean(2<2);

document.getElementById("demo").innerHTML=x;

</script>

</body>

4.<body>

window.alert("saurav")false;

</script>

</body>

5.<head>

function wap()

{

var x=10;

var y=12;

var z=x+y;

window.alert(x);

}

</script>

<body>

<button onclick="wap()">click me</button>

</body>

6.<head>

function wap()

{

var x=10;

var y=12;

var z=x+y;

window.alert("your answer is "+z);

}

</script>

<body>

<button onclick="wap()">click me</button>

</body>

7.<head>

<style>

div{

width:720px;

height:200px;

border:1px solid red;

}

</style>

function update()

{

var a=document.getElementById("user").value;

var b=document.getElementById("result");

b.innerHTML=a;

}

</script>

<body>

<button onclick="update()">update</button>

<div>

</div>

</body>

8.<head>

<style>

div{

width:720px;

height:200px;

border:1px solid red;

}

</style>

function update()

{

var a=document.getElementById("user").value;

var b=document.getElementById("result");

b.innerHTML=a;

return false;

}

</script>

<body>

<form>

<button onclick="return update()">update</button>

</form>

<div>

</div>

</body>

ch-16 comments and operators in respected JavaScript

1.<head>

<style>

#range{

position:fixed;

bottom:0;

left:54%;

}

#fixed-box{

width:250px;

height:80px;

background:red;

position:fixed;

bottom:0;

left:50%;

}

#showtext{

text-align:center;

color:white;

font-weight:bold;

font-size:18px;

}

</style>

function demo()

{

var x=document.getElementById("range").value;

var y=document.getElementById("result");

y.style.fontSize=x;

var z=document.getElementById("showtext");

z.innerHTML="Your font size is now= "+x+" px";

}

</script>

</head>

<body>

<h1 id="result">WAP INSTITUTE</h1>

</div>

</body>

2.<body>

3.<body>

var x,y,z;

x=10;

y=3;

z=x%y;

window.alert(z);

</script>

</body>

4.<body>

var x=6;

x++;

window.alert(x);

</script>

</body>

5.<body>

var x=6;

x--;

window.alert(x);

</script>

</body>

ch-17 image effects and calculating app development in respected JavaScript

1.<head>

<style>

#page{

width:720px;

height:480px;

border:10px solid red;

margin:0px auto;

}

</style>

</head>

<body>

<h1 align="center">Image Effects</h1>

<b>Brightness</b>

<b>Contrast</b>

<b>Saturate</b>

</div>

function bright()

{

var x=document.getElementById("brightness").value;

var y=document.getElementById("pic");

y.style.filter="brightness("+x+"%)";

}

function contrast()

{

var x=document.getElementById("contrast").value;

var y=document.getElementById("pic");

y.style.filter="contrast("+x+"%)";

}

function saturate()

{

var x=document.getElementById("saturation").value;

var y=document.getElementById("pic");

y.style.filter="saturate("+x+"%)";

}

</script>

</body>

</html>

2.<head>

function demo()

{

var x=document.getElementById("user").value;

var y=document.getElementById("result");

y.innerHTML="Your answer is : "+eval(x);

}

</script>

</head>

<body>

<h1 align="center">All in one calculator</h1>

<hr>

<button onclick="demo()">calculate</button>

</body>

ch-18 assignment and comparision operators in respected JavaScript

1.<body>

var x=10;

var y=20;

x+=y; //x=x+y;

window.alert(x);

</script>

</body>

2.<body>

var x=10;

var y=20;

y+=x; //y=x+y;

window.alert(y);

</script>

</body>

3.<body>

var x=10;

var y=20;

x-=y; //x=x-y;

window.alert(x);

</script>

</body>

4.<body>

var x=10;

var y=20;

y-=x; //y=y-x;

window.alert(y);

</script>

</body>

5.<body>

var x=10;

var y=20;

x%=y; //x=x%y;

window.alert(x);

</script>

</body>

6.<body>

var x=10;

var y=12;

window.alert(x==y);

</script>

</body>

7.<body>

var x=10;

var y=10;

window.alert(x==y);

</script>

</body>

8.<body>

var x=10;

var y="10";

window.alert(x==y);

</script>

</body>

9.<body>

var x=10;

var y="10";

window.alert(x===y);

</script>

</body>

10.<body>

var x=10;

var y=10;

window.alert(x===y);

</script>

</body>

11.<body>

var x="10";

var y="10";

window.alert(x===y);

</script>

</body>

12.<body>

var x="10";

var y="12";

window.alert(x===y);

</script>

</body>

13.<body>

var x="10";

var y="12";

window.alert(x!=y);

</script>

</body>

14.<body>

var x=10;

var y="12";

window.alert(x!=y);

</script>

</body>

15.<body>

var x=10;

var y="12";

window.alert(x!==y);

</script>

</body>

16.<body>

var x=10;

var y=12;

window.alert(x>y);

</script>

</body>

17.<body>

var x=18;

var y=12;

window.alert(x>y);

</script>

</body>

18.<body>

var x=18;

var y=12;

window.alert(x<y);

</script>

</body>

19.<body>

var x=10;

var y=12;

window.alert(x<y);

</script>

</body>

ch-19 creating functionality with ternary operator in respected JavaScript

1.<body>

var x=6;

var y=10;

window.alert(x>=y);

</script>

</body>

2.<body>

var x=10;

var y=10;

window.alert(x>=y);

</script>

</body>

3.<body>

var x=10;

var y=10;

window.alert(x<=y);

</script>

</body>

4.<body>

var x=100;

var y=10;

window.alert(x<=y);

</script>

</body>

5.<body>

var x=100;

var y=10;

document.getElementById("result").innerHTML=x<=y;

</script>

</body>

6.<body>

var x=100;

var y=10;

var z=document.getElementById("result");

z.innerHTML=x<=y

</script>

</body>

7.<body>

<form>

username

<br>

</form>

function wap()

{

var x=document.getElementById("user").value;

x=="saurav" ? window.alert("user found") : window.alert("user not found");

}

</script>

</body>

ch-20 concept clearation of ternary operator in respected JavaScript

1.<body>

<form>

username<br>

</form>

function wap()

{

var x=document.getElementById("user").value;

x=="saurav" ? window.alert("match found"):window.alert("match not found");

}

</script>

</body>

2.<body>

<form>

username<br>

</form>

function wap()

{

var x=document.getElementById("user").value;

var y=x=="saurav" ? "match found" : "match not found";

window.alert(y);

}

</script>

</body>

3.<body>

<h1 align="center">Even and Odd finder</h1>

<form>

<button onclick="return wap()">check even or odd now</button>

</form>

function wap()

{

var x=document.getElementById("user").value;

var y=x%2==0 ? "even number" : "odd number";

document.getElementById("result").innerHTML=y;

return false;

}

</script>

</body>

4.<body>

<h1 align="center">Even and Odd finder</h1>

<form>

</form>

function wap()

{

var x=document.getElementById("user").value;

var y=x%2==0 ? "even number" : "odd number";

document.getElementById("result").innerHTML=y;

return false;

}

</script>

</body>

5.<body>

<h1 align="center">Even and Odd finder</h1>

<form>

</form>

function wap()

{

var x=document.getElementById("user").value;

var y=x%2==0 ? " is even number" : " is odd number";

document.getElementById("result").innerHTML=x+y;

return false;

}

</script>

</body>

6.<body>

window.prompt()

</script>

</body>

7.<body>

window.prompt("type your name here");

</script>

</body>

8.<body>

window.prompt("type your name here","ex:saurav");

</script>

</body>

9.<body>

var x=window.prompt("type your name here","ex:saurav");

x=="gaurav" ? document.write("match found") : document.write("match not found");

</script>

</body>

ch-21 form validation with logical operators in respected JavaScript

1.<body>

<form>

username<br>

password<br>

</form>

function login()

{

var user=document.getElementById("uname").value;

var pass=document.getElementById("pwd").value;

user=="saurav" && pass==1234 ? window.alert("login success") : window.alert("login failed");

}

</script>

</body>

2.<body>

<form>

username<br>

password<br>

</form>

function login()

{

var user=document.getElementById("uname").value;

var pass=document.getElementById("pwd").value;

var check=user=="saurav" && pass==1234 ? "login success" : "login failed";

document.getElementById("result").innerHTML=check;

return false;

}

</script>

</body>

3.<body>

username<br>

password<br>

</form>

function login()

{

var user=document.getElementById("uname").value;

var pass=document.getElementById("pwd").value;

var check=user=="saurav" && pass==1234 ? "login success" : "login failed";

document.getElementById("result").innerHTML=check;

return false;

}

</script>

</body>

ch-22 password validation in respected JavaScript part 1

1.<head>

</head>

<body>

</body>

=>j.js

var x="saurav";

var print=x.length;

window.alert(print);

2.<head>

</head>

<body>

</body>

=>j.js

var x="98765";

var print=x.length;

window.alert(print);

3.<head>

</head>

<body>

<form>

<button onclick="demo()">check length</button></form>

</body>

=>j.js

function demo()

{

var x=document.getElementById("user").value;

var print=x.length;

window.alert(print);

}

4.<head>

</head>

<body>

<form>

password

</form>

</body>

=>j.js

function phint()

{

var x=document.getElementById("hint");

x.innerHTML="Enter minimum 10 digit password";

}

ch-22 password validation in respected JavaScript part 2

1.<head>

</head>

<body>

<form>

password

</form>

</body>

=>j.js

function phint()

{

var x=document.getElementById("hint");

x.innerHTML="Enter minimum 10 digit password";

}

function pcheck()

{

var hint=document.getElementById("hint");

hint.style.display="none";

var loader=document.getElementById("loader");

loader.style.opacity="1";

var uinput=document.getElementById("password").value;

uinput.length>10?loader.style.opacity="0": loader.style.opacity="1";

var check=document.getElementById("tick");

uinput.length>10?check.style.opacity="1" :uinput.style.opacity="0";

}

ch-23 advanced password validation with RegExp in respected

JavaScript

1.<body>

var x="i am going to class";

var y=x.match("ddd");

window.alert(y);

</script>

</body>

2.<body>

var x="i am going to class";

var y=x.match("going");

window.alert(y);

</script>

</body>

3.<body>

var x="i am going to class";

var y=x.match("a");

window.alert(y);

</script>

</body>

4.<body>

<form>

email<br>

<br>

function demo()

{

var x=document.getElementById("email").value;

x.match("@yahoomail.com")?window.alert("accepted"):window.alert("not accepted");

}

</script>

</body>

5.<head>

</head>

<body>

<form>

password<br>

<p id="upper">Uppercase required</p>

<p id="lower">Lowercae required</p>

<p id="num">Number required</p>

</div>

</form>

</body>

=>c.css

@charset "utf-8";

form{

font-size:20px;

color:#323232;

font-family:sans-serif;

}

#password{

width:250px;

padding:10px;

border:1px solid #ccc;

float:left;

}

#icon{

float:left;

font-size:25px;

padding:10px;

display:none;

}

#message{

float:left;

width:250px;

height:auto;

border:1px solid #ccc;

margin-top:1px;

clear:left;

display:none;

}

#upper,#lower,#num{

margin:10px;

font-size:18px;

font-family:calibri;

}

#password:focus{

outline:none;

}

=>j.js

function show_message()

{

var message=document.getElementById("message");

message.style.display="block";

message.style.color="red";

}

function check()

{

var icon=document.getElementById("icon");

var message=document.getElementById("message");

var user=document.getElementById("password").value;

var p_upper=document.getElementById("upper");

var p_lower=document.getElementById("lower");

var p_num=document.getElementById("num");

var capital=/[A-Z]/g;

var small=/[a-z]/g;

var number=/[0-9]/g;

user.match(capital)?p_upper.style.display="none" : p_upper.style.display="block";

user.match(small)?p_lower.style.display="none" : p_lower.style.display="block";

user.match(number)?p_num.style.display="none" : p_num.style.display="block";

user.match(capital)&&user.match(small)&&user.match(number)?message.style.display="none" : message.style.display="block";

user.match(capital)&&user.match(small)&&user.match(number)?icon.style.display="block" : icon.style.display="none";

}

ch-24 complete form validation in respected JavaScript part 1

1.<body>

<button id="wap">click me</button>

var x=document.getElementById("wap");

x.onclick=function demo()

{

window.alert("dear wap");

}

</script>

</body>

2.<body>

<button>click me</button>

<h1 id="wap">click me</h1>

var x=document.getElementById("wap");

x.onclick=function demo()

{

window.alert("dear wap");

}

</script>

</body>

3.<body>

<h1 id="demo">wap institute</h1>

<button onclick="wap()">click me to change h1 position</button>

function wap()

{

var x=document.getElementById("demo");

x.setAttribute("align","center");

}

</script>

</body>

4.<body id="bg">

<h1 id="demo">wap institute</h1>

<button onclick="wap()">click me to change h1 position</button>

<button onclick="bg()">click me to change the bg of body</button>

function wap()

{

var x=document.getElementById("demo");

x.setAttribute("align","center");

}

function bg()

{

var x=document.getElementById("bg");

x.setAttribute("bgcolor","red");

}

</script>

</body>

ch-24 complete form validation in respected JavaScript part 2,3,4,5,6,7

1.<body>

<form>

<button onclick="demo()">check now</button>

</form>

function demo()

{

var x=document.getElementById("user").value;

window.alert(x.charAt(0));

}

</script>

</body>

2.<body>

<form>

<button onclick="demo()">check now</button>

</form>

function demo()

{

var x=document.getElementById("user").value;

window.alert(x.charAt(2));

}

</script>

</body>

3.<body>

<form>

<button onclick="demo()">check now</button>

</form>

function demo()

{

var x=document.getElementById("user").value;

isNaN(x)?window.alert("please enter a number only"):window.alert("your input is a number");

}

</script>

</body>

4.<head>

</head>

<body>

<form>

Firstname<br>

Lastname<br>

Mobile<br>

Re-mobile<br>

Email<br>

<span id="gmail" style="color:red;cursor:pointer;" onclick="gmail()">gmail.com</span>

<span id="yahoo" style="color:blue;margin-left:3px;cursor:pointer;" onclick="yahoo()">yahoomail.com</span>

</div>

Username<br>

Password<br>

</fieldset>

</body>

=>j.js

function fname_val()

{

var fname=document.getElementById("firstname").value;

var input=document.getElementById("firstname");

var check=document.getElementById("tick");

fname == "" ? input.setAttribute("value","This field is empty") : check.style.display="inline";

fname == "" ? input.setAttribute("class","animated infinite bounce") : check.style.display="inline";

fname == "" ? input.style.color="red" : check.style.display="inline";

fname == "" ? input.style.border="1px solid red" : check.style.display="inline";

}

function fname_val_close()

{

var fname=document.getElementById("firstname").value;

var input=document.getElementById("firstname");

fname == "This field is empty" ? input.setAttribute("value","") : check.style.display="inline";

fname == "This field is empty" ? input.setAttribute("class","") : check.style.display="inline";

fname == "This field is empty" ? input.style.color="black" : check.style.display="inline";

fname == "This field is empty" ? input.style.border="1px solid #ccc" : check.style.display="inline";

}

function lname_val()

{

var lname=document.getElementById("lastname").value;

var input=document.getElementById("lastname");

var check=document.getElementById("lcheck");

lname == "" ? input.setAttribute("value","This field is empty") : check.style.display="inline";

lname == "" ? input.setAttribute("class","animated infinite bounce") : check.style.display="inline";

lname == "" ? input.style.color="red" : check.style.display="inline";

lname == "" ? input.style.border="1px solid red" : check.style.display="inline";

}

function lname_val_close()

{

var lname=document.getElementById("lastname").value;

var input=document.getElementById("lastname");

lname == "This field is empty" ? input.setAttribute("value","") : check.style.display="inline";

lname == "This field is empty" ? input.setAttribute("class","") : check.style.display="inline";

lname == "This field is empty" ? input.style.color="black" : check.style.display="inline";

lname == "This field is empty" ? input.style.border="1px solid #ccc" : check.style.display="inline";

}

function mobile_val()

{

var mobile=document.getElementById("mobile").value;

var input=document.getElementById("mobile");

var check=document.getElementById("mcheck");

var check_digit_legth=mobile == "" ? input.setAttribute("value","this field is empty") : mobile;

var check_digit_legth=mobile == "" ? input.setAttribute("style","color:red;border:1px solid red") : mobile;

var check_digit_legth=mobile == "" ? input.setAttribute("class","animated infinite bounce") : mobile;

var digit_check=check_digit_legth.length == 10 ?check_digit_legth : window.alert("Enter only 10 digit mobile number");

digit_check.charAt(0) == 9 || digit_check.charAt(0) == 8 || digit_check.charAt(0) == 7 ? check.style.display="inline" : window.alert("Enter indian number only");

}

function mobile_stop_val()

{

var input=document.getElementById("mobile");

input.setAttribute("value","");

input.setAttribute("style","color:black;border:1px solid #ccc");

input.setAttribute("class","");

}

function remobile_val()

{

var mobile=document.getElementById("mobile").value;

var remobile=document.getElementById("remobile").value;

var retick=document.getElementById("retick");

var input=document.getElementById("remobile");

var check=remobile == "" ? window.alert("Empty field") : remobile;

check == mobile ? retick.style.display="inline" : window.alert("Not matched with mobile number");

}

function email_val()

{

var email=document.getElementById("email").value;

var hint=document.getElementById("email-hint");

email.match('@') ? hint.style.display="inline" : hint.style.display="none";

email.match("gmail.com") ? hint.style.display="none" : email;

email.match("yahoomail.com") ? hint.style.display="none" : email;

}

function gmail()

{

var email=document.getElementById("email").value;

var input=document.getElementById("email");

input.value=email+"gmail.com";

var hint=document.getElementById("email-hint");

hint.style.display="none";

}

function yahoo()

{

var email=document.getElementById("email").value;

var input=document.getElementById("email");

input.value=email+"yahoomail.com";

var hint=document.getElementById("email-hint");

hint.style.display="none";

}

function uname_val()

{

var fname=document.getElementById("firstname").value;

var lname=document.getElementById("lastname").value;

var uname=document.getElementById("username");

uname.setAttribute("value",fname+lname);

uname.setAttribute("disabled","disabled");

}

function pass_val()

{

var pwd=document.getElementById("password").value;

var input=document.getElementById("password");

var check=document.getElementById("pcheck");

var upper=/[A-Z]/g;

var lower=/[a-z]/g;

var num=/[0-9]/g;

var alpha=/[~|`|!|@|#|$|%|^|&|*|(|_|-|+=]/g;

var check_upper=pwd == "" ? input.value="Empty field" : pwd;

var check_lower=check_upper.charAt(0).match(upper) ? check_upper : window.alert("First letter should be capital");

var number=check_lower.match(lower) ? check_lower : window.alert("use atleast one small latter");

var check_alpha=number.match(num) ? number : window.alert("use atleast one number");

var check_length=check_alpha.match(alpha) ? check_alpha : window.alert("use atleast one alpha numeric character");

check_length.length>6 ? check.style.display="inline" : window.alert("week password type atleast 6 digit password");

}

function submit_val()

{

var fname=document.getElementById("firstname").value;

var lname=document.getElementById("lastname").value;

var mobile=document.getElementById("mobile").value;

var remobile=document.getElementById("remobile").value;

var email=document.getElementById("email").value;

var uname=document.getElementById("username").value;

var pass=document.getElementById("password").value;

var btn=document.getElementById("submit");

fname,lname,mobile,remobile,email,uname,pass = "" ? btn.disabled=true : btn.disabled=false;

fname,lname,mobile,remobile,email,uname,pass = "" ? btn.disabled=true : btn.style.backgroundColor="red";

fname,lname,mobile,remobile,email,uname,pass = "" ? btn.disabled=true : btn.style.cursor="pointer";

}

ch-25 code editor development in respected JavaScript

1.<head>

<style>

*{box-sizing:border-box;}

body{paddding:0;margin:0;}

header{

width:100%;

height:80px;

background:#FF4E00;

color:white;

float:left;

position:fixed;

top:0;

left:0;

}

#header{

font-family:sans-serif;

text-align:center;

}

footer{

width:10%;

height:40px;

background:#FF4E00;

float:left;

position:fixed;

bottom:10px;

left:35.5%;

border-radius:4px;

box-shadow:0px 0px 5px 0px #323232;

cursor:pointer;

}

#footer{margin-top:10px;cursor:pointer;}

fieldset{

float:left;

width:600px;

height:600px;

margin-left:100px;

margin-top:95px;

border:1px solid #323232;

overflow:hidden;

}

#result{

width:100%;

height:560px;

overflow:scroll;

}

legend{

font-family:century gothic;

font-size:20px;

font-weight:bold;

}

textarea{

width:100%;

height:550px;

border:none;

font-size:18px;

font-family:century gothic;

}

textarea:focus{outline:none;}

</style>

</head>

<body>

<h1 id="header">WAP TEXT EDITOR VER - 1.0</h1>

</header>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

</textarea>

</fieldset>

<legend>Code result</legend>

</div>

</fieldset>

</footer>

function demo()

{

var x= document.getElementById("edit").value;

var y = document.getElementById("result");

y.innerHTML = x;

}

</script>

</body>

ch-26 content writing in respected JavaScript

1.<body>

<!DOCTYPE html>

<html>

<head>

<body>

</body>

</head>

</html>

</textarea>

function demo()

{

var x=document.getElementById("user").value;

var y=document.getElementById("result");

y.innerHTML=x;

}

</script>

</body>

2.<body>

var tagname=document.createElement("H1");

var tagtext=document.createTextNode("saurav sir");

tagname.appendChild(tagtext);

document.body.appendChild(tagname);

</script>

</body>

ch-27 function parameters in respected JavaScript part 1,2

1.<body>

<form>

<button onclick="a()">calculate</button>

</form>

function a()

{

var x=Number(document.getElementById("user-one").value);

var y=Number(document.getElementById("user-two").value);

add(x,y);

}

function add(a,b)

{

window.alert(a+b);

}

</script>

</body>

ch-28 function parameters with return statements in respected JavaScript

1.<body>

<form>

<button onclick="main()">calculate</button>

</form>

function main()

{

var x=Number(document.getElementById("user-one").value);

var y=Number(document.getElementById("user-two").value);

add(x,y);

}

function add(a,b)

{

window.alert(a+b);

}

</script>

</body>

2.<body>

<form>

<button onclick="return main()">calculate</button>

</form>

<h1>your addition is</h1>

<h1>your subtract is</h1>

<h1>your multiply is</h1>

<h1>your division is</h1>

function main()

{

var x=Number(document.getElementById("user-one").value);

var y=Number(document.getElementById("user-two").value);

add(x,y);

sub(x,y);

multi(x,y);

division(x,y);

return false;

}

function add(a,b)

{

var result=document.getElementById("add-result");

result.innerHTML=a+b;

}

function sub(a,b)

{

var result=document.getElementById("sub-result");

result.innerHTML=a-b;

}

function multi(a,b)

{

var result=document.getElementById("multi-result");

result.innerHTML=a*b;

}

function division(a,b)

{

var result=document.getElementById("div-result");

result.innerHTML=a/b;

}

</script>

</body>

3.<body>

<form>

<button onclick="main()">calculate</button>

</form>

function main()

{

var x=Number(document.getElementById("user-one").value);

var y=Number(document.getElementById("user-two").value);

add(x,y);

}

function add(a,b)

{

var x=a+b;

window.alert(x);

}

</script>

</body>

4.<body>

<form>

<button onclick="main()">calculate</button>

</form>

function main()

{

var x=Number(document.getElementById("user-one").value);

var y=Number(document.getElementById("user-two").value);

var z=add(x,y);

window.alert(z);

}

function add(a,b)

{

var x=a+b;

return x;

}

</script>

</body>

5.<body>

<form>

<button onclick="main()">calculate</button>

</form>

function main()

{

var x=Number(document.getElementById("user-one").value);

var y=Number(document.getElementById("user-two").value);

var z=add(x,y);

window.alert(z);

}

function add(a,b)

{

return (a+b);

}

</script>

</body>

ch-30 conditional statements in respected JavaScript part 1

1.<body>

var x=10;

var y=20;

if(x==y)

{

window.alert("hello sir");

}

</script>

</body>

2.<body>

var x=20;

var y=20;

if(x==y)

{

window.alert("hello sir");

}

</script>

</body>

3.<body>

var x=10;

var y=20;

if(x==y)

{

window.alert("hello sir");

}

else{

window.alert("hello wap");

}

</script>

</body>

4.<body>

<form>

</form>

function demo()

{

var x=document.getElementById("user").value;

if(x=="")

{

window.alert("empty field");

}

else{

window.alert("login success");

}

</script>

</body>

5.<body>

<button onclick="wap()">check</button>

function wap()

{

var x=document.getElementById("demo").innerHTML;

window.alert(x);

}

</script>

</body>

6.<body>

function demo()

{

var x=document.getElementById("result");

var btn=document.getElementById("btn");

x.style.display="none";

btn.innerHTML="show";

}

</script>

</body>

7.<body>

function demo()

{

var x=document.getElementById("result");

var btn=document.getElementById("btn");

var btntext=document.getElementById("btn").innerHTML;

x.style.display="none";

btn.innerHTML="show";

if(btntext == "show")

{

x.style.display="block";

btn.innerHTML="hide";

}

else{

x.style.display="none";

}

</script>

</body>

ch-30 conditional statements in respected JavaScript part 2

1.<body>

<form>

<button onclick="demo()">check even and odd</button>

</form>

function demo(){

var user=Number(document.getElementById("user").value);

if(user%2 == 0)

{

window.alert("your number is even");

}

else{

window.alert("your number is odd");

}

</script>

</body>

2.<head>

<style>

h1{

font-family:sans-serif;

font-size:30px;

color:red;

text-align:center;

}

button{

float:left;

border:1px solid #ccc;

background:white;

padding:10px;

margin:5px;

}

</style>

</head>

<body>

<h1 id="result">WAP INSTITUTE</h1>

<button>RESET</button>

var btn=document.getElementById("btn-out");

var result=document.getElementById("result");

btn.onclick=function first(){

result.style.fontSize="40px";

btn.onclick=function second(){

result.style.fontSize="50px";

btn.onclick=function three(){

result.style.fontSize="60px";

btn.onclick=function four(){

result.style.fontSize="70px";

}

</script>

</body>

ch-30 conditional statements in respected JavaScript part 3,4,5,6,7

1.<head>

</head>

<body>

</div>

<p id="pass-header">Use password for :</p>

<p id="pass-hint-text">(No username)</p>

</div>

<input type="checkbox" value="show password" id="check_btn"> <span id="show_text">Show password</span>

</form>

</div>

</body>

=>c.css

@charset "utf-8";

#left{

width:720px;

height:500px;

border:1px solid red;

float:left;

padding:10px;

}

#right{

width:400px;

height:500px;

border:1px solid red;

float:left;

padding:10px;

}

input{

border:1px solid #ccc;

padding:15px;

}

#firstname,#lastname{

width:49%;

border-radius:4px;

}

#mobile-email,#password{

width:400px;

border-radius:4px;

}

#firstname-wrn{

position:relative;

float:right;

left:180px;

top:13px;

display:none;

}

#lastname-wrn{

position:relative;

float:right;

left:370px;

top:13px;

display:none;

}

#fname-banner{

float:right;

position:relative;

left:15px;

display:none;

}

input:focus{

outline:none;

}

#pass-hint{

width:400px;

height:auto;

background-color:white;

border-top:1px solid black;

border-left:1px solid black;

border-right:1px solid black;

position:relative;

padding:10px;

box-sizing:border-box;

display:none;

}

#pass-header,#pass-hint-text{

font-family:calibri;

padding:0;

margin:0;

line-height:30px;

}

#pass-hint-text:hover{

background:blue;

color:white;

cursor:pointer;

}

=>j.js

var firstname_event=document.getElementById("firstname");

firstname_event.onblur=function fname_empty()

{

var fname=document.getElementById("firstname").value;

var input=document.getElementById("firstname");

var warning=document.getElementById("firstname-wrn");

var fname_banner=document.getElementById("fname-banner");

if(fname == "")

{

input.style.border="1px solid red";

warning.style.display="block";

}

input.onclick=function()

{

fname_banner.style.display="block";

input.style.border="1px solid #ccc";

warning.style.display="none";

input.style.outline="none";

input.onblur=function()

{

fname_banner.style.display="none";

fname_empty();

}

var phint=document.getElementById("pass-hint-text");

var div=document.getElementById("pass-hint");

phint.onclick=function()

{

var input=document.getElementById("password");

var p_hint=phint.innerHTML;

input.value=p_hint;

div.style.display="none";

}

var pass_input=document.getElementById("password");

pass_input.onclick=function()

{

div.style.display="block";

}

pass_input.oninput=function()

{

div.style.display="none";

}

var show_btn=document.getElementById("check_btn");

show_btn.onclick=function()

{

var showtxt=document.getElementById("show_text");

if(show_btn.checked == true)

{

pass_input.type="text";

showtxt.innerHTML="Hide password";

}

else{

pass_input.type="password";

showtxt.innerHTML="Show password";

}

var subbtn=document.getElementById("form");

subbtn.onsubmit=function()

{

var f_name=document.getElementById("firstname").value;

var l_name=document.getElementById("lastname").value;

var mobile=document.getElementById("mobile-email").value;

var pwd=document.getElementById("password").value;

var finput=document.getElementById("firstname");

var linput=document.getElementById("lastname");

var minput=document.getElementById("mobile-email");

var pwdinput=document.getElementById("password");

if(f_name=l_name=mobile=pwd=="")

{

finput.style.border="1px solid red";

linput.style.border="1px solid red";

minput.style.border="1px solid red";

pwdinput.style.border="1px solid red";

return false;

}

else{

window.alert("sign up success");

}

ch-30 conditional statements in respected JavaScript part 8

1.<head>

<style>

span{

color:red;

}

</style>

</head>

<body>

username<br>

password<br>

</form>

</body>

=>j.js

var frm=document.getElementById("form");

var user=document.getElementById("username").value;

var pass=document.getElementById("password").value;

var uerror=document.getElementById("us-error");

var perror=document.getElementById("pwd-error");

frm.onsubmit=function()

{

if(user == "ram" && pass == "1234")

{

window.location.href="https://wapinstitute.com/";

}

else{

window.alert("user not found");

}

ch-30 conditional statements in respected JavaScript part 9

1.<body>

username<br>

password<br>

</form>

</body>

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function var_collection()

{

var user=document.getElementById("username").value;

var pass=document.getElementById("password").value;

var user_error=document.getElementById("u-error");

var pass_error=document.getElementById("p-error");

login_val(user,pass,user_error,pass_error);

}

function login_val(user,pass,user_error,pass_error)

{

alert(user);

}

ch-30 conditional statements in respected JavaScript part 10

1.<head>

<style>

span{

color:red;

}

</style>

</head>

<body>

username<br>

password<br>

</form>

</body>

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function var_collection()

{

var user=document.getElementById("username").value;

var pass=document.getElementById("password").value;

var user_error=document.getElementById("u-error");

var pass_error=document.getElementById("p-error");

login_val(user,pass,user_error,pass_error);

return false;

}

function login_val(user,pass,user_error,pass_error)

{

if(user == "" && pass == "")

{

user_error.innerHTML="Empty field";

pass_error.innerHTML="Empty field";

}

if(user == "")

{

user_error.innerHTML="Empty field";

}

if(pass == "")

{

pass_error.innerHTML="Empty field";

}

if(user == "ram" && pass == "1234")

{

window.open("https://www.google.co.in/","_self");

}

if(user == "ram" && pass != "1234")

{

pass_error.innerHTML="Password does not exist";

}

if(user != "ram")

{

user_error.innerHTML="User not found";

}

ch-30 conditional statements in respected JavaScript part 11

1.<body>

<form>

<h1>vowel and consonant finder</h1>

<button id="btn">check</button>

</form>

</body>

=>j.js

var btn=document.getElementById("btn");

btn.onclick=function()

{

var user_input=document.getElementById("user").value;

var user_result=document.getElementById("result");

if(user_input == 'a')

{

user_result.innerHTML="VOWEL";

return false;

}

else if(user_input == 'e')

{

user_result.innerHTML="VOWEL";

return false;

}

else if(user_input == 'i')

{

user_result.innerHTML="VOWEL";

return false;

}

else if(user_input == 'o')

{

user_result.innerHTML="VOWEL";

return false;

}

else if(user_input == 'u')

{

user_result.innerHTML="VOWEL";

return false;

}

else{

user_result.innerHTML="CONSONANT";

return false;

}

=>j.js

var btn=document.getElementById("btn");

btn.onclick=function()

{

var user_input=document.getElementById("user").value;

var user_result=document.getElementById("result");

if(user_input == 'a')

{

user_result.innerHTML="VOWEL";

return false;

}

if(user_input == 'e')

{

user_result.innerHTML="VOWEL";

return false;

}

if(user_input == 'i')

{

user_result.innerHTML="VOWEL";

return false;

}

if(user_input == 'o')

{

user_result.innerHTML="VOWEL";

return false;

}

if(user_input == 'u')

{

user_result.innerHTML="VOWEL";

return false;

}

else{

user_result.innerHTML="CONSONANT";

return false;

}

=>j.js

var btn=document.getElementById("btn");

btn.onclick=function()

{

var user_input=document.getElementById("user").value;

var user_result=document.getElementById("result");

if(user_input == 'a' || user_input == 'e' || user_input == 'i' || user_input == 'o' || user_input == 'u')

{

user_result.innerHTML="VOWEL";

return false;

}

else{

user_result.innerHTML="CONSONANT";

return false;

}

=>j.js

var btn=document.getElementById("btn");

btn.onclick=function()

{

var user_input=document.getElementById("user").value;

var user_result=document.getElementById("result");

switch(user_input)

{

case 'a' :{user_result.innerHTML="VOWEL";return false;};

break;

case 'e' :{user_result.innerHTML="VOWEL";return false;};

break;

case 'i' :{user_result.innerHTML="VOWEL";return false;};

break;

case 'o' :{user_result.innerHTML="VOWEL";return false;};

break;

case 'u' :{user_result.innerHTML="VOWEL";return false;};

break;

default:{user_result.innerHTML="CONSONANT";return false;};

}

ch-30 conditional statements in respected JavaScript part 12

1.<body>

username<br>

password<br>

</form>

</body>

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function()

{

var u_input=document.getElementById("username").value;

var p_input=document.getElementById("password").value;

var u_error=document.getElementById("u_error");

var p_error=document.getElementById("p_error");

if(u_input == "ram" && p_input == "1234")

{

window.alert("login success");

}

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function()

{

var u_input=document.getElementById("username").value;

var p_input=document.getElementById("password").value;

var u_error=document.getElementById("u_error");

var p_error=document.getElementById("p_error");

if(u_input == "ram")

if(p_input == "1234")

{

window.alert("login success");

}

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function()

{

var u_input=document.getElementById("username").value;

var p_input=document.getElementById("password").value;

var u_error=document.getElementById("u_error");

var p_error=document.getElementById("p_error");

if(u_input == "ram")

{

if(p_input == "1234")

{

window.alert("login success");

}

else{

window.alert("password wrong");

}

else{

window.alert("user not found");

}

if(u_input == "")

{

if(p_input == "")

{

u_error.innerHTML="Empty";

p_error.innerHTML="Empty";

return false;

}

ch-31 intro to array in respected JavaScript

1.<body>

</body>

=>j.js

var x=[6,"saurav","wap"];

window.alert(x);

=>j.js

var x=[6,"saurav","wap",1,'a'];

window.alert(x);

ch-32 practical with array in respected JavaScript part 1

1.<body>

</body>

=>j.js

var x=[1,"saurav","wap"];

window.alert(x[1]);

=>j.js

var x=[1,"saurav","wap"];

window.alert(x[2]);

=>j.js

var x=[];

x[0]=1;

x[1]="saurav";

x[2]="wap";

window.alert(x);

=>j.js

var x=[];

x[0]=1;

x[1]="saurav";

x[2]="wap";

window.alert(x[1]);

=>j.js

2.<body>

<form>

<button id="btn">click</button>

</form>

</body>

=>j.js

var btn=document.getElementById("btn");

btn.onclick=function()

{

var user_input=[];

user_input[0]=document.getElementById("user").value;

window.alert(user_input[0]);

}

=>j.js

var btn=document.getElementById("btn");

btn.onclick=function()

{

var user_input=[document.getElementById("user").value,"saurav"];

window.alert(user_input);

}

=>j.js

var btn=document.getElementById("btn");

btn.onclick=function()

{

var user_input=[document.getElementById("user").value,"saurav"];

window.alert(user_input[0]);

}

=>j.js

var btn=document.getElementById("btn");

btn.onclick=function()

{

var user_input=[document.getElementById("user").value,"saurav"];

window.alert(user_input[1]);

}

3.<body>

username

password

</form>

</body>

=>j.js

btn=document.getElementById("form");

btn.onsubmit=function()

{

var user=[];

user[0]=document.getElementById("username").value;

user[1]=document.getElementById("password").value;

if(user[0] == "ram")

{

if(user[1] == "1234")

{

window.alert("login success");

}

else{

window.alert("wrong password");

}

else{

window.alert("user not found");

}

ch-32 practical with array in respected JavaScript part 2

1.array->object

var->array->object

var x=[];array

var x={};object

ch-32 practical with array in respected JavaScript part 3

1.<body>

</body>

=>j.js

var student={firstname:"mr",lastname:"saurav",mobile:9097406673};

window.alert(student.lastname);

=>j.js

var student={firstname:"mr",lastname:"saurav",mobile:9097406673};

window.alert(student.mobile);

=>j.js

var student={firstname:"mr",lastname:"saurav",mobile:9097406673};

window.alert(student.firstname+student.lastname+student.mobile);

=>j.js

var student={firstname:"mr",lastname:"saurav",mobile:9097406673};

window.alert("my name is"+student.firstname+student.lastname+student.mobile);

=>j.js

var student={firstname:"mr ",lastname:"saurav",mobile:9097406673};

window.alert("my name is "+student.firstname+student.lastname+student.mobile);

=>j.js

var student={firstname:"mr",lastname:"saurav",mobile:9097406673};

window.alert("my name is "+student.firstname+" "+student.lastname+student.mobile);

=>j.js

var student={firstname:"mr",lastname:"saurav",mobile:9097406673};

window.alert("my name is "+student.firstname+" "+student.lastname+" "+student.mobile);

2.<body>

firstname

<br>

lastname

<br>

</form>

</body>

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function(){

var user={firstname,lastname,result};

user.firstname=document.getElementById("firstname").value;

user.lastname=document.getElementById("lastname").value;

user.result=document.getElementById("result");

user.result.innerHTML=user.firstname + " "+user.lastname;

return false;

}

ch-32 practical with array in respected JavaScript part 4

1.<body>

</body>

=>j.js

var book=["english","rk singh",120.50];

window.alert(book);

=>j.js

var book=["english","rk singh",120.50];

window.alert(book[0].toString()+book[1].toString()+book[2]);

=>j.js

var book=["english","rk singh",120.50];

window.alert(book.join("$").toString());

=>j.js

var book=["english","rk singh",120.50];

window.alert(book.join(" ").toString());

=>j.js

var book=["english","rk singh",120.50];

book.push("saurav",500);

window.alert(book.toString());

=>j.js

var book=["english","rk singh",120.50,"wap","cad"];

book.pop();

window.alert(book.toString());

=>j.js

var book=["english","rk singh",120.50,"wap","cad"];

book.shift();

window.alert(book.toString());

=>j.js

var book=["english","rk singh",120.50,"wap","cad"];

book.unshift("wap institute");

window.alert(book.toString());

=>j.js

var book=["english","rk singh",120.50,"wap","cad"];

book.splice(2,3);

window.alert(book.toString());

=>j.js

var book=["english","rk singh",120.50,"wap","cad"];

book.splice(2,2);

window.alert(book.toString());

=>j.js

var book=["english","rk singh",120.50,"wap","cad"];

book.splice(2,2,"saurav","ram");

window.alert(book.toString());

=>j.js

var book=["english","rk singh",120.50,"wap","cad"];

var wap=["class","course"];

var result=book.concat(wap);

window.alert(result.toString());

=>j.js

var book=["english","rk singh",120.50,"wap","cad"];

var wap=["class","course"];

var waps=["sclass","course"];

var result=book.concat(wap,waps);

window.alert(result.toString());

=>j.js

var book=["english","rk singh",120.50,"wap","cad"];

var x=book.slice(1);

window.alert(x.toString());

=>j.js

var book=["english","rk singh",120.50,"wap","cad"];

var x=book.slice(2);

window.alert(x.toString());

ch-32 practical with array in respected JavaScript part 5

1.<body>

</body>

=>j.js

var user=['b','c','d','a'];

window.alert(user.toString());

=>j.js

var user=['b','c','d','a'];

user.sort();

window.alert(user.toString());

=>j.js

var user=['b','c','d','a'];

user.sort().reverse();

window.alert(user.toString());

=>j.js

var user=["saurav","ram","ansh","bipul"];

user.sort();

window.alert(user.toString());

=>j.js

var user=["saurav","ram","ansh","bipul"];

user.sort().reverse();

window.alert(user.toString());

=>j.js

var user=[1,5,8,11,2];

user.sort(function(x,y){return x-y});

window.alert(user.toString());

=>j.js

var user=[1,5,8,11,2];

user.sort(function(x,y){return x-y}).reverse();

window.alert(user.toString());

ch-33 intro to lopp in respected JavaScript

1.<body>

</body>

=>j.js

var i;

for(i=1;i<10;i++)

{

document.write("wap institute<br>")

}

=>j.js

var i;

for(i=1;i<=10;i++)

{

document.write("wap institute<br>")

}

=>j.js

var i;

for(i=1;i<11;i++)

{

document.write("wap institute<br>")

}

2.<body>

</form>

</body>

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function()

{

var user_text=document.getElementById("text").value;

var user_num=document.getElementById("num").value;

var result=document.getElementById("result");

var i;

for(i=1;i<=user_num;i++)

{

document.write(user_text+"<br>");

}

ch-34 practical with loop in respected JavaScript part 1

1.<body>

</body>

=>j.js

var i;

var show=document.getElementById("result");

for(i=1;i<10;i++)

{

show.innerHTML+="hello wap<br>";

}

=>j.js

var i;

var show=document.getElementById("result");

for(i=1;i<10;i++)

{

show.innerHTML+=i+"<br>";

}

=>j.js

var i;

var show=document.getElementById("result");

for(i=1;i<10;i++)

{

show.innerHTML+=i+". hello wap<br>";

}

2.<body>

<h1 align="center">Table finder</h1>

</form>

</body>

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function()

{

var unum=document.getElementById("user").value;

var i;

for(i=1;i<=10;i++)

{

document.write(unum*i+"<br>");

}

ch-34 practical with loop in respected JavaScript part 2

1.<body>

</body>

=>j.js

var user=["ram","sonu"];

window.alert(user);

=>j.js

var user=["ram","sonu"];

window.alert(user[0]+user[1]);

2.<body>

</body>

=>j.js

var user=["ram","sonu"];

var show=document.getElementById("result");

var i;

for(i=0;i<2;i++)

{

show.innerHTML+=user[0];

}

=>j.js

var user=["ram","sonu"];

var show=document.getElementById("result");

var i;

for(i=0;i<2;i++)

{

show.innerHTML+=user[i]+" ";

}

3.<body>

</form>

</body>

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function()

{

var input=document.getElementById("user").value;

var i;

for(i=1;i<=input;i++)

{

if(i%2===0)

{

document.write(i+"<br>");

}

ch-34 practical with loop in respected JavaScript part 3

1.<body>

</body>

=>j.js

var i=1;

while(i<10)

{

window.alert("hello wap");

i++;

}

=>j.js

var i=1;

do{

window.alert("hello wap");

i++;

}

while(i<10);

ch-34 practical with loop in respected JavaScript part 4

1.<body>

</body>

=>j.js

var char="saurav";

var result=char.charCodeAt(0);

window.alert(result);

=>j.js

var char="Saurav";

var result=char.charCodeAt(0);

window.alert(result);

=>j.js

var char="Saurav";

var result=char.charCodeAt(1);

window.alert(result);

=>j.js

var char="SAurav";

var result=char.charCodeAt(1);

window.alert(result);

=>j.js

var char="abcdefghijklmnopqrstuvwxyz";

var i;

var result;

for(i=0;i<26;i++)

{

result=char.charCodeAt(i);

document.write(result+"<br>");

}

=>j.js

var char="ABCDEFGHIJKLMNOPQRSTUVWXYZ";

var i;

var result;

for(i=0;i<26;i++)

{

result=char.charCodeAt(i);

document.write(result+"<br>");

}

=>j.js

var code=65;

var result=String.fromCharCode(code);

window.alert(result);

=>j.js

var code=97;

var result=String.fromCharCode(code);

window.alert(result);

=>j.js

var i,result;

for(i=0;i<255;i++)

{

result=String.fromCharCode(i);

document.write(result+"<br>");

}

=>j.js

var i,result;

for(i=0;i<255;i++)

{

result=String.fromCharCode(i);

document.write(i+" = "+result+"<br>");

}

=>j.js

var first='a';

var last='z';

var i;

var result;

for(i=first.charCodeAt(0);i<=last.charCodeAt(0);i++)

{

result=String.fromCharCode(i);

document.write(result+"<br>");

}

ch-34 practical with loop in respected JavaScript part 5

1.<body>

</form>

</body>

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function(){

var user=document.getElementById("user").value;

var i;

for(i=1;i<=user;i++)

{

document.write(i+"<br>");

}

};

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function(){

var user=document.getElementById("user").value;

var i;

var add=0;

for(i=1;i<=user;i++)

{

add=add+i;

}

document.write(add);

};

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function(){

var user=document.getElementById("user").value;

var i;

var add=0;

for(i=1;i<=user;i++)

{

if(i%2===0)

{

add=add+i;

}

document.write(add);

};

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function(){

var user=document.getElementById("user").value;

var i;

var add=0;

for(i=1;i<=user;i++)

{

if(i%2!=0)

{

add=add+i;

}

document.write(add);

};

ch-34 practical with loop in respected JavaScript part 6

1.<body>

</body>

=>j.js

var x="saurav";

window.alert(x.length);

=>j.js

var x=20;

window.alert(x.toString().length);

=>j.js

var x=45.50;

window.alert(x);

=>j.js

var x=45.50;

window.alert(parseInt(x));

=>j.js

var x=45;

window.alert(parseFloat(x));

=>j.js

var x=45;

window.alert(x%10);

=>j.js

var x=452;

window.alert(parseInt(x/10));

=>j.js

var num=42;

var lastdigit=0;

var sum=0;

lastdigit=num%10;

sum=sum+lastdigit;

num=parseInt(num/10);

lastdigit=num%10;

sum=sum+lastdigit;

num=parseInt(num/10);

window.alert(sum);

=>j.js

var num=424;

var lastdigit=0;

var sum=0;

lastdigit=num%10;

sum=sum+lastdigit;

num=parseInt(num/10);

lastdigit=num%10;

sum=sum+lastdigit;

num=parseInt(num/10);

lastdigit=num%10;

sum=sum+lastdigit;

num=parseInt(num/10);

window.alert(sum);

=>j.js

var num=4246;

var lastdigit=0;

var sum=0;

lastdigit=num%10;

sum=sum+lastdigit;

num=parseInt(num/10);

lastdigit=num%10;

sum=sum+lastdigit;

num=parseInt(num/10);

lastdigit=num%10;

sum=sum+lastdigit;

num=parseInt(num/10);

lastdigit=num%10;

sum=sum+lastdigit;

num=parseInt(num/10);

window.alert(sum);

ch-34 practical with loop in respected Javascript part 7

1.<body>

</form>

</body>

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function()

{

var num=document.getElementById("user").value;

var digit=num;

var n=digit.toString().length;

var lastdigit=0;

var sum=0;

var i;

for(i=1;i<=n;i++)

{

lastdigit=num%10;

sum=sum+lastdigit;

num=parseInt(num/10);

}

window.alert(sum);

}

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function()

{

var num=document.getElementById("user").value;

var lastdigit=0;

var sum=0;

while(num!==0)

{

lastdigit=num%10;

sum=sum+lastdigit;

num=parseInt(num/10);

}

window.alert(sum);

}

ch-34 practical with loop in respected JavaScript part 8

1.<body>

</form>

</body>

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function()

{

var num=document.getElementById("user").value;

var ld=num%10;

var rd=parseInt(num/10);

var result=ld*10+rd;

window.alert(result);

}

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function()

{

var num=document.getElementById("user").value;

var ld,result=0;

while(num!=0)

{

ld=num%10;

num=parseInt(num/10);

result=result*10+ld;

}

window.alert(result);

}

ch-34 practical with loop in respected JavaScript part 9

1.<body>

<h1 align="center">words converter</h1>

</form>

</body>

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function()

{

var result=document.getElementById("result");

var num=Number(document.getElementById("user").value);

switch(num)

{

case 0 :{result.innerHTML="zero";

return false;}

break;

case 1 :{result.innerHTML="one";

return false;}

break;

case 2 :{result.innerHTML="two";

return false;}

break;

case 3 :{result.innerHTML="three";

return false;}

break;

case 4 :{result.innerHTML="four";

return false;}

break;

case 5 :{result.innerHTML="five";

return false;}

break;

case 6 :{result.innerHTML="six";

return false;}

break;

case 7 :{result.innerHTML="seven";

return false;};

break;

case 8 :{result.innerHTML="eight";

return false;}

break;

case 9 :{result.innerHTML="nine";

return false;}

break;

default:{result.innerHTML="input error";

return false;}

}

=>j.js

var frm=document.getElementById("form");

frm.onsubmit=function()

{

var x=Number(document.getElementById("user").value);

var y=x.toString();

var z=y.length;

var i;

for(i=0;i<z;i++)

{

switch(y.charAt(i))

{

case '0' :{document.write("zero ");}

break;

case '1' :{document.write("one ");}

break;

case '2' :{document.write("two ");}

break;

case '3' :{document.write("three ");}

break;

case '4' :{document.write("four ");}

break;

case '5' :{document.write("five ");}

break;

case '6' :{document.write("six ");}

break;

case '7' :{document.write("seven ");}

break;

case '8' :{document.write("eight ");}

break;

case '9' :{document.write("nine ");}

break;

default:{document.write("input error ");}

}

2.<body>

</body>

=>j.js

var a=4;

var b=12;

var i;

for(i=1;i<=a*b;i++)

{

if(i%a === 0 && i%b === 0)

{

break;

}

window.alert(i);

ch-34 practical with loop in respected JavaScript part 10

1.<body>

</body>

=>j.js

var x=4;

var y=9;

var i;

for(i=x<y?x:y;i>=1;i--)

{

if(x%i===0 && y%i===0)

{

break;

}

window.alert("your hcf is = "+i);

2.<button onclick="window.alert('hello wap')">click</button>

</body>

3.<body>

<button onclick="demo()">click</button>

</body>

=>j.js

function demo()

{

window.alert("hello wap");

}

4.<body>

<button onclick="window.alert('hello wap');document.write('hello wap')">click</button>

</body>

5.<body>

<button onclick="this.style.color='red'">click</button>

</body>

6.<body>

<button onclick="this.style.color='red';this.style.backgroundColor='black';this.style.outline='none';this.style.border='none'">click</button>

</body>

7.<body>

<button onclick="demo(this)">click</button>

</body>

=>j.js

function demo(x)

{

x.style.backgroundColor="green";

}

8.<body>

<button title="click on me" onclick="demo(this.title)">click</button>

</body>

=>j.js

function demo(x)

{

window.alert(x);

}

9.<body>

<button title="click on me" onclick="demo(this.innerHTML)">click me to know my contents</button>

</body>

=>j.js

function demo(x)

{

window.alert(x);

}

10.<body>

</form>

</body>

ch-35 event handlers and cross browser solution in respected JavaScript

1.<body>

<button id="btn">click</button>

</body>

=>j.js

var btn=document.getElementById("btn");

btn.addEventListener("click",function(){

window.alert("hello wap");

});

=>j.js

var btn=document.getElementById("btn");

btn.addEventListener("click",demo);

function demo()

{

window.alert("hello wap");

}

2.<body>

<button id="btn">click</button>

<button onclick="remove()">remove</button><script src="j.js"></script>

</body>

=>j.js

var btn=document.getElementById("btn");

btn.addEventListener("click",demo);

function demo()

{

window.alert("hello wap");

}

function remove()

{

btn.removeEventListener("click",demo);

}

=>j.js

var btn=document.getElementById("btn");

btn.attachEvent("onclick",demo);

function demo()

{

window.alert("hello wap");

}

function remove()

{

btn.detachEvent("onclick",demo);

}

=>j.js

var btn=document.getElementById("btn");

if(btn.addEventListener)

{

btn.addEventListener("click",demo);

}

else{

btn.attachEvent("onclick",demo);

}

function demo()

{

window.alert("hello wap");

}

function remove()

{

btn.detachEvent("onclick",demo);

}

ch-36 timing interval system in respected JavaScript

1.<body>

</body>

=>j.js

function demo()

{

window.alert("hello wap");

}

demo();

=>j.js

document.write(new Date());

2.<body>

</body>

=>j.js

function show()

{

var date=new Date();

var time=date.toLocaleTimeString();

document.getElementById("time").innerHTML=time;

}

show();

=>j.js

function show()

{

var date=new Date();

var time=date.toLocaleDateString();

document.getElementById("time").innerHTML=time;

}

show();

3.<body>

<button onclick="show()">start effect</button>

</body>

=>j.js

function show()

{

setInterval(function(){window.alert("hello wap");},1000);

}

=>j.js

function show()

{

setInterval(demo,1000);

function demo()

{

window.alert("hello wap");

}

4.<body>

<button onclick="show()">start effect</button>

</body>

=>j.js

function show()

{

var result=document.getElementById("result");

var x=1;

function demo()

{

result.innerHTML=x;

}

setInterval(demo,1000);

}

=>j.js

function show()

{

var result=document.getElementById("result");

var x=1;

function demo()

{

result.innerHTML=x++;

}

setInterval(demo,1000);

}

5.<body>

<button onclick="show()">start counter</button>

<button onclick="stop()">stop counter</button>

</body>

=>j.js

var wap;

function show()

{

var result=document.getElementById("result");

var x=1;

function demo()

{

result.innerHTML=x++;

}

wap=setInterval(demo,100);

}

function stop()

{

clearInterval(wap);

}

6.<body>

</body>

=>j.js

var wap;

function show()

{

var result=document.getElementById("result");

var x=1;

function demo()

{

result.innerHTML=x++;

}

wap=setInterval(demo,100);

}

show();

=>j.js

var wap;

function show()

{

var result=document.getElementById("result");

var x=1;

function demo()

{

result.innerHTML=x++;

if(x==100)

{

clearInterval(wap);

}

wap=setInterval(demo,100);

}

show();

=>j.js

var wap;

function show()

{

var result=document.getElementById("result");

var x=5;

function demo()

{

result.innerHTML=x--;

if(x==0)

{

clearInterval(wap);

result.innerHTML="Happy Birthday"

}

wap=setInterval(demo,1000);

}

show();

ch-37 FilesReader in respected JavaScript

1.<body>

<button onclick="demo(event)">check me</button>

</body>

=>j.js

function demo(x)

{

window.alert(x.target);

}

2.<body>

</body>

=>j.js

var demo=function()

{

window.alert("welcome");

}

3.<body>

</body>

=>j.js

var demo=function(x)

{

var input=x.target;

var reader=new FileReader();

reader.onload=function()

{

var filename=reader.result;

var result=document.getElementById("result");

result.src=filename;

}

reader.readAsDataURL(input.files[0]);

}

ch-38 api coding challenge in respected JavaScript

1.<!doctype html>

<html>

<head>

<title>Untitled Document</title>

<style>

body{

overflow:hidden;

}

video{

position:fixed;

right:0;

bottom:0;

min-width:100%;

min-height:100%;

}

#controls{

min-width:100%;

min-height:100%;

background:url(images/bg.jpg);

background-size:cover;

position:fixed;

z-index:1;

top:0;

left:0;

}

input[type=file]{

min-width:100%;

height:768px;

border:1px solid red;

display:block;

position:absolute;

opacity:0;

cursor:pointer;

}

</style>

</head>

<body>

</div>

</body>

</html>

=>j.js

var demo = function(x) {

var bg = document.getElementById("controls");

bg.style.backgroundImage = "url(images/txt.jpg)";

bg.style.backgroundSize = "cover";

var input = x.target;

var reader = new FileReader();

reader.onload = function(){

var filename = reader.result;

var result = document.getElementById('result');

result.src = filename;

bg.style.display="none";

};

reader.readAsDataURL(input.files[0]);

};

ch-39 text formatting app development logic in respected JavaScript

1.<head>

</head>

<body>

<h1 id="app-name">WAP TEXT EDITOR 1.0</h1>

<button id="center" style="text-align:center">CENTER</button>

<button id="right" style="text-align:right">RIGHT</button>

<button id="delete">DELETE</button>

</header>

</body>

=>c.css

@charset "utf-8";

body{

padding:0;

margin:0;

background-color:#f5f5f5;

}

header{

width:100%;

height:140px;

position:fixed;

top:0;

left:0;

background-color:#087CFF;

}

#page{

width:70%;

height:1200px;

background-color:white;

margin:148px auto;

border:1px solid #ccc;

font-size:20px;

padding:8px;

box-sizing:border-box;

}

#page:focus{

outline:none;

}

#app-name{

color:white;

font-size:30px;

font-family:sans-serif;

text-align:center;

}

button{

width:70px;

height:40px;

background-color:white;

margin-left:40px;

}

=>j.js

var bold=document.getElementById("bold");

bold.onclick=function()

{

document.execCommand("bold");

}

var del=document.getElementById("delete");

del.onclick=function()

{

document.execCommand("delete");

}

var sup=document.getElementById("sup");

sup.onclick=function()

{

document.execCommand("superscript");

}

ch-40 intro to respected JavaScript BOM

1.<body>

<h1 id="check">wap institute</h1>

window.alert(document.getElementById('check'));

</script>

</body>

2.<body bgcolor="red">

<h1 id="check">wap institute</h1>

window.alert(document.getElementById('check'));

</script>

</body>

3.history.back()

history.forward()

history.go(0)

history.go(-1)

history.go(1)

ch-41 JavaScript BOM - working with history and secured url

1.<head>

<style>

h1{

color:red;

font-size:60px;

}

button{

padding:20px;

background:black;

color:white;

border:none;

}

</style>

</head>

<body>

<h1>welcome to the 1st page of server</h1>

<hr>

<button>Go forward</button>

</center>

history.pushState(null,null,'welcome to my page');

</script>

</body>

2.<head>

<style>

h1{

color:red;

font-size:60px;

}

button{

padding:20px;

background:black;

color:white;

border:none;

}

</style>

</head>

<body>

<h1>welcome to the 1st page of server</h1>

<hr>

<button onclick="back()">Go backward</button>

</center>

function back()

{

history.back();

}

</script>

</body>

3.<!DOCTYPE html>

<html>

<head>

<style>

h1{

color:red;

font-size:60px;

}

button{

padding:20px;

background:black;

color:white;

border:none;

}

</style>

</head>

<body>

<a href="2.html"><h1>welcome to the 1st page of server</h1></a>

<hr>

<button onclick="forward()">Go forward</button>

</center>

function forward()

{

history.forward();

}

</script>

</body>

=>2.html

<body>

<h1>welcome to 2nd page</h1>

</body>

4.<!DOCTYPE html>

<html>

<head>

<style>

h1{

color:red;

font-size:60px;

}

button{

padding:20px;

background:black;

color:white;

border:none;

}

</style>

</head>

<body>

<a href="2.html"><h1>welcome to the 1st page of server</h1></a>

<hr>

<button onclick="forward()">Go forward</button>

</center>

function forward()

{

history.forward();

}

</script>

</body>

=>2.html

<body>

<h1>welcome to 2nd page</h1>

function prev()

{

history.back();

}

</script>

</body>

=>2.html

<body>

<h1>welcome to 2nd page</h1>

function prev()

{

history.go(-1);

}

</script>

</body>

5.<!DOCTYPE html>

<html>

<head>

<style>

h1{

color:red;

font-size:60px;

}

button{

padding:20px;

background:black;

color:white;

border:none;

}

</style>

</head>

<body>

<a href="2.html"><h1>welcome to the 1st page of server</h1></a>

<hr>

<button onclick="forward()">Go forward</button>

</center>

function forward()

{

history.go(1);

}

</script>

</body>

=>2.html

<body>

<h1>welcome to 2nd page</h1>

function prev()

{

history.go(-1);

}

</script>

</body>

6.<!DOCTYPE html>

<html>

<head>

<style>

h1{

color:red;

font-size:60px;

}

button{

padding:20px;

background:black;

color:white;

border:none;

}

</style>

</head>

<body>

<a href="2.html"><h1>welcome to the 1st page of server</h1></a>

<hr>

<button onclick="forward()">reload</button>

</center>

function forward()

{

history.go(0);

}

</script>

</body>

ch-42 JavaScript BOM - webpage security and keyboard programming

1.<body>

<a href="2.html"><h1>welcome to the 1st page of server</h1></a>

<hr>

<button onclick="forward()">reload</button>

</center>

history.pushState(null,null,'welcome');

</script>

</body>

2.<body>

<a href="2.html"><h1>welcome to the 1st page of server</h1></a>

<hr>

<button onclick="forward()">reload</button>

</center>

alert(location.href);

</script>

</body>

3.<body>

<a href="2.html"><h1>welcome to the 1st page of server</h1></a>

<hr>

<button onclick="forward()">reload</button>

</center>

history.pushState(null,null,location.href);

window.onpopstate=function(){

alert('wap');

}

</script>

</body>

4.<body>

<a href="2.html"><h1>welcome to the 1st page of server</h1></a>

<hr>

<button onclick="forward()">reload</button>

</center>

history.pushState(null,null,location.href);

window.onpopstate=function(){

history.forward();

}

</script>

</body>

5.<body>

<a href="2.html"><h1>welcome to the 1st page of server</h1></a>

<hr>

<button onclick="forward()">reload</button>

</center>

history.pushState(null,null,'welcome');

history.pushState(null,null,location.href);

window.onpopstate=function(){

history.forward();

}

</script>

</body>

6.<body>

<a href="2.html"><h1>welcome to the 1st page of server</h1></a>

<hr>

<button onclick="reload()">reload</button>

</center>

function reload()

{

history.go(0);

}

history.pushState(null,null,'welcome');

history.pushState(null,null,location.href);

window.onpopstate=function(){

history.forward();

}

</script>

</body>

7.<body>

<a href="2.html"><h1>welcome to the 1st page of server</h1></a>

<hr>

<button onclick="reload()">reload</button>

</center>

function reload()

{

location.assign('https;//www.google.com');

}

history.pushState(null,null,'welcome');

history.pushState(null,null,location.href);

window.onpopstate=function(){

history.forward();

}

</script>

</body>

8.<body>

<a href="2.html"><h1>welcome to the 1st page of server</h1></a>

<hr>

<button onclick="reload()">reload</button>

</center>

function reload()

{

location.assign('http://localhost/test/1.html');

}

history.pushState(null,null,'welcome');

history.pushState(null,null,location.href);

window.onpopstate=function(){

history.forward();

}

</script>

</body>

9.<!DOCTYPE html>

<head>

<style>

h1{

color:red;

font-size:60px;

}

button{

padding:20px;

background:black;

color:white;

border:none;

}

</style>

</head>

<body>

<a href="2.html"><h1>welcome to the 1st page of server</h1></a>

<hr>

<button onclick="reload()">reload</button>

</center>

function reload()

{

location.assign('http://localhost/test/1.html');

}

history.pushState(null,null,'welcome');

history.pushState(null,null,location.href);

window.onpopstate=function(){

history.forward();

}

</script>

</body>

10.<!DOCTYPE html>

<head>

<style>

h1{

color:red;

font-size:60px;

}

button{

padding:20px;

background:black;

color:white;

border:none;

}

</style>

</head>

<body>

<a href="2.html"><h1>welcome to the 1st page of server</h1></a>

<hr>

<button onclick="reload()">reload</button>

</center>

function reload()

{

location.assign('http://localhost/test/1.html');

}

history.pushState(null,null,'welcome');

history.pushState(null,null,location.href);

window.onpopstate=function(){

history.forward();

}

document.onkeypress=function(event)

{

var result=document.getElementById('result');

result.innerHTML=event.keyCode;

}

</script>

</body>

11.<!DOCTYPE html>

<head>

<style>

h1{

color:red;

font-size:60px;

}

button{

padding:20px;

background:black;

color:white;

border:none;

}

</style>

</head>

<body>

<a href="2.html"><h1>welcome to the 1st page of server</h1></a>

<hr>

<button onclick="reload()">reload</button>

</center>

function reload()

{

location.assign('http://localhost/test/1.html');

}

history.pushState(null,null,'welcome');

history.pushState(null,null,location.href);

window.onpopstate=function(){

history.forward();

}

document.onkeydown=function(event)

{

var result=document.getElementById('result');

result.innerHTML=event.keyCode;

}

</script>

</body>

12.<!DOCTYPE html>

<head>

<style>

h1{

color:red;

font-size:60px;

}

button{

padding:20px;

background:black;

color:white;

border:none;

}

</style>

</head>

<body>

<a href="2.html"><h1>welcome to the 1st page of server</h1></a>

<hr>

<button onclick="reload()">reload</button>

</center>

function reload()

{

location.assign('http://localhost/test/1.html');

}

history.pushState(null,null,'welcome');

history.pushState(null,null,location.href);

window.onpopstate=function(){

history.forward();

}

document.onkeydown=function(a)

{

var result=document.getElementById('result');

result.innerHTML=a.keyCode;

}

</script>

</body>

13.<!DOCTYPE html>

<head>

<style>

h1{

color:red;

font-size:60px;

}

button{

padding:20px;

background:black;

color:white;

border:none;

}

</style>

</head>

<body>

<a href="2.html"><h1 id="result">welcome to the 1st page of server</h1></a>

<hr>

<button onclick="reload()">reload</button>

</center>

function reload()

{

location.assign('http://localhost/test/1.html');

}

history.pushState(null,null,'welcome');

history.pushState(null,null,location.href);

window.onpopstate=function(){

history.forward();

}

document.onkeydown=function(a)

{

var result=document.getElementById('result');

if(a.keyCode == 66)

{

result.style.color='blue';

}

</script>

</body>

14.<!DOCTYPE html>

<head>

<style>

h1{

color:red;

font-size:60px;

}

button{

padding:20px;

background:black;

color:white;

border:none;

}

</style>

</head>

<body>

<a href="2.html"><h1 id="result">welcome to the 1st page of server</h1></a>

<hr>

<button onclick="reload()">reload</button>

</center>

function reload()

{

location.assign('http://localhost/test/1.html');

}

history.pushState(null,null,'welcome');

history.pushState(null,null,location.href);

window.onpopstate=function(){

history.forward();

}

document.onkeydown=function(a)

{

var result=document.getElementById('result');

if(a.ctrlKey && a.keyCode == 66)

{

result.style.color='blue';

}

</script>

</body>

ch-43 JavaScript BOM - some important api security and development

1.<head>

<style>

form{

font-family:sans-serif;

font-size:20px;

}

input{

padding:15px;

border:1px solid #ccc;

width:80px;

margin-top:3px;

}

</style>

</head>

<body>

Enter Credit Card Number<br>

</form>

function demo()

{

alert('hello wap');

}

</script>

</body>

2.<head>

<style>

form{

font-family:sans-serif;

font-size:20px;

}

input{

padding:15px;

border:1px solid #ccc;

width:80px;

margin-top:3px;

}

</style>

</head>

<body>

Enter Credit Card Number<br>

</form>

function demo()

{

alert('hello wap');

}

</script>

</body>

3.<!DOCTYPE html>

<head>

<style>

form{

font-family:sans-serif;

font-size:20px;

}

input{

padding:15px;

border:1px solid #ccc;

width:80px;

margin-top:3px;

}

</style>

</head>

<body>

Enter Credit Card Number<br>

</form>

function demo(x,y)

{

var user=x.value.length;

var length=x.getAttribute('maxlength');

if(user==length)

{

document.getElementById(y).focus();

}

document.onkeydown=function(event){

if(event.ctrlKey && event.keyCode == 85)

{

return false;

}

document.onkeydown=function(event)

{

if(event.ctrlKey && event.shiftKey && event.keyCode == 73)

{

return false;

}

</script>

</body>

ch-44 JavaScript BOM - JavaScript cookies

1.<body>

document.cookie="store=saurav;expires=Tue, 2 Oct 2020 12:00:00 UTC";

</script>

</body>

2.<body>

alert(document.cookie);

</script>

</body>

3.<body>

alert(document.cookie.length);

</script>

</body>

4.<body onload="demo()">

function demo()

{

var name=document.cookie.split('=');

alert(name[1]);

}

</script>

</body>

5.<body onload="demo()">

function demo()

{

var name=document.cookie.split('=');

alert(name[0]);

}

</script>

</body>

ch-45 JavaScript BOM - JavaScript cookie api part 1

1.<body>

<button onclick="store()">store cookie</button>

<button onclick="read()">read cookie</button>

function store()

{

document.cookie="data=wap";

}

function read()

{

alert(document.cookie);

}

</script>

</body>

2.<body>

<button onclick="store()">store cookie</button>

<button onclick="read()">read cookie</button>

function store()

{

document.cookie="data=wap;expires=Tue,2 Oct 2020 12:00:00 UTC";

}

function read()

{

alert(document.cookie);

}

</script>

</body>

3.<body>

<button onclick="store()">store cookie</button>

<button onclick="read()">read cookie</button>

function store()

{

document.cookie="data=saurav;expires=Tue,2 Oct 2020 12:00:00 UTC";

}

function read()

{

alert(document.cookie);

}

</script>

</body>

4.<body>

<button onclick="store()">store cookie</button>

<button onclick="read()">read cookie</button>

<button onclick="del()">delete cookie</button>

function store()

{

document.cookie="data=saurav;expires=Tue,2 Oct 2020 12:00:00 UTC";

}

function read()

{

alert(document.cookie);

}

function del()

{

document.cookie="data=saurav;expires=Tue,2 Oct 1990 12:00:00 UTC";

}

</script>

</body>

5.<body>

<button onclick="store()">store cookie</button>

<button onclick="read()">read cookie</button>

<button onclick="del()">delete cookie</button>

function store()

{

var user=document.getElementById("user").value;

document.cookie="data="+user+";expires=Tue,2 Oct 2020 12:00:00 UTC";

}

function read()

{

alert(document.cookie);

}

function del()

{

document.cookie="data=saurav;expires=Tue,2 Oct 1990 12:00:00 UTC";

}

</script>

</body>

6.<body>

<button onclick="store()">store cookie</button>

<button onclick="read()">read cookie</button>

<button onclick="del()">delete cookie</button>

function store()

{

var user=document.getElementById("user").value;

document.cookie="data="+user+";expires=Tue,2 Oct 2020 12:00:00 UTC";

}

function read()

{

alert(document.cookie);

}

function del()

{

document.cookie="data=saurav;expires=Tue,2 Oct 1990 12:00:00 UTC";

document.getElementById("user").value="";

}

</script>

</body>

7.<body>

<button onclick="store()">store cookie</button>

<button onclick="read()">read cookie</button>

<button onclick="del()">delete cookie</button>

window.onload=function()

{

var name=document.cookie.split('=');

alert(name[1]);

}

function store()

{

var user=document.getElementById("user").value;

document.cookie="data="+user+";expires=Tue,2 Oct 2020 12:00:00 UTC";

}

function read()

{

alert(document.cookie);

}

function del()

{

document.cookie="data=saurav;expires=Tue,2 Oct 1990 12:00:00 UTC";

document.getElementById("user").value="";

}

</script>

</body>

8.<body>

<button onclick="store()">store cookie</button>

<button onclick="read()">read cookie</button>

<button onclick="del()">delete cookie</button>

window.onload=function()

{

var name=document.cookie.split('=');

document.getElementById("user").value=name[1];

}

function store()

{

var user=document.getElementById("user").value;

document.cookie="data="+user+";expires=Tue,2 Oct 2020 12:00:00 UTC";

}

function read()

{

alert(document.cookie);

}

function del()

{

document.cookie="data=saurav;expires=Tue,2 Oct 1990 12:00:00 UTC";

}

</script>

</body>

9.<body>

<button onclick="store()">store cookie</button>

<button onclick="read()">read cookie</button>

<button onclick="del()">delete cookie</button>

window.onload=function()

{

if(document.cookie.length!=0)

{

var name=document.cookie.split('=');

document.getElementById("user").value=name[1];

}

function store()

{

var user=document.getElementById("user").value;

document.cookie="data="+user+";expires=Tue,2 Oct 2020 12:00:00 UTC";

}

function read()

{

alert(document.cookie);

}

function del()

{

document.cookie="data=saurav;expires=Tue,2 Oct 1990 12:00:00 UTC";

}

</script>

</body>

10.<body id="webpage">

<form>

select webpage color

<br>

<input type="radio" name="color" value="red" onclick="demo(this)">Red

<input type="radio" name="color" value="green" onclick="demo(this)">Green

<input type="radio" name="color" value="yellow" onclick="demo(this)">Yellow

</form>

function demo(element)

{

var color=element.value;

var page=document.getElementById("webpage");

page.style.background=color;

}

</script>

</body>

11.<body id="webpage">

<form>

select webpage color

<br>

<input type="radio" name="color" value="red" onclick="demo(this)">Red

<input type="radio" name="color" value="green" onclick="demo(this)">Green

<input type="radio" name="color" value="yellow" onclick="demo(this)">Yellow

</form>

window.onload=function()

{

var name=document.cookie.split("=");

var page=document.getElementById("webpage");

page.style.background=name[1];

}

function demo(element)

{

var color=element.value;

var page=document.getElementById("webpage");

page.style.background=color;

document.cookie="data="+color+";expires=Tue,2 Oct 2020 12:00:00 UTC";

}

</script>

</body>

ch-46 JavaScript BOM - JavaScript cookie api part 2

1.<body id="webpage">

<form>

select webpage color

<br>

<input type="radio" name="color" value="red" onclick="demo(this)" id="first">Red

<input type="radio" name="color" value="green" onclick="demo(this)" id="second">Green

<input type="radio" name="color" value="yellow" onclick="demo(this)" id="third">Yellow

</form>

window.onload=function()

{

var name=document.cookie.split("=");

var page=document.getElementById("webpage");

page.style.background=name[1];

var first=document.getElementById("first");

var second=document.getElementById("second");

var third=document.getElementById("third");

if(first.value==name[1])

{

first.setAttribute("checked","checked");

}

if(second.value==name[1])

{

second.setAttribute("checked","checked");

}

if(third.value==name[1])

{

third.setAttribute("checked","checked");

}

function demo(element)

{

var color=element.value;

var page=document.getElementById("webpage");

page.style.background=color;

document.cookie="data="+color+";expires=Tue,2 Oct 2020 12:00:00 UTC";

}

</script>

</body>

2.<body id="webpage">

<form>

username<br>

password<br>

<input type="checkbox" value="remember" id="checkbox" onclick="remember()">Remember me !

</form>

function remember()

{

var username=document.getElementById("uname").value;

var password=document.getElementById("pwd").value;

document.cookie="user="+username+password+";expires=Tue,2 Oct 2020 12:00:00 UTC";

}

alert(document.cookie);

</script>

</body>

3.<body id="webpage">

<form>

username<br>

password<br>

<input type="checkbox" value="remember" id="checkbox" onclick="remember()">Remember me !

</form>

window.onload=function(){

var name=document.cookie.split("=");

alert(name[1]);

}

function remember()

{

var username=document.getElementById("uname").value;

var password=document.getElementById("pwd").value;

document.cookie="user="+username+password+";expires=Tue,2 Oct 2020 12:00:00 UTC";

}

</script>

</body>

4.<body id="webpage">

<form>

username<br>

password<br>

<input type="checkbox" value="remember" id="checkbox" onclick="remember()">Remember me !

</form>

window.onload=function(){

var name=document.cookie;

alert(name);

}

function remember()

{

var username=document.getElementById("uname").value;

var password=document.getElementById("pwd").value;

document.cookie="user="+username+"="+password+";expires=Tue,2 Oct 2020 12:00:00 UTC";

}

</script>

</body>

5.<body id="webpage">

<form>

username<br>

password<br>

<input type="checkbox" value="remember" id="checkbox" onclick="remember()">Remember me !

</form>

window.onload=function(){

var name=document.cookie.split("=");

alert(name[1]);

}

function remember()

{

var username=document.getElementById("uname").value;

var password=document.getElementById("pwd").value;

document.cookie="user="+username+"="+password+";expires=Tue,2 Oct 2020 12:00:00 UTC";

}

</script>

</body>

6.<body id="webpage">

<form>

username<br>

password<br>

<input type="checkbox" value="remember" id="checkbox" onclick="remember()">Remember me !

</form>

window.onload=function(){

if(document.cookie.length!=0)

{

var name=document.cookie.split("=");

document.getElementById("uname").value=name[1];

document.getElementById("pwd").value=name[2];

var check=document.getElementById("checkbox").checked="checked";

if(check=="checked")

{

document.getElementById("checkbox").onclick=function(){

document.cookie="user=;expires=Tue,2 Oct 1990 12:00:00 UTC";

}

function remember()

{

var username=document.getElementById("uname").value;

var password=document.getElementById("pwd").value;

document.cookie="user="+username+"="+password+";expires=Tue,2 Oct 2020 12:00:00 UTC";

}

</script>

</body>

ch-47 Javascript BOM - JavaScript cookie api part 3

1.<body>

<p>your download will begin in <span id="time">5</span> seconds</p>

<a href="a.jpg" download>click here if your download does not begin</a>

window.onload=function(){

var count=5;

var stop=setInterval(timer,1000);

function timer(){

var span=document.getElementById("time");

span.innerHTML=count--;

if(count<0)

{

clearInterval(stop);

var a=document.createElement("a");

a.href="a.jpg";

a.download="saurav";

a.click();

}

</script>

</body>

2.<body>

<p>your download will begin in <span id="time">5</span> seconds</p>

<a href="a.jpg" download>click here if your download does not begin</a>

window.onload=function(){

var count=5;

var stop=setInterval(timer,1000);

function timer(){

var span=document.getElementById("time");

span.innerHTML=count--;

if(count<0)

{

clearInterval(stop);

location.assign("http:google.com");

}

</script>

</body>

3.<body>

<p>your download will begin in <span id="time">5</span> seconds</p>

<a href="a.jpg" download>click here if your download does not begin</a>

window.onload=function(){

var count=5;

var stop=setInterval(timer,1000);

function timer(){

var span=document.getElementById("time");

span.innerHTML=count--;

if(count<0)

{

clearInterval(stop);

window.open("http:google.com");

}

</script>

</body>

4.<body>

<p>your download will begin in <span id="time">5</span> seconds</p>

<a href="a.jpg" download>click here if your download does not begin</a>

window.onload=function(){

var count=5;

var stop=setInterval(timer,1000);

function timer(){

var span=document.getElementById("time");

span.innerHTML=count--;

if(count<0)

{

clearInterval(stop);

window.open("http:google.com");

}

</script>

</body>

ch-48 JavaScript BOM - cookies attributes

1.<body>

<button onclick="store()">store cookie</button>

<button onclick="read()">read cookie</button></body>

function store(){

document.cookie="data=saurav;max-age=120";

}

function read(){

alert(document.cookie);

}

</script>

</body>

2.<body>

<button onclick="store()">store cookie</button>

<button onclick="read()">read cookie</button></body>

function store(){

document.cookie="data=saurav;max-age='+(60*60*24*365)+'";

}

function read(){

alert(document.cookie);

}

</script>

</body>

3.<body>

<button onclick="store()">store cookie</button>

<button onclick="read()">read cookie</button></body>

function store(){

document.cookie="data=saurav;max-age=3600;path=/";

}

function read(){

alert(document.cookie);

}

</script>

</body>

4.<body>

<button onclick="store()">store cookie</button>

<button onclick="read()">read cookie</button></body>

function store(){

document.cookie="data=saurav;max-age=3600;path=/;secure";

}

function read(){

alert(document.cookie);

}

</script>

</body>

5.<body>

email<br>

username<br>

password<br>

</form>

</body>

function store(){

var email=document.getElementById("email").value;

var username=document.getElementById("username").value;

var password=document.getElementById("password").value;

document.cookie="email="+email+";max-age=3600";

document.cookie="username="+username+";max-age=3600";

document.cookie="password="+password+";max-age=3600";

}

function read(){

alert(document.cookie);

}

</script>

</body>

6.<body>

email<br>

username<br>

password<br>

</form>

</body>

function store(){

var email=document.getElementById("email").value;

var username=document.getElementById("username").value;

var password=document.getElementById("password").value;

document.cookie="email="+email+";max-age=3600";

document.cookie="username="+username+";max-age=3600";

document.cookie="password="+password+";max-age=3600";

}

function read(){

var allcookie=document.cookie.split("; ");

alert(allcookie);

}

</script>

</body>

7.<body>

email<br>

username<br>

password<br>

</form>

</body>

function store(){

var email=document.getElementById("email").value;

var username=document.getElementById("username").value;

var password=document.getElementById("password").value;

document.cookie="email="+email+";max-age=3600";

document.cookie="username="+username+";max-age=3600";

document.cookie="password="+password+";max-age=3600";

}

function read(){

var i,allcookie=document.cookie.split("; ");

for(i=0;i<allcookie.length;i++)

{

var name=allcookie[i].split("=");

document.write(name[1]+"<br>");

}

</script>

</body>

ch-49 JavaScript BOM - window object method part 1

1.<body>

window.alert("wap \ institute");

</script>

</body>

2.<body>

window.alert("wap \........... institute");

</script>

</body>

3.<body>

window.alert("wap \\ institute");

</script>

</body>

4.<body>

window.alert('wap \"institute\"');

</script>

</body>

5.<body>

window.alert("wap \ninstitute");

</script>

</body>

6.<body>

var txt="saurav";

var enc=btoa(txt);

alert(enc);

</script>

</body>

7.<body>

var txt="saurav";

var enc=btoa(txt);

var dec=atob(enc);

alert(enc);

alert(dec);

</script>

</body>

8.<body>

function time(){

var x=new Date();

alert(x);

}

time();

</script>

</body>

9.<body>

function time(){

var x=new Date();

var y=x.toLocaleTimeString();

document.getElementById("result").innerHTML=y

}

time();

</script>

</body>

10.<body>

setInterval(time,1000);

function time(){

var x=new Date();

var y=x.toLocaleTimeString();

document.getElementById("result").innerHTML=y

}

time();

</script>

</body>

11.<body>

var timestop=setInterval(time,1000);

function time(){

var x=new Date();

var y=x.toLocaleTimeString();

document.getElementById("result").innerHTML=y

}

function stop(){

clearInterval(timestop);

}

</script>

</body>

12.<body>

function demo(){

alert("welcome");

}

setTimeout(demo,2000);

</script>

</body>

13.<body>

<h1>wait...we will automatically redirect you to on next page</h1>

function demo(){

location.assign("https://google.com");

}

setTimeout(demo,2000);

</script>

</body>

14.<body>

<button onclick="demo()">click me</button>

function demo(){

open();

}

</script>

</body>

15.<body>

<button onclick="demo()">click me</button>

function demo(){

var page=open();

page.document.body.innerHTML="welcome to my new page";

page.document.body.style.background="red";

}

</script>

</body>

16.<body>

<button onclick="demo()">click me</button>

function demo(){

var page=open("a.mp4");

}

</script>

</body>

17.<body>

<button onclick="demo()">click me</button>

function demo(){

var page=open("https://google.com","_parent");

}

</script>

</body>

18.<body>

<button onclick="demo()">click me</button>

function demo(){

var page=open("https://google.com","_blank","width=500px,height=500px,top=200px,left=500px");

}

</script>

</body>

ch-49 JavaScript BOM - window object method part 2

1.<body>

<button onclick="demo()">print property value</button>

function demo(){

var tag=document.getElementById("div");

var value=window.getComputedStyle(tag,null);

alert(value);

}

</script>

</body>

2.<body>

<button onclick="demo()">print property value</button>

function demo(){

var tag=document.getElementById("div");

var value=window.getComputedStyle(tag,null).getPropertyValue("height");

alert(value);

}

</script>

</body>

3.<body>

<button onclick="demo()">print property value</button>

function demo(){

var tag=document.getElementById("div");

var value=window.getComputedStyle(tag,null).getPropertyValue("border");

alert(value);

}

</script>

</body>

4.<body style="background:red">

<button onclick="demo()">print property and value</button>

function demo(){

var webpage=document.body;

var result="";

var object=window.getComputedStyle(webpage,null);

var i;

for(i=0;i<object.length;i++)

{

var plist=object.item(i);

result+=i + ". "+plist+" ="+object.getPropertyValue(plist)+"<hr>";

}

document.getElementById("print").innerHTML=result;

}

</script>

</body>

5.<body>

alert(navigator.onLine)

</script>

</body>

6.<body>

<h1>welcome to website</h1>

</div>

function check(){

if(navigator.onLine==true)

{

document.getElementById("webpage").style.display="block";

}

else{

document.getElementById("webpage").style.display="none";

document.getElementById("notice").innerHTML="no internet connection please on your internet";

}

check();

</script>

</body>

7.<body>

<h1>welcome to website</h1>

</div>

window.onload=function(){

setInterval(check,100);

}

function check(){

if(navigator.onLine==true)

{

document.getElementById("webpage").style.display="block";

document.getElementById("notice").innerHTML="";

}

else{

document.getElementById("webpage").style.display="none";

document.getElementById("notice").innerHTML="no internet connection please on your internet";

}

check();

</script>

</body>

ch-49 JavaScript BOM - window object method part 3

1.<head>

<style>

button{

position:fixed;

top:0;

left:0;

}

</style>

</head>

<body>

<button onclick="demo()">scroll down</button>

function demo(){

scrollBy(0,100);

}

</script>

</body>

2.<head>

<style>

button{

position:fixed;

top:0;

left:0;

}

</style>

</head>

<body>

<button onclick="demo()">scroll down</button>

function demo(){

scrollBy(0,-100);

}

</script>

</body>

3.<head>

<style>

button{

position:fixed;

top:0;

left:0;

}

</style>

</head>

<body>

<button onclick="demo()">scroll down</button>

function demo(){

scrollBy(100,0);

}

</script>

</body>

4.<head>

<style>

button{

position:fixed;

top:0;

left:0;

}

</style>

</head>

<body>

<button onclick="demo()">scroll down</button>

function demo(){

scrollBy(-100,0);

}

</script>

</body>

5.<head>

<style>

#con{

width:45%;

height:350px;

border:1px solid red;

margin:100px auto;

}

h1{

font-family:sans-serif;

text-align:center;

padding:0;

margin:0;

}

#left,#right,#product-con{

float:left;

}

#left,#right{

font-size:35px;

color:red;

margin:25% 5%;

}

#left{

margin-left:55px;

margin-right:40px;

}

#right{

margin-left:30px;

}

#product-con{

width:220px;

height:280px;

overflow:hidden;

}

#product{

border:1px solid #ccc;

width:200px;

height:250px;

float:left;

margin-right:20px;

margin-top:10px;

}

#fix-product{

width:888px;

height:250px;

float:left;

}

button{

background:white;

border:1px solid #ccc;

box-shadow:0 0 5px grey;

padding:7px;

}

</style>

</head>

<body>

<h1>product viewer</h1>

</div>

</div>

</div>

</div>

</div>

function move(x){

document.getElementById("product-con").scrollBy(x,0)

}

var media=window.matchMedia("(max-width:480px)");

function demo(media){

if(media.matches)

{

document.body.style.background="red";

}

else{

document.body.style.background="blue";

}

demo(media);

media.addListener(demo);

</script>

</body>

ch-49 JavaScript BOM - window object method part 4

1.<body>

<button onclick="wopen()">open window</button>

<button onclick="wclose()">close window</button>

function wopen(){

open("https://google.com");

}

</script>

</body>

2.<body>

<button onclick="wopen()">open window</button>

<button onclick="wclose()">close window</button>

function wopen(){

open("https://google.com","_parent");

}

</script>

</body>

3.<body>

<button onclick="wopen()">open window</button>

<button onclick="wclose()">close window</button>

var wap;

function wopen(){

wap=open("https://google.com","blank","width=500,height=500");

}

function wclose(){

wap.close();

}

</script>

</body>

4.<body>

username<br>

</form>

</script>

</body>

=>1.html

<body>

<h1>thanks</h1>

</body>

5.<body>

username<br>

</form>

function demo(){

var form=document.getElementById("form");

confirm("are you sure ?")

}

</script>

</body>

6.<body>

username<br>

</form>

function demo(){

var form=document.getElementById("form");

var x=confirm("are you sure ?");

alert(x);

}

</script>

</body>

7.<body>

username<br>

</form>

function demo(){

var form=document.getElementById("form");

var x=confirm("are you sure ?");

if(x==true)

{

form.action="2.html";

}

else{

location.reload();

}

</script>

</body>

=>1.html

<body>

<h1>thanks</h1>

</body>

8.<body>

<h1>welcome to website</h1>

<p>welcome to wap</p>

<h2>hello sir</h2>

<button onclick="wprint()">print</button>

function wprint(){

print();

}

</script>

</body>

9.<head>

<style>

@media print{

button{

display:none;

}

</style>

</head>

<body>

<h1>welcome to website</h1>

<p>welcome to wap</p>

<h2>hello sir</h2>

<button onclick="wprint()">print</button>

function wprint(){

print();

}

</script>

</body>

10.<head>

<style>

@media print{

button,h1,p{

display:none;

}

</style>

</head>

<body>

<h1>welcome to website</h1>

<p>welcome to wap</p>

<h2>hello sir</h2>

<button onclick="wprint()">print</button>

function wprint(){

print();

}

</script>

</body>

ch-50 JavaScript BOM - window object property part 1

1.<body>

var x=window.prompt("what is your name","saurav");

</script>

</body>

2.<body>

var x=window.prompt("what is your name","saurav");

if(x.match('s'))

{

alert("match found");

}

else{

alert("match not found");

}

</script>

</body>

3.<body>

var x=window.prompt("what is your name","saurav");

if(x.charAt(0).match('s'))

{

alert("match found");

}

else{

alert("match not found");

}

</script>

</body>

4.<body>

<button onclick="wopen()">open window</button>

<button onclick="wfocus()">focus</button>

var x;

function wopen(){

x=open("","","width=300,height=300");

}

function wfocus(){

x.focus();

}

</script>

</body>

5.<body>

<button onclick="wopen()">open window</button>

<button onclick="wfocus()">focus</button>

var x;

function wopen(){

x=open("","","width=300,height=300");

}

function wfocus(){

x.moveBy(250,250);

x.focus();

}

</script>

</body>

6.<body>

<button onclick="wopen()">open window</button>

<button onclick="wfocus()">focus</button>

var x;

function wopen(){

x=open("","","width=300,height=300");

}

function wfocus(){

x.moveTo(250,250);

x.focus();

}

</script>

</body>

7.<body>

<button onclick="wopen()">open window</button>

<button onclick="wfocus()">focus</button>

var x;

function wopen(){

x=open("","","width=300,height=300");

}

function wfocus(){

x.resizeBy(250,250);

x.focus();

}

</script>

</body>

8.<body>

<button onclick="wopen()">open window</button>

<button onclick="wfocus()">focus</button>

var x;

function wopen(){

x=open("","","width=300,height=300");

}

function wfocus(){

x.resizeTo(250,250);

x.focus();

}

</script>

</body>

9.<head>

<h1>please enable java script</h1>

</noscript>

</head>

<body>

<button onclick="demo()">check</button>

function demo(){

alert("hello wap");

}

</script>

</body>

10.<head>

<h1>please enable java script</h1>

<style>

#check{

display:none;

}

</style>

</noscript>

</head>

<body>

<button onclick="demo()">check</button>

</div>

function demo(){

alert("hello wap");

}

</script>

</body>

11.<body>

function demo(){

window.location="https://google.com";

}

</script>

</body>

12.<body>

<h1>please enable javascript</h1>

window.location="1.html";

</script>

</body>

=>1.html

<body>

<h1>welcome to my website</h1>

</body>

13.<body>

<h1>please enable javascript</h1>

alert(location);

</script>

</body>

14.<body>

<h1>please enable javascript</h1>

alert(location.protocol);

</script>

</body>

15.<body>

<h1>please enable javascript</h1>

alert(location.hostname);

</script>

</body>

16.<body>

alert(location.href);

</script>

</body>

17.<body>

<a href="#link">click</a>

<h1 id="link">please enable javascript</h1>

alert(location.hash);

</script>

</body>

18.<body>

<a href="#link">click</a>

<h1 id="link">please enable javascript</h1>

alert(location.pathname);

</script>

</body>

ch-50 JavaScript BOM - window object properties part 2

1.<body>

<button onclick="check()">check methods</button>

function check(){

location.assign("https://google.com");

}

</script>

</body>

2.<body>

<button onclick="check()">check methods</button>

function check(){

location.replace("https://google.com");

}

</script>

</body>

3.<body>

<button onclick="check()">check methods</button>

function check(){

location.reload();

}

</script>

</body>

4.<body>

<button onclick="check()">check methods</button>

function check(){

alert(navigator.appName);

}

</script>

</body>

5.<body>

<button onclick="check()">check methods</button>

function check(){

alert(navigator.userAgent);

}

</script>

</body>

6.<body>

<button onclick="check()">find browser</button>

function check(){

alert(navigator.userAgent.indexOf('Chrome'));

}

</script>

</body>

7.<body>

<button onclick="check()">find browser</button>

function check(){

alert(navigator.userAgent.indexOf('MSIE'));

}

</script>

</body>

8.<body>

<button onclick="check()">find browser</button>

function check(){

if((navigator.userAgent.indexOf('Opera') || navigator.userAgent.indexOf('OPR') !=-1))

{

alert("your browser is opera");

}

else if(navigator.userAgent.indexOf('Chrome') !=-1)

{

alert("your browser is chrome");

}

else if(navigator.userAgent.indexOf('Safari') !=-1)

{

alert("your browser is safari");

}

else if(navigator.userAgent.indexOf('Firefox') !=-1)

{

alert("your browser is firefox");

}

else if((navigator.userAgent.indexOf('MSIE') !=-1) || (!!document.documentMode == true))

{

alert("your browser is internet explorer");

}

else{

alert("unknown");

}

</script>

</body>

ch-50 JavaScript BOM - window object property part 3

1.<body>

<h1>welcome to website</h1>

</div>

var webpage=document.getElementById("con");

if(navigator.userAgent.indexOf('Chrome') !=-1)

{

webpage.style.display="block";

}

else{

document.body.innerHTML="please open the website in chrome browser";

}

</script>

</body>

2.<body>

<button onclick="store()">store cookie</button>

<button onclick="read()">read cookie</button>

<button onclick="del()">delete cookie</button>

function store(){

document.cookie="user = saurav;max-age=3600";

}

function read(){

var name=document.cookie.split("=");

alert(name[1]);

}

function del(){

document.cookie="user =;max-age0";

}

</script>

</body>

3.<body>

<button onclick="store()">store cookie</button>

<button onclick="read()">read cookie</button>

<button onclick="del()">delete cookie</button>

</form>

function store(){

document.cookie="user = saurav;max-age=3600";

}

function read(){

var name=document.cookie.split("=");

alert(name[1]);

}

function del(){

document.cookie="user =;max-age0";

}

function find(){

var data=document.getElementById("search").value;

if(document.cookie.indexOf(data)!=-1)

{

var name=document.cookie.split("=");

alert("cookies found "+name[1]);

}

else{

alert("cookies not found");

}

</script>

</body>

4.<body>

<button onclick="store()">store cookie</button>

<button onclick="read()">read cookie</button>

<button onclick="del()">delete cookie</button>

</form>

function store(){

document.cookie="user = saurav;max-age=3600";

}

function read(){

var name=document.cookie.split("=");

alert(name[1]);

}

function del(){

document.cookie="user =;max-age0";

}

function find(){

var data=document.getElementById("search").value;

if(document.cookie.indexOf(data)!=-1)

{

var name=document.cookie.split("=");

alert("cookies found "+name);

}

else{

alert("cookies not found");

}

</script>

</body>

5.<body>

prompt("enter your name","");

</script>

</body>

6.<body>

prompt("enter your name","ewe");

</script>

</body>

7.<body>

<h1>welcome to my website</h1>

window.onload=function(){

if(document.cookie.indexOf('user')!=-1)

{

var name=document.cookie.split("=");

alert("welcome back "+name[1]);

}

else{

var data=prompt("enter your name");

document.cookie="user="+data+";max-age=3600";

}

</script>

</body>

8.<body>

<h1>welcome to my website</h1>

window.onload=function(){

if(document.cookie.indexOf('user')!=-1)

{

var name=document.cookie.split("=");

alert("welcome back "+name[1]);

}

else{

var data=prompt("enter your name");

if(data=="")

{

alert("please write your name in input field");

location.reload();

}

else{

document.cookie="user="+data+";max-age=3600";

}

</script>

</body>

ch-50 JavaScript BOM - window object property part 4

1.<body>

<h1>welcome to my website</h1>

<button onclick="del()">delete cookie</button>

window.onload=function(){

if(document.cookie.indexOf('user')!=-1)

{

var name=document.cookie.split("=");

alert("welcome back "+name[1]+"\n last login "+name[2]);

}

else{

var data=prompt("enter your name");

if(data=="" || data==null)

{

alert("please write your name in input field");

location.reload();

}

else{

var dt=new Date();

var d=dt.toLocaleDateString();

var t=dt.toLocaleTimeString();

document.cookie="user="+data+"="+d+" "+t+";max-age=3600";

}

function del(){

document.cookie="user="+data+";max-age=3600";

}

</script>

</body>

2.<body>

<h1>welcome to my website</h1>

<button onclick="del()">delete cookie</button>

window.onload=function(){

if(navigator.cookieEnabled == true)

{

if(document.cookie.indexOf('user')!=-1)

{

var name=document.cookie.split("=");

alert("welcome back "+name[1]+"\n last login "+name[2]);

}

else{

var data=prompt("enter your name");

if(data=="" || data==null)

{

alert("please write your name in input field");

location.reload();

}

else{

var dt=new Date();

var d=dt.toLocaleDateString();

var t=dt.toLocaleTimeString();

document.cookie="user="+data+"="+d+" "+t+";max-age=3600";

}

else{

alert("please enable cookie");

}

function del(){

document.cookie="user="+data+";max-age=3600";

}

</script>

</body>

ch-50 JavaScript BOM - window object properties part 5

1.<body>

<script>

alert(typeof("saurav"));

</script>

</body>

2.<body>

<script>

alert(typeof(123));

</script>

</body>

3.<body>

<script>

if(typeof(Storage) !== "undefined")

{

alert('supported')

}

else{

alert('not supported')

}

</script>

</body>

ch-50 JavaScript BOM - window object property part 6

1.<body>

<script>

sessionStorage.setItem("name","saurav");

</script>

</body>

2.<body>

<script>

alert(sessionStorage.getItem("name"));

</script>

</body>

3.<body>

<script>

localStorage.setItem("firstname","saurav");

</script>

</body>

4.<body>

<script>

alert(localStorage.getItem("firstname"));

</script>

</body>

5.<body>

<button onclick="del()">remove data</button>

<script>

alert(localStorage.getItem("firstname"));

function del()

{

localStorage.removeItem("firstname");

}

</script>

</body>

ch-50 JavaScript BOM - window object properties part 7

1.<body>

<script>

var student={name:"saurav",course:"adse",fee:24000};

alert(student.name);

</script>

</body>

2.<body>

<script>

var student={name:"saurav",course:"adse",fee:24000};

alert(student.name+" "+student.course+" "+student.fee);

</script>

</body>

3.<body>

<form>

username<br>

<input type="text" name="username">

<br>

password<br>

<input type="password" name="password">

<br><br>

<input type="submit">

</form>

<script>

var student={name:"saurav",class:10};

window.location="https://google.com?data=saurav";

</script>

</body>

4.<body>

<form>

username<br>

<input type="text" name="username">

<br>

password<br>

<input type="password" name="password">

<br><br>

<input type="submit">

</form>

<script>

var student={name:"saurav",class:10};

window.location="https://google.com?data="+student;

</script>

</body>

5.<body>

<form>

username<br>

<input type="text" name="username">

<br>

password<br>

<input type="password" name="password">

<br><br>

<input type="submit">

</form>

<script>

var student={name:"saurav",class:10};

window.location="https://google.com?username=saurav&password=1234";

</script>

</body>

6.<body>

<form>

username<br>

<input type="text" name="username">

<br>

password<br>

<input type="password" name="password">

<br><br>

<input type="submit">

</form>

<script>

var student={name:"saurav",class:10};

var text = JSON.stringify(student);

window.location="https://google.com?data="+text;

</script>

</body>

Thursday, 27 February 2020

JAVASCRIPT

3.<body>
<button onclick="window.alert('wap institute')">click here</button>
</body>
</html>

ch-6 user defined function clearity in respected JavaScript

Thursday, 27 February 2020

JAVASCRIPT

3.<body><button onclick="window.alert('wap institute')">click here</button></body></html>

ch-6 user defined function clearity in respected JavaScript

3.<body>
<button onclick="window.alert('wap institute')">click here</button>
</body>
</html>