SCORE YOUR PEERS' WORK AND HAVE A SKILLS LAB


Fri Oct  7 2005

HERE'S WHAT I NEED YOU TO DO TODAY:

1.  GO TO EACH OF THESE LINKS

From prackj@WUSTL.EDU  Thu Oct  6 16:12:09 2005
http://userfs.cec.wustl.edu/~jpp2/assignment1secondtry.html

From jennynb@gmail.com  Thu Oct  6 16:37:49 2005
http://cec.wustl.edu/~jnb1/est.html

From hartmana@olin.wustl.edu  Thu Oct  6 18:09:44 2005
http://cec.wustl.edu/~ah3/splash.html

From hcc1@cec.wustl.edu  Thu Oct  6 21:31:39 2005
http://userfs.cec.wustl.edu/~hcc1/B.html

From hanj@WUSTL.EDU  Fri Oct  7 03:16:20 2005
http://cec.wustl.edu/~jh15/sss.html

From pjh1@cec.wustl.edu  Wed Oct  5 08:01:57 2005
http://userfs.cec.wustl.edu/~pjh1/Camogli/

From ttk2@cec.wustl.edu  Wed Oct  5 19:03:48 2005
http://cec.wustl.edu/~ttk2/splash-new.html

From renner@wustl.edu  Thu Oct  6 03:54:53 2005
http://www.artsci.wustl.edu/~prenner/nice/

From fschorre@wustl.edu  Thu Oct  6 09:09:54 2005
http://userfs.cec.wustl.edu/~fs1/assignment1revision.html


AND FILL OUT THIS FORM and EMAIL IT TO ME loui--at--cs.wustl.edu
i actually prefer you copy and paste the text to me -- i just need
to preserve the order in which you assign numbers in order to
automate the summing:




locationscore


http://userfs.cec.wustl.edu/~jpp2/assignment1secondtry.html_____


http://cec.wustl.edu/~jnb1/est.html_____


http://cec.wustl.edu/~ah3/splash.html_____


http://userfs.cec.wustl.edu/~hcc1/B.html_____


http://cec.wustl.edu/~jh15/sss.html_____


http://userfs.cec.wustl.edu/~pjh1/Camogli/_____


http://cec.wustl.edu/~ttk2/splash-new.html_____


http://www.artsci.wustl.edu/~prenner/nice/_____


http://userfs.cec.wustl.edu/~fs1/assignment1revision.html_____





using 1 to 10, 10 as best, and I do need you to use one number, not two.  
You can use 7.5.  Don't say "7.5?" or "maybe 7.5".

Don't feel that you need to water down
your opinions, as anyone who turns in work is headed for some kind of
B even if the aesthetic scores are quite low.  People need to hear from
all sorts of people what they think of their visual tastes.  That's one
of the functions of cs104.  However, you should realize that some people
have different skills and different interests.

But if you don't like it, you don't like it.

Email comments (anything from a line to a paragraph) to me also (one file
in order is best, but use a separate email from your scores please).

2.  WE NEED TO DO A SKILLS LAB.  THE NEXT ASSIGNMENT IS GOING TO BE
HTML BASED, SO IT'S GOOD TO TRY SOME NEW THINGS OUT.  I haven't
coordinated with the TA's after their class (I know what we agreed
they would cover, but who knows what they actually covered?).
So I'm going to ask you to do a cs100w lab from a prior year.
Here it is:


(recycled from lab 5 cs160, which was recycled lab 6 of 100w ...)

Today is the day you play with javascript.  I'm taking this lab straight
from cs160 because everyone seems to have liked it.  Javascript is easy if
you don't try to be too ambitious.  But you should have a look at these
examples before you go to the next paragraph.  View the page, then
look at the source.  Look at each one in order in the folder
http://www.cs.wustl.edu/~loui/160f03/1104/.  Actually t11.html and
t12.html are fairly hard to understand, so you can skip them if you like.




Last semester the students didn't actually look at the sources of each
example.  You must read these examples slowly by seeing what they do and
then looking at the source (view source!).  If you don't do this, you have
no chance of learning javascript, which is actually quite an easy
language.  So stop when you have looked at all of them and call over the
TA to check you have done this.  The TA might want to ask you a question
at this point to see how much you understood of the examples.




Let's make sure we understand some of this stuff we just looked at.




Consider the program:



<body onload="changefoo()">
<img id=foo src=blank.gif border=1 height=100 width=100>

<script>
i=1
function changefoo() {
  i = i+Math.floor(Math.random()*30)
  i = i-Math.floor(Math.random()*30)
  // if (i < 0) i = 0
  // j = j+Math.floor(Math.random()*30)
  // j = j-Math.floor(Math.random()*30)
  foo.style.position = 'absolute'
  foo.style.left = i
  foo.style.top = i
  if (i<=500) setTimeout("changefoo()",100)
}
</script>




which causes the box to move around.  Some things to note:
i is "initialized" with the value of 1.  j never is given
an initial value (so it would be an error to use j in
an expression, in this language).  The lines with the slashes
in front have been "commented out" which means that they
are ignored.  I left them there because you might want to
"uncomment them" and make them active at some point in the
next few moments.  Note how i is used both as the offset of
foo from the left margin and as the offset of foo from
the top margin.  The setTimeout function says to sleep for
100 milliseconds, then call the function "changefoo".  We say
that a function "calls itself" when there is a command like
this within the body of the function.




Can you change the program so that it sleeps 1 second instead
of 100 milliseconds between each change?




Can you change the program so that it never moves off top or the left of
the screen?  (You need only to remove the "comment" which disables one
line of code.)




Can you change the program so that the amount of space from the top
and the amount of space from the left margin vary independently?
(You need to re-enable a couple of commented lines, use j instead
of i for foo.style.top, AND set j=1 in the appropriate place.)




Can you change the program so that once i is 20, it jumps
to i at 500?




Find a site you think is boring and save it to your local machine.
Now look at one of the objects and see if you can give it a name.
If it's a table or an image, that's easy.  If it's a block of text,
you might have to surround it with a span tag.




Let's make the thing that you just named wiggle.  The javascript
function you completed above would make a good wiggle().  You will have
to find the body tag, or put in a body tag, so that the first call
to wiggle can take place when the page is loaded.




Now the problem with javascript is that it tends to create garish
animation.  I mean, it starts to look gee-whiz I can do that, rather
than ooh-flash-is-so-cool.  So let's see if you can smooth it out.
One way to smooth your transitions is to make them small and subtle.
Instead of moving the object, you might try reproducing it in another
place, then fading from one to the other using the opacity filter.
That's that style=filter:alpha(opacity=30) thing.  I had a line
like 



	if (count == 7) bmw.style.filter = "alpha(opacity=30)"



in my fade... but you could create the string "alpha(opacity="+value+")"
if you wanted to loop over the variable, value.  Something like




<script>
myvalue = 100
function fade() {
  myvalue = myvalue - 1
  foo.style.filter = "alpha(opacity=" + myvalue + ")"
  if (myvalue > 0) setTimeout("fade()",10)
}
</script>

<body onload="fade()">
<img id=foo src=interlockingwu.gif height=100%>





might float your boat.  Can you speed up the fade as it gets lighter?
Have a look at my http://www.cs.wustl.edu/~loui/160f03/lab9t.html...
Maybe you can make it even smoother.




Now the last test.  Hopefully not too frustrating.  Try to create a
function which fades between two objects.  You might have a look at my
http://www.cs.wustl.edu/~loui/160f03/lab9u.html and
http://www.cs.wustl.edu/~loui/160f03/lab9v.html.  When you have done this
on your web page, show the TA, and ask yourself whether it is really an
improvement over the original, or just a new kind of visual pollution!