Introduction to (Web) Programming

Lab 8: Errors and Colors

shortcut to main problems


General instructions

Console exercises

Consider three HTML elements:

a text input field

this “paragraph” of text

Type something into the above input text field. Using the browser’s JavaScript console, try these examples, in order, one at a time:

> let textField = domGetElement('in');
> domGetContent(textField)
> domSetContent(textField, 'watch this!');

> let span = domGetElement('text-span');
> domGetContent(span)
> domSetContent(span, domGetContent(textField));

> let blob = domGetElement('blob');
> domGetStyle(blob, 'backgroundColor')
> domSetStyle(blob, 'backgroundColor', 'red');
> domSetStyle(blob, 'backgroundColor', '#55aaff');
> domSetStyle(blob, 'backgroundColor', 'rgb(200, 100, 50)');
> domSetStyle(blob, 'width', 200);   // this won't work but try it anyway
> domSetStyle(blob, 'width', '200px');
> let bogus = domGetElement('bad-idea');
> domGetStyle(bogus, 'backgroundColor')

Main exercises

For the rest of the lab, you need to download and unzip this archive. It consists of several files. You will mostly work in lab8.js, but will also want to look over (and possibly make a few changes to) lab8.html and lab8.css. You should test your work by loading (and reloading when necessary) lab8.html in your browser. (You may still find it helpful to tests parts of your work in the console.) You are encouraged to try my solution to see the tasks assigned below in action.

The Web page is intended to be a hodge-podge of ideas: an array of numbers which you can step through, expand and modify; a square whose size, position and color depend on the values of those arrays; and, a slider that controls the color (grayscale) of the header text at the top of the page (“Introduction to Web(!) Programming”).

  1. Try clicking on the reset button. It has two bugs. Use the stack trace of the reported error to identify the two problems. (First find and fix one, then find and fix the other.) Once reset works properly it should display a number in each cell (0, 1, and 1), the square black box should appear the upper right corner of the browser viewport, and the text “Everything has been reset” should be displayed in the message area below the slider.

  2. Complete (and correct) function next so that when the next button is clicked upon, the three values displayed in the cells are “shifted” one position over in the array. (So, after clicking once, the numbers that appear should be 1, 1, and 2 and so on.) Use the write function to display “End of the array” in the message area if there are no more elements left in the array to display. The main idea is that gFirstPos is a global variable representing the index of the global array gNumbers that corresponds to the first of the values displayed. Once working correctly, clicking on the next button should also have the effect of “moving” the block down and the to left.

  3. Add a button with text “grow” between next and modify in lab8.html that invokes the augment function. Complete augment so that it adds a new element to the end of gNumbers (use .push) that is the sum of the last two elements in the array. Test your work by clicking the newly added grow button.

  4. Complete modify so that it checks the value in the input field to make sure it can be parsed as an integer and then uses that number to replace the last element in gNumbers. Experiment with my solution to determine what should be displayed in the message area and under what circumstances. Test your work by entering values in the input field to the right of the modify button and then clicking that button.

  5. Complete resizeBlock so that the length of each side of the block (i.e., its width and height attributes) is set to be the number of pixels that is the product of the length of gNumbers and the the constant BASE_SIZE. This should make it so that each time the grow button is clicked, the square gets noticeably bigger. Follow the model of relocateBlock which has been completed for you.

  6. Complete recolorBlock so that the color of the block (its backgroundColor property) is changed to have RGB values matching the three values currently displayed in the cells. So if the cells display 8, 13, and 21, the color should become 'rgb(8,13,21)'. Note: until the values displayed are larger than that, the color of the block will not change very perceptibly from black. But by clicking on combinations of next, modify and grow the values should change, eventually being more blue and finally becoming white as the three values get saturated.

  7. Time permitting: Implement setHeadingColor so that every time the slider is slid, the color of the text in the top header (“Introduction to Web(!) Programming”) is changed to a different shade of grade. Sliding all the way to left should reset the color to be black; sliding all the way to the right should make the text white. Grayscale is just RGB where the values for the three color components are equal.

  8. Time permitting: add another button that when clicked makes the block do something all together different. (Be creative.)