Home

Adding Javascript Tags

For more information on this Click Here

See below for information regarding the defer & async attributes.


You can add the <script></script> tags in a few places on the HTML form.

Javascript code can be added to the sections
<head></head>
<body></body>
but know that the more you put in the <head></head> the slower the web page will load (parse). It also slows with it in the <body></body> but it may not be so noticeable.
ALSO...if you put the Javascript at the end (just before the </body>) then it will not parse until the page has loaded.

This will probably change when I learn more though.

(Edit...
I am using javascript on some web pages (jsArrays.html & jsOperators.html etc) and because I am requiring the scripts to run a javascript function as it processes the code on the web page I had to put my function within the <head> section.
Otherwise, if I put the function script at the bottom, it did not know about the function until the page had already finished loading and by then it was too late.)

For example...

<head>
      <script type="text/javascript">
            // Javascript goes here//
      </script>
</head>

<body>
     //code in the body//
      <script type="text/javascript">
            // Javascript goes here
      </script>
     //MORE code in the body//
      <script type="text/javascript">
            // Javascript goes here
      </script>
     //EVEN MORE code in the body//
     //etc...etc...//
</body>

You can also create an external file (similar to what we can do with CSS) that holds the Javascript code. To do this you can say...
<script src="Scripts/myScripts.js" text="text/javascript">
...again this can go in the head or at the bottom of the body sections.



To stop an external script from running until AFTER the page has loaded you need to add the 'defer' attribute, eg...
<script src="Scripts/myScripts.js" defer></script>

For more information on DEFER Click Here



Similar to DEFER is the ASYNC attribute.
But this does not wait until the whole page has loaded it just carries on loading the page while it is loading the JavaScript code - As soon as the JavaScript code has finished loading then it will run.

Useful if your JavaScript Code does not depend on the page being loaded before it runs.

<script src="Scripts/myScripts.js" async></script>

For more information on ASYNC Click Here