Due before midnight, Thursday 03 May 2007
This week you'll be doing some very simple things using JavaScript.
Remember, I've put template HTML and XHTML files on the web.
Feel free to use them as starting points.
All final pages should be both valid HTML or XHTML and valid CSS.
Make a folder called hw09. Inside it you'll be creating the usual sub-folders pages, images, css, and a new one js as needed.
These pages will all be fairly short bits of JavaScript, but it will force you to actively write some of it which will help you learn and understand it. Remember how HTML seemed back at the start of the semester?
The first thing I want you to do is create a simple HTML file called hello.html. You can style this as desired. In fact, a good idea would be to come up with a style sheet that you like, apply it an empty HTML page and use that as the starting point for each of these.
Next, you are going to participate in a ritual that has been around since at least 1974, the creation of your first JavaScript program.
Inside the <body>, put a region for a top level header like so:
<h1>
</h1>
Next, you should add the following lines in between the h1 tags:
<script type="text/javascript">
document.write("Hello, World!");
</script>
Now open up this file in a web browser. If it says the magical message, you know everything is working -- your browser, including JavaScript, the syntax, etc.. Congratulate yourself on writing your first program!
Now create another HTML file called temp.html. This time in the head, include a link to an external JavaScript file called temp.js that is stored in the js directory. Don't forget the closing tag.
<script type="text/javascript" src="../js/temp.js"> </script>
Open up temp.js and add in a single line that creates a pop-up alert message (pick your own message):
alert("Some message");
Now open up temp.html in your web browser. You should get the pop-up message. If it doesn't appear, you should check:
Once you have the alert working, add the following into the body of temp.html:
<h1>Temperature Conversion</h1>
<p>Hello, <span id="name">NAME</span>!</p>
<p><span id="degF">XXX</span> degrees Fahrenheit
is <span id="degC">XXX</span> degrees Celsius. </p>
This will give us some text to work with and change.
Next add the following to temp.js (the comment is just for your reference):
window.onload = initAll;
function initAll() {
// the rest of your code will go here
}
First, add in a line asking for their name:
var name = prompt("What is your name?","");
Next, add in a line asking for the temperature:
var degF = prompt("What is the temperature in Fahrenheit?","");
Now, you can calculate the temperature in Celsius using the standard conversion formula.
var degC = (degF - 32) * 5.0 / 9.0;
This gives us all the information we need to re-write the paragraph with the updated information.
document.getElementById("name").innerHTML = name;
document.getElementById("degF").innerHTML = degF;
document.getElementById("degC").innerHTML = degC;
You can test it using some known pairs:
Finally, create a file called rollover.html that implements one of the rollover examples from Week 11 of the online syllabus. I'd recommend one of:
It doesn't need to be anything fancy, but I'd like it if you would use your own graphics instead of just using the ones from the site. You only need to make one rollover effect, but it wouldn't hurt to try for more than one.
Create a file called index.html that links to your three sub-pages. By now, you know exactly where this goes!
If you followed the Honor Code in this assignment, include the requisite statement within this page.
I affirm that I have adhered to the Honor Code in this assignment.
Update your index.html file in your csci100 directory with a link to this assignment.
Be sure all (X)HTML files are validated as either 4.01 Strict or XHTML 1.0, and all CSS files are valid CSS.
Upload, set permissions, and so forth. You now just need to electronically handin all your files.
If you are using Terminal you can just do this as one command:
ssh username@cs.oberlin.edu handin -c cs100 -a 9 www/csci100/hw09
Click here for my secret message this week.