Writing and Running Your First Program | Learn How to Program Using Any Web Browser

It’s traditional to start programming books with an exercise that creates a program that displays the text Hello,World! when the program runs. This is, in some respects, an inside joke: The computer is coming to life and speaks its first words, “Hello, World!”

From a practical viewpoint, starting with a computer program that displays a phrase of text (it really doesn’t matter if it’s Hello,World! or something else) makes some sense. First, it should be a pretty easy thing to do. You’ll probably need to know how to do this before you can write a program to do anything more significant. So, you can think of displaying text as a good warm-up exercise.

Second, it provides instant feedback that your program is working—if the computer does indeed display the designated text. The only way to be sure you’ve got something right is to try it. The ability to display text allows the display of programmatic values, which allows you to easily try many of the examples in this book and be certain they’re right.

Your first program will display the text I think therefore I am in the Web browser.

Tip

Of course, you could achieve the same result using just plain HTML—but that’s not the point of this exercise, which is to make an easy transition into programming.

Getting the browser to programmatically display text when it loads is a three-phase operation:

You create the HTML scaffolding for the program.
You add the program that actually writes the text.
You save the completed file containing the HTML and the program and then open it in a browser.

So, let’s take these phases from the top!

Try This at Home

To Create the HTML Scaffolding:

Open a text editor such as Notepad (if you’re running a Mac, see “ If You Have a Mac ” later in this chapter). You can find Notepad in the Accessories group; you can open it by selecting Programs Accessories Notepad on the Start menu.
Create a simple HTML document with a place in the body of the document to put the program (within the < SCRIPT > < /SCRIPT > tags). To do this, type the following tags into your document:
```
 <HTML> <BODY> <SCRIPT> </SCRIPT> </BODY> </HTML> 
```
Save the file using a name and an HTML file suffix. To do this, when you’re in Notepad’s Save dialog, you must select All as the file type and then manually enter a filename ending in .html. For example, save the file as myfile.html or 0101.html.

Tip

It’s a good idea to create a special folder for the files you’ll be creating in this book. That way, you’ll easily be able to find them when you want to see what they do in a browser.

If you opened this file now in a browser, you wouldn’t see anything much (see Figure 1-2).

click to expand
Figure 1-2: The HTML scaffolding appears as an empty document in a Web browser.

The next step is to add the program. This is the most fun part and the start of seeing what you’ll learn in this book.

This program consists of one line, which displays the text I think therefore I am when you load it into the browser. This is the program code:

 document.write("I think therefore I am");

Understanding Methods and Objects

The point of this exercise is mastering the mechanics of writing and saving a short program that displays text—not, at this point, understanding the concepts involved in the program. Later chapters will explain these concepts.

However, I don’t like to use terms without explaining them. So here goes:

An object is a collection of data and procedures—or short programs— that can be used in code.
A method is a procedure belonging to an object that does something.
The document object is a JavaScript object that can be used to manipulate a document that’s loaded in a Web browser.

You’ll find more information about methods and objects in many places in Learn How to Program— and particularly in Chapter 7, “ Working with Objects.” In addition, Chapter 11, “ Programming with JavaScript,” explains some of the ins and outs of the JavaScript document object.

This line of program code goes between the < SCRIPT > < /SCRIPT > tags in your HTML scaffolding. It uses the write method of the document object to display the designated text in the current document.

Listing 1-1 shows the HTML scaffolding with the line of program code.

Listing 1.1: HTML and Program Code

 <HTML> <BODY> <SCRIPT>   document.write("I think therefore I am");  </SCRIPT> </BODY> </HTML>

You’re ready for the final phase—which is to save the HTML file and open it in a browser.

Try This at Home

To Open the HTML File (Including the Program) in a Web Browser:

If you haven’t already saved the file, in Notepad, save the file with an HTML file extension. For example, save it as 0101.html.
Double-click the saved file in Windows Explorer to open it in your default Web browser, likely Internet Explorer. The file will open, the program code will run, and the text will display (see Figure 1-3).

Figure 1-3: You know that the one-line program has run because you can see the text displayed in the browser.

JavaScript Code in HTML: Best Practices

This book isn’t really about HTML and browsers. But if you were intending to add JavaScript code to Web pages on a production basis, it would be a good idea to use a more extensive script tag than I’ve shown you. For example:

 <SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT"> </SCRIPT>

Also, it’s a good idea to use code hiding, which makes sure older browsers that can’t process JavaScript don’t end up displaying the program code literally as text. You do this using HTML comments to hide the JavaScript from browsers that aren’t capable of interpreting JavaScript:

 <SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT"> <!--Hide that code from very old browsers     // End code hiding from ancient browsers --> </SCRIPT>

If You Have a Mac

Although the example files in this book were all written in Notepad, there are simple text-editing programs that come free with your Mac and can be used to perform the same job. In other words, things work in pretty much the same way whether you’re running a Windows or a Mac computer.

This section explains how to save an HTML file if you’re using a Mac. The two main programs are:

TextEdit (in the Applications folder in Mac OS X), capable of creating both rich-text and plain-text documents
SimpleText (in the Applications folder of Mac OS 9), limited to file sizes of 32 kilobytes

To build the simple HTML file, follow these steps:

Open your preferred text editor. If you’re working in TextEdit, make sure you’re in Plain Text edit mode by selecting Format Make Plain Text (if you’re already in Plain Text edit mode, the option will appear as Make Rich Text). This ensures that no formatting, font styles, and so on are included in the file. You just want to create the pure HTML code.

If you’re using SimpleText, check that you’re in Plain Text edit mode by selecting Style Plain Text.
Create a simple HTML document with a place in the body of the document to put the program (within the <SCRIPT> </SCRIPT> tags). To do this, type the following tags into your document:
```
 <HTML> <BODY> <SCRIPT> </SCRIPT> </BODY> </HTML> 
```
Enter a single line of program code between the <SCRIPT> </SCRIPT> tags in your HTML scaffolding so that the file looks like this:
```
 <HTML> <BODY> <SCRIPT>   document.write("I think therefore I am");  </SCRIPT> </BODY> </HTML> 
```
Now you need to save your file with an HTML suffix. To do this in TextEdit, go to File Save As and manually enter a filename finishing in .html. For example, save it as myfile.html or 0101.html. When you click Save, a pop-up informs you that the “Document name myfile.html already seems to have an extension. Append ‘.txt’ anyway?” Click Don’t Append to save your HTML file (see Figure 1-4).

Figure 1-4: Click the Don’t Append button to save your HTML file.

If you’re using SimpleText, go to File Save As and type your filename including the .html suffix into the Save Your Document As field. Click the Save button and you’re done.

You can test the file (and run the programs contained in the file) by double-clicking them to open in your Web browser.