JavaScript is often used to add interest to Web pages. Let's use it to look at example that introduces some of the Big Ideas behind computing and its power. This exercise also shows that you can play around with programming with no special software: just Notepad and a browser.
Work on this material in lab on Tuesday. Work with a classmate. Ask for help if any step is unclear, or you get stuck. Just try the steps and think about the questions. Don't worry if the questions don't make much sense, or if you don't have any idea of the answers. We'll be talking about all of this. You do not have to turn anything in.
Step 0. Set up a folder for your work with your name on it.
Step 1. Use the Notepad program (start>programs>accessories>notepad) to create a file with the following stuff in it. You can copy the text off this webpage and paste it into your file.
<HTML><HEAD><TITLE>Example</TITLE>
<SCRIPT
language=JavaScript>
<!--
document.onload=init;
document.onmousemove=getxy;
var
mx,my;
var
r=50;
var things=new Array(
function init()
{
for (i in things)
{
place(things[i]);
}
}
function place(item)
{
placee=document.getElementById(item.id);
placee.style.left=item.x0;
placee.style.top=item.y0;
}
function getxy()
{
mx=event.x;
my=event.y;
movestuff();
}
function movestuff()
{
runner.style.left=mx;
runner.style.top=my
for (i in things)
{
adjust(things[i]);
}
}
function adjust(item)
{
adjustee=document.getElementById(item.id);
ax=item.x0;
ay=item.y0;
dx=mx-ax;
dy=ay-my;
angle=findangle(dx,dy);
adjustee.style.left=ax+r*Math.cos(angle);
adjustee.style.top=ay-r*Math.sin(angle);
}
function findangle(x,y)
{
if (x==0)
if(y>0)
return
Math.PI/2;
else return
Math.PI/2;
if(x>0)
return Math.atan(y/x);
return Math.PI+Math.atan(y/x);
}
function sign(x)
{
if (Math.abs(x)<10)
return 0;
if(x<0)
return -1;
return 1;
}
//->
</SCRIPT>
<BODY>
<DIV id="runner"
style="position: absolute">
This
</DIV>
<DIV id="wd1"
style="position: absolute">
That
</DIV>
<DIV id="wd2"
style="position: absolute">
That
</DIV>
<DIV id="wd3"
style="position: absolute">
That
</DIV>
<DIV id="wd4"
style="position: absolute">
That
</DIV>
</BODY></HTML>
Carefully save this file in the folder named after you, the same one where you put your picture. Care is needed to be sure to select “all files” where it asks you what type to use, and to use a name that ends with “.html”, like boatpage.html. This creates a Web page.
Step 2. Now use Internet Explorer to view your work. Start Explorer by doubleclicking the blue e on the desktop, then select file>open. Then choose browse, and select the file you just created (it’ll have a blue e next to it.) Note that these examples may or may not work in Netscape…use Explorer to be sure.
Move the mouse around on the screen. If all goes well, you'll see the word "this" moving with you mouse, and four thats sort of being attracted to the this.
Step 3. Using Notepad, change your file by replacing This and the four Thats (near the end of the file) by your first and last name, or any other words that occur to you. Save the file again (don't use Save as) and use refresh in Explorer to see the modified version.
Step 4. Read the text in your file. Can you get any idea of that it means, and how the effect you see when you move the mouse is specified by this text? Don't expect this to make much if any sense. Even if you have done some programming before, which many of you have not, you may never have seen this language. But you may be able to see a glimmer of meaning here are there.
Exercise 0.0:
For each blank in the following sentences, try to find a word in the word list below that can fill it. Each word in the word list is used only once, except that you have two copies of "numbers". In the space in front of the words on the word list, fill in the number of the blank it goes in. Turn in a piece of paper with just these numbers on it (plus your name). For example, if you think that "calculations" goes in blank 4 and "characters" goes in black 16, your list would begin "4 16 ...". If there are words you can't place, put ? for them in your list.
TURN in your list by the end of lab. If you work with one or more classmates, turn in one list with all your names on it.
A Web page is a collection of __1__:, which can be letters, digits, or punctuation.
Compositionality is where small things are __2__ ("composed") to make bigger things.
An example of compositionality is that all material things are made up of __3__.
An example of compositionality is that characters are combined to make the __4__.
Layering is a common form of compositionality where small things are combined to form middle-sized things, and then big things are made from the middle-sized things, rather than trying to make the big things __5__ from the small things.
An example of layering is that elementary particles combine to form atoms, these combine to form molecules, molecules combine to form cells, cells combine to form tissues, tissues combine to form organs, and organs combine to form __6__.
The part of this Web page that makes it __7__ something is called a program.
The program for this Web page contains a few parts called functions.
A function is a little program that forms __8__ of a larger one.
Each function is __9__ characters.
An example of __10__ is that characters are combined to make functions, and functions are combined to make a program.
The positions of things that move on the screen are controlled by __11__.
Changing the coordinates of something makes it __12__.
Because coordinates are numbers, you can control how something moves by __13__ on numbers.
So if a computer can work with numbers, it can also do __14__.
You can't see them here, but characters are also represented by __15__, called character codes.
So if a computer can work with __16__, it can work with geometry and programs, too, since programs are represented by characters, and characters are represented by numbers.
Numbers are a __17__ representation: you can represent anything with them (or can you?)
Word list:
__calculations
__characters
__combined
__coordinates
__directly
__do
__elementary particles
__geometry
__layering
__made up of
__move
__numbers
__numbers
__part
__universal
__Web page
__you
If you have more time:
See if you can replace the word "this" in this Web page by a picture. To do this, go through the following steps:
1. Use the paint program (start>programs>accessories>paint) to draw a little picture of something you like. Before starting to draw, set the width and height of your picture to something small, like 50 pixels. Do this in the dialog box you get from image>attributes.
Save your picture as a GIF. Do this by using file>save as and selecting Graphics Interchange Format where it asks you what type to save as. Select the folder with your name on it so that the picture is saved there. Use a name you like for the picture. When I did this, my picture was a little sailboat, and I named it boat.gif.
2. In Notepad, replace this text in your Web page
<DIV id="runner"
style="position: absolute">
This
</DIV>
with this:
<IMG name="runner" SRC="boat.gif" style="POSITION: absolute">
and then replace "boat.gif" in there by the name of your picture.
3. Use refresh in Explorer to see the new version. You should see your picture following the cursor instead of the word "this".
Some things to do if you have still more time (in no particular order): Replace the thats by pictures; See if you can get your picture centered on the cursor instead of hanging from the corner; See if you can get the thats to be repelled by the cursor rather than attracted; Instead of having "this" or a picture on the cursor, see if you can position it so its x coordinate is the cursor's y coordinate and its y coordinate is the x coordinate of the cursor.