jQuery – jQuery Into HTML file

jQuery in HTML


Since, we know that jQuery is a JavaScript Framework or, if put more simply, an External JavaScript File . So the way we Include an External JavaScript File in our Web Page basically in Head and Body Section , similarly we can Include this jQuery Framework in Head or Body Section of our Web Page as well.


In the previous example, we have included jQuery in the Head Section. But in Professional Development, no external JavaScript file is ever included in the Head section of the Web page . Why?
Because like any other External Resource, JavaScript file is also downloaded in a synchronous manner. So, as long as a JavaScript file is downloaded and saved in the Cache of Web Browser, Web Browser does not download any other content of Web Page.

As a result, if the JavaScript file to be downloaded in Web Browser is very large or the speed of the user’s Internet Connection is very slow, then the user may feel that our web page is not downloading in the user’s Web Browser i.e. our web Page has hung. While Web Browser Internally is downloading a JavaScript file linked on our Web Page. In this case, that user can move from our web site to any other web site, which is not good at all.

Also, Codes written in JavaScript file normally interact with the DOM of our web page. So if we attach an external JavaScript file in the Head section of our web page and there is a code in that JavaScript file which interacts with the DOM of the current web page , then the codes of that JavaScript file will be failed.

Because when that JavaScript file is fully downloaded, it will run and try to access the Codes of that file, any element in the DOM of the Current Web Page as soon as it is run, then that element will not be available on which JavaScript Code Could perform action. Because that DOM Element will be available when the body section of our web page is downloaded in the Web Browser, whereas the body section cannot be downloaded before the specified JavaScript file is downloaded in the head section.

So it is better to always include any External JavaScript file just before Closing Body Element as follows . By doing this, you get rid of both the above problems.

//File Name: jQueryEmbeding-beforeClosingBodyElement.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <title>jQuery - Embedding Before Closing Body Element in WebPage</title>

    <h1>Other Codes Here</h1>
    <script type='text/javascript' src="js/jquery-1.9.1.js"></script>

When we include a JavaScript file ie jQuery Library file in our web page just before the Closing Body Element according to the above code, then Web Page is downloaded and rendered in the Web Browser in a more usual way and finally when jQuery Library Download starts, by then the entire web page has been downloaded and rendered in Web Browser.​

As a result, if a JavaScript Code Run occurs at the time of downloading of jQuery or any other external JavaScript file, which needs to access and manipulate a DOM Element of the current Web Page, then the DOM is fully ready for that JavaScript Code. is.