JavaScript 101: Writing Your First Script

You can arm yourself with all the background information that you want, but the easiest way to learn JavaScript is to just jump in and start writing code. So let's start with something simple for your first script.

The window object contains all the other objects in the DOM, plus properties, methods, and events for the browser window. A common task that people want to do is specify the text for the status bar. Here's a simple bit of code that does this.

window.status = "This is a sample for changing the text on the status bar."

This example is very simple, but simple is a great way to start.

Now that you have the code, what do you do with it? This is a great beginner question. There are two ways to insert JavaScript code into your pages. (1) You can insert raw JavaScript code into a <script> tag in the HEAD section of a page. (2) You can place the code in a function and put the function in a <script> tag in the HEAD section of a page, and then add an event handler to call the function.

(1) insert raw JavaScript code

For now, let's stick with the simplicity of the first option. Use the following steps to add this code to a page.

  1. Start a new page in FrontPage and switch to Code view. (You can also use the code window in Split view.)
  2. In Code view, locate the closing </head> tag. (If you don't know HTML, there's never been a better time to learn. Check out the HTML tutorials on Office Online and HTML for Beginners on MSDN.)
  3. Press Enter a couple times and position the Insertion Point (cursor) on one of the blank lines.
  4. Copy the following code and paste it into FrontPage at the Insertion Point.
    <script language="javascript">window.status = "This is a sample for changing the text on the status bar."</script>
  5. Save the page and preview it in a browser. Your page should look just like the following image (status bar text is circled in red to make it easy to locate).

The second way to insert a script (i.e., place the code a function and put the function in a <script> tag in the HEAD section of a page, and then add an event handler to call the function.) requires a bit more work, so let's split it up into three separate tasks

(2) place the code in a function

Put simply, a function is a section of code that runs separately from code around it. Essentially, functions are methods that you create yourself to perform some action or series of actions. Some functions return values; other functions require values passed into them. The values that functions return are called return values; values passed into functions are called arguments.

The structure, or syntax, of a function is always the same: the function keyword identifies that what follows is a function, the text that follows the function keyword identifies the name of the function, the name of the function is followed by opening and closing parentheses (which may or may not contain arguments), and the code that applies to the function appears inside of opening and closing curly braces.

Here's a simple diagram of the syntax of a function:

For those of you who prefer to cut and paste, here's a code version of the above.

 function scriptName()
{
    //Code goes here
}

Using the example above, your function might look something like the following code.

 <script language="javascript">
    function changeStatus() 
    { 
        window.status = "This is a sample for changing the text on the status bar."
    }
</script>

When you place JavaScript code in functions, you can call the functions from event handlers. Event handlers execute code based on certain events that occur within the browser. I'll talk more about events and event handlers in my next post; for now, I want to show you how IntelliSense in FrontPage can help you write scripts.

Using IntelliSense in FrontPage

IntelliSense provides cues to options (or in this case objects, methods, properties, and events) that may be available. Let's go back to the code that we used earlier and create this again in FrontPage (without cutting and pasting the code).

Using IntelliSense to insert HTML Elements

  1. To begin, start FrontPage and start a new page.
  2. Switch to Code view.
  3. Position the Insertion Point (cursor) before the closing </head> tag and press Enter a few times.
  4. Move the Insertion Point up a couple lines and type "<s". As you type, a drop-down box, as shown in the following image, displays showing a list of elements that can be placed within the HEAD section of a Web page.

    As you type, the highlighted element moves to "script"; at this point you can press the spacebar (or Enter or Tab) to insert the element into your Web page.
  5. After you press the spacebar, you see a list of attributes that apply to the SCRIPT element. Type "langu"; again, as you type, the highlighted attribute changes from lang to language. (We need the language attribute to identify that we are using JavaScript.)
  6. When the language attribute is highlighted, type an equals sign (=) and a double quote (").
  7. Now you see a list of possible values for the language attribute. Type "j", and the highlighted value moves to "javascript".
  8. Type a closing double quote (") and a closing angled bracket (>). FrontPage automatically inserts the closing </script> tag.
  9. You should now have the following code in your Web page:
    <script language="javascript"></script>

When you use IntelliSense to insert HTML elements, FrontPage places the Insertion Point between the opening and closing tags. You can then type text or, in this case, code between the tags.

Using IntelliSense to write JavaScript code

Now that you have an opening and closing script tag, you can write your script code.

  1. With the Insertion Point between the opening and closing <script> tags, press enter a couple times. Arrow up once so that your Insertion Point is on the line that is between the line that contains the opening script tag and the line that contains the closing script tag.
  2. Type "window."; don't forget the period after the window. Once you press ".", FrontPage shows a drop-down list that contains all the properties, methods, and events related to the window object, as shown in the following image.
  3. Type "st" and then press Tab. FrontPage inserts "status" into your script. Now your script should read: window.status
  4. Press the space bar and type an opening quote.
  5. Type "This text displays on the browser's status bar.", and then type a closing quote.

The only thing to understand about using IntelliSense for writing scripts is that IntelliSense doesn't work when you are working with variables because FrontPage doesn't know which object a variable represents. I'll tell you more about declaring and working with variables a bit later. For now, try using IntelliSense to insert your own simple scripts. Here are a few to get you started:

  • window.alert("here's a message");
  • window.resizeTo(640,480);
  • window.moveTo(0,0);

These are just a few simple scripts; in a future post, I'll help you understand how to write your own more complex scripts.

Here's what you learned today:

  • Woohoo! You wrote your first scripts.
  • You learned how to use IntelliSense in FrontPage.
  • You learned how to create a JavaScript function.

In my next post, I'll tell you more about events and how to connect a JavaScript function to an event on a Web page. For now, have fun.