Blocks2js - Conditional loops lesson (#1702)

docs/SUMMARY.md

@@ -133,6 +133,7 @@
         * [Hello JavaScript](/courses/blocks-to-javascript/hello-javascript)
         * [Starter Blocks](/courses/blocks-to-javascript/starter-blocks)
         * [Writing Code](/courses/blocks-to-javascript/writing-code)
+        * [Conditional Loops](/courses/blocks-to-javascript/conditional-loops)
         * [Writing Functions](/courses/blocks-to-javascript/writing-functions)
     * [Science experiments](/courses/ucp-science)
         * [Data collection](/courses/ucp-science/data-collection)

docs/courses/blocks-to-javascript.md

@@ -31,6 +31,13 @@ Are you ready to try JavaScript to write your code?
         "cardType": "side",
         "imageUrl": "/static/courses/blocks-to-javascript/writing-code.png"
     },
+    {
+        "name": "Conditional Loops",
+        "description": "Work with your conditional loop blocks in JavaScript",
+        "url": "/courses/blocks-to-javascript/conditional-loops",
+        "cardType": "side",
+        "imageUrl": "/static/courses/blocks-to-javascript/conditional-loops.png"
+    },
     {
         "name": "Writing Functions",
         "description": "Writing reusable functions in JavaScript",
@@ -46,4 +53,5 @@ Are you ready to try JavaScript to write your code?
 [Hello JavaScript](/courses/blocks-to-javascript/hello-javascript),
 [Starter Blocks](/courses/blocks-to-javascript/starter-blocks),
 [Writing Code](/courses/blocks-to-javascript/writing-code),
+[Conditional Loops](/courses/blocks-to-javascript/conditional-loops),
 [Writing Functions](/courses/blocks-to-javascript/writing-functions)

docs/courses/blocks-to-javascript/conditional-loops.md

@@ -0,0 +1,199 @@
+# Conditional Loops
+
+## ~ avatar
+
+Work with your conditional loop blocks in JavaScript and make them do more.
+
+## ~
+
+The conditional loops let you run some part of a program multiples times while some condtion remains true. In MakeCode these conditional loops are in the **[while](/blocks/loops/while)**, **[for](/blocks/loops/for)**, and **[repeat](/blocks/loops/repeat)** blocks:
+
+```block
+while (true) {}
+```
+
+```block
+for (let index = 0; index <= 4; index++) {}
+```
+
+```block
+for (let i = 0; i < 4; i++) {}
+```
+
+In JavaScript, the code inside the loops is surrounded by a loop statement, its condition, and some braces `{ }`. The condition says whether the loop continues or stops and is inside parentheses ``( )`` right next to the loop statement. Go to the editor and drag out the three blocks shown above, then switch to JavaScript. You'll see that the code for them, without the comments, is just like this:
+
+```typescript
+// the 'while' loop of course
+while (true) {
+    // repeated code right here
+}
+
+// the for loop is here
+for (let index = 0; index <= 4; index++) {
+    // repeated code right here
+}
+
+// this is a 'repeat' loop, really!
+for (let i = 0; i < 4; i++) {
+    // repeated code right here
+}
+```
+
+One thing you may not have expected is that the ``||loops:repeat||`` block is actually a ``for () { }`` loop in JavaScript. We'll talk about that a little later.
+
+## While Loop
+
+The ``||loops:while||`` loop is probably the simplist of the loops. It has just a single condition that, while true, causes the code inside the loop to continue to run. The loop here will show the number in the ``count`` variable on the screen until ``count`` reaches the value of `5`.
+
+
+```block
+let count = 0
+while (count < 5) {
+    basic.showNumber(count)
+    count += 1
+    basic.pause(500)
+}
+```
+
+In JavaScript, the code inside the loop is surrounded by the **while** loop, its condition, and the braces `{ }`. The condition is inside parentheses right next to the **while** statement. Go ahead and copy this code into the JavaScript editor:
+
+```typescript
+let count = 0
+while (count < 5) {
+    basic.showNumber(count)
+    count += 1
+    basic.pause(500)
+}
+```
+
+Watch in the simulator and see how the value of ``count`` goes from `0` to `4`.
+
+Alright, now take the ``while (count < 5)`` out from the beginning of the loop and place at the end of loop on the same line as the `}` that closes the loop. Your loop should look like:
+
+```typescript-ignore
+let count = 0
+ {
+    basic.showNumber(count)
+    count += 1
+    basic.pause(500)
+} while (count < 5)
+```
+
+You'll have a squiggle at the end of the line with ``} while (count < 5)`` which means we have invalid code. Don't worry, we'll fix that right now! At the beginning of the loop, insert the word ``do`` just before left brace `{`. The error should go away and the simulator will count from `0` to `4` just like before when the word ``while`` was at the beginning of the loop. 
+
+```typescript
+let count = 0
+do {
+    basic.showNumber(count)
+    count += 1
+    basic.pause(500)
+} while (count < 5)
+```
+
+What we've just done is created a **do** loop or, as it's sometimes called, a **do while** loop. It's a **while** loop with its outsides flipped around. It works just like a regular **while** except that the loop's condition isn't checked until at the end. It expects that when the first time the code in the loop is run, the condition in the loop is satisfactory to run the code inside. However, if the value for ``count`` was initialized to something invalid, say ``let count = 5``, before loop, then the code inside will run even for a value we don't want. The **do** loop isn't used very often but it can be useful in some cases.
+
+## For Loop
+
+The ``||loops:for||`` loop block is super useful since it gives you both an index value and a condition to stop the loop with. The index value let's you _iterate_, or move, from one sequential value to the next. The condition for the loop can include the index value as part of it's check to continue the loop, like when the last value you want to use is reached. For our example that counts from `0` to `4`, we can just use the index as our count. Pull out the blocks for this example in the Blocks editor:
+
+```block
+for (let index = 0; index <= 4; index++) {
+    basic.showNumber(index)
+    basic.pause(500)
+}
+```
+
+What if we want to change the direction of iteration and display the values of `4` to `0` by iterating in the negative direction (a decreasing index)? Switch over to the JavaScript editor and let's make this change. In the **for** statement line, change ``index = 0`` to ``index = 4``. Then, change the condition from ``index <= 4`` to ``index >= 0``. Finally, change the iterator ``index++`` to ``index--``.
+
+
+```typescript
+for (let index = 4; index >= 0; index--) {
+    basic.showNumber(index)
+    basic.pause(500)
+}
+```
+
+You'll now see in the simulator that the value displayed on the screen counts down from `4` to `0`. This form of the **for** loop is too complicatied for blocks so when you switch back to the Blocks editor the entire loop is shown in a grey block.
+
+```block
+for (let index = 4; index >= 0; index--) {
+    basic.showNumber(index)
+    basic.pause(500)
+}
+```
+
+### For Loop Condition
+
+The condition in the **for** loop statement doesn't have to use the loop's index. You can use some other conditional value if you want. Let's restore our first example and pull in a ``||input:on button A pressed||``. Make a variable called ``showNumbers`` and set it to `true`. Inside ``||input:on button A pressed||`` set ``showNumbers`` to ``false``.
+
+```blocks
+let showNumbers = true
+input.onButtonPressed(Button.A, function () {
+    showNumbers = false
+})
+for (let index = 0; index <= 4; index++) {
+    basic.showNumber(index)
+    basic.pause(500)
+}
+```
+
+The button press will change ``showNumbers`` to `true` but it doesn't do anything to the loop. Switch to JavaScript and change the condition in the **for** loop from ``index <= 4`` to be just ``showNumbers``. This is equivalent to the check for ``showNumbers == true`` but it's a shorter way to say it.
+
+```typescript
+let showNumbers = true
+input.onButtonPressed(Button.A, function () {
+    showNumbers = false
+})
+for (let index = 0; showNumbers; index++) {
+    basic.showNumber(index)
+    basic.pause(500)
+}
+```
+
+Now that we changed the condition from using the index, the loop will keep counting forever until you press button **A**.
+
+## Repeat Loop
+
+So, as you saw earlier, the ``||loops:repeat||`` loop block actually turns out to be a **for** loop. Yes it's true, but this form of the **for** loop is used to simply repeat the code inside the loop. The code inside doesn't do anything with the index value used in the **for** loop statement.
+
+```block
+let count = 0
+for (let index = 0; index < 5; index++) {
+    basic.showNumber(count)
+    count += 1
+    basic.pause(500)
+}
+```
+
+Let's modify the code for the ``||loops:repeat||`` block just a little. Pull out the block for the ``||loops:repeat||`` loop and the blocks inside it for counting and displaying the number `0` to `4`. Switch to JavaScript.
+
+```typescript
+let count = 0
+for (let index = 0; index < 5; index++) {
+    basic.showNumber(count)
+    count += 1
+    basic.pause(500)
+}
+```
+
+Add the index value of ``index`` to ``count`` inside ``basic.showNumber()``. Also, delete the line for ``count += ``. Your code should now look like this:
+
+```typescript
+let count = 0
+for (let index = 0; index < 5; index++) {
+    basic.showNumber(count + index)
+    basic.pause(500)
+}
+```
+
+When run in the simulator, this code behaves just like before except that you're now increasing the value shown on the screen with the loop's index rather than with just the value of ``count`` itself. Now, switch back to Blocks and see what it looks like:
+
+```block
+let count = 0
+for (let index = 0; index < 5; index++) {
+    basic.showNumber(count + index)
+    basic.pause(500)
+}
+```
+
+Ah! Our original ``||loops:repeat||`` loop changed to a ``||loops:for||`` loop! Why? Well, this is because the code inside the loop used the index from the loop statement. This makes the loop more complex and it's no longer just simply repeating what's inside of it.