Storing and Using Scripts
JavaScript can be embedded directly inside a web page or stored as a separate script file. Before getting started with the language, let’s look at where you can write JavaScript, how you store it, and how you can include it in your pages.
Embed Script on a Page
You can embed JavaScript code directly inside a page. This is true of .html pages and .cshtml views (and other .NET pages). The JavaScript will execute where it is found within the page. Later in this chapter, you will see how you can use events to determine when your JavaScript code should execute.
The JavaScript code placed inside a page should be contained within a <script> tag. The <script> tag looks like this.
<script type="text/javascript">
//my client-side code
</script>
This <script> tag can sit anywhere within your HTML markup. However, it is recommended that you place the <script> tag (and JavaScript it contains) at the end of your page just before the closing </body> tag. Placing it elsewhere in the page makes the page load slower. This also ensures the DOM is loaded before your script is executed.
Code encountered by the browser’s JavaScript parser that is not within a function (see “Functions” later in this chapter) will be executed as it is found. For example, the following alert will pop up as the page loads or is refreshed.
<script type="text/javascript">
alert('hello world'),
</script>
Code should be placed in functions and then called as part of a page or user event. We cover both functions and events later in the chapter. In fact, if you do need to run code when the page loads, there is an event for that purpose.
Create a Script File
If you are writing more than a few lines of JavaScript for your pages, it is often a best practice to store this code in its own file. This keeps your view markup separate from your code. It also increases the likelihood that you may be able to write some reusable JavaScript.
You create a JavaScript code file as any text file using the .js extension. Visual Studio allows you to create a JavaScript file for your project by right-clicking the project in Solution Explorer and choosing File, New Item. You can store your JavaScript files anywhere in your solution. It is common to create a directory named src (for source) to do so.
To use a JavaScript file on a web page, you can again use the <script> tag. In this case you use the src attribute of <script> to indicate the location of the script you want to use. The following shows an example. Again, be sure to place this at the end of your HTML markup, before the closing </body> tag.
<script src="~/lib/jquery/jquery.js"></script>
Visual Studio is not required for anything we discuss in this section. You can create everything here in a standard .html page, edit it in Notepad, add your JavaScript, and open the page in a browser. Of course, Visual Studio makes it easier to write JavaScript; this includes IntelliSense for the language. JavaScript is also part of the ASP.NET Model-View-Controller (MVC) projects you write using Visual Studio.