- AJAX-based Microsite: Activating jQuery / Connecting JS file

AJAX-based Microsite: Activating jQuery / Connecting JS file

Activating jQuery

jsFiddle allowed us to start using jQuery by simply making a selection in the dropdown menu. However, our process is slightly more involved this time around, as we need to make an explicitly connection between jQuery library and our HTML file.

jQuery's official CDN website ( offers a series of remotely hosted jQuery libraries you can use for your project. Select the uncompressed version of jQuery 3.X, and you will be presented a code snippet that you can copy into your <head> section.

Note that the <script> tag is being used to make this connection. We can use the same formula to connect our script.js file to the HTML page:

We are now ready to start using our JS code as we have done for the past two weeks.

Testing JS connection

You may recall using a simple code snippet to test whether jQuery is active in the first place. Note the following snippet:

Wrapping around our snippet is a simple "document ready" event, which was implied in jsFiddle but will need to be made explicit here. This event waits until the page has finished loading, and launch your JS code upon completion.

If everything goes well, the page will now have a pink background:

Screencast Recording