ADDING SIMPLE JAVASCRIPTS
(COPYING, PASTING, MODIFYING)

Javascript allows the webmaster to include special features on a webpage.  (NOTE:  Javascript and Java are two entirely different scripting languages; the terms are sometimes used incorrectly as synonyms by people who do not understand either concept.)  Some javascripts are functional, and some are just fun.  At least for the webmaster.

EXAMPLES:  GrannyTech

Javascripts come in varying degrees of complexity. 

1. Some javascripts have only a few lines of code to be pasted into the page where you want the special effect to begin.
   
   

2. Some javascripts have several different parts that must be pasted into specific parts of your code, like the header and the body.
   
   

3. The most complicated javascripts have one or more files to be linked to your webpage code.  These files have the extension js, and their links appear in the header and the body of the webpage code. If you see an effect on a webpage that you would like to use on your website, you can usually locate and copy these external files (using the path specified in the code), but  sometimes you will have to purchase the script in order to get these files and the documentation.  Forget these complex scripts for now!

You do not have to know how to write javascript; you can locate a simple javascript you would like to use and then copy, paste, and edit it.  Before you can copy, paste, and edit a javascript, however, you must understand some fundamental concepts of HTML (Word file). At some point, you will also need a basic understanding of working with colors if you want to make such formatting changes. 

Warnings about Using Javascripts

• Some of your customers will have their browsers set to ignore javascripts (usually by accident, sometimes due to security paranoia); don't put any essential information in a javascript that you don't also present in an alternate format on the webpage.
   

• You can overdo cutsey special effects--and greatly annoy your customers.
   

• If you have more than one javascript on a page, sometimes you have to add yet another script to allow them to cooperate.
   

• The effect is not always worth your time!  Remember the old adage: Just because you can . . . .

COPYING SCRIPTS

There are two main sources of FREE javascripts for you to experiment with. 

1.  SOMEBODY ELSE'S WEBPAGE

To locate the script in the source code, click VIEW | SOURCE.  If Notepad has been configured as your plain text editor in FrontPage (TOOLS | OPTIONS | CONFIGURE EDITORS, and if there is no block to viewing the source code, that page's html code will usually be displayed and can be easily copied. (The challenge is determining what to copy and where to paste it.)  In Notepad, click FIND and enter "script."  If the script has a .js file associated with it, you probably don't want to experiment with it.  That's category 3!

2.  JAVASCRIPT WEBSITES (FREEBIES)

If you Google "free javascripts" you will get over two million hits!  (Just remember that these websites are businesses, and the goal is to sell you something.)  If you are looking for a specific type of script, enter those keywords. 

Here are several websites I have used for tutorials and scripts:

www.dynamicdrive.com/

javascript.internet.com/

www.w3schools.com/js/default.asp

www.pageresource.com/jscript/

www.javascript.com/

OTHER NOTES

If you want a complex script, say for a drop-down menu, you must prepare to spend many hours configuring the menu.

Most complex menu scripts include a separate css file (cascading style sheet). Some menus are totally css. You will soon need to start working on css!

Here’s a link to a variety of menus from one company: http://www.milonic.com/menu.php. You can try these before you buy. Note that these menus are free to schools but must have a link back to the company. To remove the credit and the link requirement, you have to pay.

Some companies are satisfied with a credit in your code; see, for example, the credit to Dynamic Drive in the source code of http://www.gaetc.org.

EXERCISES

In FrontPage, create a website folder inside your My Websites folder and name it javascript_experiments.  On your index page, begin a list of experiments.  You can create and save a new page for each script.  After a script is operational, experiment with its formatting and content.

Exercise 1 - Countdown
In Google, use these keywords: free javascript countdown clock.  Next, browse several hits to locate a script to copy for your website.  Avoid anything with the words java or applet.  Skip over anything with phrases like free trial or money back. After that, your main selection criteria will probably be the appearance of the "clock" and the ease of adapting the script (avoid any script with an external js file).  To speed up the process, here's a link to a deliberately outdated counter we will use in this class: Countdown.

Exercise 2 - Mouse Trails: Dancing Stars
Copy the code from this webpage and paste it into your code. Preview.  Why is there no apparent effect?  Hint:  Study the stars on the original website. On your webpage, make the change in the page properties that will allow the effect to be visible.

Exercise 3 - Floating Butterflies
Copy the code from this website and paste it into your code.  Copy and paste the image into the folder (in the image folder).

Exercise 4 - Page Kisses
Copy the two sections of code from this webpage and insert them into the appropriate locations in the code. Note that the two required images are in a zip file.

Exercise 5 - Slideshow
Copy the script from the source code of this webpage and paste it into your code.  (Use any handy image files.)

Exercise 6 - No Spam Email Display
Explanation, example, and exercise

Exercise 7 - Drop-Down Links
Copy the script from the source code and paste it into your code.  Change the wording and the links for two items.

Exercise 8 - Simple Quiz
Copy the script on this website and paste it into your code.  Experiment with formatting issues.  Hint:  Place everything into a table - Sample.  Study the pattern in the code.  Next, change a question, the answers, and the correct answer for that question.  Finally, add a question, the answers, and the correct answer for that question.

Exercise 9 - Another Quiz - Not As Simple
This quiz is more complex and has an external js file.

In this brief introductory class, we've concentrated on modifying existing scripts.  Once you understand this process, you might want to learn how to write the code.  If so, try this quiz to get an overview of some of the terminology.