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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy