JavaScript Tutorial
In today's lab we will introduce you to an
excellent on-line html tutorial. We will only have time to do a few
lessons in this tutorial, but I strongly encourage you to do more of it on your
own. If you are still confused about JavaScript, go back and do earlier
lessons. If you want to learn more, go on to the next lessons.
- Open Internet Explorer and go to Chapter 4 of the JavaScript Learning
Center's tutorial at http://www.javascriptmall.com/learn/lesson4.htm.
- Scroll down and read about values and variables. When you get to the
button that says "-Lab-", click it. This will open a new window.
In the bottom part of this window, you will type in your JavaScript.
Once you press "Test", the page you've created will appear in the top
window. Resize and reposition these windows so you can see both at the
same time.
- In the first Lab Time, type in the document.write statement, and try all
four of the values suggested. Be sure to click "test" between each one.
- On the "electronic chalkboard" try changing each of these values.
Press test each time to see the effects of your changes.
- Read the section on operators. Using the "Lab" Window, try and do
the three steps described in this exercise. Please try on your own to do
these three steps. If you can understand this lesson, it will really
help you understand JavaScript.
- Scroll to the bottom and click on the "Contents" link.
- On the Contents page, click on the link for Lesson 5.
- Click on "Test" to examine the if-then statement. Change the number
value as suggested, and click "test" again. Try and do the rest of the
exercises in this lesson.
- Skip Lesson 6. If you have time, go on to lesson 7.
Inserting JavaScripts from the Web
In this exercise, we will visit
a site that maintains a free library of cool JavaScripts that you can use on
your pages. All you need to do is cut and paste the code into your web
pages. Be sure to credit the author, and to leave any of their copyright
information in the source code.
- Open your browser and go to: http://www.zdnet.com/devhead/resources/scriptlibrary/javascript/.
- On the menu to the right, choose a category of scripts that you are
interested in, and click on the link.
- Scroll through the list of scripts until you find one that you would like
to insert on your page. You may want to pick a simple one with no images
for your first attempt. Click on the link for that script. If the
script you want to use requires any extra images, make sure that you download
and unzip the script/images and save the images in exactly the same
folder as the web page.
- Click on the "demo" button to see what the script does.
- Click on the "source" button to see the source code.
- Open a new page in Front Page. Click on the "html" tab at the bottom
of the window.
- Follow the instructions on where to place each part of the code. Be
aware that you will have to scroll down within each text box (there is
usually more more text than first appears) and copy the entire block.
Paste this code exactly where instructed.
- When you're done, click on the "Normal" tab to make sure sure that what
you've done makes sense and click on the "Preview" tab to see the fruits of
your labors.