You can't hide all source code as browser needs it. Think how firebug or dom inspector works. If you change something, it affects what you see in the browser screen.
But there are ways to make it "kinda invisible" or "almost unreadable". For example, if you use some development tools or scripts which build script on the fly.
Have a look at my site http://elmin.org and try to read the source code. As you see, you can't see much and even if you see, it is too complex to analyse or understand.
In this case, google web toolkit is used.
As pointed out above, obfuscating your code is a solution, but it's not enough, because, although it is hard, but programmers could decipher your code and "steal" your script.
I would say one idea is to restrict access to your external js files from outside the page you embed your code in. So, if someone tries to access that file in browser, the access will be denied to the script source. In php or whatever serverside language you are using, you can control access by comparing the request_uri server variable to you domain.
But you should realize the risk of obfuscating your code. Just imagine it replaces a clearly readable JavaScript snippet:
window.onload = function() { alert("Hi " + username) };
by:
eval(unescape("var%20_0xc5b2%3D%5B%22onload%22%2C%22Hi%20%22%5D%3Bwindow"+
"%5B_0xc5b2%5B0%5D%5D%3Dfunction%20%28%29%7Balert%28_0xc5b2%5B1%5D+username"+
"%29%3B%7D%20%3B"));
The risk is many antivirus or other online protection software may warn your visitors that it is not safe as may not detect whether the javascript code there is attempting to do something harmful. So, it may fail the verification.