CSCI 107 — JavaScript II

Readings

• HTML5: The Missing Manual, Appendix B
• JavaScript
  • JavaScript Introduction
  • JavaScript Where To
  • JavaScript Syntax
  • JavaScript Statements
  • JavaScript Variables
  • JavaScript Operators
  • JavaScript Arithmetic
• JavaScript DOM
  • JavaScript HTML DOM
  • JavaScript HTML DOM Methods
  • JavaScript HTML DOM Document
  • JavaScript HTML DOM Elements
  • JavaScript HTML DOM Changing HTML
  • JavaScript HTML HTML DOM Changing CSS
  • JavaScript HTML DOM Events
  • JavaScript HTML DOM EventListener

What to do

Getting the starter files

Start by downloading 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_exp2. Look at the three files, paying particular attention to shakespear.js.

Checking it out

Try to figure out what is happening. You might want to take a look at the JavaScript functions reference to figure out what changePartingBorderColor, changePartingQuote and startup do.

Now interact with the page to see what it does.

Adding a click event handler

Add a new function similar to changePartingBorderColor, but use a different style and a different paragraph. You probably don’t want to just change border colors, so that a look at the HTML DOM Style Object reference to see what else can be done. Maybe you can make the font bigger?

Try to keep it simple and be very careful with capitalization. It is fontStyle, no FontStyle nor font-style nor fontstyle.

To test out your handler function, modify the startup so that your handler is called as soon as the page is loaded.

Installing the handler

Look at how the handler is installed in and add in the two lines that will invoke your handler. Take a look at the HTML DOM events reference to see the other events that can be handled. Maybe you should try a double click this time.

By the way, you can make it so that when your double click on one paragraph, another is changed.

Mouse enter and leave

Notice the onmouseenter and onmouseleave events. Change your page so that the color of a quote changes as you move the mouse over it. You can do this in JavaScript (good for improving programming stills) or HTML (easier).

Before you leave

Upload your files to the JavaScript II lab dropoff.