Scribd
Upload
5 views

Css Manual

The document outlines a series of JavaScript programming experiments for a 5th semester course in Information Technology, taught by Yogita Khandagle. Each experiment includes a title, code snippet, and expected output, covering topics such as Fibonacci series, array manipulation, factorial calculation, and dynamic attribute changes. The document serves as a practical guide for students to learn and implement JavaScript functionalities.

Uploaded by

nikamisha832
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

Css Manual

The document outlines a series of JavaScript programming experiments for a 5th semester course in Information Technology, taught by Yogita Khandagle. Each experiment includes a title, code snippet, and expected output, covering topics such as Fibonacci series, array manipulation, factorial calculation, and dynamic attribute changes. The document serves as a practical guide for students to learn and implement JavaScript functionalities.

Uploaded by

nikamisha832
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 31

DEPARTMENT OF INFORMATION TECHNOLOGY

Subject: client slide script language Subject Code:


Semester:5th Semester Course: IF5IC
Laboratory No: Name of Subject Teacher: Yogita Khandagle
Name of Student: Isha Mahendra Nikam Roll Id: 22202C0044

Experiment No: 1
Title of Experiment Write a javascript program to print the Fibonacci series till 10 number

Program:

Write a javascript program to print the Fibonacci series till 10 number

<!DOCTYPE html>
<html>
<head>
<title>Arithmetic Operator</title>
</head>
<body>
<h1>Arithmetic Operator</h1>
<p>Enter first Number: </p>
<input type="number" id="firstnumber">
<p>Enter second Number: </p>
<input type="number" id="secondnumber">
<BR>
<BR>
<BR>
<button onclick="performOperation('add')">Add</button>
<button onclick="performOperation('subtract')">Subtract</button>
<button onclick="performOperation('multiply')">Multiply</button>
<button onclick="performOperation('divide')">Divide</button>
<button onclick="performOperation('mod')">Mod</button>

<script>
function performOperation(operation) {
let a = parseFloat(document.getElementById('firstnumber').value);
let b = parseFloat(document.getElementById('secondnumber').value);
let result;

switch (operation) {
case 'add':
result = a + b;
break;
case 'subtract':
result = a - b;
break;
case 'multiply':
result = a * b;
break;
case 'divide':
result = b !== 0 ? a / b : 'Cannot divide by zero.';
break;
case 'mod':
result = b !== 0 ? a % b : 'Cannot divide by zero.';
break;
}

alert("Your Answer is " + result);


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

OUTPUT=
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: client slide script language Subject Code:


Semester:5th Semester Course: IF5IC
Laboratory No: Name of Subject Teacher: Yogita Khandagle
Name of Student: Isha Mahendra Nikam Roll Id: 22202C0044

Experiment No: 2
Title of Experiment Write a javascript program to print the Fibonacci series till 10 number

Write a javascript program to print the Fibonacci series till 10 number

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fibonacci Series</title>
</head>
<body>
<h1>Fibonacci Series</h1>
<script>
// Function to generate Fibonacci series
function fibonacciSeries(n) {
let fib = [0, 1]; // Initialize the first two numbers of the series

for (let i = 2; i < n; i++) {


fib[i] = fib[i - 1] + fib[i - 2];
}

return fib;
}

// Generate Fibonacci series up to 10 numbers


const numbers = fibonacciSeries(10);

// Display the Fibonacci series using document.write


document.write("<p>Fibonacci Series (First 10 numbers):</p>");
document.write("<ul>");

for (let i = 0; i < numbers.length; i++) {


document.write("<li>" + numbers[i] + "</li>");
}

document.write("</ul>");
</script>
</body>
</html>

OUTPUT=
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: client slide script language Subject Code:


Semester:5th Semester Course: IF5IC
Laboratory No: Name of Subject Teacher: Yogita Khandagle
Name of Student: Isha Mahendra Nikam Roll Id: 22202C0044

Experiment No: 3
Title of Experiment Write a Program to create new array using elements of another array.

Write a Program to create new array using elements of another array.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create New Array Example</title>
</head>
<body>
<h1>Create New Array from Existing Array</h1>
<script>
// Original array
const originalArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Function to create a new array based on the original array


function createNewArray(arr) {
// Example transformation: create a new array with squared values of the original array
return arr.map(x => x * x);
}

// Create new array


const newArray = createNewArray(originalArray);

// Display the original array and the new array using document.write
document.write("<p>Original Array: [" + originalArray.join(", ") + "]</p>");
document.write("<p>New Array (squared values): [" + newArray.join(", ") + "]</p>");
</script>
</body>
</html>
Output:
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: client slide script language Subject Code:


Semester:5th Semester Course: IF5IC
Laboratory No: Name of Subject Teacher: Yogita Khandagle
Name of Student: Isha Mahendra Nikam Roll Id: 22202C0044

Experiment No: 4
Title of Experiment Calculate the factorial of a number by 1)calling function without
argument 2)calling function with argument

Calculate the factorial of a number by 1)calling function without argument 2)calling function
with argument

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Factorial Calculation</title>
</head>
<body>
<h1>Factorial Calculation</h1>
<script>
// Function to calculate factorial with argument
function factorial(n) {
if (n === 0 || n === 1) {
return 1;
}
return n * factorial(n - 1);
}

// Function to calculate factorial without argument


function factorialWithoutArgument() {
// Using a default value for the calculation
const defaultValue = 5; // You can change this default value
return factorial(defaultValue);
}

// Calculate factorial with argument


const numberWithArgument = 7; // You can change this number to any other integer
const factorialWithArgument = factorial(numberWithArgument);

// Calculate factorial without argument


const factorialWithoutArg = factorialWithoutArgument();

// Display the results using document.write


document.write("<p>Factorial of " + numberWithArgument + " (with argument): " +
factorialWithArgument + "</p>");
document.write("<p>Factorial of default value (without argument): " + factorialWithoutArg +
"</p>");
</script>
</body>
</html>

OUTPUT=
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: client slide script language Subject Code:


Semester:5th Semester Course: IF5IC
Laboratory No: Name of Subject Teacher: Yogita Khandagle
Name of Student: Isha Mahendra Nikam Roll Id: 22202C0044

Experiment No: 5
Title of Experiment Write a program to remove white space between the string.

Write a program to remove white space between the string.

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Remove White Spaces</title>

</head>

<body>

<h1>Remove White Spaces from Strings</h1>

<script>

// Function to remove white spaces from a string

function removeWhiteSpaces(str) {

return str.replace(/\s+/g, ''); // Remove all white spaces

// Example strings

const originalString = " This is an example string with white spaces. ";

const stringWithoutSpaces = removeWhiteSpaces(originalString);


// Display the results using document.write

document.write("<p>Original String: \"" + originalString + "\"</p>");

document.write("<p>String Without White Spaces: \"" + stringWithoutSpaces + "\"</p>");

</script>

</body>

</html>

Output:

DEPARTMENT OF INFORMATION
TECHNOLOGY
Subject: client slide script language Subject Code:
Semester:5th Semester Course: IF5IC
Laboratory No:lab3 Name of Subject Teacher: Yogita Khandagle
Name of Student: Isha Mahendra Nikam Roll Id: 22202C0044

Experiment No: 6
Title of Experiment Write a javascript program for changing attributes values dynamically

Write a javascript program for changing attributes values dynamically


Program:

html>

<head>

</head>

<body>

<h2>Change the attribute value using JavaScript.</h2>

<h4>Click the button to change the <i> background-color <i> of the below text.</h4>

<div id = "fonts">change color of this.</div>

<button onclick = "changeBackground()">change background</button>

<script>

function changeBackground() {

let fontsDiv = document.getElementById("fonts");

fontsDiv.style.backgroundColor = 'green'; // change background color of div element


using style attribute

</script>

</body>

</html>

OUTPUT=
DEPARTMENT OF INFORMATION
TECHNOLOGY
Subject: client slide script language Subject Code:
Semester:5th Semester Course: IF5IC
Laboratory No:lab3 Name of Subject Teacher: Yogita Khandagle
Name of Student: Isha Mahendra Nikam Roll Id: 22202C0044

Experiment No: 7
Title of Experiment Develop a program for as we enter the firstname and lastname,email is
automatically generated

Develop a program for as we enter the firstname and lastname,email is automatically


generated

PROGRAM=

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Email Generator</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

.container {

max-width: 400px;

margin: auto;

input, button {

width: 100%;

padding: 10px;

margin: 5px 0;
border: 1px solid #ccc;

border-radius: 5px;

#emailOutput {

font-weight: bold;

color: #333;

</style>

</head>

<body>

<div class="container">

<h1>Email Generator</h1>

<form id="emailForm">

<label for="firstName">First Name:</label>

<input type="text" id="firstName" name="firstName" required>

<label for="lastName">Last Name:</label>

<input type="text" id="lastName" name="lastName" required>

<button type="button" id="generateEmail">Generate Email</button>

</form>

<p id="emailOutput"></p>

</div>

<script src="script.js"></script>

</body>

</html>

OUTPUT=
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: client slide script language Subject Code:


Semester:5th Semester Course: IF5IC
Laboratory No: lab3 Name of Subject Teacher: Yogita Khandagle
Name of Student: Isha Mahendra Nikam Roll Id: 22202C0044
Experiment No: 8
Title of Experiment Write a program to demonstrate the use of keyevent Event

Code:

<html>
<head>
<title>Key Event Demo</title>
<style>
body {
bgcolor: ""
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#output {
font-size: 24px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Press Any Key!</h1>
<div id="output">You pressed: </div>

<script>
document.addEventListener('keydown', function(event) {
const key = event.key;
document.getElementById('output').textContent = `You pressed: ${key}`;
});
</script>
</body>
</html>

Output:
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: client slide script language Subject Code:


Semester:5th Semester Course: IF5IC
Laboratory No: lab3 Name of Subject Teacher: Yogita Khandagle
Name of Student: Isha Mahendra Nikam Roll Id: 22202C0044

Experiment No: 9
Title of Experiment Write a program to Display and enabled textfield.

Code:

<html>
<head>
<title>Enable/Disable Text Field</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
</style>
</head>
<body>

<h2>Enable/Disable Text Field</h2>


<input type="text" id="myTextField" disabled>
<button id="toggleButton">Enable</button>

<script>
const textField = document.getElementById('myTextField');
const toggleButton = document.getElementById('toggleButton');

toggleButton.addEventListener('click', () => {
if (textField.disabled) {
textField.disabled = false;
toggleButton.textContent = 'Enable';
} else {
textField.disabled = true;
toggleButton.textContent = 'Disable';
}
});
</script>

</body>
</html>

Output:
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: client slide script language Subject Code:


Semester:5th Semester Course: IF5IC
Laboratory No: lab3 Name of Subject Teacher: Yogita Khandagle
Name of Student: Isha Mahendra Nikam Roll Id: 22202C0044

Experiment No: 10
Title of Experiment Write a webpage that display from that contains an input for username
and password.user is prompted to enter the input username and
password become value of the cookies write a javascript function for
storing the cookies

Code:

<html>
<head>
<title>Username and Password Form with Cookies</title>
</head>
<body>
<h2>Login Form</h2>
<form onsubmit="storeCookies(event)">

<label for="username">Username:</label>

<input type="text" id="username" name="username" required>

<br><br>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>


<br><br>

<button type="submit">Submit</button>

</form>

<script>
function storeCookies(event) {

event.preventDefault(); // Prevent form submission

var username = document.getElementById("username").value;

var password = document.getElementById("password").value;

document.cookie = "username=" + encodeURIComponent(username) + "; path=/;


max-age=" + 24 * 60 * 60;

document.cookie = "password=" + encodeURIComponent(password) + "; path=/;


max-age=" + 24 * 60 * 60;
alert("Username and password stored in cookies.");

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

Output:
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: client slide script language Subject Code:


Semester:5th Semester Course: IF5IC
Laboratory No: lab3 Name of Subject Teacher: Yogita Khandagle
Name of Student: Isha Mahendra Nikam Roll Id: 22202C0044

Experiment No: 11
Title of Experiment Write a program to Open a new windows and close that windows on
button click event using open()and close()

CODE=

<html>

<head>

<title>window open and close method</title>

</head>

<body style="display: flex;

flex-direction: column;

justify-content:center;

align-items:center;">

<div class="container" style="position: relative;

text-align: center;">

<h1 style="color: rgb(18, 154, 18);">

GeeksforGeeks

</h1>

<h3> window open and close method</h3>

<button onclick="windowOpen()">

Open GeeksforGeeks
</button>

<button onclick="windowClose()">

Close GeeksforGeeks

</button>

</div>

<script>

let Window;

function windowOpen() {

Window = window.open(

"https://www.geeksforgeeks.org/",

"_blank", "width=400, height=300, top=230, left=540");

function windowClose() {

Window.close();

</script>

</body>

</html>

OUTPUT=
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: client slide script language Subject Code:


Semester:5th Semester Course: IF5IC
Laboratory No: lab3 Name of Subject Teacher: Yogita Khandagle
Name of Student: Isha Mahendra Nikam Roll Id: 22202C0044

Experiment No: 12
Title of Experiment Write HTML code to design a form that displays textboxes for
accepting UserID and Aadhar No. and a SUBMIT button. UserlD
should contain 10 alphanumeric characters and must start with Capital
Letter. Aadhar No. should contain 12 digits in the format nnnn nnnn
nnnn. Write JavaScript code to validate the UserID and Aadhar No.
when the user clicks on SUBMIT button.

CODE=

<html>
<head>
<title>Form Validation</title>
<style>
form {
width: 300px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 8px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 12px;
border-radius: 4px;
border: 1px solid #ccc;
}
button {
padding: 10px;
width: 100%;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.error {
color: red;
font-size: 14px;
display: inline; /* Make div behave like span */
}
</style>
</head>
<body>

<form id="userForm" onsubmit="return validateForm()">


<h2>User Information</h2>

<label for="userID">User ID (10 characters, starts with a capital letter):</label>


<input type="text" id="userID" name="userID" maxlength="10"
placeholder="UserID">
<div id="userIDError" class="error"></div>

<label for="aadharNo">Aadhar No. (nnnn nnnn nnnn format):</label>


<input type="text" id="aadharNo" name="aadharNo" maxlength="14"
placeholder="1234 5678 9123">
<div id="aadharError" class="error"></div>

<button type="submit">SUBMIT</button>
</form>

<script>
function validateForm() {
let userID = document.getElementById("userID").value;
let aadharNo = document.getElementById("aadharNo").value;

let userIDError = document.getElementById("userIDError");


let aadharError = document.getElementById("aadharError");

userIDError.textContent = "";
aadharError.textContent = "";

let userIDPattern = /^[A-Z][A-Za-z0-9]{9}$/;


if (!userIDPattern.test(userID)) {
userIDError.textContent = "UserID must be 10 alphanumeric characters and start
with a capital letter.";
return false;
}
let aadharPattern = /^\d{4}\s\d{4}\s\d{4}$/;
if (!aadharPattern.test(aadharNo)) {
aadharError.textContent = "Aadhar No. must be in the format 1234 5678 9123.";
return false;
}

alert("Form submitted successfully!");


return true;
}
</script>

</body>
</html>

OUTPUT=
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: client slide script language Subject Code:


Semester:5th Semester Course: IF5IC
Laboratory No: lab3 Name of Subject Teacher: Yogita Khandagle
Name of Student: Isha Mahendra Nikam Roll Id: 22202C0044

Experiment No: 13
Title of Experiment Write a JavaScript program to design HTML page with books
information in tabular format, use rollovers to display the discount
information.

CODE=

<html>
<head>
<title>Book Store</title>
<style>
table {
width: 70%;
margin: 20px auto;
border-collapse: collapse;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #f4f4f4;
}
td {
position: relative;
}
.discount-info {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 180px;
padding: 8px;
background-color: yellow;
border: 1px solid #ddd;
font-size: 14px;
z-index: 10;
}
td:hover .discount-info {
display: block;
}
</style>
</head>
<body>

<h2 style="text-align: center;">Book Information</h2>

<table>
<thead>
<tr>
<th>Book Title</th>
<th>Author</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td onmouseover="showDiscount(this)" onmouseout="hideDiscount(this)">
The Great Gatsby
<div class="discount-info">10% discount on all orders</div>
</td>
<td>F. Scott Fitzgerald</td>
<td>$15.99</td>
</tr>
<tr>
<td onmouseover="showDiscount(this)" onmouseout="hideDiscount(this)">
To Kill a Mockingbird
<div class="discount-info">15% discount for students</div>
</td>
<td>Harper Lee</td>
<td>$12.99</td>
</tr>
<tr>
<td onmouseover="showDiscount(this)" onmouseout="hideDiscount(this)">
1984
<div class="discount-info">20% discount for members</div>
</td>
<td>George Orwell</td>
<td>$18.50</td>
</tr>
<tr>
<td onmouseover="showDiscount(this)" onmouseout="hideDiscount(this)">
Moby Dick
<div class="discount-info">5% discount on bulk orders</div>
</td>
<td>Herman Melville</td>
<td>$14.20</td>
</tr>
</tbody>
</table>

<script>
function showDiscount(element) {
let discountInfo = element.querySelector('.discount-info');
discountInfo.style.display = 'block';
}

function hideDiscount(element) {
let discountInfo = element.querySelector('.discount-info');
discountInfo.style.display = 'none';
}
</script>
</body>
</html>

OUTPUT=

You might also like