How to call a JavaScript function when the external JavaScript file is referenced at the end of the HTML body?
<p>I know that when you want to invoke a JavaScript function inside a HTML body section you can do it by putting <code>&lt;script&gt; someFunction(); &lt;/script&gt;</code> inside your body tag, here is an example, I have HTML like this:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;

&lt;head&gt;
&lt;script type="text/javascript"
    src="/Script.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;script&gt;
        showAlert();
    &lt;/script&gt;
&lt;/body&gt;

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

<p>And the javascript file like this:</p>

<pre><code>function showAlert(){
    alert("This is an alert!");
}
</code></pre>

<p>This works fine but if I put the JavaScript file reference at the end of the body like this: </p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;

&lt;head&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;script&gt;
        showAlert();
    &lt;/script&gt;
    &lt;script type="text/javascript"
        src="/Script.js"&gt;&lt;/script&gt;
&lt;/body&gt;

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

<p>the function <code>showAlert()</code> is no longer being invoked. Can you please answer these 2 questions:</p>

<ol>
<li>Why is <code>showAlert()</code> not invoked in the second scenario?</li>
<li>How (if possible) to invoke a function from a JavaScript file when
it is referenced in the end of the body?</li>
</ol>

<p>The reason why I'm asking is because I know that it is a good practice to refer your JavaScript files in the end of the body instead of the head, so that the page will be rendered first before loading all the JavaScript code. </p>