Difference in Output when <script></script> is place in <head></head>?
<p>I am new to JavaScript environment.I have read that <code>&lt;script&gt; &lt;/script&gt;</code> tag can be placed either in the <code>&lt;head&gt; &lt;/head&gt;</code> or <code>&lt;body&gt;&lt;/body&gt;</code> tag of the document. But when I place <code>&lt;script&gt;</code> tag under the <code>&lt;head&gt;&lt;/head&gt;</code> the output is different. Please review the code:-</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script&gt;
function myFunction(a,b)
{
return a*b;
}

document.getElementById("demo").innerHTML=myFunction(4,3);
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p&gt;This example calls a function which perfoms a calculation, and returns the result:&lt;/p&gt;

&lt;p id="demo"&gt;&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<blockquote>
  <p>Output:- This example calls a function which performs a calculation,
  and returns the result:</p>
</blockquote>

<p>Whereas if <code>&lt;script&gt;&lt;/script&gt;</code> is placed under <code>&lt;body&gt;&lt;/body&gt;</code> then I get a different Output. Please find the code and the following output:-</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;

&lt;p&gt;This example calls a function which perfoms a calculation, and returns the result:&lt;/p&gt;

&lt;p id="demo"&gt;&lt;/p&gt;

&lt;script&gt;
function myFunction(a,b)
{
return a*b;
}

document.getElementById("demo").innerHTML=myFunction(4,3);
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<blockquote>
  <p>Output:-</p>
  
  <blockquote>
    <p>This example calls a function which perfoms a calculation, and returns
    the result:</p>
    
    <p>12</p>
  </blockquote>
</blockquote>

<p>Any help is highly appreciated.</p>
