VirtualMV/JavaScript/Iteration

From WikiEducator
Jump to: navigation, search




Overview

VmvIcon Objectives.png

By the end of this page you will be able to:

  • Understand how a radio button is created

Commonly used iteration functions

Javascript iteration functions are very similar to those used in C++

The three commonly used iteration functions are:

while (condition) {……..}
for (initialisation, condition, increment) {……}
do {………} while (condition)

while ... (js3_01)

<html>
<head><title>JavaScript (js3_01)</title></head>
<body>
<script type="text/javascript">
var intI = 0;
while (intI <= 5){
  document.write("The number is " + intI);
  document.write("<br />");
  intI++;
}
</script>
<p>Explanation:</p>
<p><b>i</b>  equal to 0.</p> 
<p>While <b>intI</b> is less than , or equal to, 5, <br />
  the loop will continue to run.</p> 
<p><b>intI</b> will increase by 1 each time the loop runs.</p> 
</body>
</html>

Example :Click here to run js3_01.

for ... (js3_02)

<html>
<head><title>JavaScript (js3_02)</title></head>
<body>
<script type="text/javascript">
for (intI = 0; intI <= 5; intI++){
  document.write("The number is " + intI);
  document.write("<br />");
}
</script>
<p>Explanation:</p> 
<p>The for loop sets <b>intI</b>  equal to 0.</p>
<p>As long as <b>intI</b> is less than , or equal to, 5, <br/>
   the loop will continue to run.</p>
<p><b>intI</b> will increase by 1 each time the loop runs.</p> 
</body>
</html>

Example :Click here to run js3_02.

do ...while (js3_03)

<html>
<head><title>JavaScript (js3_03)</title></head>
<body>
<script type="text/javascript">
intI = 0;
do {
  document.write("The number is " + intI);
  document.write("<br />");
  intI++;
} 
while (intI <= 5)
</script>
<p>Explanation:</p>
<p><b>intI</b>  equal to 0.</p>
<p>The loop will run</p>
<p><b>intI</b> will increase by 1 each time the loop runs.</p>
<p>While <b>intI</b> is less than , or equal to, 5, <br/>
  the loop will continue to run.</p>
</body>
</html>

Example :Click here to run js3_03.

Using an inline function

In the previous example the JavaScript was embedded in the code. How can you make the html/JavaScript easier to read? We can do this by separating the JavaScript from the html code by using a function. (This could be improved further by having the JavaScript stored in a linked .js file)

<html>
<head>
<title>JavaScript (js3_04)</title>
<script type="text/javascript">
function fnLoopy() {
  for (intI = 0; intI <= 5; intI++){
    document.write("The number is " + intI);
    document.write("<br />");
  }
}
</script>
</head>
<body>
<script type="text/javascript">fnLoopy();</script>
<p>Explanation:</p> 
<p>The for loop sets <b>intI</b>  equal to 0.</p>
<p>As long as <b>intI</b> is less than , or equal to, 5, <br/>
   the loop will continue to run.</p>
<p><b>intI</b> will increase by 1 each time the loop runs.</p> 
</body>
</html>

Example :Click here to run js3_04.

Exercises

Exercise 1: Check box using iteration (js2_05 modified)

Modify the following program to use an iteration technique in fnCheck. Note the values have been changed to the cost of each item. Assume this is a daily order and only get none or one of each (e.g. you probably would by cream and sugar daily).

<html><body>
<script type="text/javascript">
<!--
function fnCheck() {
  var strX = "";
  objDrink=document.frmChoose.chkDrinks;
for(inti=0; inti<3; inti++)
{ 
 if (objDrink[inti].checked) {strX = strX + objDrink[inti].value +" ";};
 }
  alert("You have selected: " +strX);
}
 
//-->
</script>
<form name="frmChoose">
<input type="checkbox" name="chkDrinks" value="2.50" />Milk<br />
<input type="checkbox" name="chkDrinks" value="4.50" />Cream<br />
<input type="checkbox" name="chkDrinks" value="2.00" />Sugar<br />
<input type="button" value="Order" onClick="fnCheck()" />
</form>
</body></html>

Example :Click here to run js2_05.

VmvIcon References.png References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/JavaScript/Iteration. (2024). In WikiEducator/VirtualMV wiki. Retrieved November 5, 2024, from http:https://wikieducator.org/VirtualMV/JavaScript/Iteration    (zotero)