Your First JavaScript Program

# 2 Your First JavaScript Program

The <Script> Tag

Browser Compatibility

Hiding JavaScript from Older Browsers

Some JavaScript Statements

Your Turn!

# 2 Review Questions

# 2 Assignment

The <SCRIPT> Tag

JavaScript programs are embedded in your HTML, usually in the <HEAD> section, but not always, and they run within the browser, well, most browsers. The newer browsers are mostly JavaScript enabled, and that's what it takes to execute a JavaScript Program. Statements that form the actual program must be contained between the pair of <script>...</script> tags. Here is a sample JavaScript program. Click on the button below to see it run:

alert("I am an Alert Box. Aren't I cute?");

</SCRIPT>

Browser Compatibility

Since Javascript is the default language for most browsers now, if you omit the LANGUAGE="JavaScript", your programs should still run. But it is good programming pactice to put it in, and it may save your web pages from errors when the internet changes (which is every time you turn around). Languages come in different versions, and depending on the browser, you may want to specify which version. Netscape invented JavaScript to run inside of Netscape Navigator, so here are the versions for each.

Netscape Version	JavaScript Version Supported	How you Code it
Before 2.0	none
Navigator 2.0	JavaScript 1.0	<SCRIPT LANGUAGE="JavaScript">...<SCRIPT>
Navigator 3.0	JavaScript 1.1 and below	<SCRIPT LANGUAGE="JavaScript1.1">...<SCRIPT>
Navigator 4.0 to 4.05	JavaScript 1.2 and below	<SCRIPT LANGUAGE="JavaScript1.2">...<SCRIPT>
Navigator 4.05 to 4.5	JavaScript 1.3 and below	<SCRIPT LANGUAGE="JavaScript1.3">...<SCRIPT>

Hiding JavaScript from Older Browsers

So, since you want your web sites to be awesome for most everyone, you want to specify "JavaScript" or "JavaScript1.1". We also want to make sure that the coded statements do not show up plain as day on someone's older browser. Since HTML ignores any tags it cannot understand, it may try to display the code in between the <SCRIPT> tags as part of the document- Ugh! So we fool it by hiding the code inside of comment tags, like this:

<!--This comment hides JavaScript from older browsers

document.write("This is my first JavaScript program.");

//end hiding -->

</SCRIPT>

In case you are wondering why the // in the next to last line, // is the symbol for a comment line in JavaScript. Commenting is very important, so that you, or someone else will be able to understand what is going on in a program, and maintain it for the future. Good comments can keep us from confusing ourselves.

To place a block of multiple lines of comments in a program, use the symbols /* ...as many JavaScript comment lines as you want ... */

Some JavaScript Statements

Note that the first sample uses a pop-up alert box, and the second actually displays some text in a web page document. You have also seen two ways to add comments to a JavaScript program. Let's talk about JavaScript statements - the commands that add some action to your web page. Statements can be used to store information for later use, to display information, such as you saw in the demos, and much much more. Here are a few to get you started.

Note that they all end in a semi-colon; ; ; ; ; ; ; ; That is good JavaScript programming, although not always required. It is required in other programming languages such as C++ or Java, so it is a nice habit to get into..

Another important point is that JavaScript is a case-sensitive language. What that means is that alert() and Alert() and aLERt() are considered to be separate words. Most of the statements you will be using will be in lower case letters except for the text inside of "quotation marks". Anything in quotes will be showing up on the screen just as you type it, so be sure to use proper capitalization if you want your users to respect you and respect the contents of your web site.

document.write("The first line of output goes here.");

document.writeln("This line will appear on the same line.");

document.write("But this line will be on the next line down.");

</SCRIPT>

</CENTER></H2>

These two statements will open a new document window, or browser window, and display the text that is between the quotes. Let's break these statements down.

<CENTER> <H2> ... </CENTER> <H2>: These tags are here to show you that you can use a JavaScript program within any of the HTML tags you already know, and they will affect the output of the JavaScript statements just as you would expect.
document.write(...): This is the statement that performs some action. 'document' is the name of the object that is doing the action. The most common objects we will use are window, document, and form. 'write()' or 'writeln()' is the name of the action or method you want done. The only difference between write() and writeln() is that writeln() adds a carriage return after the text. If your browser doesn't add a linefeed when you use writeln(), then add "<br>" in your string of text where you want the carriage return - inside the quotation marks. ( document.write("This will be on the first line <br> and this is on the second line";)Each object has a set of methods that can be used with that object. (More about that later.) Methods are followed by a set of parentheses after the name of the method, where the method's arguments are placed. An argument is a piece of data or information needed by the method.
"The first line of output...": The quotation marks signify that this is a string of text or string literal. The method 'write()' will output a string literal to a web document, so we enclose the string of text inside quotation marks. You will see later how to create strings from different types of data to give more versatility.
; : The semicolon marks the end of the executable statement. Done!

alert("Hey - are you asleep at your computer?.");

window.status="Demonstration of an alert box.";

</SCRIPT>

alert(...)

This statement will cause a pop-up message box that displays a message and requires the user to click 'OK' to clear the message box. Alert is not a member of any object, it is straight out of the JavaScript interpreter itself, so there is no object name and dot that needs to be used with it. Users may find the alert boxes annoying, so don't over-use this statement. Note the use of parentheses to enclose the message.

"Hey - Are you asleep at your computer?"

Another string of text enclosed in quotes. Again, this is the type of argument required by the alert() method.

window.status

'window' is the name of the object, and 'status' is the name of a property of that window object. It displays text in the status bar that is located at the bottom of the browser screen. This is one of many ways we can control the browser window that the user sees on screen. We assign a 'value' to the property by using the = sign as shown in the sample.

"Demonstration of an alert box."

String of text that will show up in the status bar.

Your Turn!

HELLO WORLD

It's a rite of passage. No matter what language people learn, their first program is usually one to output the message "Hello World" to the output screen. Well, what are you waiting for? Go to the link for Assignment 2 to walk through the steps to create the Hello World Program, and another one that is a little more useful.

Return to Top of Page | Back to Main Menu