Tutorial/Basics

A page in the JavaScript Tutorial
Introduction
Basics
	Statements · Control Flow Statements · Comments · Objects · Functions · Style
Features
	Scoping · Inheritance · DOM

It has been suggested that this page or section be merged into Wikibooks:JavaScript. (Discuss)

Many uses exist for JavaScript (see Uses outside web pages). This article presents the basics of every use known to the authors.

All[]

In every use, the order of execution is very simple; it begins with the first line of the first file and ends with the last.

Web[]

Scripts may be placed in either "external" files, "internal" HTML tags, or "inline" HTML attributes. External files are widely accepted as the best among these because:

They are easier to read (because the brain doesn't have to switch "modes").
The browser can reuse them (because they are addressable separate from the HTML).

However, situations do exist where the others are appropriate. For example, if something needs to happen directly after a certain image loads, an external or internal script is insufficient. And external scripts are rather inconvenient on programming-oriented message boards, so the recipients of internal scripts are expected to externalize them.

External Files[]

Scripts may be linked from either the body or (more commonly) the head. Here is index.html:

<html>
    <body>
        <script type="text/javascript" src="sample.js"></script>
    </body>
</html>

And sample.js:

document.write('Hello, world!');

Internal Tags[]

Tags work in much the same way as files, except the browser receives the entire page in one request (and the programmer must sift through the irrelevant language, either HTML or JavaScript, in order to do anything) if tags are used. Here is index.html:

<html>
    <body>
        <script type="text/javascript"><!--
            document.write('Hello, world!');
        //--></script>
    </body>
</html>

You may have noticed that this script tag contains an HTML comment which contains the JavaScript. This is to help older browsers which were released before the tag was known and would display the JavaScript as text on the page. The two slashes are a JavaScript comment which hides the HTML comment's terminator (-->) from JavaScript-capable browsers which would otherwise flag it as invalid; the initializer (<!--) is not known to cause a problem.

Why the same script tag doesn't work in the head is left as an exercise for the reader.

Inline Attributes[]

Event-Handlers[]

Any HTML attribute whose name begins with on is an event-handler. Event-handlers allow JavaScript much greater flexibility than it would have without them; they notify a script that a certain thing has happened and provide some contextual information. However, note that they are also easy to use from external and internal scripts. Here is index.html:

<html>
    <body onload="document.write('Hello, world!');">
    </body>
</html>

javascript: URLs[]

Any HTML attribute which normally takes a URL can instead hold JavaScript. The most common example of this follows in a new index.html.

<html>
    <body>
        <a href="javascript: foo();">
    </body>
</html>

That could almost as easily be written with an onclick handler, which is more accessible.