Introduction to (Web) Programming

Lab 2: Pure functions and Boolean expressions

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 lecture: they demonstrate the use of three separate files: an HTML file to display buttons, a JavaScript file consisting of a collection of pure functions, and a 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.

The set of three files is included in the starter archive, but you can also access them directly as lab2-examples.html, lab2-examples.js, and lab2-examples-io.js.


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 name = 'Mike';
> name.toLowerCase()

> name.toUpperCase()


> true

> typeof true

> typeof (typeof false)

> let b = true;
> b = !b;
> b

> let f = false;
> let t = true;
> t && f

> t || f

> !t

> !f

> confirm('Having fun yet?')

Debugging exercises

For this problem, your task is to debug a Web page, both its HTML and associated JavaScript. Try opening lab2-bugs.html in your browser. (The relevant files are also included as part of the starter archive). It should display text something like this:

First debug the HTML (there are three separate errors). Then debug the JavaScript (lab2-bugs.js - again there should be three errors to fix.)


Programming problems

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

Begin by trying the demonstration version. Each of the five buttons correspond to one of five 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 first, emphasizeTester prompts the user for some text, passes that string of text in as an argument to the pure function emphasize which returns another string which is displayed using alert.

Here is what you know about the five pure functions you need to implement:

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

  2. isShortOrLong takes as input a string (the variable called s) and returns a Boolean value

  3. isTriple takes as input an integer and returns a Boolean value

  4. xor takes as input two different Boolean values and returns a Boolean value

  5. mystery takes as input an integer (which is assumed to be positive) and returns an integer.

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 side-effecting operations (so do not use prompt, confirm or alert).

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

+   -   *   /   %

and the six arithmetic comparison operations:

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

For Booleans you can use the literals true and false and the three standard Boolean operators:

!   &&   ||

For strings, you can use:

===   !==   .length   .toLowerCase   .toUpperCase

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

> mystery(4)
  2

> emphasize('hello')
  "*hello*"

> isShortOrLong('hello')
  false

> isTriple(100)
  false

> xor(false, true)
  true

> mystery(22)
  11