[JavaScript] script Element : JavaScript in HTML

The <script> element is used to embed or link script code in HTML documents. It is recommended to use external script files but you can place script code directly inside HTML.

 

1. <script> Element

The <script> element has the following attributes :

  • async : specifies that the script is executed asynchronously (only for external scripts)
  • defer : specifies that the execution of the script is deferred until the page has been parsed (only for external scripts)
  • charset : specifies the character encoding used in an external script file
  • src : specifies the URL of an external script file
  • type : specifies the MIME type of the script
  • language : deprecated
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function () { });
<script>

The MIME type of JavaScript is “application/x-javascript” but traditionally the “text/javascript” is used for the “type“. The “language” attribute is deprecated and should not be used.

In HTML5, JavaScript is the default scripting language so you can even omit the “type” attribute.

 

2. External vs. Internal

It is recommended to use the external script files and embed them using the “src” attribute. External scripts can be cached in browsers so that it reduces the loading time when it is used for multiple pages.

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

Note that the second syntax is valid in XML but should not be used in HTML documents. It cannot be handled properly in some browsers, notably IE.

 

3. Location of <script> Elements

Traditionally, the <script> elements are located in the <head> section.

<head>
  <script type="text/javascript">
  </script>
</head>

This approach nicely separates the script from the body section of a document. But sometimes, the page display can be delayed because the script is loaded before the document.

To load the document before the script, the <script> elements are located at the end of the <body> section.

Let’s see the following script

<head>
  <script type="text/javascript">
    alert(document.getElementById("nameInput").value);
  </script>
</head>
<body>
  <input type="text" id="nameInput" value="Homer" />
</body>

The script will fail because when the script is executed, the <input> element is not available yet. Let’s move the <script> element to the bottom of the page.

<body>
  <input type="text" id="nameInput" value="Homer" />
  <script type="text/javascript">
    alert(document.getElementById("nameInput").value);
  </script>
</body>

Now the script works correctly.

 

4. Deferred Scripts

When the “defer” attribute is specified, the external script will not be executed until the document is completely parsed and displayed.

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

 

5. Async Scripts

When the “async” attribute is specified, the script is executed asynchronously. The script will be executed while the page continues the parsing.

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

 

6. <noscript> Element

The <noscript> element is used to show error messages for

  • the browser that does not support Scripting
  • or the browser whose scripting feature is turned off
<noscript>
  <p>To see this page, you need a JavaScript enabled browser.</p>
</noscript>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s