You need to tell the browser that you are placing JavaScript into the web page document in some manner. The browser has the ability to run JavaScript as it is, but if you are including jQuery functionality, you must link to the jQuery library file as well.

There are different ways to include JavaScript code. JavaScript can be placed right inside the document or you can link to external JavaScript files.


Calling external JavaScript files

You must always alert the browser that you have code by including it in <script>...</script> tags. You may also choose to let it know that the script is JavaScript by giving it that information as well. If you are linking to an external file, you must include the correct path to the file.

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

As per the example, the external file is referred to using src=" ". You must also always include the closing script tag </script>. Using the type="text/javascript" is not required, but it does alert the browser that the code is JavaScript and not some other type of code.

Make note that the JavaScript within the external file should NOT include the <script> tags.


Using internal script

You can have <script>...</script> tags right inside the web page document with the JavaScript code included between the tags. This is referred to as inline script.

    alert("Welcome to our world");

Internal script is usually used for quick little functions, tutorial files or a quick test of something. For production web pages, it is best to keep the script in an external file.


Where to place the <script> tags

With JavaScript, it is important to place the <script>...</script> tag in the proper location in the document.

There can be multiple <script>...</script> tags within a document and they each will recognize functions and global variables that have be declared in another section. Any JavaScript must be placed inside of <script> tags for the browser to recognize it as JavaScript. 

If you place it in the <head>...</head> section, the <script> will load before the content of the page. This can be problematic if you are manipulating elements on the page before they are loaded. The JavaScript code may not run properly as it is acting on elements that it cannot find. It can also slow down the page loading speed if it is a lengthy bit of code.

You can add the <script>...</script> section just before the closing </body> tag to be sure that all of the elements have been loaded into the page. This also can be problematic if the JavaScript is changing the layout of the page immediately. The visitor will see the initial layout, then suddenly things change to the new layout. It can be unpleasant or confusing.

The <script>..</script> tags can be placed right inside the HTML document at any point.

The <script>...</script> tags can also be used to link to an external JavaScript file at any point in the document.