Introduction to JavaScript

Introduction to JavaScript / Using Dreamweaver Scripts

Using Dreamweaver Scripts

Dreamweaver has the ability to add JavaScript functionality (called “behaviors”) to your Web site without you ever having to touch the code. There are some advantages and some disadvantages to this approach.

Advantages

• It’s easy to set-up
• Dreamweaver generates robust code

Disadvantages

• Solutions lack flexibility
• Dreamweaver generates more code than is really necessary
• Generated code is obtuse and hard to debug
• Dreamweaver can’t validate form elements other than text fields

Step-by-Step Example

Using this sample page, we will add a navigation bar with image rollovers, form validation for our mailing list sign-up form, and link the thumbnail images to pop-up windows with the full size photos.

Getting Started

1. Open the sample page
2. Save the source of this page to your desktop as “gallery.html” (from the “File” menu, choose “Save As…”)
3. Open the saved page in a browser window
4. Startup Dreamweaver (if it’s not already running)
5. Open the saved page in Dreamweaver
6. Set-up your Dreamweaver environment in the following way:
   • From the “View” menu, choose “Code and Design”
   • From the “Window” menu, choose “Insert”
   • From the “Window” menu, choose “Properties”
   • From the “Window” menu, choose “Behaviors”

Form Validation

1. In Dreamweaver, click inside the form somewhere
2. In the status bar, click <form> to make sure you are acting on the form itself and not one of the elements within the form
3. In the “Behaviors” window, click on the “+” (plus) sign and choose “Validate Form”
4. Select the input for the user’s email address by clicking on the line labelled “text ‘email’ in form 0”
5. Make the value required by selecting the appropriate checkbox
6. Make it so the field only accepts an email address by selecting the appropriate radio button
7. Click “OK” then save the file
8. Go back to your browser window, reload, and try to submit your form without an email address!

Image Pop-ups

1. In Dreamweaver, click on the leftmost thumbnail image
2. In the “Behaviors” window, click on the “+” (plus) sign and, under “Show Events For”, choose “4.0 and Later Browsers”
3. In the “Behaviors” window, click on the “+” (plus) sign and choose “Open Browser Window”
4. Add the following address where the form asks for “URL to Display”:
   • http://www.gwu.edu/~ahedges/javascript/examples/dreamweaver/images/gallery/ferns.jpg (hint: copy and paste the URL!)
5. Enter 500 for the “Window Width” and 375 for the “Window Height”
6. Give the window a name, you know … like “ferns”
7. Click “OK”
8. In the “Behaviors” window, where it says “onLoad”, click and change it to “(onClick)”
9. Save the file
10. Go back to your browser window, reload, and click on the ferns thumbnail!
11. Repeat this process for the other two thumbnails using these URLs:
    • http://www.gwu.edu/~ahedges/javascript/examples/dreamweaver/images/gallery/water.jpg
    • http://www.gwu.edu/~ahedges/javascript/examples/dreamweaver/images/gallery/desert.jpg

Navigation Bar

1. In Dreamweaver, click on the line just below “My Art Gallery”
2. From the “Insert” palette, choose “Navigation Bar”
3. Where it says “unnamed1” type the following: about
4. Paste the following URL in the “Up Image” field:
   • http://www.gwu.edu/~ahedges/javascript/examples/dreamweaver/images/about_inactive.gif
5. Paste the following URL in the “Over Image” field:
   • http://www.gwu.edu/~ahedges/javascript/examples/dreamweaver/images/about_active.gif
6. Paste the following URL in the “Alternate Text” field:
   • About / History
7. Paste the following URL in the “When Clicked, Go To URL” field:
   • about.html
8. Click the “+” (plus) sign and repeat steps 3 through 7 using the following values:
   • Element Name: exhibitions
   • Up Image: http://www.gwu.edu/~ahedges/javascript/examples/dreamweaver/images/exhibitions_inactive.gif
   • Over Image: http://www.gwu.edu/~ahedges/javascript/examples/dreamweaver/images/exhibitions_active.gif
   • Alternate Text: Exhibitions
   • Go To URL: exhbitions.html
9. Click the “+” (plus) sign and repeat steps 3 through 7 using the following values:
   • Element Name: pressroom
   • Up Image: http://www.gwu.edu/~ahedges/javascript/examples/dreamweaver/images/press_inactive.gif
   • Over Image: http://www.gwu.edu/~ahedges/javascript/examples/dreamweaver/images/press_active.gif
   • Alternate Text: Pressroom
   • Go To URL: pressroom.html
10. Click “OK” then save the file
11. Go back to your browser window, reload, and check out the nifty rollovers!