Choosing how to bring the script
Prepackaging your JS into single, minified files is pretty much the industry standard. There are times, however, where you have to break tradition and insert some inline script. The JS webpart allows for both scenarios so rest assured you will be able to configure it the way you need to.
Kentico MVP Ilesh Mistry recently published a great blog to help you know how to bring your JS into your site. You can check it out here
This is the most common use of the JS web part, and for good reason. The “Linked Script” is stored on the file system and allows for minification (if your site is configured to do so) so it’s very clean. The actual file location is in the “/CMSScripts/custom” folder. This solution allows you to combine your scripts in to a single file, reducing the number of resource calls which will improve the performance of the site.
* When deploying to Azure, this is stored in the Azure storage account.
Another benefit of this solution is that you can edit your JS files right from the UI. This is a great way to update your code without re-deploying / accessing your servers.
Understading where your JS is going to be inserted is extremely important. If you are relying on another library in your code, you have to make sure it is loaded before yours to prevent an error. Here are the following options available in the webpart.
Beginning of the page
This option inserts the Linked Script inside the body tag. Using this method usually has specific reasons to do so, such as needing to load the JS prior to other functionality on the page.
This option loads the Linked Script after all other content. This is widely accepted as the preferred method as it will load the JS after everything else, eliminating any blocking actions loading the script may cause.
Sometimes you just have to write your own code. In this case, you will want to use the “In-line Script”: option of the webpart. This configuration allows you to inject your JS anywhere in the document. Just add your code and select the desired location.
* You can select whether to wrap the entered value in a script tag by selecting the “Generate script tags’ option.
The Inline Script option has some additional location options for you to use. Being a more ad-hoc solution, In-line Script can be inserted at the following spots of the DOM.
Beginning of the page
This option inserts the In-line Script inside the body tag. This method usually has specific reasons to do so, such as needing to load the JS prior to other functionality on the page.
This location will insert the In-line Script exactly where it appears in the layout of the page.
This option loads the In-line Script after all other content.
On submit statement
This option will insert the In-line Script into the DOM after a “Submit” button is clicked. This is especially useful if you need to fire JS after a form submission to ensure valid entries and other user-initiated actions.