Skip to content

Commit 233c710

Browse files
committed
converted 'loops' to the new code convention
1 parent 02acf72 commit 233c710

File tree

1 file changed

+76
-64
lines changed

1 file changed

+76
-64
lines changed

page/javascript-101/loops.md

+76-64
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@ attribution: jQuery Fundamentals
44
---
55
Loops let you run a block of code a certain number of times.
66

7-
<javascript caption="A for loop">
8-
// logs 'try 0', 'try 1', ..., 'try 4'
9-
for (var i=0; i<5; i++) {
10-
console.log('try ' + i);
11-
}
12-
</javascript>
13-
14-
<div class="note" markdown="1">
7+
``` js
8+
// A for loop
9+
// logs 'try 0', 'try 1', ..., 'try 4'
10+
for (var i=0; i<5; i++) {
11+
console.log('try ' + i);
12+
}
13+
```
14+
15+
<div class="note">
1516
Note that in Loops even though we use the keyword var before
1617
the variable name i, this does not "scope" the variable i to the loop block.
1718
We'll discuss scope in depth later in this chapter.
@@ -21,9 +22,11 @@ We'll discuss scope in depth later in this chapter.
2122

2223
A `for` loop is made up of four statements and has the following structure:
2324

24-
for ([initialisation]; [conditional]; [iteration]) {
25-
[loopBody]
26-
}
25+
``` js
26+
for ([initialisation]; [conditional]; [iteration]) {
27+
[loopBody]
28+
}
29+
```
2730

2831
The _initialisation_ statement is executed only once, before the loop starts. It
2932
gives you an opportunity to prepare or declare any variables.
@@ -43,45 +46,50 @@ and so will wrap them in a block ( {...}).
4346

4447
Here's a typical for loop:
4548

46-
<javascript caption="A typical for loop">
47-
for (var i = 0, limit = 100; i < limit; i++) {
48-
// This block will be executed 100 times
49-
console.log('Currently at ' + i);
50-
// Note: the last log will be "Currently at 99"
51-
}
52-
</javascript>
49+
``` js
50+
// A typical for loop
51+
for (var i = 0, limit = 100; i < limit; i++) {
52+
// This block will be executed 100 times
53+
console.log('Currently at ' + i);
54+
// Note: the last log will be "Currently at 99"
55+
}
56+
```
5357

5458
## The `while` loop
5559

5660
A while loop is similar to an if statement, except that its body will keep
5761
executing until the condition evaluates to false.
5862

59-
while ([conditional]) {
60-
[loopBody]
61-
}
63+
``` js
64+
while ([conditional]) {
65+
[loopBody]
66+
}
67+
```
6268

6369
Here's a typical while loop:
6470

65-
<javascript caption="A typical while loop">
66-
var i = 0;
67-
while (i < 100) {
68-
// This block will be executed 100 times
69-
console.log('Currently at ' + i);
71+
``` js
72+
// A typical while loop
73+
var i = 0;
74+
while (i < 100) {
75+
// This block will be executed 100 times
76+
console.log('Currently at ' + i);
7077

71-
i++; // increment i
72-
}
73-
</javascript>
78+
i++; // increment i
79+
}
80+
```
7481

7582
You'll notice that we're having to increment the counter within the loop's
7683
body. It is possible to combine the conditional and incrementer, like so:
7784

78-
<javascript caption="A while loop with a combined conditional and incrementer">
79-
var i = -1;
80-
while (++i < 100) {
81-
// This block will be executed 100 times
82-
console.log('Currently at ' + i);
83-
}
84-
</javascript>
85+
``` js
86+
// A while loop with a combined conditional and incrementer
87+
var i = -1;
88+
while (++i < 100) {
89+
// This block will be executed 100 times
90+
console.log('Currently at ' + i);
91+
}
92+
```
8593

8694
Notice that we're starting at -1 and using the prefix incrementer (++i).
8795

@@ -90,21 +98,23 @@ Notice that we're starting at -1 and using the prefix incrementer (++i).
9098
This is almost exactly the same as the while loop, except for the fact that the
9199
loop's body is executed at least once before the condition is tested.
92100

93-
do {
94-
[loopBody]
95-
} while ([conditional])
96-
101+
``` js
102+
do {
103+
[loopBody]
104+
} while ([conditional])
105+
```
97106
Here's a do-while loop:
98107

99-
<javascript caption="A do-while loop">
100-
do {
101-
// Even though the condition evaluates to false
102-
// this loop's body will still execute once.
108+
``` js
109+
// A do-while loop
110+
do {
111+
// Even though the condition evaluates to false
112+
// this loop's body will still execute once.
103113

104-
alert('Hi there!');
114+
alert('Hi there!');
105115

106-
} while (false);
107-
</javascript>
116+
} while (false);
117+
```
108118

109119
These types of loops are quite rare since only few situations require a loop
110120
that blindly executes at least once. Regardless, it's good to be aware of it.
@@ -115,26 +125,28 @@ Usually, a loop's termination will result from the conditional statement not
115125
evaluating to true, but it is possible to stop a loop in its tracks from within
116126
the loop's body with the break statement.
117127

118-
<javascript caption="Stopping a loop">
119-
for (var i = 0; i < 10; i++) {
120-
if (something) {
121-
break;
122-
}
123-
}
124-
</javascript>
128+
``` js
129+
// Stopping a loop
130+
for (var i = 0; i < 10; i++) {
131+
if (something) {
132+
break;
133+
}
134+
}
135+
```
125136

126137
You may also want to continue the loop without executing more of the loop's
127138
body. This is done using the continue statement.
128139

129140

130-
<javascript caption="Skipping to the next iteration of a loop">
131-
for (var i = 0; i < 10; i++) {
132-
if (something) {
133-
continue;
134-
}
141+
``` js
142+
// Skipping to the next iteration of a loop
143+
for (var i = 0; i < 10; i++) {
144+
if (something) {
145+
continue;
146+
}
135147

136-
// The following statement will only be executed
137-
// if the conditional 'something' has not been met
138-
console.log('I have been reached');
139-
}
140-
</javascript>
148+
// The following statement will only be executed
149+
// if the conditional 'something' has not been met
150+
console.log('I have been reached');
151+
}
152+
```

0 commit comments

Comments
 (0)