Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make for-loop example of "Loops and iteration" guide an interactive one #14128

Closed
wants to merge 2 commits into from
Closed

Make for-loop example of "Loops and iteration" guide an interactive one #14128

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ad1a342
Make for-loop example Live
alattalatta Mar 21, 2022
9cf4699
Print example output inline rather than alert
alattalatta Mar 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 52 additions & 35 deletions files/en-us/web/javascript/guide/loops_and_iteration/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,7 @@ The statements for loops provided in JavaScript are:

## `for` statement

A {{jsxref("statements/for","for")}} loop repeats until a specified condition evaluates
to `false`. The JavaScript `for` loop is similar to the Java and C
`for` loop.
A {{jsxref("statements/for","for")}} loop repeats until a specified condition evaluates to false. The JavaScript `for` loop is similar to the Java and C `for` loop.

A `for` statement looks as follows:

Expand All @@ -61,46 +59,59 @@ for ([initialExpression]; [conditionExpression]; [incrementExpression])

When a `for` loop executes, the following occurs:

1. The initializing expression `initialExpression`, if any, is executed.
This expression usually initializes one or more loop counters, but the syntax allows
an expression of any degree of complexity. This expression can also declare variables.
2. The `conditionExpression` expression is evaluated. If the value of
`conditionExpression` is true, the loop statements execute. If the value of
`condition` is false, the `for` loop terminates. (If the
`condition` expression is omitted entirely, the condition is assumed to be
true.)
3. The `statement` executes. To execute multiple statements, use a block
statement (`{ ... }`) to group those statements.
1. The initializing expression `initialExpression`, if any, is executed. This expression usually initializes one or more loop counters, but the syntax allows an expression of any degree of complexity. This expression can also declare variables.
2. The `conditionExpression` expression is evaluated. If the value of `conditionExpression` is true, the loop statements execute. Otherwise, the `for` loop terminates. (If the `conditionExpression` expression is omitted entirely, the condition is assumed to be true.)
3. The `statement` executes. To execute multiple statements, use a [block statement](/en-US/docs/Web/JavaScript/Reference/Statements/block) (`{ ... }`) to group those statements.
4. If present, the update expression `incrementExpression` is executed.
5. Control returns to Step 2.

### Example

In the example below, the function contains a `for` statement that counts
the number of selected options in a scrolling list (a [`<select>`](/en-US/docs/Web/HTML/Element/select)
element that allows multiple selections). The `for` statement declares the
variable `i` and initializes it to `0`. It checks that
`i` is less than the number of options in the `<select>`
element, performs the succeeding `if` statement, and increments
`i` by 1 after each pass through the loop.
element that allows multiple selections).

#### HTML

```html
<form name="selectForm">
<p>
<label for="musicTypes">Choose some music types, then click the button below:</label>
<select id="musicTypes" name="musicTypes" multiple="multiple">
<option selected="selected">R&B</option>
<option>Jazz</option>
<option>Blues</option>
<option>New Age</option>
<option>Classical</option>
<option>Opera</option>
</select>
</p>
<p><input id="btn" type="button" value="How many are selected?" /></p>
<label for="musicTypes">Choose some music types, then click the button below:</label>
<select id="musicTypes" name="musicTypes" multiple>
<option selected>R&B</option>
<option>Jazz</option>
<option>Blues</option>
<option>New Age</option>
<option>Classical</option>
<option>Opera</option>
</select>
<button id="btn" type="button">How many are selected?</button>
<hr>
<label for="result">Output:</label>
<output id="result" for="musicTypes">You have selected 0 option(s).</output>
</form>
```

```css hidden
label,
button,
output {
display: block;
}

<script>
button {
margin-top: 0.5em;
}

hr {
margin: 1em 0;
}
```

#### JavaScript

Here, the `for` statement declares the variable `i` and initializes it to `0`. It checks that `i` is less than the number of options in the `<select>` element, performs the succeeding `if` statement, and increments `i` by 1 after each pass through the loop.

```js
function howMany(selectObject) {
let numberSelected = 0;
for (let i = 0; i < selectObject.options.length; i++) {
Expand All @@ -111,13 +122,19 @@ function howMany(selectObject) {
return numberSelected;
}

let btn = document.getElementById('btn');
btn.addEventListener('click', function() {
alert('Number of options selected: ' + howMany(document.selectForm.musicTypes));
const btn = document.getElementById('btn');
const result = document.getElementById('result');

btn.addEventListener('click', () => {
const musicTypes = document.selectForm.musicTypes;
result.textContent = `You have selected ${howMany(musicTypes)} option(s).`;
});
</script>
```

#### Result

{{EmbedLiveSample("example", '100%', 240)}}

## `do...while` statement

The {{jsxref("statements/do...while", "do...while")}} statement repeats until a
Expand Down