0% found this document useful (0 votes)

24 views

All CSS Program By Rajan Sir V2V

Css all programs

Uploaded by

Udayan Gaikawad

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

24 views

All CSS Program By Rajan Sir V2V

Css all programs

Uploaded by

Udayan Gaikawad

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 64

Chapter 1

1. Creating Object
<html>
<body>
<script>
// Method 1: Single object using object literal
var student = {
name : "Ram",
marks : 99
};

// Method 2: Using new key word, using instance of Object

var emp = new Object();
emp.name = "Sham";
emp.salary = 100000;

// Method 3: Using object constructor

function car(brand,color){
this.brand = brand;
this.color = color;
}
c = new car("Audi","Black");
</script>
</body>
</html>

2. Display the current date and time

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
1
<html>
<body>
<script>
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth() + 1;
var dd = d.getDay() + 1;
var h = d.getHours() + 1;
var m = d.getMinutes() + 1;
var s = d.getSeconds() + 1;

document.write("Current date : " + dd + "/" + m + "/" + y);

document.write("<br>Current time : " + h + ":" + m + ":" + s);
</script>
</body>
</html>

Output :

3. String Methods
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
2
<html>
<body>
<script>
var str = "A JavaScript";
document.write("Char At: " + str.charAt(4)+"<br>");
document.write("Char Code At: " + str.charCodeAt(0)+"<br>");
document.write("Index of: " + str.indexOf("p")+"<br>");
document.write("Lower Case: " + str.toLowerCase()+"<br>");
document.write("Upper Case: " + str.toUpperCase()+"<br>");
</script>
</body>
</html>

Output :

4. Simple calculator

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
3
<html>
<body>
<script>
var num1 = parseInt(prompt("Enter number 1 : "));
var num2 = parseInt(prompt("Enter number 2 : "));
var option = prompt("Enter operation to perform (ex. +,-,*,/) : ");

switch(option){
case "+" : alert(num1 + num2);
break;
case "-" : alert(num1 - num2);
break;
case "/" : alert(num1 / num2);
break;
case "*" : alert(num1 * num2);
break;
}
</script>
</body>
</html>

Output :
// alert box according to enter fields //

5. Getters and setters :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
4
<html>
<body>
<script>
var car = {
Defbrand : "Audi",
//getter
get brand(){
return this.Defbrand;
},
// setters
set brand(value){
this.Defbrand = value;
},
};
//Getter
document.write("Brand : " + car.Defbrand);
//setter
car.brand = "Maruti";
document.write("<br>Brand : " + car.Defbrand);
</script>
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
5
Chapter 2
1. Sorting and reversing array

<html>
<body>
<script>
var arr = new Array("Ram","Sham","Om");
document.write("Sorted array : " + arr.sort());
document.write("<br>Reversing array : " + arr.reverse());
</script>
</body>
</html>

Output :

2. Adding and removing elements from array

<html>
<body>
<script>
var arr = new Array("a1","a2","a3");
arr.push("a4");
document.write("Push : " + arr);
arr.pop();
document.write("<br>Pop : " + arr);

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
6
arr.unshift("a0");
document.write("<br>Unshift : " + arr);
arr.shift();
document.write("<br>Shift : " + arr);
</script>
</body>
</html>

Output :

3. Calling function from HTML

<html>
<head>
<script>
function welcome(){
alert("welcome");
}
function bye(){
alert("bye");
}
</script>
</head>
<body onload="welcome()" onunload="bye()">
</body>
</html>
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
7
Chapter 3
1. Display input contents

<html>
<head>
<script>
function show(){
var name = document.getElementById("demo").value;
alert("Name : " + name);
}
</script>
</head>
<body>
Enter name : <input type="text" id="demo"><br>
<button onclick="show()">show</button>
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
8
2. Changing style of contents/ elements
(Changing color of text of <p> tag and its background )

<html>
<head>
<script>
function change(){
var x = document.getElementsByTagName("p");
var i;
for(i=0;i<x.length;i++){
x[i].style.color = "red";
x[i].style.backgroundColor = "Pink";
}
}
</script>
</head>
<body>
<p>V2V</p>
<p>Best for diploma</p>
<button onclick="change()">Change</button>
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
9
3. Changing inner text

<html>
<head>
<script>
function load(){
document.getElementById("demo").innerHTML = "This text is added dynamically";
}
</script>
</head>
<body onload="load()">
<p id="demo"></p>
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
10
4. All elements of in form

<html>
<body>
<form>
Enter your name : <input type="text"><br><br>
Select gender :
<input type="radio" name="grp1" checked="true"> Male
<input type="radio" name="grp1"> Female
<br><br>

Select colors :
<input type="checkbox" name="grp2" checked="true"> Red
<input type="checkbox" name="grp2"> White
<input type="checkbox" name="grp2"> Black
<input type="checkbox" name="grp2"> Yellow
<br><br>

Enter address : <br>

Select City :
<select>
<option value="1">Badlapur</option>
<option value="2">Kalyan</option>
<option value="3">Thane</option>
</select>
<br><br>

<input type="submit" value="Submit">

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

Output :

5. Mouse events

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
12
6. Key events

<html>
<body>
Enter name : <input type="text" onkeydown="javascript:alert('Key down')"
onkeyup="javascript:alert('Key up')">
</body>
</html>

Output :

7. Changing option list dynamically

<html>
<head>
<script>
function Change(EventCode){
with(document.forms.myform){
if(EventCode == 1){
OptionList[0].value = 1;
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
13
OptionList[0].text = "Apple";
OptionList[1].value = 2;
OptionList[1].text = "Banana";
OptionList[2].value = 3;
OptionList[2].text = "Kiwi";
}

if(EventCode == 2){
OptionList[0].value = 1;
OptionList[0].text = "Lotus";
OptionList[1].value = 2;
OptionList[1].text = "Rose";
OptionList[2].value = 3;
OptionList[2].text = "Mogra";
}
}
}
</script>
</head>
<body>
<form name="myform">
<select name="OptionList" size="2">
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Kiwi</option>
</select>
<br><br>

<input type="radio" value="1" name="grp1" onclick="Change(this.value)"> Fruits

<input type="radio" value="2" name="grp1" onclick="Change(this.value)"> Flowers
<br>
<input type="reset">

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

Output :

8. Enable and disable text field

<html>
<head>
<script>
function change(){
var x = document.getElementById("demo");
x.disabled = false;
}

function noChange(){
var x = document.getElementById("demo");
x.disabled = true;
}
</script>
</head>
<body>
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
15
Enter name : <input type="text" id="demo">
<br><br>
<button onclick="change()">Enable</button>
<button onclick="noChange()">Disable</button>
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
16
Chapter 4

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>

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
17
</body>
</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>
<input type="text" id="name">
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
18
<br><br>
<button onclick="change()">Click</button>
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
19
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
20
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);
}

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

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 :

5. Opening multiple windows

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
22
<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
23
6. setTimeout() clearTimeout() setInterval() clearInterval()

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

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
24
}
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
25
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
26
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));

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>

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
27
Output :

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));
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
28
document.write("<br>\W : " + (/\W/).test(word));
</script>
</body>
</html>

Output :

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>

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
29
Output :

5. 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>

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
30
Frame.html
<html>
<frameset rows="50%,50%">
<frame src="frame1.html">
<frame src="frame2.html" name="frame2">
</frameset>
</html>

Output :

6. changing content of child window

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

Frame2.html
<html>

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
31
<body>
frame 2
<script>
function show(){
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
32
7. 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
33
8. Accessing an element of child window

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

frame2.html
<html>
<body>
<script>
function change(){
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
34
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:

9. Using iframe
<html>
<body>

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

Output :

10. 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
36
11. 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>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
37
12. 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>

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
38
<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;

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");
}
}

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

Output :

13. 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>

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
40
<body>
<textarea id="text" onmouseover="show1()" onmouseout="show2()"></textarea>
</body>
</html>

Output :

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>

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
41
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);
}
</script>
</head>
<body onload="rotate()">
<img src="c.png" name="img1" height="200" width="200">
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
42
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/');
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

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
43
}
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 :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
44
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;
}

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>

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
45
Output :

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()">

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
46
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</body>
</html>

Output :

6. Floating Menu

<html>
<head>
<title>Floating menu</title>
<style>
.menu{
background-color: yellowgreen;
width: 200px;
padding: 10px;
color: white;
position: fixed;
}

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
47
.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. Chain select menu

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
48
<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]);
}
}
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>

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
49
<option value="1">IF</option>
<option value="2">CO</option>
</select>

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

Output :

8. Tab Menu

<html>
<head>
<title>Tab Menu</title>
<style>
.cityClass{
display: none;
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
50
}
</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>
</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">

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

Output :

9. Popup Menu

<html>
<head>
<title>Popup menu</title>
<style>
a{
display: block;
}
.branch{
display: none;
}
.program:hover .branch{
display: block;
}
</style>
</head>
<body>

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
52
<div class="program">
Program
<div class="branch">
<a href="#">IF</a>
<a href="#">CO</a>
<a href="#">AIML</a>
</div>
</div>
</body>
</html>

Output :

10. Sliding Menu

<html>
<head>
<title>Sliding menu</title>
<style>
a{

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
53
display: block;
}
.branch{
position: absolute;
background-color: yellowgreen;
padding: 10px;
width: 200px;
left: -200px;
transition: 1s ease-in-out;
}
.branch:hover{
left: 0px;
}
</style>
</head>
<body>
<div class="branch">
<a href="#">IF</a>
<a href="#">CO</a>
<a href="#">AIML</a>
</div>
</body>
</html>

Output :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
54
11. Highlighted Menu

<html>
<head>
<style>
.link:hover{
background-color: grey;
}
</style>
</head>

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
55
<body>
<a class="link" href="#">IF</a>
<a class="link" href="#">CO</a>
<a class="link" href="#">AIML</a>
</body>
</html>

Output :

12. Folding tree menu

<html>
<head>
<style>
ul, #myUL {
list-style-type: none;
}
.caret::before {

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
56
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>
<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>

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
57
</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 :

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
58
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>
</menu>
<menuitem label="Email This Page"></menuitem>
</menu>
</div>
</body>
</html>

14. Scrollable Menu

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
59
<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>
<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>

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

Output :

15. Side Bar

<html>
<head>
<style>
.sidebar{
position:fixed;
background-color: pink;
padding:10px;
}
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
61
.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 :

16. Disabling right click

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
62
<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 :

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'
Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
63
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>

Free Study Material Buy Ty Diploma Buy Sy Diploma Whatsapp Group for Study Material
64

Learn JavaScript in 24 Hours
From Everand
Learn JavaScript in 24 Hours
Alex Nordeen
3.5/5 (5)
Get A Service Dog Identification Card - Alberta
No ratings yet
Get A Service Dog Identification Card - Alberta
4 pages
Configuration of Flexible Workflows For Supplier Invoices
100% (1)
Configuration of Flexible Workflows For Supplier Invoices
5 pages
HPCL - Demand Forecasting Tender - Nov 2020 PDF
No ratings yet
HPCL - Demand Forecasting Tender - Nov 2020 PDF
242 pages
02 - HTML and Javascript Intro
100% (1)
02 - HTML and Javascript Intro
8 pages
VI BCA-Web Programming - Lab Programs
80% (5)
VI BCA-Web Programming - Lab Programs
28 pages
OM - 3HAC054618 - Painting - PowerPac-en PDF
No ratings yet
OM - 3HAC054618 - Painting - PowerPac-en PDF
102 pages
Log
No ratings yet
Log
4,039 pages
Targeting Greta Thunberg: A Case Study in Online Mis/Disinformation
No ratings yet
Targeting Greta Thunberg: A Case Study in Online Mis/Disinformation
21 pages
Program v2v
No ratings yet
Program v2v
54 pages
Chapter 6
No ratings yet
Chapter 6
25 pages
Abc
No ratings yet
Abc
23 pages
CSS_ESE[1]
No ratings yet
CSS_ESE[1]
42 pages
Practical 6
No ratings yet
Practical 6
13 pages
CSS_IMP_PROGRAM
No ratings yet
CSS_IMP_PROGRAM
93 pages
hemant css practicals 1 to 4 (1)
No ratings yet
hemant css practicals 1 to 4 (1)
14 pages
IAL IT 9 WS JavaScript Functions
No ratings yet
IAL IT 9 WS JavaScript Functions
6 pages
Web Application 1-12 Program & Output
No ratings yet
Web Application 1-12 Program & Output
28 pages
Vaataanaa No. 1
No ratings yet
Vaataanaa No. 1
20 pages
Javascript Programs
No ratings yet
Javascript Programs
5 pages
JAVASCRIPT Merged
No ratings yet
JAVASCRIPT Merged
45 pages
WT LAB MANUAL-MIT
No ratings yet
WT LAB MANUAL-MIT
24 pages
WP Practical Sample Questions Solutions
No ratings yet
WP Practical Sample Questions Solutions
16 pages
Untitled Document
No ratings yet
Untitled Document
29 pages
js lab
No ratings yet
js lab
8 pages
Client Side Scripting Unit-3
No ratings yet
Client Side Scripting Unit-3
8 pages
MIT 22043 WAD JavaScript Practice Code 19 20 2022
No ratings yet
MIT 22043 WAD JavaScript Practice Code 19 20 2022
18 pages
Css-Internal and External Programs_2024
No ratings yet
Css-Internal and External Programs_2024
22 pages
CSS-pr-qb
No ratings yet
CSS-pr-qb
28 pages
Assignment No - 10 Aim: Write A Javascript Program To Demonstrate Array in Javascript. Program: 1)
No ratings yet
Assignment No - 10 Aim: Write A Javascript Program To Demonstrate Array in Javascript. Program: 1)
19 pages
15BCA0037 WD (Exercise 3) PDF
100% (1)
15BCA0037 WD (Exercise 3) PDF
25 pages
css ut1
No ratings yet
css ut1
7 pages
Mata Gujri College Fatehgarh Sahib: Submitted From: Submitted To
No ratings yet
Mata Gujri College Fatehgarh Sahib: Submitted From: Submitted To
73 pages
Web Design Lab Part-B Java Script Laboratory Manual For 3 Sem Is and Cs (2011-2012)
No ratings yet
Web Design Lab Part-B Java Script Laboratory Manual For 3 Sem Is and Cs (2011-2012)
17 pages
Web Programming 2
No ratings yet
Web Programming 2
7 pages
Web design manual-printout
No ratings yet
Web design manual-printout
13 pages
2313721033024_webprogramming2
No ratings yet
2313721033024_webprogramming2
23 pages
javascript programs
No ratings yet
javascript programs
10 pages
Web App Practical 2024_25
No ratings yet
Web App Practical 2024_25
12 pages
CSS Solved QB 22-23-1
No ratings yet
CSS Solved QB 22-23-1
12 pages
CSS Manual-1-18
No ratings yet
CSS Manual-1-18
18 pages
CSS Manual
No ratings yet
CSS Manual
28 pages
Iwd Practical Assignments
No ratings yet
Iwd Practical Assignments
24 pages
Name: B K Anirudh REG - NO: 19BIT0348: Digital Assignment 2 Web Technologies
No ratings yet
Name: B K Anirudh REG - NO: 19BIT0348: Digital Assignment 2 Web Technologies
49 pages
WebApp Material 2 2
No ratings yet
WebApp Material 2 2
36 pages
CSS 3 5 9 13 15 (1)
No ratings yet
CSS 3 5 9 13 15 (1)
5 pages
Java Script Examples
No ratings yet
Java Script Examples
29 pages
WP Lab 1 10 Part A
No ratings yet
WP Lab 1 10 Part A
23 pages
Javascript LAB Assignment LIst
No ratings yet
Javascript LAB Assignment LIst
24 pages
Program-1 Write A Javascript That Shows How A Variable'S Type Can Be Changed On-The-Fly
No ratings yet
Program-1 Write A Javascript That Shows How A Variable'S Type Can Be Changed On-The-Fly
53 pages
js programing question
No ratings yet
js programing question
5 pages
Simple Lab
No ratings yet
Simple Lab
19 pages
CSS 4m ^0 6m answers(only code)
No ratings yet
CSS 4m ^0 6m answers(only code)
17 pages
JS Students'
No ratings yet
JS Students'
58 pages
Css Answer
No ratings yet
Css Answer
10 pages
Java Script Programs
No ratings yet
Java Script Programs
14 pages
Javascript 1
No ratings yet
Javascript 1
88 pages
WP Lab 1 10 Part A 2
No ratings yet
WP Lab 1 10 Part A 2
24 pages
HTML Programs: 1. Program To Print The Colors
No ratings yet
HTML Programs: 1. Program To Print The Colors
17 pages
css exps
No ratings yet
css exps
17 pages
WP 10 prgm-2
No ratings yet
WP 10 prgm-2
15 pages
WP 20 PRGM
No ratings yet
WP 20 PRGM
26 pages
WP 10 prgm-1
No ratings yet
WP 10 prgm-1
12 pages
Css External
No ratings yet
Css External
21 pages
Lab 05
No ratings yet
Lab 05
10 pages
React Portfolio App Development: Increase your online presence and create your personal brand
From Everand
React Portfolio App Development: Increase your online presence and create your personal brand
Abdelfattah Ragab
No ratings yet
1 Hoja Tecnica ION 7400
100% (1)
1 Hoja Tecnica ION 7400
10 pages
Koyo
No ratings yet
Koyo
4 pages
Upload PDF From WF To PA30
No ratings yet
Upload PDF From WF To PA30
5 pages
Registration Form Lidat: Liebherr-Hydraulikbagger GMBH
No ratings yet
Registration Form Lidat: Liebherr-Hydraulikbagger GMBH
1 page
App 001 Reviewer
No ratings yet
App 001 Reviewer
3 pages
HSE MS Rollout Sep 2018 R3 PowerPoint Format
100% (1)
HSE MS Rollout Sep 2018 R3 PowerPoint Format
58 pages
Chapter 1 Introduction To Computer Networking INS1077
No ratings yet
Chapter 1 Introduction To Computer Networking INS1077
65 pages
Shaik Albani Web & Graphics Design
No ratings yet
Shaik Albani Web & Graphics Design
42 pages
Sequence Diagrams
No ratings yet
Sequence Diagrams
8 pages
Upload 1 Document To Download: JIS G 4303-2012 PDF
No ratings yet
Upload 1 Document To Download: JIS G 4303-2012 PDF
1 page
Experiment No - 1
No ratings yet
Experiment No - 1
13 pages
CHAPTER 4 CHOOSING BRAND ELEMENTS TO BUILD BRAND EQUITY1 (Autosaved)
No ratings yet
CHAPTER 4 CHOOSING BRAND ELEMENTS TO BUILD BRAND EQUITY1 (Autosaved)
32 pages
Anitha Resume
No ratings yet
Anitha Resume
2 pages
Ace07-Getcert - 2024.04.01 - Learning Plan
No ratings yet
Ace07-Getcert - 2024.04.01 - Learning Plan
7 pages
Building A Second Brain - The Definitive Introductory Guide
100% (2)
Building A Second Brain - The Definitive Introductory Guide
27 pages
Avijit Paul - Developer (.NET) Intern
No ratings yet
Avijit Paul - Developer (.NET) Intern
1 page
S2S Operation Procedure
No ratings yet
S2S Operation Procedure
4 pages
Alpha Pattern Generator - Generate Your Own! - Friendship-bracelets.net
No ratings yet
Alpha Pattern Generator - Generate Your Own! - Friendship-bracelets.net
1 page
Yu Cheats Bot Nitro Type
No ratings yet
Yu Cheats Bot Nitro Type
32 pages
Paytm - Software Requirement Specification Srs Paytm - Software Requirement Specification Srs
No ratings yet
Paytm - Software Requirement Specification Srs Paytm - Software Requirement Specification Srs
14 pages
T DEV 600 Redditech
No ratings yet
T DEV 600 Redditech
9 pages
SAP Note PDF Print
No ratings yet
SAP Note PDF Print
2 pages
Praveenkumar_Resume_UI_Developer
No ratings yet
Praveenkumar_Resume_UI_Developer
2 pages
Fantastic Fables: Authored by Vicki Davis (@)
No ratings yet
Fantastic Fables: Authored by Vicki Davis (@)
2 pages

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

All CSS Program By Rajan Sir V2V

Uploaded by

All CSS Program By Rajan Sir V2V

Uploaded by

Chapter 1

// Method 2: Using new key word, using instance of Object

// Method 3: Using object constructor

2. Display the current date and time

document.write("Current date : " + dd + "/" + m + "/" + y);

5. Getters and setters :

2. Adding and removing elements from array

3. Calling function from HTML

Enter address : <br>

<input type="submit" value="Submit">

7. Changing option list dynamically

<input type="radio" value="1" name="grp1" onclick="Change(this.value)"> Fruits

8. Enable and disable text field

1. Set, Get, Delete, and Display Cookies

2. Display value and changing color of textbox

5. Opening multiple windows

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>");

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));

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));

3. Matching digits and words

4. Match and Replace

5. Calling function of child window

6. changing content of child window

var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

13. Text rollover

5. Changing Background Color

7. Chain select menu

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

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

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

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

10. Sliding Menu

12. Folding tree menu

14. Scrollable Menu

15. Side Bar

16. Disabling right click

17. Concealing Your E-mail Address

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.