View source for Adding JavaScript

==== Explanation ==== <!--T:36-->

<!--T:37-->
If you check the source code of the index.php from the Protostar template, you can see that the statements
</translate>

 JHtml::_('bootstrap.framework');

<translate><!--T:38-->
is added way before the statement</translate>

 <jdoc:include type="head" />

<translate><!--T:39-->
this can make you think that the framework files and your 3rd party files using methods like</translate> 

 $doc->addScript('templates/'.$this->template.'/js/fancy-script.js');
 $doc->addScript('media/com_fancy/js/fancy-script.js');

<translate>
<!--T:40-->
will be added in the right order at the right spot, '''but that is not the case''', because extension files and template override files are processed '''first''' and the index.php file of your current template is processed the '''last'''. This will cause that your custom JS files get inserted first and the framework files inserted from the template get inserted after.
</translate> 

<translate>
<!--T:41-->
This happens because the Joomla! API (such as $doc->addScript) uses an array to store the JS files paths and they get rendered in the document in the same order they where inserted into that array (FIFO stack). Also, once a file path is inserted on the array and another API call tries to insert the same file this action is ignored to avoid duplicates. It also means that the order of the files is not altered when the same files is attempted to be inserted several times.
</translate>

<translate><!--T:42-->
Having said that doing this</translate> 

 JHtml::_('jquery.framework');
 $doc->addScript('templates/'.$this->template.'/js/fancy-script.js');

<translate><!--T:43-->
at your custom templates overrides and extension, is '''required''' and does not cause harm or conflict with the call</translate> 

 JHtml::_('bootstrap.framework');

<translate><!--T:44-->
at your template index.php file.</translate>

<translate>== External Links == <!--T:45--></translate>

{{JVer|2.5}} https://api.joomla.org/cms-2.5/classes/JHtmlBehavior.html#method_framework

{{JVer|3.x}} https://api.joomla.org/cms-3/classes/JHtmlBehavior.html#method_framework

http://en.wikipedia.org/wiki/JavaScript

http://www.w3schools.com/js/default.asp

http://mootools.net/

http://jquery.com/

<noinclude>
<translate>
<!--T:46-->
[[Category:Templates]]
[[Category:Modules]]
[[Category:Components]]
[[Category:Plugins]]
[[Category:Tutorials]]
[[Category:JavaScript]]
</translate>
</noinclude>