Scribd
Upload
27 views

rn4 js2

This document contains code to demonstrate various JavaScript decision making and looping statements including IF, IF/ELSE, IF/ELSE IF, SWITCH, FOR loop, WHILE loop, DO/WHILE loop, FOR/IN loop, and FOR/OF loop. The code allows a user to select a statement type and then provides interactive examples of number comparisons or loops to output results.

Uploaded by

newsneha775
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
27 views

rn4 js2

This document contains code to demonstrate various JavaScript decision making and looping statements including IF, IF/ELSE, IF/ELSE IF, SWITCH, FOR loop, WHILE loop, DO/WHILE loop, FOR/IN loop, and FOR/OF loop. The code allows a user to select a statement type and then provides interactive examples of number comparisons or loops to output results.

Uploaded by

newsneha775
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
You are on page 1/ 8

Practical 2 : Develop Javascript to use decision making and looping statements.

Code:

<html>

<head>

<title>Experiment 2</title>

<style>

div

background-color: lightgrey;

width: 350px;

border: 12px solid black;

padding: 50px;

margin: 20px;

margin: auto;

#condition

font-weight: bold;

text-decoration: underline;

</style>

</head>

<body>

<div>

<h2><u>Decision Making and Looping Statements</u></h2><br>

<a href="#" onclick="showInputFields('if')">IF</a> |

<a href="#" onclick="showInputFields('ifelse')">IF ELSE</a> |

<a href="#" onclick="showInputFields('ifelseif')">IF ELSE IF</a> |

<a href="#" onclick="showInputFields('switch')">SWITCH</a> |

<a href="#" onclick="showLoopOutput('for')">FOR Loop</a> |


<a href="#" onclick="showLoopOutput('while')">WHILE Loop</a> |

<a href="#" onclick="showLoopOutput('dowhile')">DO WHILE Loop</a> |

<a href="#" onclick="showLoopOutput('forin')">FOR/IN Loop</a> |

<a href="#" onclick="showLoopOutput('forof')">FOR/OF Loop</a><br><br>

<form name="exp2" style="display: none;">

<h2> Number Comparison </h2>

<span id="condition"></span><br><br>

<label for="var1">Enter the first number:</label>

<input type="text" name="var1"><br><br>

<label for="var2">Enter the second number:</label>

<input type="text" name="var2"><br><br>

<button type="button"
onclick="checkComparison()">CHECK</button><br><br>

<label for="result">Result:</label>

<span id="resultLabel"></span><br><br>

</form>

<form name="loop" style="display: none;">

<label for="loopoutput"><b></b></label><br><br>

<span id="loopResult"></span><br><br>

</form>

</div>

<script type="text/javascript">

function setResultText(resultText)

document.getElementById("resultLabel").innerText = resultText;

function showInputFields(option)

document.getElementsByTagName("form")[1].style.display = "none";

document.getElementById("condition").innerText = "Number comparison by using "


+ option + "
statement"; document.getElementById("resultLabel").innerText = "";

document.getElementsByTagName("form")[0].style.display = "block";
document.exp2.var1.value

= ""; document.exp2.var2.value = "";

function checkComparison()

var var1 = parseInt(exp2.var1.value); var var2 = parseInt(exp2.var2.value); var

resultText = ""; var option = document.getElementById("condition").innerText.split("

")[4].toUpperCase();

if (option === 'IF')

if (var1 > var2)

resultText = var1 + " is greater than " + var2;

else

resultText = var1 + " is not greater than " + var2;

else if (option === 'IFELSE')

if (var1 > var2)

resultText = var1 + " is greater than " + var2;

else if (var1 < var2)

resultText = var1 + " is smaller than " + var2;


} else

resultText = "Both numbers are equal.";

else if (option === 'IFELSEIF')

if (var1 > var2)

resultText = var1 + " is greater than " + var2;

else if (var1 < var2)

resultText = var1 + " is smaller than " + var2;

else if (var1 === var2)

resultText = "Both numbers are equal.";

else

resultText = "Invalid input.";

else if (option === 'SWITCH')

switch (true)

case var1 > var2:

resultText = var1 + " is greater than " + var2; break; case var1 <

var2:
resultText = var1 + " is smaller than " + var2;

break; case var1 === var2:

resultText = "Both numbers are equal."; break; default: resultText

= "Invalid input."; break;

setResultText(resultText);

function showLoopOutput(loopType)

var loopOutput = ""; document.getElementsByTagName("form")[0].style.display =

"none"; document.getElementsByTagName("form")[1].style.display = "block";

if (loopType === 'for')

name = "Sneha";

for (var i = 1; i <= 5; i++)

loopOutput += name + "\n ";

} document.getElementById("loopResult").innerText = "Printing the name 5

times by using FOR loop: \n\n" + loopOutput;

else if (loopType === 'while')

var loopOutput = 0; var i = 1; var no = 10;

while (i <= no)

loopOutput += i; i++;

document.getElementById("loopResult").innerText = "Sum of 1 to 10 numbers

using

WHILE loop: \n\n" + loopOutput;


}

else if (loopType === 'dowhile')

var i = 1; do

loopOutput += i + "\n"; i++;

} while (i <= 10); document.getElementById("loopResult").innerText =

"Printing the numbers from 1 to 10 by using DO WHILE loop: \n\n" + loopOutput;

else if (loopType === 'forin')

const person = { Name: 'Indira', Age: '12', City: 'Solapur' }; for (var key

in person) {

loopOutput += "\n" + key + ": " + person[key] + " ";

} document.getElementById("loopResult").innerText = "Showing person's

information by using by using FOR/IN Loop: \n\n" + loopOutput;

else if (loopType === 'forof')

const colors = ['Red', 'Green', 'Blue', 'Black', 'White']; for (var element

of colors)

loopOutput += "\n" + element + " ";

document.getElementById("loopResult").innerText = "Displaying colors by

using

FOR / OF Loop: \n\n" + loopOutput;

</script>
</body>

</html>

Output:-

You might also like