CSCI 107 — JavaScript III

Readings

The morning “lecture”

Getting the starter files

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

Open up Brackets and connect to the unZIPed directory, which should be called jslab_exp3. Just like last week, 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 vaue of partingBorderColor to determine the new vallue.

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

Make the border flash between red, yellow, and green. This requires the use of an else if.
Make the border 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 add a new variable that counts the number of time units that light has held a particular color.

The afternoon “lab”

What next?

First of all, if you didn’t get the stoplight finished this morning, try to finish it this afternoon.

Whatever you do, try to upload your files to the moodle page for the 04/20 lab

What is happening

Notice that when you move your mouse over the quote header, “Quotes from Romeo and Juliet”, the quotes get yellow backgrounds of varying intensities.

This is a difficult chuck of JavaScript code. First of all, notice the following two lines in startup.

    quoteHeaderElement = document.getElementById('quotes');
    quoteHeaderElement.onmouseover = function () {
        yellowQuotes(true);
    };
    quoteHeaderElement.onmouseout = function () {
        yellowQuotes(false);
    };

The use of an anonymous (unnamed) function is common in JavaScript, but very rare in other languages. When your mouse begins go pass over the header, the function yellowQuotes is called with true. When your mourse leaves the header, the function yellowQuotes is called with false.

Now take a look at yellowQuotes.

function yellowQuotes(mouseOver) {
    'use strict';
    var i, quoteElements, rowColor, quoteCount, blueVal, blueStr;
    /* alert('alternating'); */
    quoteElements = document.getElementsByClassName('quote');
    quoteCount = quoteElements.length;
    i = 0;
    /* This is an example of iteration */
    while (i < quoteCount) {
        if (mouseOver) {
            /* This is a magic formula */
            blueVal = 255 - Math.floor((i * 255) / (quoteCount - 1));
            if (blueVal < 10) {
                blueStr = '0' + (blueVal).toString(16);
            } else {
                blueStr = (blueVal).toString(16);
            }
            rowColor = '#FFFF' + blueStr;
            /* alert(rowColor); */
        } else {
            rowColor = 'white';
        }
        quoteElements[i].style.backgroundColor = rowColor;
        i = i + 1;
    }
}

Well, you better just set back for an explanation...