The primary way of adding a script to HTML pages is via a <script> element (although inline insertion is available too).

This element, initially created by Netscape, has five HTML attibutes dedicated to it:

charset

An optional attribute used to declare the character set of the code specified by the src attribute. Whether it will be honored or not, depends on the browser rendering it.

defer

An optional attribute used to indicate whether the execution of the script will be delayed until the document has been completely parsed and displayed or it will be read and executed immediately where evoked.

language

A deprecated attribute that was originally intended to define the scripting language being used (JavaScript VBScript, etc...). Avoid using as browsers ignore it.

src

An optional attribute that should be used when the script is being read from an external ".js" file. The path to that file should be, then, indicated with this attribute.

type

The only required attribute, which indicates the script's content type (MIME type). The value for JavaScript should be set to text/javascript for the maximum browser compatibility; otherwise the proper value should be application/x-javascript. This attribute is intended to be a replacement for above mentioned language attribute.

The internal insertion of the code with the <script> tag usually looks like this:

<script type="text/javascript">

    function functionName() {

      alert("Hello");

   }

</script>

The external insertion of the code looks like this:

<script type="text/javascript" src="tutorial.js">

NOTE: When creating a JavaScript code, the string "</script>" should never be used as the part of the code because the JS is going to interpret it as a closing script tag (</script>).

For instance a line:

alert("</script>");

To be properly displayed should be re-written in a way similar to this:

alert("</scr" + "ipt>");

The syntax seen above will be better explained in following chapters.

The placement of a <script> element is not strictly defined and it might appear at any position in the document, including inside the <body> tag. Hover a good practice is, unless there is a specific reason for the opposite, to place the element inside the <head> element. In such a way browser will load the script before the document's content and create a better experience for the visitor.

To delay the execution of the script, a developer may set the attribute defer (defer="defer"). This attribute will have the same effect as the script element being placed at the bottom of the document. One of the common reasons for using this technique is to prevent scripts that will modify an element's position in the flow or its styling, from affecting it the before the element is rendered first.

The <noscript> element.

If a browser rendering a web page still somehow does not support JavaScript or it has the "enable JavaScript" option unmarked, the element <noscript> may be used to provide alternate content. This is quite useful to inform people that their JavaScript should be enabled in order to fully enjoy the site's features.

To test how it works in real life, disable JavaScript in your browser and take a look at this page you are reading.

Example

HTML with JavaScript code embedded:

 

›› go to examples ››