A speedy way to add JavaScript and jQuery to SharePoint 2013

The fastest way I know to add JavaScript and/or jQuery to the SharePoint site is through the use of the Script Editor web part.

JavaScript 

The steps

1. Edit the page
2. Add the Script Editor web part
3. Add the Script
4. Save your work

Here are a few screens shoots.

Added the Script Editor to the page

Added the JavaScript 

The Results

jQuery

Adding jQuery to a SharePoint site is just as simple.

The steps

1. Edit the page
2. Add the Script Editor web part
3. Add a reference to jQuery
4. Add the Script
5. Save your work

Adding the Script Editor Part

Adding the reference to the jQuery package and the jQuery script

The Results

In this example, the code is making a reference to the jQuery's content delivery network (CDN) that contains the jQuery package we are interested in. In this case, I am making a reference to the 1.11.0 minified package. It is also acceptable to download the jQuery and load it into SharePoint Library like the 'Style Library'.

Words of Caution

Please remember that JavaScript and jQuery execute with the client's browser. It is possible that the script being added can interfere with the interface. It is highly advisable to test JavaScript and/or jQuery scripts in a development environment first.

This approach to adding JavaScript and jQuery is very fast. There is a downside to this approach. When using jQuery you need to reference the jQuery with each site and page. When it comes time to update the jQuery package to a newer version you will have to check each page and make the change. Another problem with this approach is it can lead to multiple versions and multiple references of the jQuery package. Having multiple reference to the same package within the same page can lead to performance issues because you are downloading the same information multiple times when the page gets called. Having references to multiple versions of the jQuery library leads to confusion and makes debugging harder.

Update - 7 March 2014

I encountered a strange behavior. My script would work when the page was in edit mode and not when the page is in it normal mode. It took a while to sort it out the issue. I needed to turn off the feature 'Minimal Download Strategy'.