Introduction to (Web) Programming

Lab 3: Conditionals and loops

shortcut to main problems

shortcut to debugging exercise

shortcut to console exercise


Goals


Instructions


JavaScript console exercises

How to open the JavaScript console in your Web browser:

Using the browser’s JavaScript console, try these examples, in order, one at a time:

> let r = Math.random();
> r

> Math.random()

> Math.floor(3.14)

> let c = 0;
> c = c + 1;
> c

> c += 2;
> c

> c++;
> c

> c = c * 5;
> c

> c *= 2;
> c

> c = c - 3;
> c

> c -= 2;
> c

> c--;
> c

> 'A' < 'B'

> 'A' === 'a'

> 'A' < 'a'

> 'a very lengthy string' > 'short'

> 'Kiwi' > 'apple'

> 'ZZZZ' < 'a'

> if (true) { console.log('told you so!'); }

> if (false) { console.log('NOT!'); }

> let i = 1;
> while (i <= 5 ) {
    console.log(i);
    i++;
  }

Examples to study

The examples consist of (mostly pure) functions that make use of conditional statements and loops including and building upon what was presented in recent lectures. They are intended to be experimented with via the console as in:

> absoluteValue(-3)
3

> ulam(7)
22

> stringMultiply('cs', 3)
"cscscs"

Debugging exercises

For this problem, your task is to debug some pure functions by using the console. Try opening lab3-bugs.html in your browser (included as part of the starter archive). It produces a mostly blank page, but, in the background it has tried (and failed) to properly load lab3-bugs.js. Open the console. Reload the page. First debug the errors so the page loads properly. Next, fix each of the functions one at a time. Test thoroughly!


Main exercises

The remaining problems are structured nearly identically to the current programming assignment. However, you will solve these by running your solutions in the console. To do that, you can load the supplied lab3.html page into your browser, open the console, and reload the page any time you make changes to lab3.js.

Conditionals (if statements)

  1. Complete diffSquares(a, b) so that, assuming a and b are both numbers, if a is larger than b then it returns the difference of the a squared minus b squared; otherwise it just returns 0. Examples:

     > diffSquares(5, 3)
     16
     > diffSquares(3, 4)
     0
     > diffSquares(13, 5)
     144
  2. Complete glueShortLong(a, b) so that it returns a string formed from the two strings a and b such that the longer string is appended to the shorter. (If they are the same length, the b should be glued to the back of a.) Examples:

     > glueShortLong('bye', 'hi')
     "hibye"
     > glueShortLong('six', 'seven')
     "sixseven"
     > glueShortLong('same', 'four')
     "samefour"
  3. Complete threeFive(m) so that it returns 2 if m is divisible 3 and 5, returns 1 if m is divisible by 3 or 5 but not both, and returns 0 if m is neither divisible by 3 nor by 5. Recall that to test if one number is divisible by another, you can use the remainder (%) operator and then compare that result to 0 as in:

     > 36 % 7 === 0   // Is 36 divisible by 7?
     false            // No.
     > 35 % 7 === 0   // Is 35 divisible by 7?
     true             // Yes.

    There are lots of ways to solve this problem using combinations of if and else, but I recommend using two simple if statements and counting (adding one each time a property holds). Examples:

     > threeFive(45)
     2
     > threeFive(25)
     1
     > threeFive(27)
     1
     > threeFive(14)
     0
  4. This exercise imagines a world with only the three primary colors (red, yellow and blue) and an encoding between those colors and the numbers 1, 2 and 3:

         1   'red'
         2   'yellow'
         3   'blue'

    Complete colorToCode(color) so that it returns the numeric coding for color assuming it is the string 'red', 'yellow' or 'blue'. Otherwise it should return NaN. Use a multiway conditional. Examples:

         > colorToCode('red')
         1
         > colorToCode('yellow')
         2
         > colorToCode('blue')
         3
         > colorToCode('orange')
         NaN
  5. Complete smallAndEven(a, b) so that, assuming a and b are both numbers, if both are even, it returns whichever is smaller; if only one is even it returns whichever is even; and if neither is even, it returns 0. User nested ifs. Examples:

     > smallAndEven(5, 3)
     0
     > smallAndEven(8, 6)
     6
     > smallAndEven(8, 7)
     8

Loops (while statements)

  1. Complete sumOdds(n) so that it returns the sum of the odd numbers from 1 through n. Examples:

     > sumOdds(0)
     0
     > sumOdds(3)     // 1 + 3
     4
     > sumOdds(6)     // 1 + 3 + 5
     9
     > sumOdds(100)   // 1 + 3 + ... + 99
     2500
  2. Complete firstDigit(n) so that it returns the leading (most significant) digit of n. Assumes n is an integer that is positive or 0. Examples:

     > firstDigit(0)
     0
     > firstDigit(9)
     9
     > firstDigit(537)
     5
     > firstDigit(123456789)
     1

    Hint: repeatedly divide by 10.

  3. Complete everMore(m) so that it returns the sum of the first m numbers of this sequence of integers:

     1, 2, 4, 7, 11, 16, ...

    That is, the sequence starting at 1 and where the gaps between each successive pair of number in the sequence grow by 1. Examples:

     > everMore(1)
     1
     > everMore(2)
     3
     > everMore(3)
     7
     > everMore(4)
     14
  4. Complete padLeft(s, n, filler) so that given string s, number n and string filler, it returns a new string that has copies of filler placed in front of s so that the result has length at least n. It should pad the string with no more copies of filler than necessary. Examples:

     > padLeft('Mike', 10, '*')
     "******Mike"
     > padLeft('413', 7, ' ')
     "    413"
     > padLeft('NOT', 6, 'ok')
     "okokNOT"
  5. Complete table(n) so that it returns a string representation of an n-by-n multiplication table. Use nested while loops and call padLeft to help format the table into columns. Examples:

     > console.log(table(3))
         1    2    3
         2    4    6
         3    6    9
    
     > console.log(table(12))
         1    2    3    4    5    6    7    8    9   10   11   12
         2    4    6    8   10   12   14   16   18   20   22   24
         3    6    9   12   15   18   21   24   27   30   33   36
         4    8   12   16   20   24   28   32   36   40   44   48
         5   10   15   20   25   30   35   40   45   50   55   60
         6   12   18   24   30   36   42   48   54   60   66   72
         7   14   21   28   35   42   49   56   63   70   77   84
         8   16   24   32   40   48   56   64   72   80   88   96
         9   18   27   36   45   54   63   72   81   90   99  108
        10   20   30   40   50   60   70   80   90  100  110  120
        11   22   33   44   55   66   77   88   99  110  121  132
        12   24   36   48   60   72   84   96  108  120  132  144

To experiment more directly with my solutions, you can open up a console while viewing this page and try examples such as:

> glueShortLong('Michael', 'Siff')
"SiffMichael"

> threeFive(9)
1

> sumOdds(100)
2500