The <script> Tag



The <script> tag is used to embed a client-side script within an HTML or XHTML document. JavaScript code is written between the open <script> and close </script> tags. For example: 
<script>
    var name = prompt('Input your name');
    alert('Hello! ' + name + '!');
</script>

Clicking the file name shown above the code will link to an example page. Or, Copy the code and paste into Tryit Editor of W3Schools to see the result.

In the above example, the prompt and alert functions are defined on the client-side global object. That's the window object in a browser. The window object is a Window instance and representative of the browser itself. Of course, the above JavaScript code is boring; it just accepts a name and then shows it. You can also put the script element into HTML tags. For example:  
<html>
  <body>
    JavaScript Example!<br>
    <script>
        var name = prompt('Input your name');
        document.write('Hello!', name, '!');
    </script><br>
    JavaScript Example!
  </body>
</html>

The browser executes the script immediately before it continues to parse the document. The document property, a Document instance, is defined on the global object. It's representative of the HTML document. When the write method of document executes, it writes the text from where it is. After executing the code of the script section, the browser continues to parse the document.

Basically, the default scripting language is JavaScript. It can be set by a "Content-Script-Type" HTTP header. Authors can also specify the default scripting language by including the following <meta> declaration in the head section.
<meta http-equiv="Content-Script-Type" content="text/javascript">
You can also specify the type attribute of the script element. For example: 
<script type="text/javascript">
    // your code
</script>
The type attribute is used to specify the MIME (Multipurpose Internet Mail Extension) type of the script. Some examples are shown below.
  • text/ecmascript
  • text/jscript
  • text/vbscript
  • ...
The first is the official name of JavaScript; other types depend on the browser support. For instance, if IronPython is installed, Internet explorer even supports the value of 'text/python'.

The type attribute is required in HTML 4, but optional in HTML 5. At the early stage, the script element allowed a language attribute. When HTML 4 standardized the script element, it didn't adopt it; but some early written pages still have the following setting.
<script language="javascript">
    // your code
</script>
The language attribute even allows a version number; for example:
<script language="javascript1.2">
    // your code
</script>

HTML 4 didn't adopt the language attribute. It's not recommended now; modern browsers all ignore it; sometimes you will see the following setting because of old browser compatibility.
<script type="text/javascript" language="javascript">
    // your code
</script>
The script element can be placed in the document bottom. If scripts have no influence for the initial display, you can place them in the document bottom to increase the speed of the initial display.

You can also put the script element in the head section. For example:   
<html>
  <head>
    <script type="text/javascript">
      var name = prompt('Input your name');
      document.write('Hello!', name, '!');
    </script>
  </head>
  <body>
    JavaScript Example!
  </body>
</html>

Be careful! When a browser processes scripts in the head section, the body section is not parsed yet. So in the above example, document.write will print the text from the first line of the body section. A common mistake for novices is: 
<html>
  <head>
    <script type="text/javascript">
      var welcome = document.getElementById('welcome');
      welcome.innerHTML = 'Hello! ' + prompt('Input your name') + '!';
    </script>
  </head>
  <body>
    <span id="welcome"></span>
  </body>
</html>

The document.getElementById function retrieves the instance of the HTML tag; innerHTML is the HTML content of the instance. When the above script executes, the content in the body section is not parsed yet; the instance of <span id="welcome"></span> doesn't exist at all, so not only document.getElementById retrieves but innerHTML is also set as undefined.

If scripts cannot be executed until all the document is parsed, you can use events. For example: 
<html>
  <head>
    <script type="text/javascript">
      window.onload = function() {
          var welcome = document.getElementById('welcome');
          welcome.innerHTML = 'Hello! ' + prompt('Input your name') + '!';
      };
    </script>
  </head>
  <body>
    <span id="welcome"></span>
  </body>
</html>

The window.onload property accepts a function. When the browser completes parsing the document, it invokes the function referred by the onload property if there's one.

Some browsers don't support JavaScript. You can use the HTML comment, <!-- and -->, to wrap your scripts; those browsers will ignore them.
<script type="text/javascript">
<!--

    // your code...

//-->
</script>
As a JavaScript client, the browser makes some modifications; let <!-- be similar to the JavaScript single-line comment // so it doesn't cause a parse error; while // before --> also denotes the single-line comment so --> will be ignored too.

Some characters are XML marks in the XHTML document, such as <, &, etc. You can put JavaScript within //<![CDATA[ and //]]>. For example:
<script type="text/javascript">
//<![CDATA[

   // your code...

//]]>
</script>
The <!CDATA[ and ]]> are after a // so they will be ignored as single-line comments.

Your JavaScript code could be written in a js file. The src attribute of the script element is used to specify the name of the file. For example:  
  • ScriptTag-6.js
window.onload = function() {
    var welcome = document.getElementById('welcome');
    welcome.innerHTML = 'Hello! ' + prompt('Input your name') + '!';
};

If the js file is in a folder, you can specify it as follows:
<html>
  <head>
    <script type="text/javascript" src="js/ScriptTag-6.js"></script>
  </head>
  <body>
    <span id="welcome"></span>
  </body>
</html>

The <script> and </script> tags have to appear in pairs, even though the script comes from a js file. All code in the script section will be ignored.

Be careful of the encoding here; the browser assumes the encoding of the js file is the same as that of the HTML page. If your js file have different encoding from the HTML page, characters from the js file might be garbled.

If your js file encoding is Big5, but your page is UTF-8, you can specify Big5 for the charset attribute of the script element.
<script type="text/javascript" charset="Big5" src="js/ScriptTag-6.js"></script>
Almost every modern browser supports JavaScript; but JavaScript may be forbidden because of unexpected reasons, such as anti-virus software installed, high security levels and so on. If some basic display should be shown even though JavaScript is forbidden, you can use the <noscript> tag. The content in the noscript section will display when JavaScript is not allowed; provide the alternative content for users.