Name:
Introduction to JavaScript
Overview
In today's lab we create a number of JavaScript-enabled Web Pages. You
will make pages that:
- Open a pop-up alert window with a message of your choice.
- Open a link in a new window whose properties you specify.
- Create a page with a rollover link.
- Create a page with a rollover link that also controls another image.
HINTS:
- Case (small or capital) is important.
- Make sure that each of your html <opening tags> is matched with a
</closing> tag.
- Type everything that is
in the typewriter font
exactly like it is on the
handout.
- Don't forget to type the function opening {
}
and
closing brackets.
- Don't use returns or line breaks within " " in the code
for functions.
- End each line in a function with a semicolon ;
- Use 'single quotes' to nest things within "double quotes"
Create a pop-up alert box.
- We will use Notepad to generate our HTML pages. Open Notepad (Start/Programs/Accessories/Notepad).
- We are going to build our pages from the outside in. Thus you
will open a <tag> and give its "properties" and then close
the </tag>. We will then nest the tags inside each other from the
outside in.
- In Notepad type in the opening html tag. Hit return
twice. Type in the closing html tag. Everything else that you
type will go between these tags- they will be the first and last lines of your
page.
- On the second line, type in the tag that opens the head. Hit
return twice. On the second to the last line of the page, type the closing
head tag. At this point your page should have the opening html, the
opening head, a blank line, the closing head, and the closing html tags.
- On the line underneath the opening head tag, type the opening body
tag. Put in a blank line and then put in the closing body tag.
- Now it's time for your first JavaScript. On the line under the head
tag, open the script tag. Within the script tag, set the
LANGUAGE="JavaScript">
(Hint- don't forget the final >). Put in a
blank line and then put in the closing script tag. This closing
script tag should be on the line just above the closing head tag.
- Next we need to call the JavaScript method for displaying a pop-up
dialog box. On the blank line between the script tags, type in
alert("____________")
where you replace the blank line with what you want to appear in
the dialogue box.
- So far we haven't put anything in the body. Put some text on the blank
line between the opening and closing body tags. You can just type in the
text, you don't need to but it in quotes or brackets or such.
- Time to save your web page. We will give you a floppy disk and a
label. Label your disk before ever putting it in the computer.
Unlabelled disks will be reformatted and reused. Go to the File menu
and choose Save As.
- Change Save in: to (A:). Change the file name to alert.htm.
Change the Save as type: to All Files. Click on Save.
- Open My Computer and double-click on A: . Double-click
on alert.htm to open it in your browser. If things don't quite work
the way they should, go back and fix them by editing, saving, and refreshing
your browser.
2. Create a link that opens in a new window.
- We will build up our JavaScript library by working with the pieces we've
already created. This has at least two advantages: 1) it saves us work,
and 2) it lets us use pieces that we know work (because we've already run
them).
- Leave your last file (alert.htm) open. Go to the File menu and
choose Save As.
- Change Save in: to (A:). Change the file name to window.htm.
Change the Save as type: to All Files. Click on Save.
- Replace the alert line with a blank line. Replace the text you
typed in the body with a blank line.
- We will need to define our first JavaScript function. We will need to
hide it from browsers that can't understand it. Do this be placing the
HTML comment opener
<!--
on the line beneath the script tag, a blank line, and the comment
closer
//-->
on the line above the script closing tag.
- Next we need to define the function that opens the new window that will open
to the web address (URL) we specify. Do this by typing (on the blank line
in the comment):
function
openWin(URL) {
- On the next line, we will place the code that controls how this function
works. We will use the window.open method to open the page
URL in a window named links that has no toolbar, statusbar, or menubar.
It does however have a scrollbar. It's set so the user can't resize it at
a width of 600 pixels, and a height of only 420 pixels, so it won't fill
the entire screen. Type the following all on one line (let the text wrap
around, but don't put in any line breaks or returns.
aWindow=window.open(URL,"Links","toolbar=no,status=no,menubar=no,scrollbars=yes,
resizeable=no,width=600,height=420");
- On the line below this, we must close our new function with a single bracket
}
- Congratulations, you've just written your first JavaScript function!
Now what do we do with it? In the body, we are going to put in a link to
the UW Upward Bound homepage (http://depts.washington.edu/uboma) that will call
our new function (openWin) when it opens. Note that we must use 'single
quotes' to nest things within "double quotes". This will open
the link in a new window. On the blank line between the opening and
closing body tags, type:
<a href= "javascript:openWin('http://depts.washington.edu/uboma')">
UW Upward Bound </a>
- Guess what? You've just finished your second JavaScript page. Go to the File
menu and choose Save.
- Open My Computer and double-click on A: . Double-click
on window.htm to open it in your browser. If things don't quite
work the way they should, go back and fix them by editing, saving, and
refreshing your browser. Close this window when done.
3. Create your first rollover.
- Reopen your first file (alert.htm). Go to the File menu and
choose Save As.
- Change Save in: to (A:). Change the file name to singlerollover.htm.
Change the Save as type: to All Files. Click on Save.
- Replace the alert line with a blank line. Replace the text you
typed in the body with a blank line.
- This time will need to do a little more with our JavaScript. Start the
same way by hiding it from browsers that can't understand it. Do
this by placing the HTML comment opener
<!--
on the line beneath the script tag, a blank line, and the comment
closer
//-->
on the line above the script closing tag.
- The effect we are working on replaces one image with a second one when the
user moves the mouse over it. We are going to create two image objects and
to get the browser to preload both images into memory. But we only want
this to happen in browsers that can display the rollover effect. To do
this, we check to see if browsers support the images object. We do
this with an if/then statement. Since we don't want anything at all to
happen if the browser can't show the effect, we leave out the then statement. On
the line under the comment opener, type
if (document.images){
- Type in a blank line, and on the line above the comment closer, type
}
- On the blank like between the { }'s we will define the two image
objects and preload them into memory. We do this by defining the on and
off images and specifying their sources. Type the following on two lines
(with a return between them):
img1on = new Image();
img1on.src = "oscroll.jpg";
- Type in another blank line and then type exactly the same two lines
again. Change ing1on to img1off on both lines, and change oscroll
to scroll. If you've done everything right, then the function
closing bracket } should be on the next line.
- Underneath this function closing bracket, we need to define two new
functions, one that will load the active image when the mouse is moved over the
the image, and one that will load the inactive image when it isn't. It
will do this by a neat trick- it will add off and on to the image
name! Define the first of these functions by typing:
function imgAct(imgName)
{
document[imgName].src = eval(imgName + "on.src");
}
- Type in another blank line and then type exactly the same two lines
again. Change imgAct to imgInact , and change on.src to
off.src. If you've done everything right, then the comment closers
//--> should be on the next line.
- Now that we've defined our three functions, it's time to put them to
work. The first function will be run automatically if the browser supports
rollover effects. We will call the other two with the onMouseOver
and OnMouseOut event handlers. In the body of the page, we will
place an image, make it a link to the UB Homepage, name the image, give its
properties, and load different versions depending on the position of the
mouse. Move the cursor to the blank line in the body tag and type the
following (try and figure out what each part does):
<a HREF="http://depts.washington.edu/uboma"
onMouseOver="imgAct('img1')"
onMouseOut="imgInact('img1')">
<img NAME="img1" BORDER="0" HEIGHT="298"
WIDTH="180" SRC="scroll.jpg"></a>
- Only one thing left to do: grab the images. open Internet Explorer and
go to : http://depts.washington.edu/ubms/weblab2-2/
. Right-click on each image and use the Save Picture As to save it
to your floppy disk. Save all four with the names under the images.
- That's about it You've just finished your third JavaScript page. Go to the File
menu and choose Save.
- Open My Computer and double-click on A: . Double-click
on singlerollover.htm to open it in your browser. If things don't
quite work the way they should, go back and fix them by editing, saving, and
refreshing your browser. Leave this window open when done.
4. Create a multiple rollover.
- You should still have your last file (singlerollover.htm) open. Go to
the File menu and choose Save As.
- Change Save in: to (A:). Change the file name to doublerollover.htm.
Change the Save as type: to All Files. Click on Save.
- Now you'll start to se the advantage on starting your own script
library. We will modify the last script to produce a double rollover that
changes the first image onMouseOver and makes a new image appear in a second
window. First we create an object for, and preload the new image we want to
appear. After the line that says: img1off.src
= "scroll.jpg"; and before the
closing bracket of the first function, type:
img1ad = new Image();
img1ad.src = "ub.jpg";
- Now we need to add control of these images to the imgAct and ImgInact
functions. After the line that says:
document[imgName].src = eval(imgName + "on.src"); and
before the closing function bracket, type:
document["holder"].src = eval(imgName +
"ad.src");
- Now on to the last function. After the line that says:
document[imgName].src = eval(imgName + "off.src"); and
before the closing function bracket, type:
document["holder"].src = "clear.gif";
- Now that we've defined our three functions, it's time to put them to work
for both images. The first function will be run automatically if the
browser supports rollover effects. We will call the other two with the onMouseOver
and OnMouseOut event handlers. After the first image/link in the
body of the page, type in a blank line. Now we will place the next
image in the page, name it, give its properties, and load the first, rather
bland image. On this blank line, type:
<img NAME="holder" HEIGHT="207" WIDTH="319" SRC="clear.gif"></p>
- Since we've already grabbed the images, all that's left to do is to go to
the File menu and choose Save.
- Open My Computer and double-click on A: . Double-click
on doublerollover.htm to open it in your browser. If things don't
quite work the way they should, go back and fix them by editing, saving, and
refreshing your browser. Leave this window open when done.