Development mode

Before you start customizing javascript files, make sure to enable "development mode" setting in the control panel under "system - settings". This will ensure that system does not use cached data so your changes are seen right away. Also edit "index.php" file and set "ENVIRONMENT" constant to "development". This will ensure that system displays errors if any occur so you could easily spot and fix any issues you may come across. Do not leave development mode enabled on a live site as it will slow it down considerably.

Default files

Default javascript files are located in the "assets/js" folder. System first looks for and loads "assets/js/system/scripts.js" file, which in turn loads a variety of other different javascript files including those for plugins. All default javascript files are then combined and compiled into one which reduces the file size and increases loading speed and overall performance.

Among the default javascript libraries that system loads are:

You may take advantage of these libraries by using them in your templates without having to load or include those files.

Loading javascript files

Software uses HeadJS to help you load .js files without affecting performance. You may use the following code anywhere in your template to load your javascript file:

<script type="text/javascript">

It will translate into something like this:

<script type="text/javascript">