Use Script Element to add Javascript to HTML page








The primary method of inserting JavaScript into an HTML page is via the script element.

There are six attributes for the script element:

  • async - Optional.
    Valid only for external script files.
    script should download immediately and should not prevent other actions on the page.
  • charset - Optional.
    This attribute is rarely used, because most browsers don't honor its value.
    The character set of the code specified using the src attribute.
  • defer - Optional.
    Valid only for external scripts.
    The execution can be deferred until after the document's content has been parsed and displayed.
  • language - Deprecated.
  • src - Optional.
    Indicates an external file that contains code to be executed.
  • type - Optional.
    Replaces language attribute.
    Set the MIME type of the scripting language.
    This attribute is safe to omit, as "text/javascript" is assumed when missing.

There are two ways to use the script element:

  • embed JavaScript code directly into the page
  • include JavaScript from an external file




Inline

To include inline JavaScript code, place JavaScript code inside the script element directly, as follows: 

<script type="text/javascript">
function sayHi(){
    alert("Hi!");
}
</script>

The JavaScript code contained inside a script element is interpreted from top to bottom.

As with inline JavaScript code, processing of the page is halted while the external file is interpreted.

A script element with the src attribute should not include additional JavaScript code between the <script> and </script> tags.

If both are provided, the script file is downloaded and executed while the inline code is ignored.





External

To include JavaScript from an external file, use the src attribute to reference URL linked to a file containing JavaScript code, like this: 

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

In the code above, an external file named example.js is loaded into the page.

The file should only contain the Javascript code.

To include JavaScript files from outside domains. 

<script type="text/javascript" src="http://www.java2s.com/afile.js"></script>

The script elements are interpreted in the order in which they appear in the page as long as the defer and async attributes are not present.

Tag Placement

Traditionally, all script elements were placed within the <head> element on a page. 

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="example1.js"></script>
    <script type="text/javascript" src="example2.js"></script>
    <script type="text/javascript" src="example3.js"></script>
  </head>
  <body>
    <!-- content here -->
  </body>
</html>

Including all JavaScript files in the <head> means that all of the JavaScript code must be processed before the page begins rendering.

For this reason, you can include JavaScript references in the <body> element. 

<!DOCTYPE html>
<html>
  <body>
    <!-- content here -->
    <script type="text/javascript" src="example1.js"></script>
    <script type="text/javascript" src="example2.js"></script>
  </body>
</html>

Using this approach, the page is completely rendered before the JavaScript code is processed.

Deferred Scripts

defer attribute on a <script> element tells browser that download should begin immediately but execution should be deferred: 

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" defer src="example1.js"></script>
    <script type="text/javascript" defer src="example2.js"></script>
  </head>
  <body>
    <!-- content here -->
  </body>
</html>

The defer attribute is supported only for external script files.

For XHTML documents, specify the async attribute as defer="defer".

Asynchronous Scripts

async which applies only to external scripts changes the way the script is processed.

It signals the browser to begin downloading the file immediately.

async scripts are not guaranteed to execute in the order in which they are specified. 

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" async src="example1.js"></script>
    <script type="text/javascript" async src="example2.js"></script>
</head>
<body>
       <!-- content here -->
</body>
</html>

In this code, the second script file might execute before the first.

For XHTML documents, specify the async attribute as async="async".

noscript Element

noscript element provides alternate content for browsers without JavaScript.

This element can contain any HTML elements. Content in a noscript will be displayed under the following two circumstances:

  • The browser doesn't support scripting.
  • The browser's scripting support is turned off.

Here is a simple example: 

<!DOCTYPE html>
<html>
  <head>
    <script src="example1.js"></script>
  </head>
  <body>
    <noscript>
      <p>This page requires a JavaScript-enabled browser.</p>
    </noscript>
  </body>
</html>

In this example, a message is displayed user when the scripting is not available.

Javascript in action

Save the following code into a text file and name it as test.htm. Drag and drop test.htm to a browser.

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
    document.writeln("Hello");
  </script>
</head><!--from   w w w  . java 2  s .  c  o m-->
<body>
</body>
</html>

Click to view the demo

The code above generates the following result.

The code above outputs string "Hello" to the web page.