[Chapter 1] 1.9 Exploring JavaScript

1.9 Exploring JavaScript

The way to really learn a new programming language is to write programs with it. As you read through this book, I encourage you to try out JavaScript features as you learn about them. There are a number of ways you can do this, and a number of techniques that make it easy to experiment with JavaScript.

The most obvious way to explore JavaScript is to write simple scripts. JavaScript has powerful enough features that even simple programs, only a few lines long, can produce complex results. We saw an example that computed factorials at the beginning of this chapter. Suppose you wanted to modify it as follows to display Fibonacci numbers instead:

<SCRIPT>
document.write("<h2>Table of Fibonacci Numbers</h2>");
for(i=0,j=1,k=0,fib=1; i<50; i++,fib=j+k,k=j,j=fib) {
    document.write("Fibonacci(" + i + ") =index.html " + fib);
    document.write("<br>");
}
</SCRIPT>

This code may be convoluted (and don't worry if you don't yet understand it) but the point is that when you want to experiment with short programs like this, you can simply type them up and try them out in your web browser using a local file: URL. For simple JavaScript experiments like this, you can usually omit the <HTML>, <HEAD>, and <BODY> tags in your HTML file, and you can even omit the LANGUAGE="JavaScript" attribute that you would include in the <SCRIPT> tag of any production code you wrote.

For even simpler experiments with JavaScript, you can sometimes use the javascript: URL pseudo-protocol to evaluate a JavaScript expression and return the result. A JavaScript URL consists of the javascript: protocol specifier followed by arbitrary JavaScript code (with statements separated from one another by semicolons). When the browser "loads" such a URL, it executes the JavaScript code. The value of the last expression in such a URL is converted to a string, and this string becomes the "document" specified by the URL. For example, you might type the following JavaScript URLs into the Location field of your web browser to test your understanding of some of JavaScript's operators and statements:

javascript:5%2
javascript:x =index.html 3; (x < 5)? "x is less": "x is greater"
javascript:d = new Date(); typeof d;
javascript:for(i=0,j=1,k=0,fib=1; i<10; i++,fib=j+k,k=j,j=fib) alert(fib);

While you can type these URLs directly into the Location field of Navigator, you cannot do the same in Internet Explorer 3.0. These URLs will work correctly in IE 3.0 in hypertext links and the like, but they cannot be entered directly.

In Navigator 2.0 and 3.0 (but not Internet Explorer 3.0), if you specify the URL javascript: by itself, Navigator will display a JavaScript interpreter screen, and JavaScript code entered into the input field in the lower frame will be evaluated and the results displayed in the upper frame. Figure 1.4 shows this special interpreter screen, with some example code evaluated. In this case, the JavaScript code shown pops up a dialog box that displays the name and value of each of the properties of the browser window.

Figure 1.4: The javascript: interpreter screen

[Graphic: Figure 1-4]

Figure 1.4 also shows some other useful techniques for experimenting with JavaScript. First, it shows the use of the alert() function to display text. This function pops up a dialog box and displays plain text (i.e., not HTML formatted) within it. It also demonstrates the for/in loop, which loops through all the properties of an object. This is quite useful when trying to discover which objects have what properties. The for/in loop is documented in Chapter 5, Statements.

While exploring JavaScript, you will probably write code that doesn't work as you expect it to, and will want to debug it. The basic debugging technique for JavaScript is like that in many other languages--insert statements into your code to print out the value of relevant variables so that you can try to figure out what is actually happening. As we've seen, you can sometimes use the document.write() method to do this. This method doesn't work from within event handlers, however, and has some other shortcomings as well, so it's often easier to use the alert() function to display debugging messages in a separate dialog box.

The for/in loop mentioned above is also very useful when debugging. You can use it, along with the alert() method to write a function that displays a list of the names and values of all properties of an object, for example. This kind of function can be quite handy when exploring the language or trying to debug code.

Good luck with JavaScript, and have fun exploring!


Using the Rest of This Book		Lexical Structure