Why we need it? - In order to make some programmatic changes to the page. Have in mind - it works on the client side that means no JavaScript can be executed on the server. In general terms, that means, JavaScript does not do any server works like connecting to the database, calculating user rights, etc.
But there are several exceptions. For example, there are special ways for JavaScript to connect to the database, like using some special object types, or dlls. They can be used in JavaScript like assemblies that contain definitions of objects for implementing some logic of works. My own mind is, it's not correct to use such decisions in your work, because someone can view your JavaScript code as it's written down in clear way to the client browser. And of course, if you have written SQL database name, server name, username and password in clear format, it's not secure as you already understand.
Some other exceptions: JavaScript can be encrypted so that a general user of browser can not read your JavaScript code, as it's converted to some special character set, not recognizable for human eyes. But this kind of decision also contains some risk. There are a ways to decrypt back your encrypted code. Are you ready to take all the risk on your own? (But encrypting your code makes it a little harder for other coders to take your code and use it in their projects. It's useful if your code contains some high-intellectual logic that you don't want others to see and to still for example)

So, in general, JavaScript is used to make some little logical works on the client side, also for designing purposes, for example changing background color dynamically, or as an answer on some client action, not refreshing all the page.

Have you ever heard about AJAX technology? - A technology that is in most cases used to refresh some client area without refreshing the entire page. AJAX technology mainly uses JavaScript, in other words it automatically generates a JavaScript code to the client browser. But don't take too much; it doesn't make any server-side works at client side. For example if AJAX is used to collapse some part of page and expand another one, it's executed fully at client side, without refreshing the page. But if you use AJAX for refreshing the client area that contains exchange rates, and those rates are loaded from the database, then it will work fine, but not only at client side. In this case Page's Load event occurs also. But that little mechanism that sends the request to the server and then handles the request and refreshes the little area on the page, that's exactly a JavaScript, and acts as a part of AJAX generally.

How to learn it? Have a look at Microsoft Developer Network (MSDN) Library (http://msdn.microsoft.com).

Why I wrote this? I just opened internet explorer and hit Escape button as I saw browser was trying to enter my home page. Page loading process canceled and displayed the message, and a little link, possibly automatically generated by the browser, saying "click here to refresh", displaying a JavaScript code on mouse-over:

"javascirpt:location.replace("http://MyHomePage")".

Good JavaScript sample to begin with. Give a little attention to it and you will understand it's very useful.

And have in mind, here I've mentioned a fact that is often forgotten by the coders: even refreshing only a little part of ASP.NET page using AJAX, it makes a whole page to reload, and all the code contained in Page_Load event handler is executed.

Thank you for your time.