No.9 Loop

Changing Values Stored in a Variable

Calculation using the Current Value

Values can be stored into variables by the process called assignment.

variable1

When assigning values to a variable, the pre-assigned value in the variable can be reused. For example, the assignment statement below assigns x+1 to variable x.

  • x = x + 1;

Assuming the pre-assigned value of variable x is 2, x + 1 (which is 3 in this case) will be assigned back to x. Therefore, the new value of variable x will be 3.

Exercise 09-1(☆)
  1. Execute the following statements in a browser console.
    • var x = 3;
    • x = x + 1;
    • x = x + 1;
    • x = x + 1;
  2. Execute the following statements in a browser console.
    • var x = 1;
    • x = x * 2;
    • x = x * 2;
    • x = x * 2;
    • x = x * 2;

Applying mathematical operations on the value itself requires to type the same variable name twice which is sometimes inconvenient. Instead, assignment operators such as +=, -=, *= and /=  can be used to shorten the line.  For instance, x = x + 1 can be written as x +=1. Similarly, x = x – 1 can be written as x -=1.  There is a special operator for incrementing (++x) and decrementing (--x) a value – no difference between x = x + 1, x+=1 and ++x. Alternatively, x++ is also an increment operator which is slightly different from ++x. (see the reference below for detail).

How to use the Debugger

A debugger can be useful to check the current line of execution, or to check the currently stored value inside a specific variable.

What can debuggers do?

Pausing a Program, Step-by-step Execution, Resume
The program can be stopped by setting a breakpoint in a code.  You can also resume the program or execute the program step-by-step.
Displaying/Changing the Value of a Variable
The variable can be displayed/changed when the program is paused at a breakpoint.
Exercise 09-2(☆☆☆)
  1. Create ex09-2.html and fill in the following code.
  2. Create ex09-2.js and fill in the following code.
  3. Click the button several times.  What happened to the number?
  4. Watch the video below to continue the exercise.
  5. Open ex09-2.html via Firefox, and select Tools→Web Developer→Debugger
  6. The left section shows the files used in the webpage,  and the JavaScript program will show up when you click ex09-2.js.
  7. A breakpoint can be set by clicking on the number of the line you want to stop.  Click on the 5th line and make a breakpoint right before alert.
  8. Click on the “execute” button(on the webpage, not the debugger), and call out addCount(). What changed on the debugger screen?
  9. The value of variables are displayed on the right section of the debugger.  The term “scope” is a bit too technical and won’t be explained in this class, but when a variable is declared inside a function it is a local scope, and when a variable is declared outside the function it is called a global scope.  Click on the triangle next to “Global Scope” and check the value of count.
  10. Clicking on the triangle above the file list will resume the program execution.  Resume the program and check whether the value stored in count and the number displayed on the dialog box are equal.
  11. Click on the 4th line and make a break point before count = count + 1.
  12. Click on the “execute” button to call out addCount(), and check the value of count.
  13. Resume the program.  It will stop again at the 5th line, so check the value of  count.
  14. Resume the program and check what number has been displayed in the dialog.
  15. You can remove the break points by re-clicking the numbers. Remove the break points on the 4th and 5th line.

Reference

Manipulating the Elements in HTML

In Exercise 08-8, the width of the image was set to 800 when the button was clicked. Let’s change the function so that the width gets 10 pixels larger each time the button is clicked.

Exercise 09-3(☆☆☆)
  1. Create ex09-3.html and fill in the following code.
  2. Create ex09-3.js and fill in the following code.
  3. Open the file via browser and click the button.
  4. Declare a variable w on the top of ex09-3.js and assign the value 100.
  5. In setAttribute, change the width size from the number '800' to the variable w.
  6. Modify the function change() by adding a statement that “adds 10 to variable w“, so that the image gets larger each time the button is clicked.
Exercise 09-4(☆☆☆☆)

Create a text-box and add a function so that the image width changes by the input. So if you enter 100, the width increases by 100.

Adding Content to a Page

In Exercise06-8, we learned that the content of HTML elements can be modified by using innerHTML. Assigning different values into innerHTML each time allows you to constantly change the content.

Exercise 09-5(☆☆☆)
  1. Create ex09-5.html and fill in the following code.
  2. Create ex09-5.js and fill in the following code.
  3. Open the file via browser and click the button.  What happened?
  4. On the 2nd and 3rd line of ex09-5.js, what was assigned to variable x?
  5. What happened to the structure (the relationship of ul and li) of the HTML?
  6. Click the button several times.  Did the number of cookies increase?
  7. Initialize a variable b at the top of ex09-5.js to store the number of cookies.  Assign 1 for its initial value.
  8. Change “there’s one cookie” to “there are n cookies”. The value of variable b should go into the place of “n”.
  9. Add a statement in knock() that adds 1 to variable b.
  10. Reload the page, click the button and check if the number of cookies increase.

Loops and Iterations

In the exercise above, we had to click the button every time to execute the same code again.  A loop can be used to execute a block of code number of times.

“while” Loop

To run the same code over and over, we use the “while” loop.  The syntax of a while loop is as written below.

  • while ( condition ) { process }

If the specified condition is true, the process will be executed. The condition will be checked each time before looping back, and the code will get looped as long as the condition is true . while-207x300

Exercise 09-6(☆☆☆)
  1. Create ex09-6.html and fill in the following code.
  2. Create ex09-6.js and fill in the following.
  3. What is different from the program in Exercise 09-2?
  4. Open the file and click the button.  The page can be reseted by reloading.
  5. If the condition of a while loop is always true, the process will be repeated endlessly.  Change the condition from “true” to when “the counter is less than or equal to 5”.
  6. Reload the page, and click the button.  What is the first and last number?
  7. Swap the 5th(add 1 to count) and 6th(alert) line of ex09-6.js.
  8. Reload the browser, and click the button.  What is the first and last number?  Why is it different? Use the debugger and set breakpoints on line 5 and 6, check the value of count and check if you were right.
Exercise 09-7(☆☆☆☆)

Modify Exercise09-5 to add 100 lines, until “Inside the pocket, there are 100 cookies”, by only one click.

Exercise 09-8(☆☆☆☆)

Make a textbox, and add a function which repeats the process until the number of cookies reaches the input number.

You may think images, such as in Exercise 09-3, can be modified larger and larger by the use of while loop. However, the code inside a while loop gets executed in a very short time which ends up displaying the largest photo only. The proper way to larger an image step by step requires a timer, which will be explained in the 11th lesson.

“do-while” Loop and “for” Loop

Similarly, “do-while” loop and “for” loop can be used to loop a block of code.  We can do the same thing with any of them, so use the loop you are most comfortable with.

The syntax of a “do-while” loop is as bellow.

  • do { process } while ( condition )

The process is executed once before checking the condition.  A “while” loop does not execute the code if the condition is false in the first place. Notice that a “do-while” loop executes the block of code at least once in any condition.

do-while

The syntax of a “for” loop is as written below.

  1. for ( variable initialization; condition; variable update ) { process }

An assignment for a variable is generally written at the initialization and update part.  The “for” loop is equivalent to the “while” loop below.

  1. initialization; while ( condition ) { process; afterthought; }

For details, look at the Reference below.

Exercise 09-9(☆☆☆☆)

Rewrite the program with for loop, for Exercise 09-7 and Exercise 09-8.

Points to check
  • What does x = x * 2 mean?
  • How is a while loop written?
  • What happens when the condition is already true at the beginning of a while loop.