just enough JavaScript

Getting ready

Take a look at a simple web page that does a little CSS and JavaScript.

You can download a ZIPed copy of this web page and open it in Brackets. You will be given printed copies of the three files of this project for the third exam.

The HTML file

Notice that the <head> section of HTML file contains two lines for including the CSS and JavaScript files.

<link href="shakespeare.css" rel="stylesheet" type="text/css">
<script src="shakespeare.js"></script<

Also, notice that some of its tags contain class attributes for interfacing with CSS and id attributes for interfacing with JavaScript.

<p id="romeo" class="quote">O Romeo, Romeo! wherefore art thou Romeo?</p>

The CSS file

The CSS file has two rule sets to specify how the HTML is displayed.

h1 {

The JavaScript file

comments for jslint

The JavaScript file needs much more attention. It begins with the comments that are used by JSLint. You should always have these.

/*jslint browser:true */
/*jslint devel:true */

We are using a limited subset of JavaScript in this handout. You can take CSCI 344 to see how the pros write JavaScript.

References for elements

Next in the file, you will see two variables declared for holding references to HTML elements.

var romeoElement;
var shakespearepictElement;

In the next section, you will see how these are initialized.

The main routine

Skip down about ¾ through the JavaScript file. There you will find the definition of a JavaScript function called startup.

function startup() {
    'use strict';
    romeoElement = document.getElementById('romeo');
    shakespearepictElement = document.getElementById('shakespearepict');

    romeoElement.onclick = resetRomeo;
    setInterval(ohRomeo, 2000) ;
    setTimeout(changeShakespeare, 20*1000);

The second and third lines of startup use the document.getElementById function to find and store references to the HTML tags identified by romeo and shakespearepict. Always be careful to use the exact spelling of the id attribute.

The third statement sets an onclick event handler for the Romeo quote. The event handler is the function resetRomeo. The fourth statement sets an interval timer ohRomeo with is executed every 2000 msec (2 seconds). The final statement sets a timeout timer changeShakespeare that will be executed 20 seconds after the web page is loaded.

Starting at the right time

The final line of JavaScript file is very important. The browser must not execute the startup function until the web page is loaded. It is executes too soon, there will not be any tags with the ids romeo and shakespearepict to get.

window.onload = startup;

Make sure that your JavaScript code ends with this important statement.

The functions

We’ll work backwards through the file. The changeShakespeare event handler changes the src attribute of an image tag. This causes a different picture to be displayed.

function changeShakespeare() {
    'use strict';
    shakespearepictElement.src = 'https://upload.wikimedia.org/wikipedia/commons/a/aa/ShakespeareStamp1964.jpg';

The resetRomeo event handler restores the original text of the Romeo quote and effectively removes its border. It also reset a Romeo counter that will be mentioned in the next section.

function resetRomeo() {
    'use strict';
    romeoIgnoring = 0;
    romeoElement.style.borderStyle = 'none';
    romeoElement.innerHTML = 'O Romeo, Romeo! wherefore art thou Romeo?';

The hard one

The final function is there hardest. Don’t worry if you have problems following all that is happening.

var romeoIgnoring = 0;
function ohRomeo() {
    'use strict';
    if (Math.random() < 0.07) {
        romeoElement.innerHTML =
            romeoElement.innerHTML + ' Answer the phone!!';
    } else {
        romeoElement.innerHTML = romeoElement.innerHTML + ' Romeo?';
    romeoIgnoring = romeoIgnoring + 1;
    if (romeoIgnoring > 20) {
        romeoElement.style.borderStyle = 'solid';

This is a fancy one. Normally it just sticks “Romeo?” on the end of the quote. However, if Romeo hasn’t responded after 20 calls, it puts a big border around the quote. Also, about once every 14 (1/0.07) calls, it tells Romeo to answer the phone.