Scribd
Upload
6 views11 pages

Js Program

The document provides examples of JavaScript programming concepts including conditional statements, loops (while and do-while), switch case statements, and break/continue statements. Each section contains HTML code snippets that demonstrate how to implement these concepts in a web environment. The examples include user input handling and display of results based on the logic applied.

Uploaded by

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

Js Program

The document provides examples of JavaScript programming concepts including conditional statements, loops (while and do-while), switch case statements, and break/continue statements. Each section contains HTML code snippets that demonstrate how to implement these concepts in a web environment. The examples include user input handling and display of results based on the logic applied.

Uploaded by

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

JAVASCRIPT PROGRAM

 Condititional statements

1) If statement, if else statements and else if else


statements:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Conditional Statements Example</title>
<!--<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
input {
padding: 0.5rem;
margin: 1rem;
border: 1px solid #ccc;
Prof. SUCHIKA PATEL Page 1
border-radius: 4px;
}
button {
padding: 0.5rem 1rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
p{
font-size: 1.2rem;
color: #333;
}
</style>-->

</head>
<body>
<div class="container">
<h1>Check Number</h1>
<input type="number" id="numberInput" placeholder="Enter
a number">
<button onclick="checkNumber()">Check</button>
<p id="result"></p>
</div>

<script>
function checkNumber() {

Prof. SUCHIKA PATEL Page 2


const num =
parseInt(document.getElementById('numberInput').value);

const resultElement = document.getElementById('result');

if (isNaN(num)) {
resultElement.textContent = 'Please enter a valid number.';

} else if (num > 0) {


resultElement.textContent = 'The number is positive.';

} else if (num < 0) {


resultElement.textContent = 'The number is negative.';

} else {
resultElement.textContent = 'The number is zero.';
}
}
</script>
</body>
</html>

2) WHILE AND DO WHILE LOOP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">

Prof. SUCHIKA PATEL Page 3


<title>While and Do...While Loops in JavaScript</title>
</head>
<body>
<h1>JavaScript While and Do...While Loops Example</h1>
<p>Enter a number to see the loops in action:</p>
<input type="number" id="userInput" placeholder="Enter a
number">
<button onclick="runWhileLoop()">Run While
Loop</button>
<button onclick="runDoWhileLoop()">Run Do...While
Loop</button>
<h2>While Loop Result:</h2>
<pre id="whileResult"></pre>
<h2>Do...While Loop Result:</h2>
<pre id="doWhileResult"></pre>

<script>
function runWhileLoop() {
const userInput =
parseInt(document.getElementById('userInput').value);
let i = 0;
let result = '';

while (i < userInput) {


result += `Iteration ${i + 1}: The value of i is ${i}\n`;
i++;
}

document.getElementById('whileResult').textContent =
result;
}

Prof. SUCHIKA PATEL Page 4


function runDoWhileLoop() {
const userInput =
parseInt(document.getElementById('userInput').value);
let i = 0;
let result = '';

do {
result += `Iteration ${i + 1}: The value of i is ${i}\n`;
i++;
} while (i < userInput);

document.getElementById('doWhileResult').textContent
= result;
}
</script>
</body>
</html>

3) Switch Case statement

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Switch Case Example</title>
<!--<style>
body {
font-family: Arial, sans-serif;

Prof. SUCHIKA PATEL Page 5


display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
input {
padding: 0.5rem;
margin: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 0.5rem 1rem;
margin: 0.5rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
p{
font-size: 1.2rem;
color: #333;

Prof. SUCHIKA PATEL Page 6


}
</style>-->
</head>
<body>
<div class="container">
<h1>Switch Case Example</h1>
<input type="text" id="dayInput" placeholder="Enter a day of
the week">
<button onclick="switchCaseExample()">Check
Day</button>
<p id="result"></p>
</div>

<script>
function switchCaseExample() {
const day =
document.getElementById('dayInput').value.toLowerCase();
const resultElement = document.getElementById('result');

let result;

switch (day) {
case '0':
result = 'Today is Monday. Start of the work week!';
break;
case '1':
result = 'Today is Tuesday. Keep going!';
break;
case '2':
result = 'Today is Wednesday. Halfway through!';
break;

Prof. SUCHIKA PATEL Page 7


case '3':
result = 'Today is Thursday. Almost there!';
break;
case '4':
result = 'Today is Friday. Weekend is near!';
break;
case '5':
result = 'Today is Saturday. Enjoy your weekend!';
break;
case '6':
result = 'Today is Sunday. Relax and recharge!';
break;
default:
result = 'Please enter a valid day of the week.';
}

resultElement.textContent = result;
}
</script>
</body>
</html>

4) BREAK AND CONTINUE STATEMENT


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Break and Continue Example</title>
<style>

Prof. SUCHIKA PATEL Page 8


body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
input {
padding: 0.5rem;
margin: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 0.5rem 1rem;
margin: 0.5rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
p{

Prof. SUCHIKA PATEL Page 9


font-size: 1.2rem;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<h1>Break and Continue Example</h1>
<input type="number" id="numberInput" placeholder="Enter
a number">
<button onclick="breakExample()">Break Example</button>
<button onclick="continueExample()">Continue
Example</button>
<p id="result"></p>
</div>

<script>
function breakExample() {
const num =
parseInt(document.getElementById('numberInput').value);
const resultElement = document.getElementById('result');
if (isNaN(num) || num < 1) {
resultElement.textContent = 'Please enter a valid positive
number.';
return;
}

let result = 'Break Example: ';


for (let i = 1; i <= 10; i++) {
if (i === num) {
break; // Exit the loop when i equals num

Prof. SUCHIKA PATEL Page 10


}
result += i + ' ';
}
resultElement.textContent = result;
}

function continueExample() {
const num =
parseInt(document.getElementById('numberInput').value);
const resultElement = document.getElementById('result');
if (isNaN(num) || num < 1) {
resultElement.textContent = 'Please enter a valid positive
number.';
return;
}

let result = 'Continue Example: ';


for (let i = 1; i <= 10; i++) {
if (i === num) {
continue; // Skip the current iteration when i equals num
}
result += i + ' ';
}
resultElement.textContent = result;
}
</script>
</body>
</html>

Prof. SUCHIKA PATEL Page 11

You might also like