Scribd
Upload
55 views

Java Script25

Bcgl456 lab manual 1

Uploaded by

l70669985
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
55 views

Java Script25

Bcgl456 lab manual 1

Uploaded by

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

1a.

Develop a JavaScript program to Capitalize the first letter of each Word of a sentence
(String)

function capitalizeFirstLetterOfEachWord(sentence) {

return sentence.split(' ').map(word => {

if (word.length > 0) {

return word[0].toUpperCase() + word.slice(1).toLowerCase();

} else {

return word;

}).join(' ');

const sentence = "hello world! this is a test.";

const capitalizedSentence = capitalizeFirstLetterOfEachWord(sentence);

console.log(capitalizedSentence);

1b .Develop a JavaScript program to Check a string starts with 'Java'.

function startsWithJava(str) {

return str.startsWith('Java');

// Example usage:

const testString1 = "JavaScript is a programming language.";

const testString2 = "I love Java and coffee.";

console.log(startsWithJava(testString1)); // Output: true

console.log(startsWithJava(testString2)); // Output: false


2b. Develop a JavaScript program to reverse a given string

function reverseString(str) {

return str.split('').reverse().join('');

// Example usage:

const originalString = "Hello, World!";

const reversedString = reverseString(originalString);

console.log(reversedString); // Output: !dlroW ,olleH

3a. Develop a JavaScript program to display a message using alert.

html

<!DOCTYPE html>

<html>

<head>

<title>Alert Example</title>

<script>

function showAlert(message) {

alert(mezssage);

</script>

</head>

<body>

<button onclick="showAlert('Hello, World!')">Click Me</button>

</body>

</html>
3b. Develop a JavaScript program to display a confirm message on a button click.

html
<!DOCTYPE html>
<html>
<head>
<title>Confirm Example</title>
<script>
function showConfirm() {
// Display a confirmation dialog
const userConfirmed = confirm("Are you sure you want to proceed?");

// Handle the user's response


if (userConfirmed) {
alert("User clicked OK.");
} else {
alert("User clicked Cancel.");
}
}
</script>
</head>
<body>
<button onclick="showConfirm()">Click Me</button>
</body>
</html>
3c. Develop a JavaScript program to read value through prompt window and display the
value on a button click.

html
<!DOCTYPE html>
<html>
<head>
<title>Prompt Example</title>
<script>
function showPrompt() {
// Display a prompt dialog to get user input
const userInput = prompt("Please enter your name:");

// Display the entered value on the web page


if (userInput !== null) {
document.getElementById("displayArea").innerText = `You entered: ${userInput}`;
} else {
document.getElementById("displayArea").innerText = "You canceled the prompt.";
}
}
</script>
</head>
<body>
<button onclick="showPrompt()">Click Me</button>
<div id="displayArea"></div>
</body>
</html>
4a. Develop a JavaScript program to display (on respective button clicks) multiplication and
division of two numbers. Read values from the textboxes and design two buttons (use DOM)

<!DOCTYPE html>
<html>
<head>
<title>Multiplication and Division</title>
<script>
function multiplyNumbers() {
const num1 = parseFloat(document.getElementById("number1").value);
const num2 = parseFloat(document.getElementById("number2").value);
// Check if the inputs are valid numbers
if (isNaN(num1) || isNaN(num2)) {
alert("Please enter valid numbers.");
return;
}

// Perform multiplication
const result = num1 * num2;

// Display the result


document.getElementById("result").innerText = `Result: ${result}`;
}

function divideNumbers() {
// Get the values from the textboxes
const num1 = parseFloat(document.getElementById("number1").value);
const num2 = parseFloat(document.getElementById("number2").value);

// Check if the inputs are valid numbers


if (isNaN(num1) || isNaN(num2)) {
alert("Please enter valid numbers.");
return;
}

// Check for division by zero


if (num2 === 0) {
alert("Division by zero is not allowed.");
return;
}

// Perform division
const result = num1 / num2;

// Display the result


document.getElementById("result").innerText = `Result: ${result}`;
}
</script>
</head>
<body>
<h2>Multiplication and Division</h2>
<div>
<label for="number1">Number 1:</label>
<input type="text" id="number1">
</div>
<div>
<label for="number2">Number 2:</label>
<input type="text" id="number2">
</div>
<div>
<button onclick="multiplyNumbers()">Multiply</button>
<button onclick="divideNumbers()">Divide</button>
</div>
<div id="result"></div>
</body>
</html>
4b. Develop a JavaScript program to highlight with red color the HTML links () having class
name “high” (use DOM)

<!DOCTYPE html>
<html>
<head>
<title>Highlight Links</title>
<style>
a{
color: initial;
}
</style>
</head>
<body>
<h2>Links</h2>
<a href="https://example.com" class="high">High Priority Link 1</a>
<a href="https://example.com">Normal Link 1</a>
<a href="https://example.com" class="high">High Priority Link 2</a>
<a href="https://example.com">Normal Link 2</a>

<script>
function highlightLinks() {
// Select all links with class 'high'
const highLinks = document.querySelectorAll('a.high');

// Change the color of the selected links to red


highLinks.forEach(link => {
link.style.color = 'red';
});
}

// Call the function to highlight the links


highlightLinks();
</script>
</body>
</html>
5a. Develop a JavaScript program to read the content of HTML paragraph and update (on
button click event) with the suitable Text read from the HTML Textbox (Use innerHTML)

<!DOCTYPE html>
<html>
<head>
<title>Update Paragraph</title>
</head>
<body>
<h2>Update Paragraph</h2>
<p id="paragraph">This is the initial content of the paragraph.</p>
<input type="text" id="textInput" placeholder="Enter new text">
<button onclick="updateParagraph()">Update</button>

<script>
function updateParagraph() {
const newText = document.getElementById('textInput').value;
document.getElementById('paragraph').innerHTML = newText;
}
</script>
</body>
</html>
5b. Develop a JavaScript program to check for an attribute (‘href’ in ) and get its
value/display on the Web page on a button click.

html
<!DOCTYPE html>
<html>
<head>
<title>Check href Attribute</title>
</head>
<body>
<h2>Check href Attribute</h2>
<a id="link" href="https://example.com">Example Link</a><br>
<button onclick="checkHrefAttribute()">Check href Attribute</button>
<div id="result"></div>

<script>
function checkHrefAttribute() {
const linkElement = document.getElementById('link');

const hrefValue = linkElement.getAttribute('href');

// Display the href attribute value on the web page


document.getElementById('result').innerText = `The value of href attribute is: $
{hrefValue}`;
}
</script>
</body>
</html>

6a. Develop a JavaScript program to sort a list of numbers (Use arrays and functions)

function sortNumbers(numbers) {

numbers.sort(function(a, b) {

return a - b;

});

return numbers;

const unsortedNumbers = [4, 2, 7, 1, 9, 5];

const sortedNumbers = sortNumbers(unsortedNumbers);

console.log(sortedNumbers); // Output: [1, 2, 4, 5, 7, 9]

6b. Develop a JavaScript program to create a hotel object using object literal syntax having
properties (name, location, room rate, discount etc), constructors and method (offer-price).
Create few objects to demonstrate the access of properties and an associated method

const hotel = {
name: "Grand Hotel",
location: "City Center",
roomRate: 200,
discount: 10,
offerPrice: function() {
const discountedPrice = this.roomRate - (this.roomRate * (this.discount / 100));
return discountedPrice;
}
};
// Accessing properties of the hotel object
console.log("Hotel Name:", hotel.name);
console.log("Location:", hotel.location);
console.log("Room Rate:", hotel.roomRate);
console.log("Discount:", hotel.discount + "%");

// Accessing the offerPrice method and displaying the discounted price


console.log("Offer Price:", hotel.offerPrice());

// Create another hotel object


const anotherHotel = {
name: "Ocean View Hotel",
location: "Beachfront",
roomRate: 250,
discount: 15,
offerPrice: function() {
const discountedPrice = this.roomRate - (this.roomRate * (this.discount / 100));
return discountedPrice;
}
};
console.log("\nHotel Name:", anotherHotel.name);
console.log("Location:", anotherHotel.location);
console.log("Room Rate:", anotherHotel.roomRate);
console.log("Discount:", anotherHotel.discount + "%");
console.log("Offer Price:", anotherHotel.offerPrice());

You might also like