Why is the default js files outside the theme package?

Question

I am developing a new admin module and needs to customize the magento admin panel. i've created a new theme in default package of adminhtml. In the skin folder (skin/default/mytheme) i've included my css files and js files. And i've included them via my layout xml file

<?xml version="1.0"?>
<layout>
  <default>        
    <reference name="head">
      <action method="addJs"><script>main.js</script></action>
      <action method="addJs"><script>bootstrap/bootstrap.min.js</script></action>
      <action method="addCss"><stylesheet>css/bootstrap.min.css</stylesheet></action>
    </reference>
  </default> 
</layout>

Although the css files are loaded, the js files returns 404.

`js/` folder

I've found that magento saves most of the js files in the js/ folder in root. On moving my files here, it works perfectly.

Why does magento save js files here?

How can i save my js files in my package and still include in the header?

Answer 1

The js/ folder in the root is more for supporting libraries than scripts directly relating to your project or extension. Kind of like the lib/ folder in the root for PHP libraries.

To include javascript from the skin folder (either frontend or adminhtml) use the following XML snippet

<action method="addItem"><type>skin_js</type><name>js/yourfile.js</name><params/><if/></action>

This will include the javascript from the template folder. In my opinion placing your extensions Javascript in the js/ folder is back practice.

Answer 2

When you try to load JavaScript files from your skin folder you have to do this like:

    <action method="addItem">
        <type>skin_js</type>
        <name>js/my_js.js</name>
        <params/>
    </action>

Answer 3

In the js folder are usually placed the files that are theme independent. For example libraries (prototype, jquery, bootstrap). You can also add js files in the skin folder of they depend strictly on your theme (they expect some specific markup). You can add these files in the DOM using:

<action method="addItem"><type>skin_js</type><script>js/some_file.js</script></action>

The path specified in <script> is relative to the theme folder inside skin.