Getting Started and Working with JavaScript

HTML is a programming language for specifying to a browser how to statically layout a web page. JavaScript is a programming language for dynamically controlling the display of web pages. Unlike HTML, which specifies the fixed layout of a web page, the things that JavaScript allow include:

The web page code can interact with the user, such as via a form or the user moving the mouse or clicking buttons.
The web page layout can be dependent on conditions such as where the mouse is, the time of day, when and where a user clicks, among others.
The web page code can perform tests. For instance in a form, it can test to see if the phone number that a user enters has seven digits.
The web page code can perform mathematical calculations.
The web page code can have repeated (looping) behavior, such as a message that scrolls across it.
Attributes of the page (background color, each image, etc) can be selectively controlled by the web page code.
Other windows, such as popups, can be created, destroyed, and manipulated by web page code.

This reading is not a complete JavaScript tutorial. It is designed to help you embed pre-written JavaScripts into your page. It provides some, but limited explanation on what JavaScript is and how you can write it yourself. For those who want to (optionally) learn more, there are links to full tutorials at the end of this one.

Where to Put Your Scripts

Scripts can be put in either of the following two places in an HTML document.

Between the <head > and </head > tags. This is called a header script.
Between the <body > and </body > tags. This is called a body script.

The Scripts themselves must be enclosed in the <script > and </script > HTML tags.
An example of a header script:

An example of a body script:

Writing your first JavaScript

Try opening a text editor (like notepad) and typing in the following code.

<html>
<head>
<title>My First JavaScript</title>
</head>
<body>

<script language = "JavaScript">
document.write( "Welcome to JavaScript!");
</script>
<br>
I'm outside the script now.
</body>
</html>

Try saving your file as an html file and opening it in a web browser.

Your screen should look as follows:

Objects

An object is a data type in JavaScript. An object has properties (attributes) and methods (actions the object can do). For example you can think of car as an object.
Some of the properties associated with a car object could be:

model
year
color

Some of the methods associated with a car object could be:

startEngine()
brake()
accelerate()

In JavaScript there exists a document object.
Here are some of the properties associated with the document object:

bgColor- a string that specifies background color
height- the height, in pixels, of the document
width- the width, in pixels, of the document
alinkColor- a string that specifies the color of activated links
vlinkColor- a string that specifies the color of visited links

Here are some methods associated with the document object:

clear( ) - erases the contents of the document
close( ) - closes a document stream opened with the open() method
open( ) - opens a stream to which document contents may be written
write( ) - inserts the specified string or strings into the document currently being parsed

In the code above consider the following statement:
document.write("Welcome to JavaScript!");

This is our introduction to the document object. The document object represents the document
(in this case an HTML document) displayed in the window.

The document object has properties that specify information about the (HTML) document displayed in the browser. The document object also has methods that allow JavaScript programs to dynamically output text into a document while the document is being parsed.

In the statement above we have used the write() Method.
To use the write() Method we must use the (dot) . operator. We simply connect the object and the desired method with a dot:

document.write( )

The write() Method generally takes a string as an argument. If the argument is not a string, it will be converted to a string.

In this example the argument of the write() Method is the string: "Welcome to JavaScript!"
which is consequently displayed in the document in the browser window. The text "I'm outside the script now" is not an argument to the write() Method, it is just text typed into the body of the HTML file.

The write() Method can take more than one argument. For example you could have a statement as follows:
document.write ("Welcome to my webpage " , username ," !");

Note that the statement is ended with a semicolon.

Examples

That is all that we are going to say about background of JavaScript, although there is a lot more. Instead, look at the following examples and their explanation. Go through each example.

Optional Further Information

After going through the above examples (mandatory), you can (optionally) look at these sources for more information:

W3Schools.com JavaScript Tutorial

There are many books on JavaScript available at places like Amazon, Barnes&Noble, etc. Learning JavaScript is important for doing web page construction and is a good introduction to general computer programming.