Your first JavaScript programs

Summary: This exercise leads you through the creation of your first HTML pages with JavaScript components.

Prerequisites: Knowledge of HTML.

Provides: Introduction to the <script> tag, alert boxes, and function libraries.

References: The basics of JavaScript

Overview:

Create a simple JavaScript program
Create a simple HTML page
Add an alert box
Use a library

Create a simple JavaScript program

Although you will normally embed your JavaScript within HTML code, it is possible to build "stand-alone" JavaScript applications. Create the file hello.js with one line,

alert("Welcome to my page.");

Load it into Navigator 3.0 and see what happens.

Create a simple HTML page

Create a page of HTML with title, level one heading, and perhaps a paragraph of text. Save the document and load it in your browser. Here is the source for a sample document.

<HTML>
<HEAD>
<TITLE>Experiments with JavaScript : First Page</TITLE>
</HEAD>
<BODY>
<H1>My First JavaScript Programs</H1>
<P>
This page will eventually contain a few of my JavaScript
experiments.
</p>
</BODY>
</HTML>

Add an alert box to the page, using the following code. Put the code right after your level one heading. Try loading the page in Navigator 3.0 and see what happens. Once you get it working, see if it matters where the JavaScript code appears.

<script language="javascript">
alert("Welcome to my page.");
</script>

Use a library

Make a copy of the file greet.js in the same directory as the file(s) that you're working on. Your instructor will tell you where the file can be found. Make a copy of your file for the next test.

Replace the JavaScript code in your program with the following code. Then load it and see what happens. If you have problems, ask the instructor for help.

<script language="javascript" src="greet.js">
</script>
<script language="javascript">
greet("Sam");
</script>

Once you get the page running, try using the prompt() function to supply the parameter to greet, as in <script language="javascript" src="greet.js"> </script> <script language="javascript"> greet(prompt("Please enter your name","Sam")); </script>

[Workshop] [Contents] [Experiments] [First Page] [Custom] [Quiz/Score] [Story] [Quiz/Timed] [Quiz/Math] [Stats]

This page created Wed Jun 11 14:30:20 1997 by SamR's Site Suite.