Home | Javascript | CSS | Multimedia | Tools | Revitalize | eduscapes

Beyond the Basics with JavaScript

man with flag

JavaScript is a scripting language used to create interactive elements for your website. This top section provides a QuickStart to JavaScript. Use the rest of the page as needed for support material. Workshop folder items can be downloaded.

  1. Open Eduscapes. It uses roll-overs for navigation.
  2. Open Shaping Outcomes. The website contains Javascripts for interaction.
  3. Save (right-click on link and SAVE LINK AS) the following graphics in this folder: Landmark Practice, Correct, Incorrect, St. Louis Arch, Mount Rushmore, and Statue of Liberty.
  4. Open the landmarkpractice.htm document in your Workshop folder. Create simple rollovers using the Insert>Image Objects>Rollover Image option in Dreamweaver.
    Examples: Landmarks of the USA, Minerals in Food, Rocks in Our World
  5. Find each instance of the word onmouseover in your code. Replace it with onclick.
    Example: Revised Landmarks of the USA
  6. Save the following graphics on your hard drive: US Button, US Button Reverse, US Map, North America Button, North America Button Reverse, North America Map, World Button, World Button Reverse, World Map. Create a navigation bar using the Insert>Image Objects>Navigation Bar option in Dreamweaver.
    Example: Landmarks Navigation
  7. To create inverted image, open a graphic in Fireworks. Pull down Filters menu, select Adjust Colors, choose Invert.
  8. Try adding declarations and simple JavaScripts into your <head> code. Use the JavaScript Basics section below to copy code.
    Example: practice1.html, practice2.html, practice3.html
  9. Open eat.html. Repurpose the scripts.
    Change the Question, the buttons, and the replies for the pet choice example. Change function name to petQuestion everywhere. Change the text for each case and each alert.
  10. Create an external javascript file. Then call the javascript in the page code. Use the External JavaScript section below to copy code.
    Example: Landmarks JavaScript, footer1.js, footer2.js, footer3.js

 

Support Material

Explore the following resources on this page:

Return to Top

Transparent JavaScripts

If you've got Dreamweaver, you don't need to know anything about JavaScripts to use them for simple applications. Let's start with some of the automated options available in Dreamweaver.

Rollovers

Create simple rollovers using the Insert>Image Objects>Rollover Image option in Dreamweaver.

Go to Minerals in Food for an example of using Dreamweaver JavaScripts for simple rollovers in a tutorial. Notice that the directions are in italics.

Go to Rocks in Our World for an example of using rollovers to check answers.

To build your own interactive page using photos and correct/incorrect answer graphics:
Create a New Folder on your desktop called workshop.
Save (right-click on link and SAVE LINK AS) the following graphics in this folder: Landmark Practice, Correct, Incorrect, St. Louis Arch, Mount Rushmore, and Statue of Liberty.
Open the Dreamweaver practice document. Click at the bottom of the text. Use Insert>Image Objects>Rollover Image to insert each of the three rollovers.
If you have time, create your own graphics (150x150pixels) in FireWorks to add to the activity. For the completed example, go to Landmarks of the USA.

Adapt Rollovers

You may not get exactly the results you wish using the standard Dreamweaver options. For example, you might want students to click on the photo rather than roll over the photo. You'll need to edit the JavaScript, however you don't need to know everything about JavaScript to make a small change.

To change your mouse rollovers to mouseclicks:
View the Code in Dreamweaver.
Find each instance of the word "onmouseover" in your code. Replace it with "onclick".
For an example, go to Revised Landmarks of the USA.

Navigation Bars

Another JavaScript that comes with Dreamweaver is the navigation bar option. You'll need to create buttons in Fireworks or use buttons you find online. If you want them to look interesting, you'll have three different versions of your buttons: mouseup, mouseover, and mousedown.

To add a navigation bar to your Landmarks project:
Save the following graphics on your hard drive: US Button, US Button Reverse, US Map, North America Button, North America Button Reverse, North America Map, World Button, World Button Reverse, World Map.
Open Dreamweaver to your Landmarks Practice page.
Click at the top of the page.
Use the Insert>Image Objects>Navigation Bar to insert a menu with three options.
Use Modify>Navigation Bar to make changes.
For an example, go to Landmarks Navigation.

Return to Top

Javascript FAQs

JavaScript is an easy-to-use scripting language based on an object-oriented programming philosophy. In other words, it's designed in easy-to-copy "chunks" of code. The code is written directly into the HTML page. It is a client-side scripting language, so you don't need any special software installed on your web server for the scripts to work.

Java and JavaScript are totally different languages.

Java is a compiled language developed by Sun. Java is written and then packaged into a self-executing file. To create an application with a compiled language, you typically need a special programming tool or development environment.

Originally developed by Netscape for server side scripting, JavaScript is an object-oriented scripting language. With JavaScript, you can write a script with a text editor (Notepad, SimpleText, etc.). A script is just plain ASCII text.

JavaScript is great for adding interactivity to your page. Although most browsers support JavaScript, some programmers avoid them because they can cause problems with some browsers. Rather than using JavaScripts for fun, think about useful applications that really contribute to the quality of your page rather than silly uses that may interfere with page operation. For example, a rollover button is nice because users can see that their mouse is in the correct location. A question and answer button with a pop-up window is nice for practice tests.

Return to Top

Javascript Lingo

  • A script is a set of directions that accomplishes a task.
  • Objects are building blocks of the script
  • Objects have properties (like adjective) that name, indicate size, and values.
  • Objects have methods (like verbs) that do things like display text, record information.
  • Events are actions the user performs to make things happen.
  • Actions are things such as clicking a mouse that cause events.
  • Event handlers are commands such as
    • onClick - user clicked an object
    • onLoad - objected finished loading
    • onMouseover - moved over an object
    • onMouseout - moved off an object
    • onSelect - user select object
    • onSubmit - user submitted a form
    • onUnload - user left the window
  • A variable is a storage container for a value and can't contain spaces or punctuation.
  • An array is a set of variables saved under the same name.
  • A value is a piece of information such as a number.
  • A string is a character or set of characters such as a word expressed with quotes such as "Welcome".
  • Operators go with variables to make things happen.
  • Assignments are when you put a value on a variable such as store="Costco".
  • A function is a set of statements under one name that perform a task. They are usually in the <head> area and are called as needed such as function testQuestion()

Return to Top

Javascript Basics

When using a JavaScript you need to declare in your head area that you will be using this language. This is also the area where meta tags are used to declare other information. Add a language declaration like the one below:

<meta name="author" content="Annette Lamb" />
<meta name="keywords" content="pet, dog, puppy, cat, kitten, fish" />
<meta name="description" content="Choosing a pet." />
<meta name="copyright" content="&copy; 2006 Annette Lamb" />

<meta http-equiv=”Content-Script-Type” content=”text/javascript” />

JavaScript contains several elements. These are discussed below.

  • Scripts can be placed in the <head> or <body> of your HTML document.
  • Scripts can also be called from an external file such as <script src="footer.js"></script>
  • Identify scripts with the <script language="Javascript" type="text/javascript"> start tag and </script> end tag.
  • Place lines of Javascript between the start and end tag such as

Let's try a script. The document.write javascript puts information in a document. Notice that the quotations and parentheses are required. Place this script in the <head> are of your HTML document.

<script language="Javascript" type="text/javascript">
document.write("Choosing a pet is fun!");
</script>

Let's add another line within the script. This script shows an alert box with the information you enter. Let's save it as practice1.html

<script language="Javascript" type="text/javascript">
document.write("Choosing a pet is fun!");
alert("Welcome to the World of Pets!");
</script>

Many times javascripts have conditions and use an if, else approach using confirm( ) to check for a true or false statement based on user input. Be sure you notice the difference between the ( ) and the { } symbols. Try the following conditional javascript. Let's save it as practice2.html


<script language="Javascript" type="text/javascript">
if (confirm("Click OK if you love animals.")) {
alert("Great! Let's find the perfect pet for you!")
}
else {
alert("A pet rock would be a good choice for you.")
}
</script>

Many javascripts contain code in both the head and body. In the following example, the function is in the head and the form is in the body.

You're probably thinking this is a lot of work. The key for beginners is re-purposing scripts rather than building your own from scratch. In other words. Let's change this Eating Right script into a script that can be used with the pets project or the landmarks project. Then, save it as practice3.html

To repurpose a script:
Open the Eating Right page in a web browser. View the Source code. Copy the Source code. Create a new Dreamweaver document. Select the Code view. Paste the code into Dreamweaver.
Or, download and open the (eat.html) document and select the Code view.
Change the Question, the buttons, and the replies for the pet choice example.
Change function name to petQuestion everywhere.
Change the text for each case and each alert.

External JavaScript

Sometimes you want to run the same script on many pages. In this case, you'll write a JavaScript as an external file. Then, simply call the .js file when you need it. You don't include the <script> tag in an external JavaScript. Check out examples at Landmarks JavaScript.

<script src="footer.js"></script>

Footers are a good use of an external javascript. You can create these files in Dreamweaver or a text editor. Then simply save them with the .js file extension.

You can add text you wish. For an example, go to footer1.js.

document.write("All Rights Reserved. Copyright 2006.");

You can add some text and today's date. For an example, go to footer2.js.

var today = new Date();
document.write('Based on the Internet clock ' + today.toLocaleString() );

You can also add a graphic in addition to text. For an example, go to footer3.js.

document.write("<img src='logo.jpg'> Enjoy this student-produced page.");

Return to Top

JavaScript Ideas

Navigation

Go back one page. It's like clicking the back button on your browser. This is useful when people are coming from different places and need to go back to different places. Go to Rocks for an example.

<a href="javascript:history.go(-1)">Go back </a>

Popups

Popups can be useful for news or instructional materials. For example, you might use a pop-up for definitions, help, or additional information. The problem with popups is that some people have turned off their pop-up options in their browser.

Go to popup.html for an example. Go to Rock Popup for an example.

<head> <script type="text/javascript">
window.open('annoy.html','popup','width=250,height=250');
</script> </head>

Rollovers

Rollovers occur when a user rolls the cursor over an object such as a graphic and triggers an action such as a change in a graphic.

Go to bugs.html for an example of a simple blank to graphic rollover.

Return to Top

Using Forms

There are many times when you may wish users to complete forms. In most cases, you'll want a record of the information entered into the form. This information might be sent to the webmaster through email, posted in a guestbook, or recorded in a database. Teachers use forms for online homework. Librarians use forms for patron inquiries, surveys, and book reviews. Most forms involve a combination of JavaScripts and CGI scripts.

Many people like to add interactive elements to their website such as surveys, guestbooks, and registration forms. Forms are used for people to enter their information.

It's easy to incorporate the form tags into your page. The tough part is getting the form to work in practice. This is because the data handling part of a form is often handled by your web server. You may or may not have control over the scripts on your web server. Before jumping into the development of forms, check with your service provider and ask about access to CGI scripts and other server-side processing tools.

You can categorize forms into four basic types:

  • checkbox: one or more choices can be made by selecting a checkbox
  • radio button: only one choice can be made of any radio-button group
  • drop-down selection: one or more choices can be made from a list
  • text entry: free data entry is allowed

Every type of form is contained within a <form> tag. You commonly use the method and the action attributes. The script looks like this:

<form method="post" action="mailto:alamb@eduscapes.com">The Form Goes Here</form>

The method of submitting or resetting the form data is often via a pre-established set of buttons indicated in the <input> tag using the type attribute:

<input type="submit" value="text that appears on the submit button" />
<input type="reset" value="text that appears on the reset button " />

Your form needs a way to make selections or enter text.

Check out a mail-to form in action of Central Middle School.

Try using the Response-O-Matic Form Processor template.

Polls & Surveys

If you don't want to do all the work yourself, try some of these services.

CGI Resources

  • CGI Resource Index - lots of resources and scripts.
  • Form Mail - This is the most popular CGI script for processing email. They also provide a service for processing mail if you don't have access to cgi on your server.

Learn More

Return to Top

Repurposing Code

Many websites contain code to examine and repurpose. If you copy any code be sure to give credit to the source of the code.

Before you add a JavaScript to your HTML, decide whether it should be placed in the body section and/or the head section. Scripts placed in the body section will be executed while the page loads, while scripts in the head section will be executed when called.

Passwords

In many environments you may wish to use a simple password system. Check out:

Try the Video page. Notice that it asked for the password. Use the word video to try it out. Then, view the source of the blank password.html page.

Pulldown Menu

Check out the pulldown menu on the Teaching Deaf and Hard of Hearing Students page. Copy the form from the body. Create anchors on the page and change the internal links on the form to match. Go to Landmark Pulldown Menu to see the script repurposed.

Slide Show & Virtual Tours

Slide Show with Text. There are many JavaScripts for slide shows. The key is to copy the necessary elements. For example, go to Landscapes de Art. Notice their slide show. To adapt this script you need to copy the script from the head, the onload from the body tag, and a script from the bottom of the page. Then, simply change the .jpg file names and descriptions. Go to Landmarks Gallery to see the script repurposed.

Virtual Field Trip with Controls. Here's another way to provide a virtual tour. Visit St. Peter's Church. Let's repurpose this one by copying the JavaScript from the head and the form from the body. Then, simply change the .jpg file names and descriptions. Go to Landmarks Gallery 2 to see the script repurposed.

Slide Show. Here's a third option for a slide show. Visit Sign Language. Let's repurpose this one by copying the script form the body. Then, simply change the .jpg file names. Go to Landmarks Gallery 3 to see the script repurposed.

Tools

JavaScripts can be used to embed tools such as calendars and calculators on your page. Check out:

Try copying the JavaScript from the head and the body and creating your own project. Be sure to give credit! Check out Field Trip Fun as an example.

Tutorials

There are many websites that use JavaScripts to help students learn.


Go to the Be an Architect page. Examine the activity at the bottom of the page. Open and examine the source code. Think about ways you could adapt this source code for your needs. Check out our example called Animal Homes. Specific guidelines for modifying the scripts are listed below.

You'll want to modify the SCRIPT at the top of the page in the head area by indicating your "correct items" ('a','b','c','d') and the appropriate link page (correct.html or incorrect.html). Also add a note thanking the code developer.

<SCRIPT LANGUAGE="Javascript">
<!--Hide from older browsers.
This code was adapted from Be an Architect page at
http://www.sanford-artedventures.com/play/arch2/a2.html

function check(){
r=new Array('a','b','c','d');
for(i=0;i<r.length;i++){
el = document.theForm.elements['q'+i];
if(r[i]!=el.options[el.selectedIndex].value){
location.href='wrong.html';
return;
}
}
location.href='right.html';
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>

Scroll down the code to locate the FORM used for the questions. Notice the values assigned to each possible answer. These values can be changed to meet your needs. We have 4 questions, but you could increase this number by adding "q4", "q5", etc. Be sure to add the "correct answer" to the SCRIPT if you add additional items.

<FORM NAME="theForm" onSubmit="check(); return false;">
<table width="440" border="0" cellpadding="3">
<tr align="center"> <td><img src="hole.jpg" alt="hole"></td>
<td><img src="water.jpg" alt="water"></td>
</tr> <tr align="center">
<td><select name="q0">
<option value="0">This is a home for a </option>
<option value="a">skunk.</option>
<option value="b">fish.</option>
<option value="c">bird.</option>
<option value="d">bear.</option></select>
</td>
<td><select name="q1">
<option value="0">This is a home for a </option>
<option value="a">skunk.</option>
<option value="b">fish.</option>
<option value="c">bird.</option>
<option value="d">bear.</option></select></td></tr>
<tr align="center"> <td><img src="nest.jpg" alt="nest" ></td>
<td><img src="cave.jpg" alt="cave" ></td></tr>
<tr align="center">
<td><select name="q2">
<option value="0">This is a home for a </option>
<option value="a">skunk.</option>
<option value="b">fish.</option>
<option value="c">bird.</option>
<option value="d">bear.</option></select></td>
<td><select name="q3">
<option value="0">This is a home for a </option>
<option value="a">skunk.</option>
<option value="b">fish.</option>
<option value="c">bird.</option>
<option value="d">bear.</option></select></td></tr>
<tr> <td colspan="2" align="center">
<INPUT TYPE="button" VALUE="Am I right?" onClick="check()">
</td>
</tr>
</table>
</form>

Return to Top

Web Resources

JavaScript Sources

JavaScript Tutorials

Website for Articles

Websites for Books

JavaScript Testing

Learn more at Information Architecture for the Web: Javascript.

Return to Top

Home | Javascript | CSS | Multimedia | Tools | Revitalize | eduscapes
Developed by Annette Lamb, 1/06. Updated 3/07.