CS 120, Fall 2012, Lab 2:
Assignments for this lab are due at the start of next week's lab. Part of the lab consists of written (or typed) answers to some questions. You should print that out to turn it in. (You can print it in the lab.) The rest of the lab asks you to create web pages, which should be on the web, in the www directory of your Linux account.
Now, while viewing that page, go to the "Tools" menu in Firefox, then into the "Web Developer" submenu, and select the "Web Console" command. The window will split and you will see the Web Console in the region above the page contents. You will probably see some errors and warnings in the web console, but you can ignore them (or Clear them).
prompt("What is your name")
Which asks the user a question and gives back whatever the user types as an answer.
document.getElementById("mainhead").innerHTML = "Hello World!"
mh = document.getElementById("mainhead")
This command is called an "assignment statement," and we say that the value of document.getElementById("main_heading") is "assigned to" mh. After that, you can say simply mh instead of document.getElementById("main_heading). Type the above assignment statement into the Web Console, and test that it worked by entering the command
mh.innerHTML = "Goodbye World"
The text of the heading on the web page should change to "Goodbye World." On the other hand, when you are typing you can hit the up-arrow key to go back to a previously entered command and you can edit the command before pressing return again. This is another way to save typing.
You can also change the CSS style of elements on the web page. For example, the command
document.getElementById("mainhead").style.color = "red"
or (assuming that you've previously entered the above assignment statement)
mh.style.color = "red"
will change the color of the text in the heading to red, just as if the CSS style rule "color: red" had been applied to it. (Remember that when changing style, you must always include the ".style" part of the command, and the value that you assign must always be in quotes!)
document.getElementById("mainhead").style.backgroundColor = "#DDF"
document.getElementById("facpic").src = "http://math.hws.edu/web/faculty/vaughn.jpg"
Try it! The picture on the page should change. You can change most attribute values in the same way. For example, to make the picture 200 pixels wide, use
document.getElementById("facpic").width = "300"
Assignment 1: Web Console Exercises
Here are the exercises. Before you begin, you should reload the sample file, http://math.hws.edu/eck/cs120/f12/lab2/sample.html, in Firefox, so you can start with a fresh page. To do the exercises, you will need to consult the HTML source code for that page. To do that, right-click the browser window that contains the page, and select "View Page Source" from the popup menu. You can see that many elements have id's, including the <body> element, which has id="content". You will have to do some research in the textbook or at w3schools.com to answer some of these questions!
- The entire computer science section of the page is in a <div> element with id="cs". What commands will show this section with: a light yellow background color, a thin red border, and a 2cm margin on the left?
- What command will add a thick black border just to the top of the math section of the page?
- What command will center the main heading on the page?
- You can make an element entirely invisible by setting the value of its display property to "none". Based on that information, what command will make the math section of the page invisible?
creates a buttonthat says "Click Me," like this: . This button doesn't do anything when it is clicked. To make it do something, you can add an onclick attribute to the button. For example,
<button onclick='document.getElementById("foo").style.color="red"'> Use Me! </button>
places a button on the page that will make the element with id="foo" red when the button is clicked. To see this in inaction, click this button: makes the text of the next paragraph red.
<button onclick='document.getElementById("foo").style.color="red"; document.getElementById("bar").style.color="blue"'>Show Me!</button>
makes a button that changes the colors of two elements.
The value of the onclick attribute might become quite long. Note that it is legal for this value to extend over several lines in the HTML file. This gets rather ugly, and later we'll encounter a better way to handle this problem.
Assignment 2: Simple Slide Show
For the rest of the lab, you should work on HTML source files in the gedit text editor. Don't forget to save your files into your www folder so that they will be visible on the Web.
For your second assignment, you should create a short, complete web page. The web page is a very simple "slide show." It will display one image, and it will have several buttons. Clicking on any one of the buttons will replace the image with a different image. Each button should bring up a different image.
You should find several images to use on your page. Copy the images into your www folder. To get an image from the web, just right-click the image, and choose the "Save Image As" command, and save the image in your www directory. (Or, you can use full URLs on your page to link directly to images elsewhere on the Web.) If you don't have other images, you can take some from the slide show on the Math/CS Department's main page, http://math.hws.edu. (In any case, make sure that the images that you use belong to you or that you have permission to use them.)
Assignment 3: Style Picker
The web page that you use for this assignment can be original, or it can be one of the pages that you wrote for the previous lab. To reuse a file from lab 1, just copy-and-paste it and rename the copy. (To rename a file, right-click the icon and select "Rename".)
Note that you should try to make your styles look OK!
To complete the lab, you will turn in your
answers to Assignment 1 on paper, and you will
place TWO web pages in your www folder.