Home > JavaScript > Running a Scriptprinter version

JavaScript Running a Script

JavaScript may be embedded within an HTML document in several different ways.

Using the <script> Element

This uses the HTML script element that may be used for a number of client-side scripting languages, which in our case is JavaScript.

<script> Attributes

The <script> element has a closing tag and several attributes.

The language attribute specifies which script language is to be used - in our case "javascript".
The type attribute specifies the content type of the script - in our case "text/javascript".

If these attributes are omitted the code will still run but you may find that the document will not pass strict HTML validation.

JavaScript tags may appear in either the head or body of an HTML document or both and may occur multiple times.

Scripts are executed in the order in which they appear in the document and later scripts are "aware" of the actions of earlier scripts within the same document so are considered as part of the same JavaScript programme.

Example of a JavaScript

<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
document.write('Hello World');
</script>
</body>
</html>

JavaScript Versions

Over time new versions of JavaScript have been developed with enhanced capabilities.

If you embed a version of JavaScript in a document that is read by a browser that doesn't support that version then it will produce an error.

For this reason the language attribute allows you to state the version that is being used
e.g. <script language="javascript1.2" type="text/javascript">
so that browsers that don't support that version will ignore the script.

JavaScript Include Files

The HTML script element also allows a src attribute, which allows script to be placed in an external file and loaded into a document at run time.

The src attribute must be the relative or absolute address of where the external file can be found on the server.

This allows you to reuse code required by multiple pages - simplifying maintenance. An include file that has been downloaded is held in cache and doesn't need to be downloaded again.

Include files contain only JavaScript instructions without script tags, are saved with a .js file extension and there must be nothing between the opening and closing script tags used in the HTML document.

Example of using Include

The test.js Include File used by the Example above

document.write('Hello World');

JavaScript Event Handlers

Events are generated when for example a web page loads or a user moves the mouse.

JavaScript can capture these events to trigger a piece of code known as an event handler and this it what gives JavaScript the power to respond dynamically.

Event handlers are defined as attributes of various HTML tags and any number of event handlers may be defined as an attribute of an HTML tag.

Below is an example of an event handler attached to an HTML form. If the name field is left blank then the form won't submit and the user is alerted.

Example of an onsubmit Event Handler

The <noscript> Element

This displays an alternative to a JavaScript if the user's browser doesn't support JavaScript but won't display if the user's browser does.

Example of the <noscript> Element

<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
document.write('Hello World');
</script>
<noscript>
Your browser doesn't support JavaScript.
</noscript>
</body>
</html>

Syntax

JavaScript is case-sensitive therefore keywords must be in lower-case and capitalization must be used consistently with identifiers for variables, functions etc.

When using names as identifiers there are words that you may not use since they are keywords in JavaScript e.g. var, function, break, true, false etc.

Whitespace is ignored in JavaScript therefore programme statements should end with a semicolon.

You can omit semicolons if you place each statement on a new line but it's good practice just to always use semicolons.

Comments are useful since they not only remind you of what code does but can be used to comment out sections when debugging.

Examples of Comments

<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
// This is a single line comment

/* This is
a multiple line
comment */
</script>

</body>
</html>

Previous - JavaScript Basics Next - Variables