VirtualMV/JavaScript/Iteration
| Internet & Web development (2) | ||
|---|---|---|
| Overview | JS and HTML | Resources | Help Desk ( Interactive ) |  |
| Getting Started | Basics | Layout and syntax | Operators | Strings and Numbers | Controlling flow | Functions | |
| Forms | Document Object | Input Box | Select | Radio Button | Check Box | Example | getElement | Events | |
| Techniques | Iteration (while, for, do) | Strings | Validation ( Regular Expressions ) | Calculations | |
| Objects | Array | Table | Window | |
| Multimedia | Images | Animations | Video | | |
| Extensions | Accessibility | Interactivity | | |
| Object-Oriented | | | |
| Case Study: Forms | Create Form | Variables | Skeleton | De-bugging | Validation Detail | Calculations | Table Object | Pop-up Window | Files | |
Overview
|
By the end of this page you will be able to:
|
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.
References
|
virtualMV | Superquick wiki guide | Please give me some feedback |
VirtualMV/JavaScript/Iteration. (2024). In WikiEducator/VirtualMV wiki. Retrieved April 19, 2024, from http:https://wikieducator.org/VirtualMV/JavaScript/Iteration (zotero)
|
