Welcome to JavaScript Tutorial

Why JavaScript?

So far we have learned to create web pages that are static -- you could only display texts and images. Although it is nice to have such a web page, it's quite a bore. You need JavaScript to spice up a web page. JavaScript is a scripting language engineered by Netscape, and later reverse-engineered by Microsoft. It lets you create buttons, text fields, text boxes, etc, thus making your web pages more interesting and useful.

Many people think that JavaScript is a dummy version of Java -- this is a misconception. Java is a totally separate programming language developed by Sun. Although there are some similarities in syntax, they are not the same langauge.

This tutorial will familarize you to the world of JavaScript. It will cover several programming concepts, such as functions, variables, and objects; programming techniques, such as for-loops, if-else statements; and of course, client-side JavaScript used in web pages. Soon you will see why JavaScript is so popular and important for the world wide web.

Client-Side vs. Server-Side JavaScript

Web browsers have built-in JavaScript interpretor -- this means that the browser can interpret a chunk of JavaScript code and execute the command. This is known as 'client-side' JavaScript. The 'client' is the user of a website. For example, if you're shopping on Amazon.com, you are the client, and Amazon is the server. What you will learn in this tutorial is the client-side JavaScript.

In many cases, client-side JavaScript is not enough. Many online shopping sites, such as Amazon, will greet you with your name if you are revisiting. This can be done with 'server-side' JavaScript, which can access the server's database to look up your name, address, shopping history, etc. When you request a web page that contains server-side JavaScript, the server executes the script and sends back the resulting document to the client. Since this is a fairly advanced topic, we will not discuss server-side script further.

Simple Example

Here is a simple HTML document with client-side JavaScipt:

1
2
3
4

5
6
7
8
9
10
11
12

<HTML>
<HEAD>
<TITLE>JavaScript Example</TITLE>
</HEAD>

<BODY>
<SCRIPT Language="JavaScript">
<!--
document.write("Hello, World!");
//-->
</SCRIPT>
</BODY>
</HTML>


Example 1: You can write any text in the HTML document using JavaScript.


Let's analyze the code line by line.

Line 1-5, 11, 12: These are just the HTML codes for heading and body.

Line 6 & 10: JavaScript code must be surrounded by the <SCRIPT> tag. This lets the browser know that whatever is inside the tag must be interpreted by the JavaScript interpretor. Language="JavaScript" is needed since there are other types of scripting languages that can be embedded in HTML documents. For example, IE has imbedded VBScript interpretor.

Line 7 & 9: Old browsers do not have a JavaScript interpretor built in. Thus it is a good idea to surround the JavaScript code with the comment tags ( <!-- and //--> ) in order to avoid errors in loading these documents. Old browsers will see the code as a comment and ignore it; new browsers will properly interpret the code.

Line 8: This is the JavaScript code that writes "Hello, World!" in your HTML document. In programming, each command line is called a statement. Statements must be separated by semicolon, unless you have a line break. So the semicolon in our example could have been omitted.

Object-Oriented Language

JavaScript is an object-oriented language. This means that a chunk of code is created as an 'object' with certain behaviors that are specified by the coder. In our Hello,World! example, 'document' is an object, 'write' is a method of the object that writes the text in the parenthesis on the document. Methods are functions that are defined in an object. You will be creating various functions soon.

If this sounds confusing to you, think of an object as a car. Say the car's name is 'Rock'. Rock has a method called 'forward' that turns the wheel to let you drive forward. If you want to tell Rock to turn left, you would say, Rock.forward("left");. If you want to go backward, you would say Rock.backward("straight");.

Objects also have 'properties'. If you want a red car, you would specify the color by Rock.bodyColor = "red";. If you want leather seats, you can specify it by Rock.interior = "leather";. Thus 'bodyColor' and 'interior' would be Rock's properties.


Exercise 1: One of the properties of the Document object is 'bgColor', which is for background colors. Modify the code in example 1 so that the background of the document is yellow. You may change the text if you wish.


Back to the Top
To the Table of Contents

Last Updated September 9, 2000 by Grace Pok