Getting Ready to Use JavaScript and <SCRIPT> ELEMENT

A Simple Inline Script

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
  <script type="text/javascript">
    document.writeln("Hello");
  </script>
</head>
<body>
</body>
</html>

Click to view the demo

THE <SCRIPT> ELEMENT

Useful attributes for the <script> element:

Attribute	Optional?	Description
async	Optional	Valid only for external scripts. Tells browsers to download asynchronously.
defer	Optional	Valid only for external scripts. Tells browsers to defer the execution until the document's content has been completely displayed.
src	Optional	URL for an external file.

There are two ways to use the <script> element:

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

To include inline JavaScript code, place JavaScript code inside the <script> element directly:

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
  <script type="text/javascript">
    document.writeln("Hello");
    document.writeln("A");
    document.writeln("B");
    document.writeln("C");
  </script>

</head>
<body>
</body>
</html>

Click to view the demo

The JavaScript code inside a <script> element is interpreted from top to bottom. The rest of the page is not loaded and displayed until the code from the <script> element has been evaluated.

Escaping the "/" character:

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
  <script type="text/javascript">
    document.writeln("Hello");
    document.writeln("A");
    document.writeln("B");
    document.writeln("<\/script>");
  </script>

</head>
<body>
</body>
</html>

Click to view the demo

To include JavaScript from an external file, we can use the src attribute. The value of src is a URL linked to a file containing JavaScript code, like this:

 
<!DOCTYPE HTML>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript" src="example.js"></script> 
</head>
<body>

</body>
</html>

Click to view the demo

The <script> element can include JavaScript files from outside domains. The <script> element's src attribute may be set to a full URL:

 
<!DOCTYPE HTML>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript" src="http://www.yourServer.com/yourFile.js"></script> 
</head>
<body>

</body>
</html>

Click to view the demo

Tag Placement for fast loading

All JavaScript files in the <head> element must be downloaded, parsed, and interpreted before the page begins rendering. The rendering of a page begins when the browser receives the opening <body> tag.

To make the page loading faster we can include JavaScript references in the <body> element, after the page content:

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

Click to view the demo

Home
JavaScript Book
Language Basics

Script Element: