JavaScript 101 - Part 1

Your First Script

Statements

You're probably pretty used to what HTML looks like -- text interspersed with tags like <b> and <a href>... JavaScript, on the other hand, looks quite different. The reason for this is that, while HTML is concerned with text and commands that format and define that text, JavaScript (like just about any programming language) is a series of statements. Each statement tells the browser to do something, and the browser steps through the statements one at a time.

Here's a basic JavaScript statement:

alert("Welcome to my Web Site!");

Before we get into what this does, let's notice a couple of things about JavaScript statements in general. As a general rule, a statement appears on a line by itself, and ends with a semicolon (;). In today's browsers, the semicolon is actually optional in most instances (mainly because it's so easy to forget); however, it's a very good idea to try to remember them because they keep the browser from having to guess where each of your statements ends.

Now let's take our statement above and put it to work...

Adding JavaScript to your HTML

As I said before, JavaScript is downloaded as part of a Web page, and is interpreted by the Web browser. For this to happen, you need to somehow put your JavaScript inside your Web page -- inside your HTML. There's a handful of ways to do this, but let me show you the two most common. Both use the HTML <script> tag. The first way of putting a script inside your HTML document is called inline scripting. You put the script right inside your HTML file, and you let the browsers know that it's JavaScript by enclosing it in a <script> tag:

<script language="JavaScript">  
 
alert("Welcome to my Web Site!");  
 
</script>

Notice the language attribute. There are other scripting languages than JavaScript out there (VBScript, which is only supported by Internet Explorer, for example), and this attribute lets the browser know in advance what language your script is written in. Like the semicolon at the end of the statement, the language attribute is optional, but a good idea. Browsers that don't know the language you specify will just skip over the whole tag, rather than trying to read the script and spitting out a bunch of ugly error messages in the process.

When using inline scripting like this, you should always enclose your scripts in an HTML comment tag, like this:

<script language="JavaScript">  
<!--  
alert("Welcome to my Web Site!");  
//-->  
</script>

In HTML, anything between <!-- and --> is ignored by the browser, and is called a comment. Some old browsers that were written before the <script> tag existed will ignore the <script> and </script> tags, but will display everything in between as if it were a part of the text in your Web page -- definitely an ugly result. By putting <!-- at the top of your script and --> at the bottom, those browsers will also ignore the script itself. Script-aware browsers know to ignore the <!-- on the first line of a script, but you have to hide the --> with // at the start of the line. While <!-- --> is an HTML comment, // is a JavaScript comment, and tells the browser to ignore everything to the end of the line, so the --> doesn't get interpreted as part of your JavaScript.

The second way to add JavaScript to your HTML document uses a different form of the <script> tag:

<script language="JavaScript" SRC="myscript.js"></script>

Instead of putting the script inside the HTML file, this time you type it into its own file (which I've called myscript.js for this example). This has several advantages. First, you don't have to worry about hiding your script from older browsers with comment tags. Second, you can re-use a single script in several HTML files by referring to the same JavaScript file from each HTML file (and making a change to the script requires a change in only one file instead of in every file where it is used). Finally, you can include information that will be displayed if the browser doesn't support the scripting language you choose:

<script language="JavaScript" SRC="myscript.js">  
Get with the <i>times</i>!</script>

The Completed Example

So what does our simple, one-statement script actually do? It tells the browser to stop reading the HTML page where it encounters the script, display the message "Welcome to my Web Site!" (without the quotes) in a message box, and wait for the user to click "OK" before proceeding to read the rest of the page.

The following example will actually display two message boxes, because it contains two scripts, one included as an inline script, and one appearing in an external .js file. Check out the code and try it for yourself!