1a.
function capitalizeSentence(sentence) html Program
{ <!DOCTYPE html>
let words = [Link](" "); <html>
for (let i = 0; i < [Link]; i++) <head>
{ <title>Alert Example</title>
words[i] = words[i].charAt(0).toUpperCase() + <script>
words[i].slice(1); function showAlert(message) {
} alert(message);
let capitalizedSentence = [Link](" "); }
return capitalizedSentence; </script>
} </head>
let sentence = "this is a sample sentence"; <body>
[Link](capitalizeSentence(sentence)); <button onclick="showAlert('Hello, World!')">Click
Me</button>
1b. </body>
</html>
function startsWithJava(str)
{
3 b.
return [Link]("Java");
<!DOCTYPE html>
}
<html>
[Link](startsWithJava("Welcome to JavaScript lab"));
<head>
[Link](startsWithJava("JavaScript Lab"));
<title>Confirm Example</title>
<script>
2a. function showConfirm() {
function displayCurrentDayAndTime() { const userConfirmed = confirm("Are you sure you
const now = new Date(); want to proceed?");
const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', if (userConfirmed) {
'Wednesday', 'Thursday', 'Friday', 'Saturday']; alert("User clicked OK.");
const dayName = daysOfWeek[[Link]()]; } else {
const hours = [Link](); alert("User clicked Cancel.");
const minutes = [Link](); }
const seconds = [Link](); }
const timeString = `${[Link]().padStart(2, </script>
'0')}:${[Link]().padStart(2, </head>
'0')}:${[Link]().padStart(2, '0')}`; <body>
[Link](`Today is: ${dayName}`); <button onclick="showConfirm()">Click Me</button>
[Link](`Current time is: ${timeString}`); </body>
} </html>
2b.
function reverseString(str) 3 c.
{ <!DOCTYPE html>
return [Link]('').reverse().join(''); <html>
} <head>
const originalString = "Hello, World!"; <title>Prompt Example</title>
const reversedString = reverseString(originalString); <script>
[Link](reversedString); function showPrompt() {
const userInput = prompt("Please enter your
3 a. name:");
function showAlert(message) { if (userInput !== null) {
alert(message);
} [Link]("displayArea").innerText =
showAlert("Hello, World!"); `You entered: ${userInput}`;
} else { <body>
[Link]("displayArea").innerText <h2>Multiplication and Division</h2>
= "You canceled the prompt."; <div>
} <label for="number1">Number 1:</label>
} <input type="text" id="number1">
</script> </div>
</head> <div>
<body> <label for="number2">Number 2:</label>
<button onclick="showPrompt()">Click Me</button> <input type="text" id="number2">
<div id="displayArea"></div> </div>
</body> <div>
</html> <button
4 a. onclick="multiplyNumbers()">Multiply</button>
<html> <button onclick="divideNumbers()">Divide</button>
</div>
<head>
<div id="result"></div>
<title>Multiplication and Division</title>
</body>
<script> </html>
function multiplyNumbers() 4 b.
{ <!DOCTYPE html>
const num1 = <html>
parseFloat([Link]("number1").value); <head>
const num2 = <title>Highlight Links</title>
parseFloat([Link]("number2").value); <style>
if (isNaN(num1) || isNaN(num2)) /* Ensure default styles for other links */
{ a{
alert("Please enter valid numbers."); color: initial;
return; }
} </style>
const result = num1 * num2; </head>
[Link]("result").innerText = <body>
`Result: ${result}`; <h2>Links</h2>
} <a href="[Link] class="high">High
function divideNumbers() Priority Link 1</a>
{ <a href="[Link] Link 1</a>
const num1 = <a href="[Link] class="high">High
parseFloat([Link]("number1").value); Priority Link 2</a>
const num2 = <a href="[Link] Link 2</a>
parseFloat([Link]("number2").value); <script>
if (isNaN(num1) || isNaN(num2)) { function highlightLinks() {
alert("Please enter valid numbers."); const highLinks =
return; [Link]('[Link]');
} [Link](link => {
if (num2 === 0) { [Link] = 'red';
alert("Division by zero is not allowed."); });
return; }
} highlightLinks();
const result = num1 / num2; </script>
[Link]("result").innerText = </body>
`Result: ${result}`; </html>
}
</script>
</head>
5 a. 6 a.
<!DOCTYPE html> function sortNumbers(numbers) {
<html> [Link](function(a, b) {
<head> return a - b;
<title>Update Paragraph</title> });
</head> return numbers;
<body> }
<h2>Update Paragraph</h2> const unsortedNumbers = [4, 2, 7, 1, 9, 5];
<p id="paragraph">This is the initial content of the const sortedNumbers =
paragraph.</p> sortNumbers(unsortedNumbers);
<input type="text" id="textInput" placeholder="Enter [Link](sortedNumbers);
new text">
<button onclick="updateParagraph()">Update</button> 6 b.
<script> const hotel = {
function updateParagraph() { name: "Grand Hotel",
const newText = location: "City Center",
[Link]('textInput').value; roomRate: 200,
[Link]('paragraph').innerHTML = discount: 10,
newText; offerPrice: function() {
} const discountedPrice = [Link] -
</script> ([Link] * ([Link] / 100));
</body> return discountedPrice;
</html> }
};
5 b. [Link]("Hotel Name:", [Link]);
<!DOCTYPE html> [Link]("Location:", [Link]);
<html> [Link]("Room Rate:", [Link]);
<head> [Link]("Discount:", [Link] + "%");
<title>Check href Attribute</title> [Link]("Offer Price:", [Link]());
</head> const anotherHotel = {
<body> name: "Ocean View Hotel",
<h2>Check href Attribute</h2> location: "Beachfront",
<a id="link" href="[Link] roomRate: 250,
Link</a><br> discount: 15,
<button onclick="checkHrefAttribute()">Check href offerPrice: function() {
Attribute</button> const discountedPrice = [Link] -
<div id="result"></div> ([Link] * ([Link] / 100));
return discountedPrice;
<script> }
function checkHrefAttribute() { };
// Get the anchor element [Link]("\nHotel Name:", [Link]);
const linkElement = [Link]('link'); [Link]("Location:", [Link]);
const hrefValue = [Link]('href'); [Link]("Room Rate:", [Link]);
[Link]('result').innerText = `The value [Link]("Discount:", [Link] +
of href attribute is: ${hrefValue}`; "%");
} [Link]("Offer Price:", [Link]());
</script>
</body>
</html>
7 a. Develop a jQuery program to disable/enable the $(this).html([Link](" "));
form and disable right click menu. });
});
<!DOCTYPE html> </script>
<html> </head>
<head> <body>
<scriptsrc="[Link] <p>This is a sample paragraph.</p>
/3.7.1/[Link]"></script> </body>
<script> </html>
$(document).ready(function(){
$("#disableFormBtn").click(function(){
$("form :input").prop("disabled", true); 8 a. Develop a jQuery program to Add options to a
}); drop-down list.
$("#enableFormBtn").click(function(){ b. Develop a jQuery program to Change the button
$("form :input").prop("disabled", false); text.
}); <!DOCTYPE html>
$(document).on("contextmenu",function(e) <html>
{ [Link](); <head>
}); <title>Add Options to Dropdown List</title>
}); <script src="[Link]
</script> [Link]"></script>
</head> <script>
<body> $(document).ready(function(){
<form> $("#addBtn").click(function(){
<label for="fname">First Name:</label><br> var optionText = $("#optionText").val();
<input type="text" id="fname" name="fname"><br> $("#dropdownList").append(`<option>$
<label for="lname">Last Name:</label><br> {optionText}</option>`);
<input type="text" id="lname" $("#addBtn").text("Item Added ");
name="lname"><br><br> });
<input type="submit" value="Submit"> });
</form> </script>
<br/> </head>
<button id="disableFormBtn">Disable Form</button> <body>
<button id="enableFormBtn">Enable Form</button> <h2>Add Options to Dropdown List</h2>
</body> <label for="optionText">Option Text:</label>
</html> <input type="text" id="optionText"><br><br>
<button id="addBtn">Add Item</button><br><br>
7 b. Develop a jQuery program to Underline all the <select id="dropdownList">
words and firs word bold. <option value="1">Item</option>
</select>
<!DOCTYPE html> </body>
<html> </html>
<head>
<title>LAB-1</title>
<script 9 a. Develop a jQuery program to Disable a link.
src="[Link] <!DOCTYPE html>
3.7.1/[Link]"></script> <html>
<script> <head>
$(document).ready(function(){ <title>Disable Link</title>
$("p").each(function(){ <script src="[Link]
var text = $(this).text().split(" [Link]"></script>
"); for(var i=0; i<[Link]; <script>
i++){ if (i === 0) { $(document).ready(function(){
text[i] = "<b>" + text[i] + "</b>"; $("#disableLinkBtn").click(function(){
} $("#disableLink").off("click");
text[i] = "<u>" + text[i] + "</u>"; words $("#disableLink").removeAttr("href");
} alert("Link is disabled!");
}); 10 a,b.
});
</script> <!DOCTYPE html>
</head> <html>
<body> <head>
<h2>Disable Link</h2> <title>LAB-10</title>
<a href="[Link] <script src="[Link]
id="disableLink">Click me to disable</a> [Link]"></script>
<button id="disableLinkBtn">Disable <style>
Link</button><br><br> .original {
</body> color:
</html> blue;
9b Develop a jQuery program to Delete all table rows font-weight: bold;
except first one. }
<!DOCTYPE html> .changed {
<html> color: red;
<head> font-style: italic;
<title>Delete Table Rows Except First</title> }
<script src="[Link]
[Link]"></script> #myDiv {
<script> width: 500px;
$(document).ready(function(){ height:
$("#deleteRowsBtn").click(function(){ 100px;
$("#myTable tr:not(:first-child)").remove(); background-color: lightblue;
}); border: 1px solid black;
}); }
</script>
</head> </style>
<body> </head>
<h2>Delete Table Rows Except First</h2> <body>
<table id="myTable" border="1"> <div id="myDiv">
<tr> <p id="text" class="original">This is a paragraph
<th>Name</th> Where class changes will be appear.</p>
<th>Age</th>
</tr> </div>
<tr> <br/>
<td>John</td> <button id="changeClass">Change Class</button>
<td>25</td> <script>
</tr> $(document).ready(function(){
<tr> $('#changeClass').click(function(){
<td>Jane</td>
<td>30</td> $('#text').removeClass('original').addClass('changed');
</tr> $('#myDiv').css('background-color',
<tr> 'lightgreen');
<td>Jim</td>
<td>35</td> });
</tr> });
</table> </script>
<br> </body>
<button id="deleteRowsBtn">Delete Rows Except </html>
First</button>
</body>
</html>
11 12 a,b
<!DOCTYPE html>
<html> <!DOCTYPE html>
<head> <html>
<title>Add Multiple Classes with jQuery</title> <head>
<script src="[Link] <title>Read and Display Textbox and Dropdown
[Link]"></script> Values</title>
<style> <script src="[Link]
.class1 { [Link]"></script>
color: blue; </head>
} <body>
.class2 { <input type="text" id="textBox" placeholder="Enter
font-weight: bold; text">
} <br> <br> <br>
.new { <select id="dropdown">
background-color: yellow; <option value="1">Select</option>
} <option value="2">CSE</option>
</style> <option value="3">ISE</option>
</head> <option value="4">AIML</option>
<body> <option value="5">EC</option>
<div id="myDiv">This is a div.</div> </select>
<br/> <br>
<button id="addClasses">Add Classes</button> <br><br>
<br/><br/> <button id="animateButton">Animate</button>
<button id="addNewClasses">Add <p id="output"></p>
new Classes</button>
<input type="text" id="newClass" <script>
placeholder="Enter a class name"> $(document).ready(function(){
$('#textBox').keyup(function(){
<script> var textBoxValue =
$(document).ready(function(){ $(this).val();
$('#addClasses').click(function(){ $('#output').text('Text entered: ' +
textBoxValue);
$('#myDiv').addClass('class1').addClass('class2'); });
});
$('#dropdown').change(function(){
$('#addNewClasses').click(function(){ var dropdownValue =
var newClass = $(this).val(); var
$('#newClass').val(); if(newClass){ selectedOptionText =
$('#myDiv').addClass(newClass); $(this).find('option:selected').text();
$('#newClass').val(''); $('#output').append('<br>Option chosen: ' +
} else { selectedOptionText );
alert('Please enter a class name.'); });
}
}); $('#animateButton').click(function(){
}); $('#output').animate({
</script> fontSize: '24px',
</body> color: 'red'
</html> }, 1000);
$('#output').css('color', 'red');
});
});
</script>
</body>
</html>