Readings
- HTML5: The Missing Manual, Appendix B
- JavaScript
- JavaScript DOM
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
Save your files! Use a USB stick or Google drive.