Lab 2: functions and Booleans

Programming the Web: An Introduction (Spring 2021)

shortcut to main problems

shortcut to debugging exercise

shortcut to console exercise


Goals


Instructions


Examples to review

These examples are a mix of problems, all of the kind illustrated in class: they demonstrate the use of separate files: HTML (and CSS) to display buttons, a JavaScript file consisting of a collection of pure functions, and another JavaScript file that uses prompt and confirm to gather user input and then pass those inputs as arguments to the pure functions and then displays the results returned by those pure functions using alert boxes.

Open the folder lab2 in VS code. Then examine lab2.html, lab2-examples-io.js and lab2-examples.js. In particular, study the pure functions in lab2-examples.js. Open lab2-examples.html in your browser and try the buttons. Also open a console inspector in your browser while viewing lab2-examples.html and try evaluating the pure functions directly.


JavaScript console exercises

Open the JavaScript console in your Web browser (Command-Option-I). Using the browser’s JavaScript console, try these examples, in order, one at a time:

> let name = 'Mike';
> name.toLowerCase()

> name.toUpperCase()


> true

> typeof true

> typeof (typeof false)

> True

> let b = true;
> b

> b = !b;
> b

> let f = false;
> f

> let t = true;
> t

> t && f

> t || f

> !t

> !f

> let ok = confirm('Having fun yet?');
> ok

> let n = 345;
> typeof n

> n === 345
> n !== 0
> n < 500
> n > 500
> n <= 345
> n >= 346

> let t = '345';
> typeof t

> n === t

> let word = 'Cool!';
> word === word.toLowerCase()
> word !== word.toUpperCase()
> word.toUpperCase() === 'COOL!'

Debugging exercises

For this problem, your task is to debug a Web page, both its HTML and associated JavaScript. The relevant files are included as part of the starter archive). It should display text something like this:

First debug lab2-bugs.html (there are three separate errors). Then debug lab2-bugs.js - again there should be three errors to fix.) Work by making small changes in lab2-bugs.html (and then in lab2-bugs.js). Remember to save the files in VS Code and reload the lab2-bugs.html in your browser after each change. It may be helpful to have a JavaScript console open in the browser while you work.


Programming problems

The remaining problems are structured nearly identically to the corresponding programming assignment.

Begin by trying the demonstration version. Each of the ten buttons correspond to one of ten pure functions. Your job is to “reverse engineer” each and then write your own version of that function. The file lab2-io.js supplied with the starter archive contains the JavaScript functions invoked by clicking the buttons as specified in lab2.html. Each of those functions is a wrapper around a corresponding pure function. For example, the second, emphasizeTester prompts the user for some text, passes that string of text as an argument to the pure function emphasize which returns another string which is displayed using alert.

Here are the input and return types of the pure functions you need to complete:

  1. square takes as input a number and returns another number.

  2. emphasize takes as input a string and returns another string.

  3. isShortOrLong takes as input a string and returns a Boolean value.

  4. isTriple takes as input a number and returns a Boolean value.

  5. triangle takes as input a number and returns another number.

  6. xor takes as input two Boolean values and returns another Boolean value.

  7. isYesOrNo takes as input a string and returns a Boolean value.

  8. oddNotSmall takes as input a number and returns a Boolean value.

  9. round takes as input a number and returns another number.

  10. mystery takes two inputs, the first a number, the second a string, and returns a Boolean value.

Once you understand what each function is supposed to accomplish, replace the ... comment above that function with a comment of your own (that might run for several lines) explaining in concise, but grammatical and proofread prose what you think the function computes.

Once you have explained what a function does in your own words, you can write the code representing its body. Test your code thoroughly both by evaluating some examples in the console and by clicking the buttons that use the wrappers to call the pure functions you are implementing. Remember to reload the page in your browser each time after modifying lab2.js.

Remember, all of the functions should be pure: they take one or more arguments and return a value. Make sure that your functions have a single return statement as the last statement within the body of the function. Keep the return simple: just return a variable. Use variable assignments to compute your result. Each function should have at least one let assignment.

Your code should not use use alert, prompt, or confirm.

With numbers, you can assume that all numeric inputs are integers. You can use the standard five arithmetic operations:

+   -   *   /   %

and the six arithmetic comparison operations:

===   !==   <   >   <=   >=

With Boolean values you can use the literals true and false and the three standard Boolean operators:

!   &&   ||

With strings, you can use:

===   !==   .length   .toLowerCase()   .toUpperCase()

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

> square(5)
  25

> emphasize('cool')
  "*cool*"

> isShortOrLong('neither')
  true

> isShortOrLong('none')
  false

> triangle(10)
  55

> xor(false, true)
  true

> isYesOrNo('yes')
  true

> oddNotSmall(297)
  true

> round(3.14)
  3

> mystery(5, 'hello')
  false