Web design blog

JavaScript can appear in several places:

• Inline (JavaScript in tag)
• Internal (JavaScript in <script> tag)
• External (JavaScript in file with .js extension)
• Dynamic (External file loaded by JavaScript)

Note how the relationship between JavaScript and HTML is similar to the relationship between CSS and HTML.

Inline JavaScript

Inline JavaScript appears inside an individual tag. The JavaScript commonly appears inside a event attribute, such as onclick:

Inline JavaScript, Example One

Use your browser’s View Source command to see the code.

<a href=”javascript:;” onclick=”alert(‘Inline Example #1’)”>Inline JavaScript, Example One</a>

Here is a screenshot:

Notice how the a tag has two attributes (properties) with special values:

• href attribute is javascript:;
  • Disables normal link behavior
• onclick attribute is alert(‘The Message’);
  • onclick is an event — the associated JavaScript runs when the event happens, in this case when the link receives a click

Example Two shows a variation, with the JavaScript inside the href attribute. This is equivalent to the onclick example: we don’t need to specify the “click” event, because href takes care of that for us:

Inline JavaScript, Example Two

The source code looks like this:

<a href=”javascript:alert(‘Inline Example #2’)”>Inline JavaScript, Example Two</a>

Screenshot:

Both of the above examples demonstrate a single line of JavaScript code: the alert() function, which displays a message in a modal dialog box.

Inline JavaScript can be useful for certain specific tasks, but inline should be your third choice.

External JavaScript files should be your first choice, then internal style sheets second. See [categorySeeAlso slug=”progressive-enhancement”] for more on this topic.

Internal JavaScript

Internal JavaScript appears inside a <script> tag, like this:

<script type="text/javascript" >

// JavaScript goes here, between the opening and closing script tags.

alert('Hello World');

</script>

The above example demonstrates a comment — text that JavaScript will ignore:

• JavaScript ignores everything to the right of the // on that line
• Use comments to leave notes about the code
• Use comments to render code inactive, without actually deleting the code

The <script> tag must not include the src attribute (which is used to specify an external JavaScript file)

External JavaScript

To use an external JavaScript file in a web page, use the <script> tag with the src attribute pointing to the JavaScript file.

Example:

When using the <script> tag to load an external JavaScript file, do not also use the tag as a container for internal JavaScript — that is, do not put JavaScript (or anything thing else) between the opening tag and the closing tag.

Editing External JavaScript files:

• External JavaScript files are text files containing JavaScript, and nothing else.
• Edit using any text editor. Serious JavaScript developers typically edit files using an Integrated Development Environment (IDE) such as Eclipse or Dreamweaver.
• Do not use the <script> tag in an external JavaScript file itself — the <script> tag goes in the web page.
• When using two or more script tags on a page, the order of the tags can be significant, in terms of JavaScript processing.

Dynamic JavaScript

Dynamic JavaScript uses JavaScript to load an external JavaScript file.

See also [categorySeeAlso slug=”ajax”].