Lesson 3 Recap

In Lesson 3 we learned about looping. Looping is a super-powerful tool that allows us to repeat a similar task over and over. It allows us to perform large quantities of similar tasks that would otherwise take pages and pages of code to type out without them.

Parts of a loop

A loop comprises of 3 things. The first is a stopping condition. A stopping condition is usually a boolean expression that is true while the loop is running, but false when it should stop.

The second is the loop body that tells the computer what to do each time through the loop. Sometimes this does exactly the same thing each time, sometimes you use branching to tell the computer to do different things.

The third thing is a state alteration that generally alters state used by the condition to tell the computer whether to loop or not. This can be anywhere, but typically is inside the loop or inside the condition expression.

If we put these three things together, you can kind of read it as "while I have more things to do, do a thing, remove it from the list of things to do."

It's not always a list, but you can think of it that way. Usually the computer doesn't really know what you want it to do ahead of time, you need to work it through in your head whether it's going to work correctly or not.

Infinite loops

An infinite loop is a loop whose stopping condition is never false. What happens is the computer then continuously runs the loop until you stop the program.

Most of the time, an infinite loop is an error, and results in your computer seemingly doing nothing. We usually call this a "hung" program.

Sometimes, the infinite loop is not an error, but is waiting for something outside the program to change a condition so it can exit the loop. A good example of this is an editing program. It will loop forever flashing the cursor until you type a key. At that point, it does something different, then goes back to waiting forever. Without external input, the program would never finish!

While loops

A While loop in Javascript has the following syntax:

while(condition) {
    ...
}

The loop will executes its internal code while the condition inside the parentheses is true. It is important in a while loop to alter the state that the condition is checking, otherwise, the loop will be infinite!

The Complete example

Below is a complete example that you can copy and paste into a file, and then run on your browser, which shows what we accomplished in the class

<!DOCTYPE html>
<html>

<head>
    <title>Lesson 3 for coding!</title>
    <script>
        function showString() {
            var ischecked = document.getElementById('option').checked
            var str = document.getElementById("thestring").value
            var target = document.getElementById('code')

            var result = ""
            var count = parseInt(document.getElementById('count').value)
            while(count > 0)
            {
                result = result + str
                count = count - 1
            }
            
            if(ischecked) {
                target.innerHTML= "<b>" + result + "</b>"
            }
            else {
                target.innerHTML = result
            }
        }
    </script>
</head>

<body>
    Result appears here:
    <span id="code"></span>
    <p>
        <input id="thestring" placeholder="text">
        <input type="checkbox" id="option"> Bold
        <input type="number" id="count" value="1">
        <button type="button" onclick="showString()">Click Me</button>
    </p>
</body>

</html>

Playgrounds

As always, here are some playgrounds you can use. The JSFiddle playground links to a base project you can fork that includes the javascript console.

You can also open a local file (if you have a normal computer), name it anything with a .html extension, and then open it in your browser and it will work!