# Introduction to (Web) Programming

## Lab 3: Conditionals and loops

shortcut to main problems

shortcut to debugging exercise

shortcut to console exercise

#### Goals

• gain familiarity with the syntax of compound statements
• more practice working with pure functions
• gain experience working directly in the console
• continued practice debugging
• learn about solving problems using `if` and `while`
• prepare for the corresponding programming assignment.

#### Instructions

• Work on this lab with your partner (or on your own if you have not been assigned one).
• Unless otherwise indicated, use only the JavaScript operations and commands we have described thus far in class.
• Show your work for a given problem to the instructor or one of the lab assistants before moving on to the next problem, but do not get too bogged down on any one problem.
• In the common case, you will not complete the exercises during our scheduled lab. It is then up to you to complete the lab on your own time.

#### JavaScript console exercises

• Firefox: Command-Option-K
• Chrome: Command-Option-J

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 `if`s. 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"
"    413"
"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``````