How to Include External JavaScript in Html Page
Jun 18, 2012, by admin
jQuery make simpler building rich, interactive web frontends. Getting started with this Javascript library is easy, but it can take years to fully understand its span and deepness.
Note: This tutorial helps in answering the following questions
“How to Include External JavaScript in Html Page , How to add External JavaScript in Html Page , how to add javascript to html file, how to add javascript to html documents , how to include javascript to html documents , include javascript to html file”
There are currently two ideal solutions for include external JavaScript in html page:
- Use the Google-hosted content delivery network (CDN) to include a version of jQuery (used in this chapter).
- Download your own version of jQuery from jQuery.com and host it on your own server or local filesystem.
Including the jQuery Javascript library isn’t any different from including any other external Javascript file. You simply use the HTML <script> element and provide the element a value (URL or directory path) for its src=”” attribute, and the external file you are linking to will be included in the web page. For example, the following is a template that includes the jQuery library that you can use to start any jQuery project:
Notice that I am using—and highly recommend using for public web pages—the Google-hosted minified version of jQuery. However, debugging Javascript errors in minified code is not idyllic. During code development, or on the production site, it actually might be better to use the nonminified version from Google for the purpose of debugging potential Javascript errors. For more information about using the Google-hosted version of jQuery, you can visit the Ajax libraries API site on the Web at http://code.google.com/apis/ajaxlibs/.
It’s of course also possible, and mostly likely old hat, to host a copy of the jQuery code yourself. In most circumstances, however, this would be ridiculous to do because Google has been kind enough to host it for you. By using a Google-hosted version of jQuery, you benefit from a stable, reliable, high-speed, and globally available copy of jQuery. As well, you reap the benefit of decreased latency, increased parallelism, and better caching. This of course could be accomplished without using Google’s solution, but it would most likely cost you a dime or two.
Now, for whatever reason, you might not want to use the Google-hosted version of jQuery. You might want a customized version of jQuery, or your usage might not require/have access to an Internet connection. Or, you simply might believe that Google is “The Man” and wish not to submit to usage because you are a control freak and plot extreme. So, for those who do not need, or simply who do not want, to use a Google-hosted copy of the jQuery code, jQuery can be downloaded from jQuery.com and hosted locally on your own server or local filesystem. Based on the template I’ve provided in this recipe, you would simply replace the src attribute value with a URL or directory path to the location of the jQuery Javascript file you’ve downloaded.
