JavaScript: Getting Started



Welcome to the study of JavaScript. JavaScript is an object-based programming language that extends the capabilities of HTML. In other words, JavaScript works alongside HTML to enable you to do things that you cannot do with HTML alone.

These lessons in JavaScript that you are beginning provide an introduction to the things that JavaScript can do. I hope this will be a rich, useful introduction; more advanced topics typically build on the foundation that you are learning here. If you want to learn the details of a particular topic (for example, what capabilities the Math object has beyond those covered in this tutorial) you will need to consult a JavaScript reference. We have some references in class, and bookstores and online booksellers offer a generous selection. There is also good information available on the Web.

In this tutorial, I will make every effort to be brief. (I need to complete writing this tutorial in an efficient manner.) Some of your questions will be answered if you carefully study the sample scripts that I present. Some questions will be answered if you try different things in the scripts that you write and see how they work when you run them. I am available in class to help with questions, as are other students. We have several JavaScript reference books available in class. Links to various Web resources are provided in the Help - JavaScript section.


A First Script

A JavaScript script can run in the <BODY> section of a web page. The script is placed between <SCRIPT> and </SCRIPT> tags. Inside the <SCRIPT> tag you identify the language in which the script is written, so you can write <SCRIPT LANGUAGE=JavaScript> (as opposed to VBScript or another scripting language.) If, for some reason, you want the script to be interpreted only by more recent browsers, you can specify the version of JavaScript. For example: <SCRIPT LANGUAGE=JavaScript1.2>. Browsers running earlier versions of JavaScript would ignore the script.

One way to display a comment in JavaScript is by starting a line with //. Another way is to place the comment between /* and */. It is an excellent idea to include some comments in your scripts so that someone else (or you, a year from now) will understand what you intended the script to do.

Old browsers may not recognize the <SCRIPT> tag and may skip it. An old browser may, however, display the lines inside the <SCRIPT> tag. To prevent this, the script can be enclosed inside HTML comment tags, so that an old browser will ignore it. The first line after the <SCRIPT> tag is the HTML comment tag <!-- and this is matched later by //-->. The concluding comment tag //--> begins with two forward-slashes so that both JavaScript-enabled and non-JavaScript browsers recognize it as part of a comment tag.

In JavaScript 'document' is a high-level object, directly below the top object, 'window.' One function or 'method' of the document object is 'write().' Whatever HTML is placed inside the parentheses of 'write()' is displayed on the screen. To use a method, put a '.' after the object's name and then the method's name, like this: document.write();. In many cases, the semi-colon is optional.

Following is an example that makes use of these ideas.






// this script prints a simple message to the screen


document.write("<p style='font-size:24pt; color:green'>Look Ma, I can use JavaScript!</p>");






to see this how this code looks when it runs inside a new window.
(Note: The text formatting in this script does not work in Navigator.)


Note: The code needed to open the new window is not discussed here. Opening a new window will be discussed in a later lesson. What is covered here is the script that runs in the new window.


Other Resources

Try these links on starting JavaScript:

Page Link
JavaScript Goodies (Lesson 1)
Embedding JavaScript

or check out one of our reference books, or look for other help on the Web.



Work on either 1) your own web page, or 2) the website. Write a brief script that uses a document.write() command to write some text to the screen. Use 18pt text, in a color of your choice.

If you work on, in your message welcome the viewer to