Fandom

JavaScript Wiki

Tutorial/Basics

< Tutorial

87pages on
this wiki
Add New Page
Talk0 Share
A page in the
 
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.

AllEdit

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.

WebEdit

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:

  1. They are easier to read (because the brain doesn't have to switch "modes").
  2. 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 FilesEdit

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 TagsEdit

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 AttributesEdit

Event-HandlersEdit

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: URLsEdit

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.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.