Walkthrough: JScript IntelliSense

Article
01/23/2013

In this walkthrough you will use IntelliSense to support client-script development in Visual Studio. IntelliSense makes language references easy to access. When coding, you do not have to leave the code editor to search for language elements, such as syntax or parameter lists. Instead, you can stay in editing mode, find the information that you need, and insert language elements directly into your code. Visual Studio supports IntelliSense for Microsoft JScript and other ECMAScript languages such as JavaScript.

Note

This document refers specifically to Jscript. However, IntelliSense in Visual Studio and Visual Web Developer works with all ECMAScript languages, which includes JavaScript.

Visual Studio supports IntelliSense for the following features:

DHTML Document Object Model (DOM) elements.
Intrinsic objects.
User-defined variables, functions, and objects.
External file references.
XML code comments.
ASP.NET AJAX objects.

For more information about IntelliSense functionality in Visual Studio, see Using IntelliSense. For information about IntelliSense for JScript, see JScript IntelliSense Overview.

Prerequisites

In order to complete this walkthrough, you need the following components:

Visual Studio 2010 or Microsoft Visual Web Developer Express.

Creating the Web Site and Page

To begin, you will create an ASP.NET Web site and include supporting objects, references, and script. If you have already created a Web site (for example, by following the steps in Walkthrough: Creating a new Web Site), you can use that Web site and go to the next section of this walkthrough. Otherwise, create a new Web site and page by using the following steps.

To create the Web application

Open Visual Studio 2010 or Microsoft Visual Web Developer Express.
On the File menu, click New Web Site.

The New Web Site dialog box is displayed.
Under Visual Studio installed templates, click ASP.NET Web Site.
From the Location list, select File System.
In the box next to the Location list, type the name of the folder where you want to keep the pages of the Web site.

For example, type the following folder name: C:\IntellisenseWebSite1
From the Language list, click Visual Basic or Visual C#, and then click OK.

The programming language that you select will be the default for creating the server-based code for the Web site. In this walkthrough, the choice is not important, because you will be working only with client script, which runs in the browser.

Visual Web Developer creates the folder and a new page named Default.aspx. By default, when a new page is created, Visual Web Developer displays the page in Source view, where you can see the page's HTML elements.

Adding Controls and JScript Code to the Page

You will now add controls and JScript code to the Default.aspx page.

To add controls and JScript code

Click the Design tab to switch to Design view.
From the AJAX Extensions tab in the Toolbox, drag a UpdatePanel control onto the page.
From the Standard tab in the Toolbox, drag the following controls onto the page:
- A Label control for the title.
- A Button control to calculate the volume.
- A Label control and a TextBox control for a caption and input.
- A Label control and a TextBox control for a caption and output.
Set the Text property of the controls to the following values:
- Button1: Calculate
- Label2: Radius Input
- Label3: Volume Output
Click the Source tab to switch to Source view.

Add the following highlighted script reference to the asp:ScriptManager element:

<asp:ScriptManager ID="ScriptManager1" runat="server">
  <Scripts>
    <asp:ScriptReference Path="JScript.js" />
  </Scripts>
</asp:ScriptManager>

In Solution Explorer, right-click the Web site name and then click Add New Item.

The Add New Item dialog box is displayed.
Under Visual Studio installed templates, select JScript File and then click Add.

Visual Studio creates and opens a new file that is named JScript.js.

Note

The name of the .js file must match the name that appears in the script reference in the asp:ScriptManager element.

Add the following code to the JScript.js file:

function calcVolume(areaValue)
{
  /// <summary>Determines the volume of a cicle based on an area parameter.</summary>
  /// <param name="area" type="Number">The area of the circle.</param>
  /// <returns type="Number">Returns a number that represents the area.</returns>
  var volumeVal;
  volumeVal = Math.pow(areaValue,3);
  return volumeVal;
}

Save and close the JScript.js file.

Viewing JScript IntelliSense

JScript IntelliSense is used to display details about many types of client objects, such as Dynamic HTML (DHTML) Document Object Model (DOM) elements, intrinsic objects, and user-defined objects. You can also use IntelliSense to display information about XML-commented script and about Microsoft Ajax Library objects.

To view JScript IntelliSense

Switch to or open the Default.aspx page and switch to Source view.
Add the following script element at the end of the form element:
```
<script type="text/javascript">

</script>
```
Inside the script element, type the following script:
```
var displayTitle = document.
```
When you type the period (.), the editor displays IntelliSense options that are appropriate to the document object.
Scroll to the getElementById method and click the method or press ENTER to add the getElementById method to the script.
Complete the line of script by typing the name of an element to find, so that the line appears as follows:
```
var displayTitle = document.getElementById("Label1");
```
Add the following line of script to display the title in Label1:
```
displayTitle.innerHTML = "Calculate Volume";
```
Add the following incomplete function to the end of the script element:
```
function calcArea(radiusParam)
{

}
```
In the calcArea function, type the following script:
```
  var areaVal = Math.
```
When you type the period (.), the editor displays IntelliSense options that are appropriate to the Math intrinsic object.
Scroll to the PI property and press ENTER to add the PI property to the script.

Complete the script so that the function appears as follows:

function calcArea(radiusParam)
{
  var areaVal = Math.PI * radiusParam * radiusParam;
  return areaVal;
}

Add the following incomplete function to the end of the script element:
```
function displayVolume()
{

}
```
In the displayVolume function, type the following script:
```
  radiusVal = $get("TextBox1").value;
  var areaVal = calcArea(
```
When you type the opening parenthesis, the editor displays IntelliSense information about the parameter value for the calcArea function that you created earlier.
Complete the line of script so that the script appears as follows:
```
  var areaVal = calcArea(radiusVal);
```
Continue adding to the displayVolume function by typing the following script:
```
  var volumeVal = calcVolume(
```
When you type the opening parenthesis, the editor uses IntelliSense to display XML code comments that are based on the calcVolume function that you created earlier.
Complete the displayVolume function so that the function appear as follows:
```
function displayVolume()
{
  radiusVal = $get("TextBox1").value;
  var areaVal = calcArea(radiusVal);
  var volumeVal = calcVolume(areaVal);
  $get("TextBox2").value = areaVal;
}
```
Note

The $get method is an ASP.NET AJAX function that provides a shortcut to the getElementById method of the Sys.UI.DomElement class.
Type the following line of script at the end of the script element:
```
$addHandler(
```
When you type the opening parenthesis, the editor displays IntelliSense for the ASP.NET AJAX $addHandler method.
Complete the line of script so that the script appears as follows:
```
$addHandler($get("Button1"), "click", displayVolume);
```
Make sure that this line is inside the </script> tag but not inside the displayVolume function.

Note

The $addHandler method is an ASP.NET AJAX function that provides a shortcut to the addHandler method of the Sys.UI.DomEvent class.
Save the page and then press CTRL+F5 to run it.
Enter a value for the radius and then click the button.

The result of the calculations that you created in JScript is displayed in the second text box.

Next Steps

This walkthrough has illustrated how to work with JScript IntelliSense. You might want to learn more about how to work with client script in Visual Studio. For details, see Adding Client Capabilities and AJAX. For more information about JScript IntelliSense, see JScript IntelliSense Overview.

Share via

Walkthrough: JScript IntelliSense

Prerequisites

Creating the Web Site and Page

To create the Web application

Adding Controls and JScript Code to the Page

To add controls and JScript code

Viewing JScript IntelliSense

To view JScript IntelliSense

Next Steps

See Also

Tasks

Concepts

Other Resources

Additional resources