Exercise 3: What's New in the JavaScript Editor

Writing or editing JavaScript code is not an easy task, especially when your application starts to grow in size and you find yourself dealing with long files and hundreds of functions. Script developers usually have to do some extra work to maintain code legibility and navigate across files. With the inclusion of JavaScript libraries like jQuery, script navigation has become a challenge itself because of the code length.

Visual Studio has renewed the JavaScript editor with the promise to make the code mode accessible and organized. Many Visual Studio features that already existed in C# or VB editors are now implemented in the JavaScript editor: Go To Definition, automatic indentation, documentation and validation when you are writing. With the renewed IntelliSense list you will have the JavaScript function catalog at your fingertips.

In this exercise, you will learn some of the new features and improvements of JavaScript editor. You will browse sample files and discover each of the new characteristics that will make your JavaScript programming more efficient within Visual Studio 11.

Task 1 – JavaScript Editor New Features

This task will introduce you to some of the new JavaScript editor features, which focus on organizing your code and bringing a better user experience.

1. If not already opened, start Visual Studio and open the WhatsNewASPNET.sln solution located in the Source\WhatsNewASPNET folder of this lab.

2. Press F5 to run the application, then click the JavaScript link in the navigation bar. Refresh the page several times and check how the counter increments.

   Figure 28

   Page counter

3. Close the browser and go back to Visual Studio.

4. Open the JavaScript.aspx page and locate the <script> block (shown below).

   The following code uses HTML5 local storage to store a pageLoadCount variable that stores the number of times the page has been visited by the current user. Local Storage is a client-side key-value database introduced with the HTML5 standard. The data is saved on the local machine, inside the user’s browser.

   HTML

   <script> addCount(1); document.getElementById('count').innerHTML = getCount(); function getCount() { var storage = window.localStorage; if (!storage.pageLoadCount) storage.pageLoadCount = 0; return storage.pageLoadCount; } function addCount(value) { window.localStorage.pageLoadCount = parseInt(getCount(), 10) + value; } ... </script>

5. Edit the code and notice that IntelliSense for JavaScript includes HTML5 features, like local storage, and their inner methods.

   Figure 29

   HTML5 JavaScript features in JavaScript

6. Click any opening bracket ({) from the scripting code and notice that the brackets are highlighted.

   Figure 30

   Brackets are highlighted

7. Uncomment the function testAutoAlign() (you can use CTRL+K;CTRL+U) and locate the cursor inside the function code. Press enter to append a second line. Notice that the code is now aligned and auto-indented.

   Figure 31

   JavaScript code is auto aligned

Task 2 – Validating JavaScript

In this task, you will discover the new JavaScript validation for the ECMAScript5 standard. This feature will help you to write compliant JavaScript code, while preventing scripting issues before site deployment.

1. Open ECMA5script5.js located under the Scripts\custom project folder. You will now test validation for ECMAScript5 standard.

   JavaScript

   "use strict"; if (true) { function StrictModeError() { } }

   You can check out the “use strict” direction in the first line of the file, which enables ECMAScript5 strict mode. This mode consists in a subset of the language that clarifies ambiguities from the past edition, and adds some new features, such as getters and setters, library support for JSON, and more complete reflection on object properties.

2. Open the Error List if not already opened (View menu | Error List). Notice the function declaration is underlined. This is because in ECMA5 standard functions cannot be nested inside language structures. In the error list below you will see the warning details.

   Figure 32

   JavaScript validation error message

3. Comment out the “use strict” direction and notice that errors disappear, but the warnings remain.

4. In the last line of the file, write any string like “test” (include the quotation marks to indicate it is as string). Write a period next to the string to display the IntelliSense list, and select the “trim” option.

   In ECMAScript5 standard, string values and variables also have string methods defined, like trim, uppercase, search and replace.

   Figure 33

   IntelliSense list in JavaScript

Task 3 – XML Documentation for JavaScript

In this task, you will explore Visual Studio features for XML documentation in JavaScript. You will see the JavaScript IntelliSense list now shows the XML documentation of each function. Additionally, you will discover the navigation feature in JavaScript.

1. Open XMLDoc.js file located in Scripts/custom project folder. This file contains XML documentation on each of the JavaScript functions.

   Figure 34

   JavaScript XML documentation integrated to IntelliSense

2. Below add function in XMLDoc.js file, create a new function named test.

3. In the test function, call the multiply function that receives two parameters. Notice the tooltip box is showing the multiply function documentation.

   JavaScript

   function test() { }

     multiply(

   function test() { }
   Figure 35

   XML documentation for JavaScript functions

4. Complete the function call statement and type a dot to open the IntelliSense list on the returned value. Notice that Visual Studio is detecting the return value in the documentation, treating the value as a number.

   Figure 36

   XML documentation for return types

5. Now, insert a call to add function. Notice that the JavaScript editor now supports function overloads. When you write a function name, you will be able to select any of the available overloads specified in the documentation.

   Figure 37

   XML documentation for overloads

6. Open GotoDefinition.js file and locate the $().html() function call. Locate the cursor on html.
7. Press F12 and navigate to the definition. Notice you can now access and browse your JavaScript code without using the Find tool.

8. Locate the cursor on the jQuery instruction prior to the signature block at the bottom of the code file. Press F12. You will navigate to the jQuery library file. Notice you can also navigate across the jQuery files using F12.

   Figure 38

   Navigating to jQuery definitions

   Note:

    Make sure that GotoDefinition.js has no syntax errors before saving the file.