CSCI 178— JavaScript notes and lab

Readings

This is far far far more than you need for CSCI 178.

• Khan Academy — HTML/JS: Making webpages interactive with jQuery
• jQuery and JavaScript Phrasebook on-line at UNC Asheville library
• JavaQuery
  • Adding jQuery library
  • Selectors
  • Events
  • Getting stuff
  • Setting stuff
  • Adding stuff
  • With class
  • With style
  • AJAX will be used later

Doing something

Go to the lab.

Getting the starter files

Again, start by downloading a ZIPed copy of HTML, CSS, and jQuery-based JavaScript files and store it on your Desktop.

Again up Brackets and connect to the unZIPed directory, which should be called jqlab_178_lab. Look at the three files are which very similar to those you sane in the plain JavaScript lab.

• index.html — HTML: Only change is additional line to include jQuery library
• shakespear.css — CSS: No change
• shakespear.js — JavaScript: Now using jQuery

Doing something

Here are some tasks that will make an obnoxious web page. They are the same as you used in the previous lab. 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. 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 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....

Closures in JavaScript

JavaScript has a rather odd feature called function closures. You can download an implementation of this page using closures. It is very hard to read.