Best Places to Put JavaScript Code in Your Web Application

3 Places to put JavaScript code

1. 1. Between the body tag of html
2. 2 . Between the head tag of html
3. 3. In .js file (external javaScript)

1. Code between the body tag

In the above example, we have displayed the dynamic content using JavaScript. Let’s see the simple example of JavaScript that displays alert dialog box.

<span class="pln">

</span><span class="tag">&lt;html&gt;</span><span class="pln">  
</span><span class="tag">&lt;body&gt;</span><span class="pln">  
  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">&gt;</span><span class="pln">  
    document</span><span class="pun">.</span><span class="pln">write</span><span class="pun">(</span><span class="str">"JavaScript is a simple language for learners"</span><span class="pun">);</span><span class="pln">  
  </span><span class="tag">&lt;/script&gt;</span><span class="pln">  
</span><span class="tag">&lt;/body&gt;</span><span class="pln">  
</span><span class="tag">&lt;/html&gt;</span><span class="pln">  


</span>

2. Code between the head tag

Let’s see the same example of displaying alert dialog box of JavaScript that is contained inside the head tag.

In this example, we are creating a function msg(). To create function in JavaScript, you need to write function with function_name as given below.

To call function, you need to work on event. Here we are using onclick event to call msg() function.

<span class="pln">

</span><span class="tag">&lt;html&gt;</span><span class="pln">  

</span><span class="tag">&lt;head&gt;</span><span class="pln">  
  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">&gt;</span><span class="pln">  
   </span><span class="kwd">function</span><span class="pln"> msg</span><span class="pun">(){</span><span class="pln">  
         alert</span><span class="pun">(</span><span class="str">"Hello JavaScript"</span><span class="pun">);</span><span class="pln">  
   </span><span class="pun">}</span><span class="pln">  
</span><span class="tag">&lt;/script&gt;</span><span class="pln">  
</span><span class="tag">&lt;/head&gt;</span><span class="pln">  

</span><span class="tag">&lt;body&gt;</span><span class="pln">  
</span><span class="tag">&lt;p&gt;</span><span class="pln">Welcome to JavaScript</span><span class="tag">&lt;/p&gt;</span><span class="pln">  
</span><span class="tag">&lt;form&gt;</span><span class="pln">  
</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"click"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">msg</span><span class="pun">()</span><span class="atv">"</span><span class="tag">/&gt;</span><span class="pln">  
</span><span class="tag">&lt;/form&gt;</span><span class="pln">  
</span><span class="tag">&lt;/body&gt;</span><span class="pln">  

</span><span class="tag">&lt;/html&gt;</span><span class="pln">   

</span>

3. External JavaScript file

We can create external JavaScript file and embed it in many html page.

It provides code re usability because single JavaScript file can be used in several html pages.

An external JavaScript file must be saved by .js extension. It is recommended to embed all JavaScript files into a single file. It increases the speed of the webpage.

Let’s create an external JavaScript file that prints Hello Javatpoint in a alert dialog box.

message.js

<span class="pln">

</span><span class="kwd">function</span><span class="pln"> msg</span><span class="pun">(){</span><span class="pln">  
 alert</span><span class="pun">(</span><span class="str">"Hello JavaScript"</span><span class="pun">);</span><span class="pln">  
</span><span class="pun">}</span><span class="pln">  

</span>

Let’s include the JavaScript file into html page. It calls the JavaScript function on button click.

index.html

<span class="pln">

</span><span class="tag">&lt;html&gt;</span><span class="pln">  

</span><span class="tag">&lt;head&gt;</span><span class="pln">  
   </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"message.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">  
</span><span class="tag">&lt;/head&gt;</span><span class="pln">  

</span><span class="tag">&lt;body&gt;</span><span class="pln">  
   </span><span class="tag">&lt;p&gt;</span><span class="pln">Welcome to JavaScript</span><span class="tag">&lt;/p&gt;</span><span class="pln">  
</span><span class="tag">&lt;form&gt;</span><span class="pln">  
   </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"click"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">msg</span><span class="pun">()</span><span class="atv">"</span><span class="tag">/&gt;</span><span class="pln">  
</span><span class="tag">&lt;/form&gt;</span><span class="pln">  
</span><span class="tag">&lt;/body&gt;</span><span class="pln">  

</span><span class="tag">&lt;/html&gt;</span><span class="pln">   

</span>

Advantages of External JavaScript

Placing scripts in external files has some advantages:

• It separates HTML and code
• It makes HTML and JavaScript easier to read and maintain
• Cached JavaScript files can speed up page loads

To add several script files to one page  - use several script tags:

Example

<span class="pln">

</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"myScript1.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"myScript2.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">

</span>