Information Architecture for the Web: Enhancements

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 you use meta tags to declare other information. Add a language declaration like the one below:

Elements of 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

Try a Script

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.

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

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

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.

Repurposing Scripts

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.

The Language of JavaScript

JavaScript contains several elements. These are discussed below.

OBJECTS

Objects are building blocks of the script. JavaScript contains pre-defined objects, and you can create your own.

window.document.mystuff

An object can have properties (sort of like adjectives)

For example, an object might have a name, a size, and a text value.

window.name ("namegoeshere");

An object can have methods (sort of like verbs)

For example, an object might be able to display a text message, record information, or create an alert box.

document.write ("Hello!");

sample 1 A document last modified script (using HTML presentation: <i>).

sample 2 A document last modified script (using an inline style).

sample 3 A document last modified script (using an internal stylesheet).

sample 4 An external script that writes a footer.

sample 5 An external script that writes a footer and a header at the same time using styles (does not work with Netscape 4.x!).

sample 6 You can even insert an image by writing the correct code.

sample 7 Another example of writing an image to a page.

sample 8 You can open a window with a method in the <head> section.

sample 9 You can open an alert box with a method in the <head> section.

FUNCTIONS

Functions combine a series of statements under one name and perform an action. They are usually placed in the <head> section.

sample 1 This function loads with the page but is called with an onload event handler in the <body> tag.

sample 2 After you click on the link to go to this page, a function loads with the page and is written immediately with a document.writeln method that is also in the <head> section.

sample 3 The functions in the <head> are called by the event handlers in the anchor tags to make a simple rollover

sample 4 The functions in the <head> are called by the event handlers in the anchor tags; text is written to the status bar.

OPERATORS

Operators can assign, compare, compute, and evaluate values. Operators combined with objects and variables form expressions.

== (equals), && (and), != (does not equal), || (or), -- (decrement), ! (not), + + (increment), = (simple assignment), etc.

sample 1 This time-of-day greeting depends on a simple operator.

sample 2 This form verification script is a simple example of using operators.

VARIABLES

Variables are containers that hold data. The current value in a variable can be calculated, output, passed along to other variables, etc. You can declare a variable at the beginning of a page and use it throughout the document, or you can declare a variable at the beginning of a function for just that particular function.

sample 1 Notice the variables used to create a simple password verification (username=iupui, password=L571 OR L526).

ARRAYS

An array is a set of variables that are saved under the same name.

sample 1 Two arrays are created to hold the info for the days of the week and the months of the year.

EVENT HANDLERS

Events and event handlers respond to certain events (from the user/browser).

sample 1 This onclick event handler is placed directly in the form itself to open a window.

sample 2 This onmouseover even handler is placed directly in the anchor tag.

sample 3 Another example of making a simple rollover effect here with onmouseover and onmouseout within the anchor tag.

Examples

Other examples for you to adapt:

sample 1 Here is a simple way to make a drop-down menu — and the nice thing about this script is that you can use several (with slight modification) on the same page.

sample 2 Here is a drop-down menu that uses a function called by the onclick event handler.

sample 3 The pop-up windows are defined by a function before they are called with an event handler.

sample 4 Here is how you can close a window that you have opened.

sample 5 You can redirect your user to a different page depending on the user's browser.

sample 6 If you are using IE, a stylesheet called ie.css will load (with the <h1> element in blue. A stylesheet called net.css (with the <h1> element in red) will load for Netscape Navigator users.

sample 7 Here is a more advanced stylesheet redirection script: IE 5.x, 6.x and Netscape 6.x will see the <h1> element in blue. Netscape 4.x users will see the <h1> element in red.

sample 8 Use JavaScript to write anything that you want to your document — but if your page depends on that script to work, you must provide an alternate for users who have disabled JavaScript in their browsers. (Do you know how to disable JavaScript in your browser?)

Samples created by Krystal McReynolds. Edited by Annette Lamb.

Enhancements: JavaScript: Basics