CS 120, Fall 2011, Lab 2:
Assignments for this lab are due immediately before the start of next week's lab. Remember that the instructor automatically has access to work that you do in Aptana Studio in your Linux account.
Note: Publishing Your Work on the Web
Once I have collected the homework for a given week, you will probably want to publish your work on the web. (Remember that you should never publish your work before I collect it!)
Go to your "Home Folder" in the "Places" menu, which you can find in the bar along the top of the screen. The work that you do in Aptana Studio is in a folder named "Aptana Studio 3 Workspace". If you open the folder by double-clicking it, you will see the project that you created for Lab 1, and if you open that folder, you will see the files that you created for the lab.
Now, open your "Home Folder" again, from the "Places" window. You will see another folder named "www". Anything that you create inside the www folder — or copy into that folder — is visible to everyone in the world on the World Wide Web. You can simply copy files from the "Aptana Studio 3 Workspace" folder into the www folder.
Copy your Lab 1 folder into the www folder. To do this, it's easiest to use copy-and-paste: Right-click the original folder, select "Copy". The right-click inside the www folder and select "Paste." (Note that if you simply drag the folder, that will move it, not copy. You want to be sure to copy it! If you drag it with the middle mouse button — that is, by holding down the scroll wheel as you drag — you get a chance to say whether you want to copy it or move it.)
To see your work on the Web, you just have to know the URL where it is located. If you user name is, say, zz9999, then the contents of your www folder are visible at this URL:
Just enter this into the location box of a web browser. Note that there is a squiggle ("~") in front of the user name; this character can be found on the upper left key of the keyboard. If the name of your Lab 1 folder is lab1, then the following URL will take you directly to the contents of that folder:
And if the Lab 1 folder contains a file named AboutMe.html, then the direct URL for that file would be:
- If a folder on the web contains a file named index.html, then the URL for that folder will actually show the index.html file. If there is no file named index.html, then the folder URL shows a list of files in the folder, and each name in the list is a link to the file.
- Spaces and funny characters in file names can cause problems on the web. Stick to simple names, using letters, digits, hyphens (-) and underscore (_).
- Make sure that file names have appropriate extensions, such as .html for HTML files.
Review: Picking out Elements: id and class
<h2 id="main_heading">Welcome to My Page</h2>
Here, the id main_heading is applied to the <h2> element. The point of an id is to pick out one unique element, so you should never use the same id more than once in the same document. Don't use spaces or special characters in an id. You can safely use letters, numbers, hyphens, and underscore characters.
Sometimes, instead of wanting to pick out one unique element, you want to be able to pick out an entire group of related elements. For that, you can use the class attribute. You can use the same class attribute for as many elements as you like in one document. For example, you might have both <h3 class="bio">My Life</h3> and <p class="bio">I was born...</p> in the same HTML document.
document.getElementById("main_heading").innerHTML = "Hello World!"
mh = document.getElementById("main_heading)
mh.innerHTML = "Goodbye World"
The text of the heading on the web page should change to "Goodbye World."
You can also change the CSS style of elements on the web page. For example, the command
document.getElementById("main_heading).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.)
The class attribute is similar to id, except that several elements can have the same class. This means that when you pick out elements using a class, you don't get a single element. Instead, you can an array of elements. (An array is a numbered list.) For example, the sample document has two elements with class="subhead". You can obtain an array containing those two elements, and assign that array to the variable subheads by saying
subheads = document.getElementsByClassName("subhead")
subheads = document.getElementsByClassName("subhead") subheads.innerHTML = "Mathematics Courses" subheads.style.color = "#00AAAA"
to change the content of the first headline to "Mathematics Courses" and the color of the second headline to an attractive blue-green.
There is one other command that picks out an array of elements, without any need to use the class attribute: document.getElementsByTagName("tagname") returns an array that contains all the elements in the document that have <tagname> as their start tag. For example, the sample document contains eight <li> elements. You can turn the third one of these red by saying:
elems = document.getElementsByTagName("li") elems.style.color = "red"
(Actually, you could say directly document.getElementsByTagName("li").style.color = "red", if the very long way of referring to the color doesn't confuse you.)
pic = document.getElementById("facpic") pic.src = "http://math.hws.edu/web/faculty/vaughn.jpg"
document.getElementById("facpic").src = "http://math.hws.edu/web/faculty/vaughn.jpg"
Try it! The picture on the page should change. One final note: In case it's not clear, you can make up just about any name you want for a variable such as pic in the above example. There are a few rules, but for now as long as you stick to names made up of letters only, you should be ok.
Assignment 1: Console Exercises
The rest of this lab contains three assignments for you to turn in next week. You should start up Aptana Studio and start a new project named "Lab2". (Use the "File" / "New" / "Web Project" command. Please be sure to use the name "Lab2" exactly, with no space in the name; this will make it possible for me to find your work.) Create a new file named "assg1.txt" to hold the answers to the first assignment. This will be a plain text file, not an HTML file.
Some style properties have values that are lengths, such as "4in", "1cm", or "20px". Examples include elem.style.width for the width of the element itself and elem.style.marginLeft for the width of the margin on the left side of the element.
The property elem.style.border tells what type of border is drawn around the element; elem.style.borderTop tells what type of border is drawn along the top of the element. These properties have complicated values such as "thick solid black" and "thin double #00AAAA".
Here are the exercises. Before you begin, you should reload the sample file, http://math.hws.edu/eck/cs120/f11/lab2/sample.html, in the Chrome browser, so you can start with a fresh page. To do the exercises, you will need to consult the HTML source code for that page. Remember to record your answers in the text file, "assg1.txt."
- 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 (#FFFFDD) 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?
- There are six elements on the page with class="course". What commands will show the third of these elements in green on a light green background?
- What commands will set the entire body element to have a light gray background and a width equal to 600px?
- What command wil center the main heading of the page? (For this one, you'll have to do some research to find out the appropriate style property and value.)
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.
<button onclick='document.getElementById("foo").style.color="red"; document.getElementById("bar").style.color="red"'>Show Me!</button>
makes a button that changes the color 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, work in Aptana Studio, not in Chrome.
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.
You should find several images to use on your page, and include those images in your Aptana Studio Lab2 project. 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.)
To get an image from the web, just right-click the image, and choose the appropriate command, such as "Save Image As." Save the image on your computer, then copy-and-paste the image into your Aptana project. If you have any trouble doing this, ask for help.
Remember that for an image in the same directory as the web page on which it appears, the src of the image should be a "relative URL" consisting only of the name of the image file, such as "mypic.jpg".
Assignment 3: Style Picker
The final assignment is to make another complete web page with several buttons. Clicking on a button should make several changes to the entire web page. For example, one button might show the page as white text on a black background with a yellow heading, while another might show dark red text on a light yellow background, and so on. To change the style of the entire page, you should change the style of the body element.
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 from the Lab1 project into the Lab2 project in the Aptana Studio window.
Note that all the styles should look good!