Scribd
Upload
28 views

Pratical 1 To 12

Uploaded by

sanskrutinile06
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
28 views

Pratical 1 To 12

Uploaded by

sanskrutinile06
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/ 31

Practical no 5

<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Events Example</title>
</head>
<body>
<h1>Mouse Events Example</h1>
<div id="eventBox" style="width: 200px; height: 200px; border: 2px solid black; text-align: center;
line-height: 200px;">
Hover or Click Me!
</div>
<p id="message"></p>
<script>
const eventBox = document.getElementById('eventBox');
const message = document.getElementById('message');
eventBox.addEventListener('mouseover', function() {
message.textContent = 'Mouse is over the box!';
});
eventBox.addEventListener('mouseout', function() {
message.textContent = 'Mouse is out of the box!';
});
eventBox.addEventListener('click', function() {
message.textContent = 'Box was clicked!';
});
</script>
</body>
</html>
Practical 6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Key Event Example</title>
</head>
<body>
<h1>Press any key!</h1>
<div id="output">Press a key to see the result here...</div>

<script>
function handleKeyPress(event) {

const key = event.key;


document.getElementById('output').textContent = `You pressed: ${key}`;
}
document.addEventListener('keydown', handleKeyPress);
</script>
</body>
</html>
Practical no 7
<html >
<head>
<title>Intrinsic JavaScript Functions</title>
</head>
<body>
<button onclick="showDate()">Show Current Date</button>
<p id="date"></p>
<script>
function showDate() {
var now = new Date();
var formattedDate = now.toLocaleDateString()
document.getElementById('date').textContent = 'Current date: ' + formattedDate;
console.log('Current date displayed:', formattedDate);
}
</script>
</body>
</html>
Practical no 7

//Program for disabling elements


<html >
<head>
<title>Disable Elements Example</title>
<script>
function disableElements() {
document.getElementById('myButton').disabled = true;
document.getElementById('myInput').disabled = true;
document.getElementById('myCheckbox').disabled = true;
document.getElementById('mySelect').disabled = true;
}
</script>
</head>
<body>
<h1>Disable Elements Example</h1>
<button id="myButton" onclick="disableElements()">Disable All Elements</button>
<br><br>
<input type="text" id="myInput" placeholder="Type something here...">
<br><br>
<input type="checkbox" id="myCheckbox"> Check me
<br><br>
<select id="mySelect">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</body>
</html>
Practical no 7

//Program for Read only Elements

<html >
<head>
<title>Read-Only Elements Example</title>
<script>
function makeReadOnly() {
document.getElementById('myInput').readOnly = true;
document.getElementById('myTextarea').readOnly = true;
document.getElementById('mySelect').disabled = true;
}
</script>
</head>
<body>
<h1>Read-Only Elements Example</h1>
<button id="myButton" onclick="makeReadOnly()">Make All Read-Only</button>
<br><br>
<input type="text" id="myInput" placeholder="Type something here...">
<br><br>
</body>
</html>
Practical no 8
<html>
<head>
<title>Cookies</title>
<script>
function writeCookie() {
with(document.myform) {
document.cookie = "Name=" + nameid.value + ";";
alert("Cookie Written");
}
}
function readCookie() {
var x;
if(document.cookie == "") {
x = "";
} else {
x = document.cookie;
}
document.write(x);
}
</script>
</head>
<body>
<form name="myform" action="">
Enter your Name: <input type="text" name="nameid"/><br>
<input type="button" value="Set Cookie" onclick="writeCookie()"/>
<input type="button" value="Get Cookie" onclick="readCookie()"/>
</form>
</body>
</html>
Practical no 9
<html>
<head>
<title>Child Window</title>
<script>
function OpenNewWindow() {
var winObj =
window.open("https://msbte.org.in/pcwebBTRes/pcResult01/pcfrmViewMSBTEResult.aspx",
"windowName",
"top=200,left=100,width=500,height=400,status");
}
</script>
</head>
<body>
<form action="" method="post">
<p>
<input name="OpenWindow" value="Open window" type="button"
onclick="OpenNewWindow()"/>
</p>
</form>
</body>
</html>
Practical no 10
<html>
<head>
<title>Admission Form Validation</title>
<script>
function validateForm() {
// Get form elements
var name = document.forms["admissionForm"]["name"].value;
var email = document.forms["admissionForm"]["email"].value;
var phone = document.forms["admissionForm"]["phone"].value;
var rollNumber = document.forms["admissionForm"]["rollNumber"].value;
// Regular expressions
var namePattern = /^[a-zA-Z\s]+$/;
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
var phonePattern = /^[0-9]{10}$/;
var rollNumberPattern = /^[A-Za-z0-9]{6}$/;
// Validate Name
if (!namePattern.test(name)) {
alert("Please enter a valid name (letters and spaces only).");
return false;
}
// Validate Email
if (!emailPattern.test(email)) {
alert("Please enter a valid email address.");
return false;
}
// Validate Phone Number
if (!phonePattern.test(phone)) {
alert("Please enter a valid 10-digit phone number.");
return false;
}
// Validate Roll Number
if (!rollNumberPattern.test(rollNumber)) {
alert("Please enter a valid roll number (6 alphanumeric characters).");
return false;
}
// If all validations pass
alert("Form submitted successfully!");
return true;
}
function clearForm() {
document.forms["admissionForm"].reset();
}
</script>
</head>
<body>
<h2>Admission Form</h2>
<form name="admissionForm" onsubmit="return validateForm()"
<p>
Name: <input type="text" name="name" required placeholder="Enter your name">
</p>
<p>
Email: <input type="text" name="email" required placeholder="Enter your Email">
</p>
<p>
Phone Number: <input type="text" name="phone" required placeholder="Enter your phone no">
</p>
<p>
Roll Number: <input type="text" name="rollNumber" required placeholder="Enter your roll-no">
</p>
<p>
<input type="submit" value="Submit">
<input type="button" value="Clear Form" onclick="clearForm()">
</p>
</form>
</body>
</html>
Practical no 11
//1.Drop down menu
<html>
<head>
<title> Menu </title>
</head>
<body>
<form action="" name="menu">
Select your Genre:
<select name="Menuchoice" onchange="getpage(this)">
<option value="">Indie</option>
<option value="">Pop</option>
<option value="">Classical</option>
</select>
</form>
</body>
</html>
Practical no 11
//2.Dynamically and chain menu
<html>
<head>
<title>Dynamicaly changing Menu </title>
</head>
<script>
compemp = new Array('Meenaski','Sakshi','Rupakshi');
electemp =new Array('dipali','rupali','anjali');
function getEmp(branch)
{
for(i=document.Form1.Employes.option.length-1;1>0;i++)
{
document.Form1.Employes.option.remove(i);
}
Dept = branch.options(branch.selectedindex).value;
if(Dept=="")
{
if(Dept=='1')
{
for(i=1;i<=compemp.length;i++)
{
document.Form1.Employes.option.remove[i] = new Option(compemp[i-1]);
}
}
if(Dept='2')
{
for(i=0;i<=electemp.length;i++)
{
document.Form1.Employes.options[i] new Option(electemp[i-1]);
}
}
}
}

</script>
<body>
<form action="" name="form">
<select name="Department" onchange="getEmp(this)">
<option value="0">Department</option>
<option value="1">Computers</option>
<option value="2">Electronics</option>
</select>
<select name="Employes">
<option
value="0">Employess</option>
</select>
<br>
<p>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</p>
</form>
</body>
</html>

Practical no 11
//3.Validating menu
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Selection Validation</title>
<script>
function validateMenu() {
var menu = document.getElementById("menu").value;
if(menu == "none") {
alert("Please select a valid menu item.");
return false;
} else {
alert("You selected: " + menu);
return true;
}
}
</script>
</head>
<body>
<form onsubmit="return validateMenu()">
<label for="menu">Select your Favourite footballer</label>
<select id="menu" name="menu">
<option value="item1">Ronaldo</option>
<option value="item2">Cristanio Ronaldo</option>
<option value="item3">Cristiano Ronaldo dos Santos Aveiro</option>
</select>
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>

Practical no 11
//4.Floating menu
<html>
<head>
<title>Floating Menu Example</title>
<script>
function toggleMenu() {
var menu = document.getElementById("floatingMenu");
if (menu.style.display === "none") {
menu.style.display = "block";
} else {
menu.style.display = "none";
}
}
</script>
</head>
<body>
<div>
<h2 id="section1">Section 1</h2>
<p>This is some content for section 1. Scroll down
to see more sections.</p>
<p>... (More content here) ...</p>

<h2 id="section2">Section 2</h2>


<p>This is some content for section 2. Scroll down
to see more sections.</p>
<p>... (More content here) ...</p>
<h2 id="section3">Section 3</h2>
<p>This is some content for section 3.</p>
<p>... (More content here) ...</p>
</div>
</body>
</html>
Practical no 11
//5.Sliding menu
<html>
<head>
<title>Sliding Menu Example</title>
<script>
function openMenu() {
var menu =
document.getElementById("slidingMenu");
menu.style.left = "0";
}
function closeMenu() {
var menu =
document.getElementById("slidingMenu");
menu.style.left = "-250px";
}
</script>
</head>
<body>
<button onclick="openMenu()">☰ Open
Menu</button>

<div id="slidingMenu" style="position:fixed; top:0; left:-250px; width:250px; height:100%;


background-color:#f4f4f4; padding:10px; border-right:1px solid #ccc; transition:left 0.3s;">
<h3>Menu</h3>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
<button onclick="closeMenu()">Close Menu</button>
</div>
</body>
</html>
Practical no 11
//6.Highlighted menu
<html>
<head>
<title>Highlighted Menu</title>
</head>
<body>
<nav>
<ul style="list-style-type: none; padding: 0; margin: 0;">
<li style="display: inline; margin-right: 10px;">
<a href="#home" style="text-decoration: none; color: black; padding: 5px; background-
color: yellow;">Home</a>
</li>
<li style="display: inline; margin-right: 10px;">
<a href="#about" style="text-decoration: none; color: black; padding: 5px; background-
color: yellow;">About</a>
</li>
<li style="display: inline; margin-right: 10px;">
<a href="#services" style="text-decoration: none; color: black; padding: 5px; background-
color: yellow;">Services</a>
</li>
<li style="display: inline; margin-right: 10px;">
<a href="#contact" style="text-decoration: none; color: black; padding: 5px; background-
color: yellow;">Contact</a>
</li>
</ul>
</nav>
</body>
</html>
Practical no 12

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner Advertisement</title>
</head>
<body>
<!-- Banner Advertisement -->
<a href="https://www.example.com" target="_blank">
<div align="center">
<img src="ronaldo.jpg" alt="Advertisement">
</div>
</a>
</body>
</html>
Practical no 12
//2.loading and displaying banner advertisement

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner Advertisement</title>
</head>
<body>
<a href="#" id="banner-link">
<div align="center">
<img src="ronaldo.jpg" alt="Advertisement">
</div>
</a>
<script>
document.getElementById('banner-
link').addEventListener('click', function(event) {
event.preventDefault();
window.open();
});
</script>
</body>
</html>
Practical no 12
3.Slideshow

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Image Slideshow</title>
</head>
<body>
<div id="slideshow-container">
<img id="slideshow-image" src="ronaldo.jpg" alt="Slideshow Image">
</div>
<script>
const images = [
'ronaldo.jpg',
'neymar.jpg',
];
let currentIndex = 0;
function showNextImage() {
currentIndex = (currentIndex + 1) % images.length;
document.getElementById('slideshow-image').src
= images[currentIndex];
}
setInterval(showNextImage, 3000);
</script>
</body>
</html>
Pratical 1
<html>
<head>
<title>IF-Else Program</title>
</head>
<body>
<script>
var age = 17;
document.write("To drive, vote ,for
pan card age should be more than or
Equal to 18 <br>")
if(age<=18)
{
document.write("You cannot drive or
vote<br>")
}
else{
document.write("You ar eligible to drive and vote")
}
</script>
</body>
</html>

<html>
<head>
<title>For Loop Program</title>
</head>
<body>
<script>
document.write("Table of 7<br>")
for(var i=0;i<=10;i++)
{
document.write("7 * "+i+"="+7*i+"<br>")}
</script>
</body>
</html>
Practical no 1
<html>
<head>
<title>While Loop Program</title>
</head>
<body>
<script> var number = 10;
while(number>=0)
{
document.write("The Number is "+number+"<br>");
number--;
}
</script>
</body>
</html>

<html>
<head>
<ttile>While Loop Program</ttile>
</head>
<bodY> <script>
document.write("Using do..while loop<br>");
var i = 0;
document.write("Number less then 20<br>");
do{
document.write(i+"<br>");
i++;
}while(i<20)
</script>
</bodY>
</html>
Practical no 1

<html>
<head>
<title>Switch Case Program</title>
</head>
<body>
<script>
var i = "e";
switch(i){
case 'a':document.write("A is a vowel");
break;
case 'e':document.write("e is a vowel");
break;
case 'i':document.write("i is a vowel");
break;
case 'o':document.write("o is a vowel");
break;
case 'u':document.write("u is a
vowel"); break;
default:
document.write(i+" is not a vowel,it is a consonant");
}
</script>
</body>
</html>
Practical no 2

Add element program


<html>
<head>
<title>ARRAY</title>
</head>
<body>
<script>
var items = new Array(4);
items[0] = "one";
items[1] = "Two";
items[2] = "Three";
items[3] = "Four";
items[4] = "Five";
items[5] = "Seven";
items.push("Eight");
items.unshift("zero");
items.pop();
for(var i = 0; i < items.length; i++) {
document.write(items[i] + " ");
}
</script>
</body>
</html>
Practical no 2
2. Sort element program

<html>
<head>
<title>sort an array</title>
</head>
<body>
<script>
var arr=["APPLE","Apple","apple"];
var arr1=[23,12,22,5];
document.write("Before sorting an array="+arr+"<br>");
document.write("After sorting an array="+arr.sort()+"<br>");
document.write("Before sorting an array="+arr1+"<br>");
document.write("After sorting an array="+arr1.sort(function(a,b){return a-
b}));
</script>
</body>
</html>
Practical no 2
3. Join and concat method

<html>
<head>
<title>join an array</title>
<body>
<script>
var arr=new Array();
arr[0]="one";
arr[1]="Two";
arr[2]="Three";
arr[3]="Four";
arr[4]="five";
arr[5]="Six";
var s1=arr.join();
document.write("String ="+s1+"<br>");
var s2=arr.join("-");
document.write("String join="+s2+"<br>");
var arr2=new Array();
arr2[0]="seven";
arr2[1]="eight";
arr2[2]="nine";
var s3=arr.concat(arr2);
document.write("string concat="+s3+"<br>");
</script>
</body>
</head>
</html>
Practical no 3
<html>
<head>
<title>Pop up</title>
<body>
<script type="text/javascript">
function func()
{
alert("hello")
}
</script>
<input type="button" onclick= "func()" value="call function"/>
</body>
</head>
</html>

Practical no 3
<html>
<head>
<title>Example</title>
<script type="text/javascript">
function fun(a)
{
document.write("this is a function without argument containing variable
a as "+ a);
}
</script>
</head>
<body>
<h4>Function with argument</h4>
<script type="text/javascript">
fun(10);
</script>
</body>
</html>

Practical no 3
<html>
<head>
<title>Hello</title>
<script type="text/javascript">
function fun()
{
return "Hello";
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(fun());
</script>
</body>
</html>

Practical 3
<html>
<head>
<title>addition</title>
</head>
<body>
<script type="text/javascript">
var add = new Function("num1","num2","return num1+num2");
document.writeln(add(45,15));
</script>
</body>
</html>

Practical no 4
Registration form
<html>
<head>
<title>form using form elements</title>
</head>
<body>
<h1>REGISTRATION FORM</h1>
<script function click()>
</script>
<form name="Regform" onclick = "Click">
<p>Name:<input type="text" size="65" name="name"></p>
<p>Year:<input type="text" size="65" name="Year"></p>
<p>Gender:
<select type="text" value="" name="Gender">
<option>Male</option>
<option>Female</option>
</select>
</select></p>
<p>Email-id:<input type="text" size="65" name="E-mail-id"></p>
<p>Password:<input type="text" size="65" name="Password"></p>
<p>Phone-no:<input type="text" size="65" name="Phone-no"></p>
<p>Adhar card:<input type="text" size="65" name="name"></p>
<p >SELECT YOUR COURSE
<select type="text" value="" name="Subject">
<option>C</option>
<option>C++</option>
<option>JAVA</option>
<option>Advance java</option>
</select>
</p><br></br>
<P> Comments <textarea cols="55" name="Feedback"></textarea></P>
<p> <input type="Submit" value="Submit" name="Submit">
<input type="reset" value="reset" name="Reset">
</p>
</form>
</body>
</html>

Practical no 4
Practical no 5
<html>
<head>
<title>Mouse events</title>
<script>
function react()
{
alert("Please enter any value");
}
</script>
</head>
<body>
<form name="Myform" action="" method="post" onmousedown="react()">
<input value="CLICK MOUSE HERE">
</form>
</body>
</html>

You might also like