Quick Reference

An Output Script
Notes On javascript
document.write()
Review

Activity # 8
JavaScript Summary
Tutorial # 9
Table of Contents

Adding JavaScript To Your Webpage

What is JavaScript?

Many people have heard of the Java programming language and think that JavaScript is the same. No it isn't. JavaScript has evolved from Java so that you can enhance your Webpage beyond what html can do. Java was created by Sun Microsystems as a full-fledged programming language. JavaScript is a "scripting language" developed by the people at Netscape. In a traditional programming language like C++, Pascal or Turing the program statements or commands are compiled (i.e. translated) into machine language. The file that contains this machine language commands is a stand-alone program; the kind that you start by double-clicking an icon in Windows.

In a scripting language the commands are not compiled like a traditional programming language; rather they are interpreted by another program such as a Web browser. So JavaScript statements are commands that you put inside your wepbage and the browser interprets the commands.

     
  back to top  

Saying "Hello" To The World

This first script shows you how JavaScript's output command works. It is the classic "Hello World!" program.

<SCRIPT LANGUAGE="javascript">
document.write ("Hello World!");
</SCRIPT>
The core JavaScript statement is
document.write ("Hello World!");
and it will simply display the words "Hello World!" at that point in your Webpage where you place the script.

Since a Web browser only understands HTML tags, this JavaScript command must be embedded in an HTML tag.

Use the <SCRIPT > .. </SCRIPT> tag to embed your JavaScript commands. Since there are a number of different types of scripts that Web browsers support, you must identify the language you are using.

Add the LANGUAGE="javascript" attribute to your tag to tell the browser to interpret your script as JavaScript.

     
    back to top  

Some Notes On Writing JavaScript Commands

Here are a few necessary details about JavaScript that you need to know:
  • Typing JavaScript: JavaScript is a programming language and the commands must be typed correctly or they will not work. Each JavaScript statement must be typed on a single line, so don't press enter halfway through the statement.
  • semi-colon: Each JavaScript statement must end with a semi-colon ( ; )
  • JavaScript is case sensitive: This means that upper-case and lower case letters are different characters. So
    Document.Write("Hello World!");
    will not work because the command must be all lower case.
     
    back to top  

The document.write() Command

The document.write() statement is a simple output command. The browser will try to display whatever you put in quotation marks inside the parentheses ("..").
  • document is the object that we are working with. It refers to the current Webpage.
  • write is the action to be performed on the given object. In this case the action is to display the text in parenthese. This action is referred to as the object's method.

There doesn't seem to be much point in going to all the trouble to make a script just to print a couple of words. There is a lot more we can do with this command. You can, for example, include any HTML tags you need inside the quotation marks. This next example includes the bold tag with the text.

document.write ("<B>Hello World!</b>");
If you include tags with attributes that are normally in double quotation marks, then you must change all the double quotation marks to single quotation marks. Here the text is displayed in a Courier font face:
document.write
("<FONT FACE='Courier'>Hello World!</FONT>");
Notice that the whole statement would not fit on one line. If you must divide it between two lines, then start the new line before the parentheses begins.

Another option is to use several document.write statements. Here is how you can do it:

document.write ("<FONT FACE='Courier'>");
document.write ("Hello World!");
document.write ("</FONT>");
Note how every statement ends with a semi-colon.
     
    back to top  

JavaScript Activity # 8

Work through
Learning Activity # 8 to create a Webpage with JavaScript commands embedded. Then follow on with JavaScript Tutorial # 9. You can also view a JavaScript Summary that has a listing of all the JavaScript commands covered in these Lessons.