Lesson 3: Object Properties
Lesson 4: Chapter Wrap-Up and Review
The purpose of this chapter is to get you started on the right JavaScript foot. In this chapter you’ll learn how to work with JavaScript and how to create JavaScripts that print text to your HTML page, fix error messages, and tell the world what time it is.
What Is JavaScript?
First off, JavaScript is not Java. It’s easy to get confused and think that Java and JavaScript are one and the same. Not so. Java is a programming language developed at Sun
Microsystems. On the other hand, JavaScript is a programming language created by the good people at Netscape.
JavaScript Goodies
8
With Java, you create fully standalone programs that must go through a somewhat complex process of writing, compiling, and being referenced in your Web page. JavaScript, on the other hand, is simply text you type into your Web page much as you type in HTML tags and text. For JavaScript to work, the Web page it is in must be viewed with a browser that understands the JavaScript language, such as all Netscape browsers 2.0 and above. Some earlier versions of the Internet Explorer browsers have trouble with advanced JavaScript commands found in JavaScript version 1.1 and 1.2. The scripts in the book, however, stay mainly at the JavaScript 1.0 level and will run on both browsers. When writing JavaScript, remember that JavaScript is not HTML! I am often asked whether one is simply a different version of the other. Nope. The following sections outline the differences.
JavaScript Is Case Sensitive
In HTML, the tag <B>works the same as the tag <b>. That’s because HTML doesn’t differen-tiate between upper- and lowercase characters. Not so in JavaScript. You must pay very close attention to the capitalization of commands. Placing an uppercase character where a lower-case one should be causes an error.
Beware of Line Breaks and Spaces
HTML is very forgiving in terms of spaces and line breaks. It doesn’t matter how many spaces you leave between words or paragraphs. In fact, there’s no reason why you couldn’t write an HTML document as one long line or skip 20 lines between every word. It doesn’t matter.
The opposite is true in JavaScript. It makes a big difference where each line ends. Some-times you can break (or truncate) a line of JavaScript, but not very often. Following is a sin-gle line of JavaScript:
document.write(“<FONT COLOR=’RED’>This Is Red Text</FONT>”)
Those commands must all stay on one line. If you change this line to look something like this
document.write(“<FONT COLOR=’RED’>This Is Red Text</FONT>
“)
the code will not work properly and will cause an error. (We’ll get into errors and fixing them in Lesson 2.) Also, an extra space between two commands, or anywhere else a space doesn’t belong, will cause an error.
Don’t Set Margins
Whether you’re writing or editing a script, you cannot allow margins to get in the way.
Always edit your work in a text editor that has no margins. I don’t mean margins set to their widest point. I mean no margins. You should be able to write off of the right side of the text screen for miles. Doing it any other way is going to cause you problems.
And now with some of the basics out of the way, let’s get right to your first JavaScript!
Lesson 1: Writing Text to a Web Page
This first script is meant to introduce you to the very basics of creating and placing a JavaScript on your page. Simply type the following JavaScript into any existing HTML page of your Web site:
<SCRIPT LANGUAGE=”javascript”>
document.write(“<FONT COLOR=’RED’>This Is Red Text</FONT>”)
</SCRIPT>
The concept of this script is to use JavaScript to place text on a Web page, as illustrated in Figure 1.1. In this case, the text will be red.
Figure 1.1
Putting red text on your HTML page.
JavaScript Goodies
10
To see the script working on your own computer, open Lesson One’s Script Effect or point your browser to http://www.htmlgoodies.com/JSBook/lesson1effect.html.
Deconstructing the Script
Let’s start at the top. The first line of the script looks like this:
<SCRIPT LANGUAGE=”javascript”>
That’s HTML code to alert the browser that what immediately follows is going to be a JavaScript script. That seems simple enough. All JavaScripts start with this same command.
We’re writing this script in JavaScript version 1.0. Because no number follows the word javascript, the browser assumes by default that the following code is in JavaScript 1.0.
At the time of the writing of this second edition, the Internet Explorer browser 5.5 was out, as was Netscape Navigator 6.0. Both understand versions of JavaScript well above 1.0 and default to the latest version the browser understands. That means you can simply write LANGUAGE=”javascript”and if the browser understands version 1.2, that will be the default.
There’s no real need to add the version number, but if you find yourself going beyond this book and getting into higher versions of JavaScript, adding the number at the end of the
“javascript”is not a bad habit to get into.
That said … what about that LANGUAGE=”javascript”deal? Won’t the browser simply default to the highest JavaScript version? Do you really need that anymore?
Yes, you need it. It’s because there are other types of scripts: VBScript, for example. Using thatLANGUAGEattribute keeps it straight in the browser’s mind.
Because we’re dealing with only three lines of text here, allow me to jump right to the end.
The flag
</SCRIPT>
ends every JavaScript. No exceptions. Now, put that on a brain cell. That’s the last time those two commands will be discussed. Remember, start with <SCRIPT
LANGUAGE=”javascript”>and end with </SCRIPT>. Now we hit the meat of the script:
document.write(“<FONT COLOR=’RED’>This Is Red Text</FONT>”)
This script is simple enough that you can just about guess what each little bit does, but let’s go over it anyway so that we’re all speaking with the same common terms.
Thedocumentholds the contents of the page within the browser window, including all the HTML code and JavaScript commands. If it helps you to simply think of documentas the HTML document, that’s fine.
That document will be altered by write-ing something to it. What will be written to the document is inside the parentheses.
Now we’ll cover some terms. In JavaScript, the documentis what’s known as an object. The writethat follows, separated by a period, is what is known as the object’s method, an action to be performed on the object. So, the script is basically saying, take the object, something that already exists, and write something to it.
The open and close parentheses are called the instance. The text inside the parentheses is called the method’s parameters. Are you with me so far?
Notice that what is inside the parentheses is encased in double quotation marks. In HTML, quotation marks are not always required. In JavaScript, they are. You must use them. And not only that, there’s an exact way of using them.
The text inside the double quotation marks is simple text: It is written to the screen exactly as shown. Note the HTML flags within the double quotes. That’s fine. The script is just going to write it all to the page.
But there are a couple of things to be concerned about when using a document.write() JavaScript command:
You should recognize the text as a FONTflag that will turn text red. Notice that single quotation marks appear around the HTML attribute code <FONT COLOR=’RED’>. If you use double quotes, the JavaScript thinks it’s at the end of the line and you get only part of your text written to the object. You know you didn’t intend that double quote to mean the end of the line, but the script doesn’t. You’ll most likely get an error message telling you something is wrong.
Some people get around this concern by not using any quotes around HTML attri-butes. They write the previous command this way: <FONT COLOR=red>. Either way works, but if you decide to write using quotes around HTML attributes, remember this: Inside double quotes … use single quotes.
When writing text within double quotes, be careful not to use any words that are contractions. For example
document.write(“Don’t go there!”)
That line of code produces a JavaScript error. You know that the single quote doesn’t denote an attribute, but JavaScript doesn’t know that. It thinks you’ve started an attribute, and when it doesn’t find the ending single quote, an error results.
JavaScript Goodies
12
Note
If what you want is simply to have a single quote, such as in a contraction, place a back-ward slash in front of the quote mark. That slash is called an escape character. The format for the previous line of text would look like this:
document.write(“Don\’t go there!”)
What happens is the backslash escapes the script just long enough so the computer understands the single quote is meant to be text rather than part of the JavaScript code.
Keep this concept in mind for later. I’ll discuss it in much deeper detail in Chapter 2,
“Popping Up Text with Mouse Events,” when we begin popping up alert boxes.
If you simply must have more right now, I have an entire tutorial on escape characters at http://www.htmlgoodies.com/beyond/escapecharacter.html.
How Did the Text Become Red?
So, did the JavaScript actually turn the text red? No. The HTML did that for you. What the JavaScript did was write the code to the page. There it displayed and was shown as red thanks to the FONT FACEflag and attribute. The JavaScript was simply the delivery device.
Neat, huh?
One More Thing
Look at this code and its result, shown in Figure 1.2:
<SCRIPT LANGUAGE=”javascript”>
document.write(“This is the text that will be written to the page.”);
document.write(“But even though these lines of text are on different lines”);
document.write(“in this script, they will not reproduce the same way on the”);
document.write(“HTML document.”);
</SCRIPT>
Notice how all the lines run together when written to the page even though the text is written in four lines. The reason is that the document.writestatement just writes text to the page. It does not add any breaks when its lines stop.
How about that? The first lesson is over, and you’ve already got two very useful commands under your belt. Better yet, you know how to use them.
Your Assignment
Each time you do an assignment, you’ll need to copy the script described in the lesson so you can paste it into an HTML document and play with it. You probably already noticed this, but you can always copy and paste the script right from the sample Web page. If you’re going online to see the examples, go to http://www.htmlgoodies.com/JSBook/
lesson1example.html.
Alter the previous script so that it will produce two lines of text, one red and one blue. But you must do this by writing more JavaScript commands, not by simply adding more HTML to the instance. Make the two bits of text write to two different lines rather than simply following each other on the same line.
You’ll find one possible answer by clicking Lesson One Assignment or pointing your browser tohttp://www.htmlgoodies.com/JSBook/assignment1.html.