Scribd
Upload
25 views54 pages

Program v2v

Uploaded by

Deep gaichor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views54 pages

Program v2v

Uploaded by

Deep gaichor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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