Adding JavaScript to your site is very similar to adding stylesheets.
Creating JavaScript Files
Select Appearance -> Add a new script. Give the file a name and just add the content.
The editor is smart enough to know that you're writing JavaScript and it will help you with syntax highlighting.
Inlcuding JavaScript
To include your JavaScript file in your html you probably need something like this in your head tag or before the closing body tag.
<script src="main.js" type="text/javascript"></script>
There's nothing special here but you're probably wondering how you get the full url to your script. Here's what your script tag should look like in Innota if your filename is main.js.
<script src="{{ js('main.js') }}" type="text/javascript"></script>
This will be rendered as something like this
<script src="https://cdn.innota.co/username/assets/main1231231312.js" type="text/javascript"></script>
The js() is a special function in Innota that's used to generate full url's to JavaScript files. The number 1455627260 in the filename is sort of a version number of the file. It's based on the last time the file was modified, and you really don't have to worry about it.
Versioning the scripts like this make it easier to cache the contents. Innota uses an aggressive caching strategy to cache all JavaScript files. This is one of the reasons why Innota is so fast.
You can read more about caching in Innota in our blog.
Concatenation
You're probably used to split all your scripts into more than one file. This is the recommended practice in Innota as well.
The problem in using multiple files is that your html traditionally looks something like this
<script src="jquery.js" type="text/javascript"></script>
<script src="bootstrap.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
This is bad for performance. The browser needs to make three requests to load all these files and there's always some overhead in making an HTTP request. This is where concatenating comes into the picture.
Here's how you would make the above example in Innota
<script src="{{ js_compiled() }}" type="text/javascript"></script>
That's it. When you publish your site, the above tag will look something like this
<script src="https://cdn.innota.co/username/assets/compiled1446981826.js" type="text/javascript"></script>
The function js_compiled() tells Innota to create a concatenated version of all of your scripts and give the full url to that file.
Notice
The files are concatenated in alphabetical order. Best practice is to use a number in front of the file to make the ordering easier. You could name the files something like this:
- 00-jquery.js
- 01-bootstrap.js
- 99-main.js
To make your site as fast as possible you should always try to use js_compiled() instead of including JavaScripts separately.
Minification
Your JavaScript files probably have lots of comments to make development easier. That's the way it should be, but comments are useless to the browser and from the browser's point of view they just make the file bigger.
To make the scripts as small as possible js_compiled() also automatically minifies the contents.
Minification is a simple process of removing all the things from the file that the browser doesn't need. For instance, all comments and empty spaces are removed. This makes the file smaller without sacrificing anything, and everyone saves precious bandwidth.