Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

How to include JavaScript in different places

Thursday, December 18th, 2014 by Servage

javascriptThis article is about using scripts and other code snippets within the HTML document head. In addition to placing a script within the body of a document you can put it in the <head> section, which is the ideal place if you wish to execute a script when a page loads. If you place critical code and functions there, you can also ensure that they are ready to use immediately by any other script sections in the document that rely on them.

Another reason for placing a script in the document head is to enable JavaScript to write things such as meta tags into the <head> section, because the location of your script is the part of the document it writes to by default. However, keep in mind that anything added to the head section will also slow down the page load process. Therefore carefully consider what you need on the page load, and what may be loaded later.

Old and non-standard browsers

If you need to support browsers that do not offer scripting, you will need to use the HTML comment tags <!– and –> to prevent them from encountering script code that they should not see. The example below shows how you add them to your script code. This is a simple “Hello World” example modified for non-JavaScript browsers:

<html>
 <head>
  <title>Hello World</title>
 </head>
 <body>
   <script type="text/javascript">
     <!--
     document.write("Hello World")
     // -->
   </script>
 </body>
</html>

Here, an opening HTML comment tag <!– has been added directly after the opening <script …> statement and a closing comment tag // –> directly before the script is closed with </script>.

The double forward slash // is used by JavaScript to indicate that the rest of the line is a comment. It is there so that browsers that do support JavaScript will ignore the following –>, but non-JavaScript browsers will ignore the preceding // and act on the –> closing the HTML comment.

Although the solution is a little convoluted, all you really need to remember is to use the two following lines to enclose your JavaScript when you wish to support very old or nonstandard browsers:

<script type="text/javascript">
  <!—
  Your JavaScript goes here...
  // -->
</script>

Including JavaScript files

In addition to writing JavaScript code directly in HTML documents, you can include files of JavaScript code either from your website or from anywhere on the Internet. The syntax for this is:

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

Or include a file in from an external url the following way:

<script type="text/javascript" src="https://someserver.com/script.js"></script>

As for the script files themselves, they must not include any <script> or </script> tags because they are unnecessary. The browser already knows that a JavaScript file is being loaded. Putting those tags inside the JavaScript files will cause an error.

Including script files is the preferred way for you to use third-party JavaScript files on your website. It is easier to administrate code by placing it in multiple files in a logic file and folder structure. It also makes the code reusable and easier to maintain with source control.

Sources for further reading

 

How to include JavaScript in different places, 4.5 out of 5 based on 4 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.