Why does my inline JQuery code work, but that in `javascript` directory of theme does NOT work?

Question

I am running Moodle 2.6.5. I am writing a Moodle theme, and the JQuery code in .js files in the javascript directory of the theme was working a while ago, and since then I've been making changes to the PHP and CSS, but I don't think I changed anything in Javascript part or anything related to JavaScript.

Today I checked and found out that it is not working, while any inline JQuery code added to the layout files works. I confirmed by adding an alert statement at the top of a Javascript file <moodle-root>/theme/testy/javascript/slideshow.js:

$(document).ready(function() {
    alert('Meh!');
    ...
});

which did not work. Then I added the following script to the end of the <moodle-root>/theme/testy/layout/frontpage.php:

...
    <script>
        $(document).ready(function() {
            alert('Nah!');
        });
    </script>
</body>

which works.

---

STEPS I FOLLOWED TO ADD JQuery:

1. In <moodle-root>/theme/testy/lib.php:

   function theme_testy_page_init(moodle_page $page) {
       $page->requires->jquery();
   }
   

2. In config.php:

   $THEME->javascripts = array('slideshow', ...);
   

3. Then in <moodle-root>/theme/testy/javascript/slideshow.js:

   $(document).ready(function() {
       alert('Meh!');
       ...
   });
   

which does not alert anything.

Why is this happening? WHat should I do to fix it?