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 {
text-align:center;
color:green;
}
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.