Introduction
For this assignment, you will use Javascript to explore and modify the DOM tree of a sample web page. This is a somewhat unconventional approach to working with CSS, but if it works out, you will have a better understanding of what you are doing when you write your own style sheets. On top of that, you will also be prepared for working with some of the dynamic effects that can make web pages more interesting.
You will not be constructing web page for this assignment. Rather, you will do a sequence of activities. To assess your progress through the actitites, there is a sequence of “Activity Questions” below. To complete the assignment, you are to send me an email with the answers to the activity questions in it.
Description
To get started with this assignment, you will need to install the “Firebug” extension into your copy of Firefox. We pre-installed several extensions for you when we set up your account for the course, but this one came out after that, so you will need to install it yourself. Click on the link below, scroll down the page and click on the big “Install Now” button, follow the instructions, and restart Firefox to install it:
Activity Question Use the Tools->Extensions menu to open up a panel that lists all the extentions you have installed. List all their names and version numbers.
To keep things manageable, I am providing a small sample web page for you to work with for the rest of this assignment:
The first step is to look at the page source of the sample page. Open the page and view the page source, which you can do in one of several ways: click on the TIDY icon in the status bar at the bottom of your browser, select View->Page Source from the menu bar at the top of your browser, or type Control-U.
Activity Question What are values of the href attributes of each style sheet linked to from the sample page? Open the page info panel (Tools->Page Info) and click on the Links tab. What are the Name and Type of each style sheet? What is the heading for the middle column? How does the content of the middle column compare to the href attribute of the link tags?
Start Firebug. You can do this by clicking the smaller green icon in the status bar (next to the TIDY icon), or by pressing the F12 key. NOTE: Firebug reports a CSS error for the sample web page, even though there are no errors. Thus, the “smaller green icon” probably started out as a small red icon in the status bar. Click on the Firebug Errors tab and uncheck CSS errors, and reload the sample web page. This is a case of eliminating an error by pretending it isn’t there, which is not a good idea. But in this case I would like to eliminate the distraction of what I know is a spurious error message, at least for now.
Click the Inspect Element tab, and hover over the various parts of the sample web page, observing that different parts of the page are highlighted (with a blue border) as you hover over them.
Activity Question How wide is the H1 element of the page?
Click on the Pretty Peaches Picture text, and observe that an information bar appears in the Firebug panel with <img> in green in it. At the right side of the information bar are four buttons you can click. Click on each of them to answer the following questions:
Activity Question What is the difference between the XML shown by Firebug and the XHTML code for the <img> tag in the web page?
Activity Question What formatting rule(s) apply to this <img> tag?
Activity Question Look over the Box information for the <img> tag, and write down the values of the display, position, visibility, and float properties.
Click on the JS (Javascript) button. There is a wealth of information displayed there. The trick is to find just those parts we want to work with and ignore the rest. To start with, create a Javascript variable that you can use to reference the img node in the DOM tree by typing the following line in the command line at the bottom of the Firebug panel. Be sure to capitalize it exactly as shown or you will get an error message:
The name img on the left side of the equal sign can be anything you like; I used img because it is easy to remember what it means and it is easy to type. In a Javascript program you would have to declare that img is a variable by putting “var” before it, and you would have to put a semicolon at the end of the statement. But in the Firebug command line, you don’t need either one. In fact, if you say “var img = document. etc.” it won’t work.
The “[0]” at the end of the command is needed because getElementsByTagName() returns a list of all the img tags in the document. I know there is exactly one of them in this document, and the “[0]” says to get the zero-th item from the list. (It’s the first item, but list positions are numbered starting at zero.)
Activity Question Enter the Javascript expresson img.src, and write down the value displayed.
There is a copy of the peaches picture in the images directory under the one where the sample web page is. Assign the string “images/peaches.jpg” to img.src and observe that the picture replaces the “Pretty Peaches Picture” text. Be sure you put quotation marks around the string on the right side of the equal sign. If the picture doesn’t appear, you need to re-work the exercise until you do get the picture to show up.
Activity Question Type the img.src expression again and write down what value is displayed now.
What we really want to work with is the style information for the <img> tag because that corresponds to the CSS information we will be setting up with style sheets later on in the course. Type either of the the following two Javascript statements in the command line at the bottom of the Firebug panel in order to set up an object named sty (short for “style”). Again, the name of the varible is arbitrary and I chose sty because it is easy to type and easy to remember what it stands for.
or just:
The second assignment works because you already defined img before.
Activity Question Now type in each of the following statements and write down what happens for each. Be sure to put spaces inside the strings exactly as shown. For example, “2 px” is not the same as “2px”.
That is the end of the written requirements for this assignment. Here are some other experiments you should try, but there is nothing you have to hand in for them: Change the backgroundColor property of the H1 tag to a color of your choice. Set the textDecoration property of the link (the first <a> tag in the page) to “overline”. Set the fontSize property of the span element to “3em”. Use the function document.getElementById() to get the “content” node of the document. This function returns the desired node, not a list, so do not put the “[0]” at the end. Change the width property of the content element to “50%”.
Due Date and Submission
Send me an email with you answers to the Activity Questions in the message body (no attachments) by March 14
.