The Basics of JavaScript’s

What is JavaScript?
JavaScript is a scripting language developed by Netscape. With JavaScript you can easily
create interactive web pages. JavaScript statements can be embedded directly in an HTML
page. Web developer programs such as Dreamweaver can also create JavaScript’s. These
statements can recognize and respond to user events such as mouse clicks, popup
windows, page navigation, last page update info and MUCH more!

Essentially, events are messages generated by browsers indicating that a visitor to your page
has done something. For example, you can write a JavaScript function to verify that users
enter valid information into a form. Without any network transmission, an HTML page with
embedded JavaScript can interpret the entered text and alert the user with a message dialog
if the input is invalid.

JavaScript shares the fundamental feature of all programming languages: it can get data
from some source, process that data, and output the results. Because it is integrated into
HTML, JavaScript already knows what your browser knows.

One of the best things about JavaScript is that you can do a great deal with very little
programming. You don't need a fancy computer, you don't need any software other than a
word processor and a Web browser, and you don't need access to a Web server; you can do
all your work right on your own computer.

JavaScript IS NOT the same as JAVA!

JavaScript and JAVA are similar in some ways but fundamentally different in others. The
JavaScript language resembles JAVA but does not have JAVA's complexity. JAVA is
essentially a mechanism by which developers can embed a higher level of functionality, not
just functional information, into an HTML page.

However, there are times when you may want enhance your page with something more
than what HTML alone can offer, WITHOUT the complexity of JAVA.

That's where JavaScript fills the bill!

Running JavaScript
You need a JavaScript-enabled browser - for example, Netscape Navigator (version 2.0 or
higher) or Microsoft Internet Explorer (version 3.0 or higher). Since these two browsers are
widely spread many people are able to run scripts written in JavaScript.
*This is an important point for choosing JavaScript to enhance your web pages

1
 Creating JavaScript in Dreamweaver
Example: Creating a ‘pop-up’ window – a small message window will appear on the screen on demand.

1. Open Dreamweaver by selecting START > PROGRAMS > MACROMEDIA DREAMWEAVER.

2. Type the following: This is JavaScript! Now, highlight this text.

3. In the Property inspector, type in the following command in the link field of the property
inspector: javascript:; Now, hit enter.

*Important: Don’t forget to include both the colon and the semicolon, by doing this you are
essentially adding a hyperlink for the JavaScript command to work properly.

4. With the text still selected (or highlighted), open the Behaviors panel.
You can do this several ways:
• Pressing Shift + F3 at the same time opens the behaviors panel
• Select from the menu bar, WINDOW > BEHAVIORS
• Click on the ‘cog wheel icon’ at lower right corner of screen

5. You will now choose 2 actions from the ‘actions’ pop-up menu by clicking on the icon. +
This ‘plus’ command is a pop-up menu of actions (or events) that can be attached to the
currently selected element. Do the following 3 steps:
• Select ‘show events for’ and then choose ‘4.0 and later browsers’.
• Click on the+ icon again.
• Select from the menu: popup message. When the message box appears, type the
following message:

“When this popup window appears on your screen, it will make you smile.”

6. Now click on the ‘okay’ button.

7. To test your JavaScript command, hit F12 to open up a browser window and test your event.

8. Click once on your text and your pop-up window should appear – congratulations!

Embedding JavaScript using HTML

JavaScript code is embedded directly into the HTML-page. It usually goes between the </title> tag
and the </head> tag. Like HTML, JavaScript is just text that can be typed into a word processor or
notepad. It goes right into the HTML that describes your page. You can also put JavaScript in the body,
but if you are just beginning, stick with the title and head tags.

A couple of things to remember as you are learning JavaScripting:

The first part of a JavaScript begins with:

<script language ="JavaScript">

In order to successfully output text in JavaScript you must use:

write ( ) or writeln ( ). The difference between write and writeln is: write just outputs a text and writeln
outputs a line feed (horizontal rule) after the text output.

2
Example: Displaying automatic page update information – Let's say you have a homepage
and you update it frequently. Wouldn't it be nice to include the last update date on your page? Well, here is how you can do
that:

1. Open a new browser (Netscape or Internet Explorer)

2. Open notepad, go to START >PROGRAMS >ACCESSORIES >NOTEPAD
3. In the notepad screen, type the following HTML code exactly as it appears:

<HTML>
<HEAD>
<TITLE>Displaying Update Info</TITLE>
</HEAD>
<BODY bgcolor=lightblue>
<script language="JavaScript">
<!--hide script from old browsers
document.write("<h2>This page has been updated: " +
document.lastModified + "</h2>");
// end hiding -->
</script >
</BODY>
</HTML>

4. Save file as sample.html onto the DESKTOP

5. Go to your browser window menu, click on FILE>OPEN PAGE >BROWSE >SELECT>sample.html
6. Your first JavaScript will appear on your screen – Congratulations!

For more information on JavaScript:

JavaScript.com, the Definitive JavaScript Resource:
For the latest JavaScripts tutorials, scripts, tips, links and more.
http://www.javascript.com/

Voodoo’s Introduction to JavaScript:

This site contains a lot of examples (and a great tutorial) along with source code to get you started in
JavaScript quickly!
http://rummelplatz.uni-mannheim.de/~skoch/js/tutorial.htm

JavaScript Tutorial at Webdeveloper.com

This tutorial goes over JavaScript basics and provides an excellent overview for the beginner with easy to
follow examples.
http://www.webdeveloper.com/javascript/javascript_js_tutorial.html

JavaScript Scripts from Webdeveloper.com:

Even if you don't know anything about JavaScript, if you can cut and paste, you can add JavaScript
functionality to enhance your Web site.
http://WWW.Stars.com/Authoring/JavaScript/Scripts/

Created by:
Valerie Valdez
April 17, 2001
Library Instruction – University of Texas as Austin
Dr. Loriene Roy