Scribd
Upload
17 views

Program v2v

Uploaded by

Deep gaichor
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

Program v2v

Uploaded by

Deep gaichor
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 54

1.

Set, Get, Delete, and Display Cookies


<html>
<head>
<title>Cookie Manager</title>
<script>
function setCookie() {
document.cookie = "myCookie=myValue;path=/";
}

function getCookie() {
var x = document.cookie;
alert(x);
}

function deleteCookie() {
// Also for setting expiration date
document.cookie = "myCookie=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
}

function displayCookies() {
alert("All Cookies: " + document.cookie);
}
</script>
</head>
<body>
<button onclick="setCookie()">Set Cookie</button>
<button onclick="getCookie()">Get Cookie</button>
<button onclick="deleteCookie()">Delete Cookie</button>
<button onclick="displayCookies()">Display Cookies</button>
</body>
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
</html>

Output :

2. Display value and changing color of textbox

<html>
<head>
<script>
function change(){
var x = document.getElementById("name");
x.style.backgroundColor = "red";
alert(x.value);
}
</script>
</head>
<body>
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
<input type="text" id="name">
<br><br>
<button onclick="change()">Click</button>
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
3. Opening and Closing window

<html>
<head>
<title>Open and Close Window</title>
<script>
var newWindow;
function openWin() {
newWindow = window.open("", "", "width=200,height=100,left=100,top=200");
}
function closeWin() {
newWindow.close();
}
</script>
</head>
<body>
<button onclick="openWin()">Open Window</button>
<button onclick="closeWin()">Close Window</button>
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
4. scrollBy() scrollTo() moveBy() moveTo()

<html>
<head>
<title>Window Operations Example</title>
<script>
var newWindow;

function openNewWindow() {
newWindow = window.open("", "", "width=200,height=200");
newWindow.document.write("<div style='height: 1500px;'>Scroll and move this window</div>");
}

function scrollNewWindow() {
newWindow.scrollBy(0, 100);
}

function scrollToNewWindow() {
newWindow.scrollTo(0, 600);
}

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
function moveNewWindow() {
newWindow.moveBy(150, 150);
}

function moveToNewWindow() {
newWindow.moveTo(300, 200);
}
</script>
</head>
<body onload="openNewWindow()">
<button onclick="scrollNewWindow()">Scroll By 100px</button>
<button onclick="scrollToNewWindow()">Scroll To 600px</button>
<button onclick="moveNewWindow()">Move By 150px</button>
<button onclick="moveToNewWindow()">Move To (300, 200)</button>
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
5. Opening multiple windows

<html>
<head>
<title>Window</title>
<script>
function show() {
for (let i = 0; i < 250; i += 50) {
window.open('', '', 'top=' + (i + 50) + ',width=300,height=200');
}
}
</script>
</head>
<body>
<button onclick="show()">Show Multiple Windows</button>
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
6. setTimeout() clearTimeout() setInterval() clearInterval()

<html>
<head>
<script>
function message(){
alert("V2V");
}
var msg;
function fun1(){
msg = setTimeout(message,1000);
}

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
function fun2(){
clearTimeout(msg);
}
function fun3(){
msg = setInterval(message,2000);
}
function fun4(){
clearInterval(msg);
}
</script>
</head>
<body>
<button onclick="fun1()">setTimeout</button>
<button onclick="fun2()">clearTimeout</button>
<button onclick="fun3()">setInterval</button>
<button onclick="fun4()">clearInterval</button>
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
Chapter 5
1. Modifiers

<html>
<head>
<title>Regex Modifiers Example</title>
</head>
<body>
<script>
var text = "Hello World\nhello world\nHELLO WORLD";

document.write("Case-insensitive : " + text.match(/hello/i) + "<br>");

document.write("Global : " + text.match(/hello/g) + "<br>");

document.write("Multiline : " + text.match(/hello/m) + "<br>");


</script>
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
2. Quantifiers’

<html>
<head>
<title>Quantifiers</title>
</head>
<body>
<script>
var str = "100 1000 or 10000";
document.write("+ (one or more) = " + (/1+/).test(str));

document.write("<br>* (zero more more) = " + (/2*/).test(str));

document.write("<br>? (only zero or one) = " + (/1?/).test(str));

document.write("<br>{N} (only N times in sequence) = " + (/0{8}/).test(str));

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
document.write("<br>{2,3} (only 2 or 3 times in sequence) = " + (/0{2,3}/).test(str));

document.write("<br>{2,} (2 or more times in sequence) = " + (/1{2,}/).test(str));

document.write("<br>$ (at end) = " + (/0$/).test(str));

document.write("<br>^ (at beginning) = " + (/^0/).test(str));


</script>
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
3. Matching digits and words

<html>
<head>
<title>Matching</title>
</head>
<body>
<script>
var digit = "123";
var p = ",'|{}";
var word = "hello";

//digit
document.write("\d : " + (/\d/).test(digit));
document.write("<br>\D : " + (/\D/).test(digit));

//Word
document.write("<br>\w : " + (/\w/).test(word));
document.write("<br>\W : " + (/\W/).test(word));
</script>
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
4. Match and Replace

<html>
<head>
<title>match and replace</title>
</head>
<body>
<script>
var str = "he is good man";
document.write("Match : " + str.match(/is/));
document.write("<br>Replace : " + str.replace(/good/g,"bad"));
</script>
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
5. Calling function of child window and changing content of child
window

frame1.html
<html>
<body>
<button onclick="parent.frame2.show()">Show</button>
</body>
</html>

Frame2.html
<html>
<body>
frame 2
<script>
function show(){
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
parent.frame2.location.href = "frame3.html";
}
</script>
</body>
</html>

frame3.html
<html>
<body>
<h1>Frame 3</h1>
</body>
</html>

Frame.html
<html>
<frameset rows="50%,50%">
<frame src="frame1.html">
<frame src="frame2.html" name="frame2">
</frameset>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
6. Writing in the child window
<html>
<head>
<script>
window.onload = function(){
window.frame2.document.write("<h1>hii</h1>");
}
</script>
</head>
<frameset rows="50%,50%">
<frame src="frame1.html"/>
<frame src="" name="frame2"/>
</frameset>
</html>

Output :
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
7. Accessing an element of child window

frame1.html
<html>
<body>
<form name="myForm">
<input type="text" name="text">
</form>
</body>
</html>

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
frame2.html
<html>
<body>
<script>
function change(){
parent.frame1.myForm.text.value = "V2V";
}
</script>
<button onclick="change()">Change</button>
</body>
</html>

Frame.html
<html>
<frameset rows="50%,50%">
<frame src="frame1.html" name="frame1"/>
<frame src="frame2.html"/>
</frameset>
</html>

Output:

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
8. Using iframe
<html>
<body>
<iframe width="400" height="250" src="https://www.youtube.com/embed/VubDK5nQpeY?si=BQcF9-
RzEmU1Xas8"></iframe>
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
9. Rollover
<html>
<body>
<img src="1.jpeg" height="200" width="300" name="img1">
<br><br>
<a onmouseover="javascrip:img1.src='1.jpeg'">car 1</a>
<a onmouseover="javascrip:img1.src='2.jpeg'">car 2</a>
<a onmouseover="javascrip:img1.src='3.jpeg'">car 3</a>
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
10. Regular expression methods

<html>
<head>
<title>regular expression methods</title>
</head>
<body>
<script>
var str = "V2V is best";
var reg = /V2V/;
document.write(reg.exec(str));
document.write("<br>" + reg.test(str));
document.write("<br>" + reg.toString());
document.write("<br>" + reg.toSource());
</script>
</body>

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
Chapter 6
1. Window status
<html>
<head>
<title>Status bar</title>
<script>
function showStatus(){
var win = window.open("","myWindow",'height=100,width=100');
win.status = "V2V";
}
</script>
</head>
<body onload="showStatus()">
</body>
</html>

2. Simple banner

<html>
<head>
<title>Banner</title>
<script>
var banners = new Array("c.png","python.png","java.png");
var count = 0;
function rotate(){
count ++;
if(count == banners.length){
count = 0;
}
document.img1.src = banners[count];
setTimeout(rotate,1000);

1
}
</script>
</head>
<body onload="rotate()">
<img src="c.png" name="img1" height="200" width="200">
</body>
</html>

Output :

3. Linking Banner

<html>
<head>
<title>Link Banner Ads</title>
<script language="Javascript" type="text/javascript">
Banners = new Array('c.png','python.png','java.png')
BannerLink = new Array('google.com/','vpt.edu.in/', 'msbte.org.in/');

2
CurrentBanner = 0;
NumOfBanners = Banners.length;
function LinkBanner()
{
document.location.href ="http://www." + BannerLink[CurrentBanner];
}
function DisplayBanners() {
if (document.images) {
CurrentBanner++
if (CurrentBanner == NumOfBanners) {
CurrentBanner = 0
}
document.RotateBanner.src= Banners[CurrentBanner];
setTimeout("DisplayBanners()",1000)
}
}
</script>
</head>
<body onload="DisplayBanners()" >
<center>
<a href="javascript: LinkBanner()">
<img src="c.png" width="300" height="300" name="RotateBanner" />
</a>
</center>
</body>
</html>

Output :

3
4. Slideshow

<html>
<head>
<title>Slide show</title>
<script>
var pics = new Array("c.png","python.png","java.png");
counter = 0;

function SlideShow(status){
if(document.images){
counter = counter + status;
if(counter < 0){
counter = pics.length - 1;
}
if(counter > (pics.length - 1)){
counter = 0;
}

4
document.img1.src = pics[counter];
}
}
</script>
</head>
<body>
<img src="c.png" height="300" width="300" name="img1">
<br>
<input type="button" value="Next" onclick="SlideShow(1)">
<input type="button" value="Back" onclick="SlideShow(-1)">
</body>
</html>

Output :

5
5. Changing Background Color
<html>
<head>
<title>Background Change</title>
<script>
function change(){
var color = document.getElementById("color").value;
document.body.style.backgroundColor = color;
}
</script>
</head>
<body>
<select id="color" onchange="change()">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</body>
</html>

Output :

6
6. Floating Menu

<html>
<head>
<title>Floating menu</title>
<style>
.menu{
background-color: yellowgreen;
width: 200px;
padding: 10px;
color: white;
position: fixed;
}
.menu a{
display: block;
}
</style>
</head>
<body>
<nav class="menu">
<h3>Floating Menu</h3>
<a href="C.txt">C</a>
<a href="java.txt">java</a>
<a href="python.txt">Python</a>
</nav>
</body>
</html>

Output :

7
7. Chain select menu

<html>
<head>
<title>Chain selection</title>
<script>
var IFemp = new Array("Ram","Sham");
var COemp = new Array("jon","doe");
function getEMP(branch){
var i;
//Remove all elements
for(i = document.myForm.emp.options.length - 1; i>0;i--){
document.myForm.emp.options.remove(i);
}

var dept = branch.options[branch.selectedIndex].value;


if(dept != ""){
if(dept == "1"){
for(i=1;i<=IFemp.length;i++){
document.myForm.emp.options[i] = new Option(IFemp[i-1]);
}

8
}
if(dept == "2"){
for(i=1;i<=COemp.length;i++){
document.myForm.emp.options[i] = new Option(COemp[i-1]);
}
}
}
}
</script>
</head>
<body>
<form name="myForm">

<select name="dept" onchange="getEMP(this)">


<option value="0">Department</option>
<option value="1">IF</option>
<option value="2">CO</option>
</select>

<select name="emp">
<option value="0">Employee</option>
</select>
</form>
</body>
</html>

Output :

9
8. Tab Menu

<html>
<head>
<title>Tab Menu</title>
<style>
.cityClass{
display: none;
}
</style>
<script>
function openCity(city){
var i;
var x = document.getElementsByClassName("cityClass");
for(i=0;i<x.length;i++){
x[i].style.display = "none";
}
var y = document.getElementById(city);
y.style.display = "block";
}
</script>

10
</head>
<body>
<div>
<button onclick="openCity(this.value)" value="kalyan">Kalyan</button>
<button onclick="openCity(this.value)" value="thane">Thane</button>
<button onclick="openCity(this.value)" value="csmt">CSMT</button>
</div>
<div>
<div id="kalyan" class="cityClass">
<p>This is kalyan page</p>
</div>

<div id="thane" class="cityClass">


<p>This is thane page</p>
</div>

<div id="csmt" class="cityClass">


<p>This is CSMT page</p>
</div>
</div>
</body>
</html>

Output :

11
9. Popup Menu

<html>
<head>
<title>Popup menu</title>
<style>
a{
display: block;
}
.branch{
display: none;
}
.program:hover .branch{
display: block;
}
</style>
</head>
<body>
<div class="program">
Program
<div class="branch">
<a href="#">IF</a>
<a href="#">CO</a>
<a href="#">AIML</a>
</div>
</div>
</body>
</html>

Output :

12
10. Sliding Menu

<html>
<head>
<title>Sliding menu</title>
<style>
a{
display: block;
}
.branch{
position: absolute;
background-color: yellowgreen;
padding: 10px;
width: 200px;
left: -200px;
transition: 1s ease-in-out;
}
.branch:hover{
left: 0px;
}
</style>

13
</head>
<body>
<div class="branch">
<a href="#">IF</a>
<a href="#">CO</a>
<a href="#">AIML</a>
</div>
</body>
</html>

Output :

14
11. Highlighted Menu

<html>
<head>
<style>
.link:hover{
background-color: grey;
}
</style>
</head>
<body>
<a class="link" href="#">IF</a>
<a class="link" href="#">CO</a>
<a class="link" href="#">AIML</a>
</body>
</html>

Output :

15
12. Folding tree menu

<html>
<head>
<style>
ul, #myUL {
list-style-type: none;
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
}
.caret-down::before {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari */
transform: rotate(90deg);
}
.nested {
display: none;
}
.active {
display: block;
}
</style>
</head>
<body>
<ul id="myUL">
<li><span class="caret">India</span>
<ul class="nested">
<li>Karnataka</li>
<li>Tamilnaadu</li>

16
<li><span class="caret">Maharashtra</span>
<ul class="nested">
<li>Mumbai</li>
<li>Pune</li>
<li><span class="caret">Navi Mumbai</span>
<ul class="nested">
<li>Nerul</li>
<li>Vashi</li>
<li>Panvel</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
</script>
</body>
</html>

Output :

17
13. Context menu

<html>
<head>
<style>
div {
background: yellow;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div contextmenu="mymenu">
<p>Right-click inside this box to see the context menu!
<menu type="context" id="mymenu">
<menuitem label="Refresh"></menuitem>
<menu label="Share on...">
<menuitem label="Twitter"></menuitem>
<menuitem label="Facebook"></menuitem>
18
</menu>
<menuitem label="Email This Page"></menuitem>
</menu>
</div>
</body>
</html>

14. Scrollable Menu

<html>
<head>
<style>
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
padding: 14px;
}
</style>
</head>
<body>
<div class="scrollmenu">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#support">Support</a>

19
<a href="#blog">Blog</a>
<a href="#tools">Tools</a>
<a href="#base">Base</a>
<a href="#custom">Custom</a>
<a href="#more">More</a>
<a href="#logo">Logo</a>
<a href="#friends">Friends</a>
<a href="#partners">Partners</a>
<a href="#people">People</a>
<a href="#work">Work</a>
</div>
</body>
</html>

Output :

20
15. Side Bar

<html>
<head>
<style>
.sidebar{
position:fixed;
background-color: pink;
padding:10px;
}
.sidebar a{
display:block;
}
</style>
</head>
<body>
<div class="sidebar">
<a href="#home"> Home</a>
<a href="#vision">Vision </a>
<a href="#mission"> Mission</a>
<a href="#prog">Programs</a>
</div>
</body>
</html>

Output :

21
16. Disabling right click

<html>
<head>
<script>
window.onload = function(){
document.addEventListener("contextmenu", function(e){
e.preventDefault();
}, false);}
</script>
</head>
<body>
<h3>Right click on screen,Context Menu is disabled</h3>
</body>
</html>

Output :

22
17. Concealing Your E-mail Address
<html>
<head>
<title>Conceal Email Address</title>
<script>
function CreateEmailAddress(){
var x = 'abcxyz*c_o_m'
var y = 'mai'
var z = 'lto'
var s = '?subject=Customer Inquiry'
x = x.replace('&','@')
x = x.replace('*','.')
x = x.replace('_','')
x = x.replace('_','')
var b = y + z +':'+ x + s
window.location=b;
}
</script>
</head>
<body>
<input type="button" value="send" onclick="CreateEmailAddress()">
</body>
</html>

23
Other Program

1. Calling function of child window

frame1.html
<html>
<body>
<button onclick="parent.frame2.show()">Show</button>
</body>
</html>

Frame2.html
<html>
<body>
frame 2
<script>
function show(){
alert("hii");
}
</script>
</body>
</html>

Frame.html
<html>
<frameset rows="50%,50%">
<frame src="frame1.html">
<frame src="frame2.html" name="frame2">
</frameset>
</html>

24
Output :

2. changing content of child window


frame1.html
<html>
<body>
<button onclick="parent.frame2.show()">Show</button>
</body>
</html>

Frame2.html
<html>
<body>
frame 2
<script>
function show(){
parent.frame2.location.href = "frame3.html";
}

25
</script>
</body>
</html>

frame3.html
<html>
<body>
<h1>Frame 3</h1>
</body>
</html>

Frame.html
<html>
<frameset rows="50%,50%">
<frame src="frame1.html">
<frame src="frame2.html" name="frame2">
</frameset>
</html>

Output :

26
3. Regular expression

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validation Example</title>
</head>
<body>
<h2>Validation Form</h2>
<form id="validationForm">
Email:<input type="text" id="email"><br><br>
Name:<input type="text" id="name"><br><br>
Aadhaar Number:<input type="text" id="aadhaar"><br><br>
IP Address:<input type="text" id="ip"><br><br>
Phone Number:<input type="text" id="phone"><br><br>
Pincode:<input type="text" id="pincode"><br><br>
<button type="button" onclick="validateForm()">Validate</button>
</form>

<script>
function validateForm() {
var email = document.getElementById("email").value;
var name = document.getElementById("name").value;
var aadhaar = document.getElementById("aadhaar").value;
var ip = document.getElementById("ip").value;
var phone = document.getElementById("phone").value;
var pincode = document.getElementById("pincode").value;

27
var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
var namePattern = /^[A-Za-z\s]+$/;
var aadhaarPattern = /^\d{12}$/;
var ipPattern = /^(\d{1,3}\.){3}\d{1,3}$/;
var phonePattern = /^\d{10}$/;
var pincodePattern = /^\d{6}$/;

if (!emailPattern.test(email)) {
alert("Invalid email ID");
} else if (!namePattern.test(name)) {
alert("Invalid name");
} else if (!aadhaarPattern.test(aadhaar)) {
alert("Invalid Aadhaar number");
} else if (!ipPattern.test(ip)) {
alert("Invalid IP address");
} else if (!phonePattern.test(phone)) {
alert("Invalid phone number");
} else if (!pincodePattern.test(pincode)) {
alert("Invalid pincode");
} else {
alert("All inputs are valid");
}
}
</script>
</body>
</html>

Output :

28
4. Text rollover
<html>
<head>
<title>Text rollover</title>
<script>
function show1(){
document.getElementById("text").value = "Mouse in";
}
function show2(){
document.getElementById("text").value = "Mouse out";
}
</script>
</head>
<body>
<textarea id="text" onmouseover="show1()" onmouseout="show2()"></textarea>
</body>
</html>

29
Output :

30

You might also like