Scribd
Upload
3 views

CSS_PR

The document contains various JavaScript programs implemented in HTML, covering arithmetic operations, string manipulations, number checks, and form handling. Each program demonstrates specific functionalities such as finding the largest number, checking for palindromes, and handling mouse events. The examples illustrate how to use JavaScript for interactive web applications.

Uploaded by

gauribhalerao965
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

CSS_PR

The document contains various JavaScript programs implemented in HTML, covering arithmetic operations, string manipulations, number checks, and form handling. Each program demonstrates specific functionalities such as finding the largest number, checking for palindromes, and handling mouse events. The examples illustrate how to use JavaScript for interactive web applications.

Uploaded by

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

Write JavaScript program for arithmetic operations.

<html>
<body>
<h2>Arithmetic Operations</h2>
<input id="num1" type="number" placeholder="Enter first number">
<input id="num2" type="number" placeholder="Enter second number">
<select id="operation">
<option value="add">Add</option>
<option value="subtract">Subtract</option>
<option value="multiply">Multiply</option>
<option value="divide">Divide</option>
</select>
<button onclick="calculate()">Calculate</button>
<p id="result"></p>

<script>
function calculate() {
let num1 = parseInt(document.getElementById("num1").value);
let num2 = parseInt(document.getElementById("num2").value);
let operation = document.getElementById("operation").value;
let result;

switch (operation) {
case 'add':
result = num1 + num2;
break;
case 'subtract':
result = num1 - num2;
break;
case 'multiply':
result = num1 * num2;
break;
case 'divide':
if (num2 !== 0) {
result = num1 / num2;
} else {
result = "Error: Division by zero is not allowed.";
}
break;
default:
result = "Error: Invalid operation.";
}

document.getElementById("result").innerHTML = "Result: " + result;


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

Write JavaScript program to find no from array.


<html>
<body>
<h2>Find Number in Array</h2>
<input id="number" type="number" placeholder="Enter number to find">
<button onclick="findNumber()">Find</button>

<script>
let array = [1, 2, 3, 4, 5];

function findNumber() {
let number = parseInt(document.getElementById("number").value);

if (array.includes(number)) {
alert("Number found in array");
} else {
alert("Number not found in array");
}
}
</script>
</body>
</html>

Write JavaScript program to find largest among 3 numbers.


<html>
<body>
<script>
var a = 14;
var b = 15;
var c = 14;

if(a>b && a>c)


{
document.write(a+" is Greatest");
}
else if(b>a && b>c)
{
document.write(b+" is Greatest");
}
else if(c>a && c>b)
{
document.write(c+" is Greatest");
}
else if(a==b && a>c)
{
document.write("a & b are equal and Greatest");
}
else if(b==c && b>a)
{
document.write("b & c are equal and Greatest");
}
else if(a==c && a>b)
{
document.write("a & c are equal and Greatest");
}
else if(a==b && a==c)
{
document.write("All are equal and Greatest");
}

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

Write JavaScript program to find palindrome string.


<html>
<body>
<h2>Check Palindrome String</h2>
<input id="string" type="text" placeholder="Enter string">
<button onclick="checkPalindrome()">Check</button>

<script>
function checkPalindrome() {
let string = document.getElementById("string").value;
let reversedString = string.split("").reverse().join("");

if (string === reversedString) {


alert("String is palindrome");
} else {
alert("String is not palindrome");
}
}
</script>
</body>
</html>

Write JavaScript program to check no is odd or even


<html>
<body>
<h2>Check Number is Odd or Even</h2>
<input id="number" type="number" placeholder="Enter number">
<button onclick="checkOddEven()">Check</button>

<script>
function checkOddEven() {
let number = parseInt(document.getElementById("number").value);

if (number % 2 === 0) {
alert("Number is even");
} else {
alert("Number is odd");
}
}
</script>
</body>
</html>

Write JavaScript program to illustrate the use of getter method and setter method.
<!DOCTYPE html>
<html>
<body>
<script language="javascript" type="text/javascript">
var car = {
color: "Red",
brand: "Ford",
get company() {
return this.brand;
},
set company(value) {
this.brand = value;
}
};

document.write("Company Name=" + car.company + "<br>");


car.company = "Maruti";
document.write("Company Name=" + car.company + "<br>");
</script>
</body>
</html>

Write JavaScript program to check if a number is positive negative or zero.


<html>
<body>
<input id="number" type="number" placeholder="Enter a number">
<button onclick="checkNumber()">Check</button>

<script>
function checkNumber() {
let number = parseInt(document.getElementById("number").value);

if (number > 0) {
alert("Number is positive");
} else if (number < 0) {
alert("Number is negative");
} else {
alert("Number is zero");
}
}
</script>
</body>
</html>

Write a HTML code to create types of buttons on form and Write JavaScript code to
implement onsubmit event and onReset
<html>
<body>
<form onsubmit="return submitForm()" onreset="resetForm()">
<input type="text" name="name" placeholder="Enter name"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="button" value="Click Me" onclick="buttonClick()">
</form>

<script>
function submitForm() {
alert("Form submitted");
return false;
}

function resetForm() {
alert("Form reset");
}

function buttonClick() {
alert("Button clicked");
}
</script>
</body>
</html>

Write JavaScript program to swap two variables.


<html>
<body>
<script>
let x = 10;
let y = 20;

[x, y] = [y, x];

document.write("x = " + x + ", y = " + y);


</script>
</body>
</html>
Write JavaScript program to find the factorial of number.
<html>
<body>
<input id="number" type="number" placeholder="Enter a number">
<button onclick="findFactorial()">Find Factorial</button>

<script>
function findFactorial() {
let number = parseInt(document.getElementById("number").value);
let factorial = 1;

for (let i = 1; i <= number; i++) {


factorial *= i;
}

alert("Factorial of " + number + " is " + factorial);


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

Write JavaScript program to find palindrome string.


<html>
<body>
<input id="string" type="text" placeholder="Enter a string">
<button onclick="checkPalindrome()">Check Palindrome</button>

<script>
function checkPalindrome() {
let string = document.getElementById("string").value;
let reversedString = string.split("").reverse().join("");

if (string === reversedString) {


alert(string + " is a palindrome");
} else {
alert(string + " is not a palindrome");
}
}
</script>
</body>
</html>
Write JavaScript program for addition of two numbers with the help of function.
<html>
<body>
<input id="num1" type="number" placeholder="Enter first number">
<input id="num2" type="number" placeholder="Enter second number">
<button onclick="addNumbers()">Add</button>

<script>
function addNumbers() {
let num1 = parseInt(document.getElementById("num1").value);
let num2 = parseInt(document.getElementById("num2").value);
let result = num1 + num2;
alert("Result: " + result);
}
</script>
</body>
</html>

Write JavaScript program to check no is prime or not.


<html>
<body>
<script language="javascript" type="text/javascript">
var no=prompt("Enter Number:");
var flag=0;
for(i=2;i<no;i++)
{
if(no%i==0)
{
flag=1;
break;
}
}
if(flag==0)
{
document.write("Number is Prime");
}
else
{
document.write("Number is not Prime");
}
</script>
</body>
</html>
Write JavaScript program to sort array elements in ascending order and descending
order.
<html>
<body>
<script>
let array = [64, 34, 25, 12, 22, 11, 90];

document.write("Original array: " + array + "<br>");

// Sort array in ascending order


array.sort((a, b) => a - b);
document.write("Array in ascending order: " + array + "<br>");

// Sort array in descending order


array.sort((a, b) => b - a);
document.write("Array in descending order: " + array);
</script>
</body>
</html>

Write a HTML code to create types of buttons on form and Write JavaScript code to
implement onsubmit event and onReset event.
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Form with Button Types</h1>
<form id="exampleForm" onsubmit="handleSubmit()" onreset="handleReset()">

<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name"
><br><br>

<label for="email">Email:</label>
<input type="text" id="email" name="email" placeholder="Enter your email"
><br><br>

<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('You clicked a button!')">Click
Me</button>
</form>

<script>
// Handle form submission
function handleSubmit()
{
alert("Form submitted");
}

// Handle form reset


function handleReset() {
alert("Form has been reset!");
}
</script>
</body>
</html>
Write JavaScript program to implement form events onBlur and on focus methods.

<!DOCTYPE html>
<html lang="en">
<body>
<h1>Form Events: onFocus and onBlur</h1>
<form id="exampleForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" onfocus="handleFocus()"
onblur="handleBlur()"><br><br>
Ans:<p id="id1"></p>

</form>

<script>
// Handle onFocus event
function handleFocus(element) {
document.getElementById("id1").innerHTML="Focus Gain";
}

// Handle onBlur event


function handleBlur(element) {
document.getElementById("id1").innerHTML="Focus lost";
}
</script>
</body>
</html>
Write JavaScript code to implement mouse event.

<html>
<body onmousemove="display7()">
<p id="id1">Ans1:</p>
<p id="id2">Ans2:</p>
<p id="id3">Ans3:</p>
<p id="id4">Ans4:</p>
<p id="id5">Ans5:</p>
<p id="id6">Ans6:</p>
<form name="MyForm" >
<input type="button" name="b1" value="Click" onclick="display1()"
onmouseover="display3()"onmouseout="display4()">
<input type="button" name="b2" value="DB Click"
ondblclick="display2()"onmousedown="display5()"onmouseup="display6()">
<input type="button" name="b3" value=" Click me" >
</form>
<script >
function display1()
{
document.getElementById("id1").innerHTML="You Clicked the
button";
}
function display2()
{
document.getElementById("id2").innerHTML="You have
double clicked the button..";
}
function display3()
{
document.getElementById("id3").innerHTML="Mouse Present
on element.";
document.getElementById("id4").innerHTML="Ans4";

}
function display4()
{
document.getElementById("id4").innerHTML="Mouse goes
out from element.";
document.getElementById("id3").innerHTML="Ans3";

}
function display5()
{
document.getElementById("id5").innerHTML="Mouse down";
document.getElementById("id6").innerHTML="Ans6";
}
function display6()
{
document.getElementById("id6").innerHTML="Mouse up";
document.getElementById("id5").innerHTML="Ans5";

}
function display7()
{
console.log("mouse moved");
}

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

Write JavaScript program to implement intrinsic JavaScript function.


<!DOCTYPE html>
<html>
<head>
<script language="javasript" type="text/javascript">
</script>
</head>
<body>
<form action="" name="entry">
Enter Name:<input type="text" name="t1" > <br>
Enter Age:<input type="text" name="t2" > <br><br>
<img src="submit.png" height="100" width="150"
onclick="javascript:document.forms.entry.submit()">
<img src="reset.jpeg" height="100" width="150"
onclick="javascript:document.forms.entry.reset()">
</form>
</body>
</html>

Write JavaScript program to read and delete the cookie value.

<html>
<body>
<input type="text" id="t1" placeholder="Enter Key"><br><br>
<input type="text" id="t2" placeholder="Enter value"><br><br>
<input type="button" id="b1" value="Create Cookie"
onclick="create_cookie()"><br><br>
<input type="button" id="b2" value="Read cookie"
onclick="read_cookie()"><br><br>
<input type="button" id="b4" value="Delete Cookie"
onclick="delete_cookie()"><br><br>

<hr>
Your Cookies:<p id="p1"></p>
</hr>

<script>
function create_cookie()
{
var key=document.getElementById("t1").value;
var value=document.getElementById("t2").value;
document.cookie=key+"="+value+";expires= Sun, 10 Sept 2025
00:00:00 UTC ;path=/;";
alert("Cookie Created");
}

function read_cookie()
{
var x=document.cookie;
document.getElementById("p1").innerHTML=x;
}

function delete_cookie()
{
var key=document.getElementById("t1").value;
var value=document.getElementById("t2").value;
document.cookie=key+"="+value+";expires= Sun, 10 Sept 1970
00:00:00 UTC ; path=/;"
alert("Cookie Created");
}
</script>

</body>
</html>
Write JavaScript program to check whether the string contains the given pattern or not.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Regex Match</title>
</head>
<body>
<h1>Regex Match Demo</h1>
<p>Enter a pattern to search in the text:</p>
<input type="text" id="patternInput" >
<button onclick="matchPattern()">Match</button>
<p id="result">Result: </p>

<script type="text/javascript">
function matchPattern() {
// Get the input pattern
var userPattern = document.getElementById("patternInput").value;

// Check if the pattern is valid


try {
var pattern = new RegExp(userPattern);
} catch (e) {
document.getElementById("result").textContent = "Invalid Regex Pattern!";
return;
}

// Text to search
var text = "I Love apples and apples are delicious.";

// Perform the match


var result = pattern.test(text);

// Display the result


document.getElementById("result").textContent = "Result: " + (result ? result :
"No match found");
}
</script>
</body>
</html>
Write JavaScript program to perform multiple actions of rollover.

<html>
<body>
<h1>Text Roll Over Example</h1>
<br><br>
<a onmouseover="display1()">XYZ
|<a onmouseover="display2()">ABC<br><br>
<p id="p1">Hello World</p>
<a> <img src="xyz.jpg" alt="ABC image" name="form1" height="500"
width="500"></a>
<script>
function display1()
{
document.form1.src="xyz.jpg";
document.getElementById("p1").innerHTML="You have selected
XYZ";
}

function display2()
{
document.form1.src="ABC.jpg";
document.getElementById("p1").innerHTML="You have selected
ABC";
}
</script>
</body>
</html>
Write JavaScript program to change the images in banner.

<html>
<head>
<title>Array of Banners</title>
</head>
<body>
<img src="1.jpg" width="50%" id="image1" />
<br /><br />
<button onclick="display()">Display Banners</button>
<script type="text/javascript">
var banner_array = new Array("1.jpg", "2.jpg", "3.jpg",
"4.jpg", "5.jpg");
var timerID = null;
var i = 0;
function display() {
if (timerID == null) {
timerID = setInterval("display_banner()", 1000);
}
}
function display_banner() {
if (i < banner_array.length) {
document.getElementById("image1").src = banner_array[i];
i = i + 1;
} else {
clearInterval(timerID);
}
}
</script>
</body>
</html>
Write JavaScript program to create a slide show.

<!DOCTYPE html>
<html>
<head>
<title>Image SlideShow</title>
<script type="text/javascript">
var images = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];
var count = 0;

function previousImage() {
if (count > 0) {
count--;
}
var id = document.getElementById("imageId");
id.src = "" + images[count];
}

function nextImage() {
if (count < images.length - 1) {
count++;
}
var id = document.getElementById("imageId");
id.src = "images/" + images[count];
}
</script>
</head>
<body>
<center>

<img id="imageId" src="1.jpg" width="300" height="200" />


<br /><br />
<input type="button" value="< Prev Image" onclick="previousImage()" />
<input type="button" value="Next Image >" onclick="nextImage()" />
</center>
</body>
</html>
Write JavaScript program to which computes the average marks of students then this
average is used to determine the corresponding grade.

Student Name Marks


Sumit 80
Kalpesh 77
Amit 88
Tejas 93
Abhishek 65
<!DOCTYPE html>
<html >
<body>
<h1>Average Marks and Grade Calculator</h1>
<div id="marksSection" class="form-group">
<label for="marks">Enter marks:</label>
<input type="text" id="marks" >
</div>
<button onclick="calculateGrade()">Calculate Grade</button>
<div class="result" id="result"></div>

<script>
function calculateGrade() {
// Get the input value
const marksInput = document.getElementById("marks").value;

// Parse the input into an array of numbers

// Determine the grade


let grade;
if (marksInput >= 90) {
grade = "A";
} else if (marksInput >= 80) {
grade = "B";
} else if (marksInput >= 70) {
grade = "C";
} else if (marksInput >= 60) {
grade = "D";
} else {
grade = "F";
}

// Display the result


document.getElementById("result").innerHTML = grade;
}
</script>
</body>
</html>
Write a HTML script which displays 2 radio buttons to the user for fruits and vegetables
and 1 option list. When user select fruits radio button, option list should present only
fruits names to the user & when user select vegetables radio button list should present
only vegetable names to the user.

<!DOCTYPE html>
<html >
<head>

<script type="text/javascript">
// Arrays for Fruits and Vegetables
var fruits_array = ["Apple", "Banana", "Cherry", "Mango"];
var vegetables_array = ["Carrot", "Broccoli", "Spinach", "Potato"];

// Function to update the dropdown based on the selected category


function display(category) {
var langSelect = document.getElementById("list"); // Option list
var optionsLength = langSelect.options.length;

// Clear existing options


for (let i = optionsLength - 1; i >= 0; i--) {
langSelect.options.remove(i);
}

// Add default option


var defaultOption = document.createElement("option");
defaultOption.value = "Select";
defaultOption.textContent = "Select";
langSelect.appendChild(defaultOption);

// Determine which category was selected and update options


var items = category === "Fruits" ? fruits_array : vegetables_array;
for (let i = 0; i < items.length; i++) {
var opt = document.createElement("option");
opt.value = items[i];
opt.textContent = items[i];
langSelect.appendChild(opt);
}
}
</script>
</head>
<body>
<h1>Choose Category</h1>

<b>Select Category</b><br />


<label>
<input type="radio" name="category" value="Fruits" onclick="display('Fruits')"> Fruits
</label>
<label>
<input type="radio" name="category" value="Vegetables"
onclick="display('Vegetables')"> Vegetables
</label>
<hr />

<b>List of Items</b><br />


<select id="list">
<option value="Select">Select</option>
</select>
</body>
</html>

Write a JavaScript that displays textboxes for accepting name and email id and a submit
button. Write JavaScript code such that when the user clicks on submit button a) Name
validation b) email ID validation.

<html >
<body>
<h1>Form Validation</h1>

<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your name"><br><br>

<label for="email">Email ID:</label>


<input type="email" id="email" placeholder="Enter your email"><br><br>

<button onclick="validateForm()">Submit</button>

<script>
function validateForm() {
// Get the input values
const name = document.getElementById("name").value.trim();
const email = document.getElementById("email").value.trim();

let isValid = true;

// Name validation: Must not be empty and should only contain letters and spaces
if (!name) {
nameError.textContent = "Name is required.";
isValid = false;
} else if (!/^[a-zA-Z\s]+$/.test(name)) {
nameError.textContent = "Name should contain only letters and spaces.";
isValid = false;
}

// Email validation: Must match email pattern


if (!email) {
emailError.textContent = "Email is required.";
isValid = false;
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
emailError.textContent = "Please enter a valid email address.";
isValid = false;
}

// If the form is valid, show a success message or proceed with form submission
if (isValid) {
alert("Form submitted successfully!");
}
}
</script>
</body>
</html>
Write JavaScript for following frame structure
FRAME1
Frame 2 Frame 3
-Fruits
- Flowers
- Cities
Fruits, flowers and cities are links to the web page fruits.html, flowers.html, cities.html
respectively. When these links are clicked corresponding data appears in Frame 3.

Main Frame
<html>
<head>
<title>Three Frames Layout</title>
</head>
<frameset rows="20%,*">
<!-- Frame 1: Top header -->
<frame src="header.html" name="frame1" scrolling="no" noresize>

<frameset cols="30%,*">
<!-- Frame 2: Left links section -->
<frame src="links.html" name="frame2" scrolling="auto">

<!-- Frame 3: Right content display -->


<frame src="right.html" name="frame3" scrolling="auto">
</frameset>
</frameset>
</html>

links.html

<!DOCTYPE html>
<html>
<head>
<title>Links</title>
</head>
<body>
<h3>Frame 2</h3>
<ul>
<li><a href="fruits.html" target="frame3">Fruits</a></li>
<li><a href="flowers.html" target="frame3">Flowers</a></li>
<li><a href="cities.html" target="frame3">Cities</a></li>
</ul>
</body>
</html>

Write JavaScript program to create a pull down menu with three options
(Google,MSBTE,Yahoo)
Once the user will select one of the options then the user will be redirected to that site.

<!DOCTYPE html>
<html>
<body>
<h1>Pull Down Menu</h1>
<select id="menu" onchange="redirectToSite()">
<option value="">-- Select an option --</option>
<option value="https://www.google.com">Google</option>
<option value="https://msbte.org.in">MSBTE</option>
<option value="https://www.yahoo.com">Yahoo</option>
</select>

<script>
function redirectToSite() {
const menu = document.getElementById("menu");
const selectedValue = menu.value;

if (selectedValue) {
window.location.href = selectedValue; // Redirects to the selected site
}
}
</script>
</body>
</html>

You might also like