Scribd
Upload
12 views22 pages

JavaScript Lab Experiments Guide

java script programs

Uploaded by

Aditya Chugh
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
12 views22 pages

JavaScript Lab Experiments Guide

java script programs

Uploaded by

Aditya Chugh
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

INDEX

Sr. Experiment Date Signature


No
AMITY UNIVERSITY HARYANA

Advanced Web Designing Technologies Lab

Submitted by: Aditya Chugh


Enrolment number:
A50105222016
Course: Btech-CSE
Batch: 2022-2026
Semester:
5th Section:
A
Submitted To: Ms . Deepti
Experiment:
PAGE 1

WAP in JavaScript to print hello world.

let message = "Hello, World!";


[Link](message);

Output:
Experiment:
PAGE 1

WAP in JavaScript to add two numbers.

let num1 = 30;


let num2 = 12;
let sum = num1 + num2;
[Link](sum);

Output:
Experiment:
PAGE 1

WAP in JavaScript to swap two variables.

let a = 45;
let b = 10;

a = a + b;
b = a - b;
a = a - b;

[Link](a + " " + b);

Output:
Experiment:
PAGE 1

WAP in JavaScript to build simple calculator.

let result;
let op = prompt('Enter operation: ');

let n1 = parseFloat(prompt("First number: "));


let n2 = parseFloat(prompt("Second number: "));

switch (op) {
case '+':
[Link](result = n1 + n2);
break;

case '-':
[Link](result = n1 - n2);
break;

case '*':
[Link](result = n1 * n2);
break;

case '/':
[Link](result = n1 / n2);
break;

default:
[Link]('Invalid operation');
break;
}

Output:
Experiment:
PAGE 1

WAP in JavaScript to implement Math function.

let a = 4.6;

[Link]("Round: " + [Link](a));


[Link]("Ceil: " + [Link](a));
[Link]("Floor: " + [Link](a));
[Link]("Trunc: " + [Link](a));
[Link]("Sign: " + [Link](a));
[Link]("Square root: " + [Link](a));

let x = 3;
let y = 3;

[Link]("Power: " + [Link](x, y));

Output:
Experiment:
PAGE 1

WAP in JavaScript to study about regular expression.


1. Searching

let text = "Hello world!";


let searchResult = [Link](/world/);
[Link](searchResult);

Output:

2. Replacing

let text = "Hello, world!";


let replacedText = [Link](/world/, “India");
[Link](replacedText);

Output:

3. Searching digit

let digitText = "You have Rs.99!”;


let digitSearchResult = [Link](/\d/);
[Link](digitSearchResult);

Output:
4. Searching pattern

let patternText = "This is what life is all abouyt!";


let patternResult = /is/;
[Link]([Link](txt));

Output:
Experiment:
PAGE 7

WAP in JavaScript to convert temperature to and from Celsius, Fahrenheit.

let celsius = prompt("Enter Celsius temperature: ");


let fahren = (celsius * 9 / 5) + 32;
[Link]("Temperature in Fahrenheit: " + fahren);

let fahrenh = prompt("Enter Fahrenheit temperature: ");


let cel = ((fahrenh - 32) * 5 / 9);
[Link]("Temperature in Celsius: " + cel);

Output:
EXPERIMENT - 8

WAP in JavaScript to reverse a number with and without using function.


Without function:

let a = prompt("Enter a number: ");


let rev = 0;

while (a > 0) {
let b = a % 10;
rev = rev * 10 + b;
a = parseInt(a / 10);
}

[Link]("Reversed number: " + rev);

Output:

With function:
function reverse() {
let a = prompt("Enter a number: ");
let sum = 0;

while (a > 0) { OUTPUT:


let b = a % 10;
sum = sum * 10 + b;
a = parseInt(a / 10);
}

return sum;
}

const c = reverse();
[Link]("Reversed number: " + c);
EXPERIMENT -9

WAP in JavaScript to implement various types of event handler.

<!DOCTYPE html>
<html>
<head>
<title>Event Handlers Example</title>
</head>
<body>
<h1>Event Handlers Example</h1>

<button id="clickButton">Click Me</button> <!-- Button for Click Event -->


<br><br>

<input type="text" id="inputField" placeholder="Type something..."> <!-- Input Event -->


<br><br>

<div id="mouseoverDiv"
style="width: 200px; height: 100px; background-color: lightblue;">
</div> <!-- Mouseover -->

<script>
// Click Event
[Link]("clickButton").addEventListener("click", function() {
alert("Button clicked!");
});

// Input Event
[Link]("inputField").addEventListener("input", function() {
const inputText = [Link]("inputField").value;
[Link]("Input changed: " + inputText);
});

// Mouseover Event
[Link]("mouseoverDiv").addEventListener("mouseover", function() {
[Link] = "lightgreen";
});
[Link]("mouseoverDiv").addEventListener("mouseout", function() {
// Mouseout Event
[Link] = "lightblue";
});
</script>
</body>
</html>
EXPERIMENT -9

Output:
xperiment: 10

WAP in JavaScript to change the background color of paragraph.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Background Color</title>
<style>
#myText {
background-color: green;
padding: 10px;
color: white;
}

#myBtn {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="myText">
This is some text with a green background. And it will change into a blue background.
</div>
<button id="myBtn" onclick="changeColor()">Change Color</button>

<script>
function changeColor() {
var text = [Link]("myText");
[Link] = "blue";
}
</script>
</body>
</html>

Output:
E
xperiment: 11

WAP in JavaScript for line breakup pop up message and to display timer.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Timing Sample</h2>
<p>Click on "Try it". Wait 5 seconds, and the page will alert "Hello How are you!!".</p>
<button onclick="setTimeout(myFunction, 5000);">Try it</button>

<script>
function myFunction() {
alert('Hello\n How are you!!');
}
</script>
</body>
</html>

Output:
xperiment: 12-13

WAP in JavaScript to generate random number.

const a = [Link]();
[Link](a);

const b = [Link]([Link]() * 10);


[Link](b);

Output:

WAP in JavaScript to trim a string.


let c = " Aditya Chugh ";
[Link]([Link]());

Output:
EXPERIMENT -14
Create your profile page in html or JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Page</title>
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
.container {
text-align: center;
margin: 0 auto;
width: 50%;
background-color: red;
padding: 20px;
border-radius: 8px;
}
.profile-pic {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 10px;
}
table, th, td {
border: 1px solid blue;
border-collapse: collapse;
margin: 10px auto;
}
th, td {
padding: 8px;
}
</style>
</head>
<body>
<div class="container">
<img src="[Link] alt="Profile Picture"
class="profile-pic">
<h3>Aditya Chugh</h3>
<p>@lol</p>
<button>Follow</button>
<p>Hello, I am Aditya Chugh. I am pursuing a [Link] in CSE from Amity University and focusing on
Software Development.</p>
<h4>Educational Qualifications:</h4>
<p>School: Vivekanand Sr. Sec. School</p>
<table>
<tr>
<th>Standard</th>
<th>Percentage</th>
</tr>
<tr>
<td>10th</td>
<td>95.8%</td>
</tr>
<tr>
<td>12th</td>
<td>93.4%</td>
</tr>
</table>
<p>University: Amity University, Gurgaon</p>
<h4>Hobbies:</h4>
<ul>
<li>Listening to Music</li>
<li>Reading Books</li>
<li>Gaming</li>
</ul>
<h4>Achievements:</h4>
<ul>
<li>Completed a Web Development Course</li>
<li>Created a Portfolio Website</li>
<li>Scored 93.4% in 12th grade</li>
</ul>
</div>
</body>
</html>

Output:
Experiment: 15
WAP to implement JavaScript array methods.

const fruits = ['apple', 'banana', 'cherry'];

[Link]('date');
[Link]('apricot');

const removedFruit = [Link]();


const removedFirstFruit = [Link]();

const moreFruits = ['grape', 'kiwi'];


const allFruits = [Link](moreFruits);

const slicedFruits = [Link](1, 4);


[Link](1, 1, 'orange');

[Link]((fruit) => [Link](fruit));

[Link](allFruits);

Output:

Common questions

Powered by AI

Interactive web elements are created using event handlers and dynamic styling in JavaScript. Event listeners such as click, input change, and mouseover/out are used to trigger responses—like alerts, logging input changes, and changing element colors. These interactions enrich user experience by making the interface responsive and intuitive. Such elements engage users, offering immediate feedback, and facilitating smoother navigation and interaction within web applications .

User input in the JavaScript programs is obtained through the prompt function, which prompts the user to enter data. This input is then used in different operations. For example, the calculator program uses prompt to get numbers and the desired operation from the user. Similarly, temperature conversion relies on user input for temperatures to convert between Celsius and Fahrenheit. In event handling examples, the input field tracks user interaction with 'input' event listeners to log changes .

The JavaScript code uses event listeners to respond to user interactions. These include click, input, mouseover, and mouseout. Each listener is added using the addEventListener method to specific elements, enabling dynamic interactions. For a button, a click listener triggers an alert. An input listener logs text changes in an input field. Mouseover and mouseout listeners change a div's background color on entry and revert on exit, respectively. This demonstrates how interactivity is incorporated into web pages to enhance user experience .

String manipulation in the JavaScript examples is demonstrated through methods like replace and trim. The replace method is used to substitute parts of a string, such as changing 'world' to 'India.' The trim method removes whitespace from both ends of a string, optimizing it for storage and display. These techniques are used to clean, modify, and ensure relevance in string data within web development .

Prompt and alert functions enhance interaction in JavaScript by engaging the user in active data entry and feedback loops. The prompt function solicits input, such as numbers for arithmetic operations or temperatures for conversion. The alert function provides immediate feedback or instructions post-interaction, seen in button click events where alerts confirm actions. These functions create a conversational interface, guiding users through tasks efficiently .

The JavaScript array manipulation experiments utilize several methods including push, unshift, pop, shift, concat, slice, splice, and forEach. 'Push' adds an element to the end of an array, while 'unshift' adds one to the beginning. 'Pop' removes the last element and 'shift' removes the first. 'Concat' merges two arrays into one. 'Slice' extracts a section of an array into a new array, whereas 'splice' can add or remove elements from any position in the array. 'ForEach' iterates over elements, executing a function for each one, demonstrated by logging each fruit in the array .

The JavaScript Math object supports various mathematical operations and properties. From the examples, it demonstrates functions like Math.round to round numbers, Math.ceil to round numbers up, Math.floor to round numbers down, Math.trunc to return the integer part of a number, Math.sign to determine the sign of a number, Math.sqrt to calculate the square root, and Math.pow to raise a number to a power. These functions allow for comprehensive handling of numerical data .

JavaScript interacts with HTML elements primarily through document methods like getElementById to target specific elements by ID. It then uses style manipulation to change attributes like background color dynamically. For instance, in changing the paragraph's color, JavaScript alters the CSS directly via the style property. These methods allow modifying the document’s content and style in response to user actions, thereby enhancing visual and interactive aspects without reloading the page .

The document demonstrates basic functions and operations in JavaScript such as printing messages (e.g., 'Hello, World!') using console.log, performing arithmetic calculations like addition, swapping variables using arithmetic operations, building a simple calculator that performs basic arithmetic operations based on user input, implementing various Math functions like round, ceil, floor, trunc, sign, square root, and power, working with regular expressions for search and replace operations, temperature conversion between Celsius and Fahrenheit, reversing a number with and without a function, handling various types of events like click, input, mouseover, and mouseout, changing the background color of a paragraph, generating random numbers, trimming strings, and creating a profile page using HTML and JavaScript event handlers .

The document illustrates swapping two variables without a temporary variable using arithmetic operations. If a and b are the variables, a becomes the sum of both, then b takes the difference of the new a and original b to become the original a. Finally, a is calculated as the difference between new a and new b to become the original b. This utilizes basic arithmetic to interchange values without extra storage .

You might also like