CSCI 107 — JavaScript III

Readings

Getting the starter files

Start by downloading an updated ZIPed copy of HTML, CSS, and JavaScript files and store it on your Desktop.

Open up Brackets and connect to the unZIPed directory, which should be called jslab_exp3. Just like the last JavaScript lab, look at the three files, paying particular attention to shakespear.js.

What’s the difference

This time, you should notice that the border around the ”Parting is such sweet sorrow sweet sorrow“ quote changes color every three seconds. This is an example of selection, one of the three components of programming.

This is implemented with three sections of JavaScript code. The first is a statement in startup that sets an interval timer.

    setInterval(changePartingBorderColor, 3000);

The second is an event handler, changeBorderQuote, that makes the changes the border color. Notice how this function, tests the present value of partingBorderColor to determine the new value.

function changePartingBorderColor() {
    'use strict';
    var partingElement = document.getElementById('parting');
    /* This is an example of selection */
    if (partingBorderColor === 'green') {
        partingBorderColor = 'purple';
    } else {
        partingBorderColor = 'green';
    }
    partingElement.style.borderColor = partingBorderColor;
}

The third change is a bit more subtle. Because partingBorderColor must retain its value between calls to changePartingBorderColor, we must declare it outside the body of changePartingBorderColor. This is done with the keyword var.

var partingBorderColor = 'green';

OK. If you read the tutorial on JavaScript scope, you will see that we really didn’t need to declare partingBorderColor at all. However, your program will be easier to read and maintain if you follow good programming practices and declare your variables.

Doing something

Here are some tasks that will make an obnoxious web page. See if you can do some of them.

Make the border of “What’s in a name?” flash between red, yellow, and green. This requires the use of an else if (or an array)
Make the border of “What’s in a name?” flash a bit more like a real traffic signal. It means that the yellow phase will be much shorter than then red and green phase. The easiest way to do this is to use setTimeout rather than setInterval. number of time units the light has held a particular color. Either set the timeout longer when the light is red or green or set a variable that keeps up with the number of ticks remaining in a particular cycle.
Make the text of “O Romeo, Romeo!” grow a bit longer every 15 seconds. In particular, tack on another “Romeo?” every 15 seconds. It might be best to return to the original string, when the text gets too long. (Use the string length property.)
Make the background color of “Tempt not a desparate man“ cycle though the colors of the rainbow. This is pretty tricky. It requires using an HSL color value and the odd JavaScript (and Java) trick of adding a number to a string.
Make the font color of “O! she doth teach the torches to burn bright“ turn red when the word “bright“ is clicked
Make the word ‘I’ in “For you and I are past our dancing days” get gradually bigger until it pops.
Or just do something else....