A template file is an html file, but it also contains knowledge of dynamic data that PHP passes through it - the contents of the menu and sidebar from the admin panel, as well as the footer and login status. You basically have to work with it. The end product of template files inevitably does create an "index.html" as far as the client-end is concerned, and as far as Javascript would be. The files get glued together on the server end and no one is the wiser.
Copy stuff the head of the html document on up to the header.tpl (if it's necessary and doesn't already exist in some form, be wise), and stuff from the body of the html document into the template.tpl. Javascript belongs just before the closing body tag of template.tpl inside <script> tags, or otherwise linked to. If it's jQuery and not Javascript, remember to include the jQuery library before the script.
But what is it that you're trying to do? Creating a button to dynamically swap out the css file to give people a dark colored version of the same exact site? Yes, that could indeed be done with a bit of Javascript.
Here, I've made up a bit of a demo, I hope it helps:
http://jsbin.com/bifuzuya/1/edit?html,output