I am trying to create a simple carousel without creating a block. But the problem is, I am not entirely sure where javascript should be hand coded. I already know jQuery is saved in the the core and that javascript files should be referenced in the header.php file. However, what I need to know is where would I save the javascript that you would normally type within the head region of a standard HTML document?

So far I have tried the following...

Inside the header.php I am calling a plugin for the javascript:

<script type="text/javascript" src="<?=$this->getThemePath()?>/js/jquery.carousel.min.js"></script>

and inside a HTML block (just testing to see if I can add javascript on the fly):

<script type="text/javascript">
$(function(){
$("div.foo").carousel();
});

<div class="foo">

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>

....
</ul>
</div>

At the moment this does not work. I'm just wondering if the javascript that I am pasting into the HTML block needs to be saved into javascript file for it to be called from the header.php???

I have previously made a similar post, but felt it wasn't specific enough to what I was asking for, so apologies if you may have come across something similar before.