チュートリアル: ASP.NET の JavaScript IntelliSense

[アーティクル]
05/27/2012

[このドキュメントはプレビューのみを目的としており、以降のリリースで変更される可能性があります。プレースホルダーとして空白のトピックが含まれています。]

このチュートリアルでは、 Visual Studio のクライアントスクリプトを開発するには、 IntelliSense を使用します。 IntelliSense を使用すると、言語リファレンスを簡単に利用できます。コーディング時に、コードエディターを離れて構文やパラメーター一覧などの言語要素を探す必要はありません。代わりに、編集モードにし、必要な、コードに挿入する言語要素を直接情報を保持できます。 Visual Studio は、 JavaScript などの ECMAScript 言語用の IntelliSense をサポートします。

Visual Studio は次の機能の IntelliSense をサポートしています:

DHTML DOM （Document Object Model）要素 (DOM)
組み込みオブジェクト
ユーザー定義の変数、関数、およびオブジェクト
外部ファイル参照
XML ドキュメントコメント
ASP.NET AJAX オブジェクト

Visual Studio の IntelliSense の機能の詳細については、 " " を参照してください IntelliSense の使用方法。 JavaScript の IntelliSense については、 " " を参照してください JavaScript の IntelliSense。

必須コンポーネント

このチュートリアルを実行するには、次のコンポーネントが必要です。

Visual Studio または Microsoft Visual Web Developer Express。

Web サイトおよびページの作成

最初に、ASP.NET Web サイトを作成し、サポートするオブジェクト、参照、およびスクリプトを含めます。「Walkthrough: Creating a new Web Site」の手順などを実行して Web サイトを作成済みの場合は、その Web サイトを使用し、このチュートリアルの次のセクションに進むことができます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。

Web アプリケーションを作成するには

Visual Studio または Microsoft Visual Web Developer Expressを開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします。

[新しい Web サイト] ダイアログボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[場所] ボックスの一覧で [ファイルシステム] をクリックします。
[場所] ボックスの隣にあるボックスに、Web サイトのページを格納するフォルダーの名前を入力します。

たとえば、「C:\IntellisenseWebSite1」というフォルダー名を入力します。
[言語] ボックスの一覧で、[Visual Basic] または [Visual C#] をクリックし、[OK] をクリックします。

選択したプログラミング言語は、Web サイトのサーバーベースのコードを作成する際の既定値になります。このチュートリアルでは、ブラウザーで実行するクライアントスクリプトのみを作成するので、この言語の選択は重要ではありません。

Visual Web Developer によりフォルダーが作成され、Default.aspx という名前の新しいページが作成されます。新しいページが作成されると、既定では、Visual Web Developer によってそのページがソースビューに表示され、ページの HTML 要素を確認できます。

ページにコントロールおよび JavaScript コードを追加します。

Default.aspx ページにコントロールおよび JavaScript コードを追加します。

コントロールおよび JavaScript コードを追加するには

[デザイン] タブをクリックしてデザインビューを表示します。
[ツールボックス] の [AJAX Extensions] タブから、UpdatePanel コントロールをページにドラッグします。
[ツールボックス] の [標準] タブから、次のコントロールをページにドラッグします。
- タイトル用の Label コントロール。
- 面積の計算を実行するための Button コントロール。
- キャプションおよび入力のための Label コントロールおよび TextBox コントロール。
- キャプションおよび出力のための Label コントロールおよび TextBox コントロール。
各コントロールの Text プロパティを、次の値に設定します。
- Button1: 計算
- Label2: 半径の入力
- Label3: 面積の出力
[ソース] タブをクリックして、ソースビューを表示します。

強調表示された次のスクリプト参照を asp:ScriptManager 要素に追加します。

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

ソリューションエクスプローラーで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。

[新しい項目の追加] ダイアログボックスが表示されます。
Visual Studio にインストールされたテンプレートのノード JavaScript ファイル は、追加をクリックします。

Visual Studioは JavaScript.js という名前の新しいファイルを作成し、開きます。

注意

.js ファイルの名前は、asp:ScriptManager 要素のスクリプト参照に表示される名前と一致する必要があります。

JavaScript.js ファイルに次のコードを追加します:

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;
}

JavaScript.js ファイルを保存して閉じます。

ついては、 ASP.NET でサポートされる他の XML ドキュメントコメントが方法: JavaScript の XML ドキュメントコメントを作成します。 XML ドキュメントコメント（JavaScript）表示されます。

JavaScript IntelliSense の表示

JavaScript IntelliSense がダイナミック HTML （DHTML）ドキュメントオブジェクトモデルの要素、組み込みオブジェクト、およびユーザー定義オブジェクトなどのクライアントオブジェクトの多く (DOM)の種類についての詳細を表示するために使用されます。 IntelliSense を使用すると、XML コメントのあるスクリプトや Microsoft Ajax Library オブジェクトについての情報を表示することもできます。

JavaScript IntelliSense を表示するには

Default.aspx ページに切り替えるか、Default.aspx ページを開いて、ソースビューを表示します。
form 要素の末尾に次の script 要素を追加します。
```
<script type="text/javascript">

</script>
```
script 要素内に次のスクリプトを入力します。
```
var displayTitle = document.
```
ピリオド (.) を入力すると、エディターによって document オブジェクトに適切な IntelliSense オプションが表示されます。
getElementById メソッドまでスクロールし、このメソッドをクリックするか、または Enter キーを押して、getElementById メソッドをスクリプトに追加します。
検索する要素の名前を入力してスクリプト行を完成させると、その行は次のように表示されます。
```
var displayTitle = document.getElementById("Label1");
```
Label1 にタイトルを表示するために、次のスクリプト行を追加します。
```
displayTitle.innerHTML = "Calculate Volume";
```
script 要素の末尾に、次の未完成の関数を追加します。
```
function calcArea(radiusParam)
{

}
```
calcArea 関数内で、次のスクリプトを入力します。
```
  var areaVal = Math.
```
ピリオド (.) を入力すると、エディターによって Math 組み込みオブジェクトに適切な IntelliSense オプションが表示されます。
PI プロパティまでスクロールして Enter キーを押し、PI プロパティをスクリプトに追加します。

スクリプトを完成させると、関数は次のようになります。

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

script 要素の末尾に、次の未完成の関数を追加します。
```
function displayVolume()
{

}
```
displayVolume 関数内で、次のスクリプトを入力します。
```
  radiusVal = $get("TextBox1").value;
  var areaVal = calcArea(
```
左かっこを入力すると、前に作成した calcArea 関数のパラメーター値に関する IntelliSense 情報がエディターによって表示されます。
スクリプト行を完成させると、スクリプトは次のようになります。
```
  var areaVal = calcArea(radiusVal);
```
次に、displayVolume 関数に以下のスクリプトを追加します。
```
  var volumeVal = calcVolume(
```
左かっこを入力すると、エディターは、以前に作成した calcVolume の関数に基づく XML ドキュメントコメントを表示するために、 IntelliSense を使用します。
displayVolume 関数を完成させると、関数は次のようになります。
```
function displayVolume()
{
  radiusVal = $get("TextBox1").value;
  var areaVal = calcArea(radiusVal);
  var volumeVal = calcVolume(areaVal);
  $get("TextBox2").value = areaVal;
}
```
注意

$get メソッドは、Sys.UI.DomElement クラスの getElementById メソッドへのショートカットを提供する ASP.NET AJAX 関数です。
script 要素の末尾に次のスクリプト行を入力します。
```
$addHandler(
```
左かっこを入力すると、ASP.NET AJAX の $addHandler メソッドに対する IntelliSense がエディターによって表示されます。
スクリプト行を完成させると、スクリプトは次のようになります。
```
$addHandler($get("Button1"), "click", displayVolume);
```
この行が displayVolume 関数内ではなく、</script> タグ内にあることを確認します。

注意

$addHandler メソッドは、Sys.UI.DomEvent クラスの addHandler メソッドへのショートカットを提供する ASP.NET AJAX 関数です。
ページを保存し、Ctrl キーを押しながら F5 キーを押してページを実行します。
半径の値を入力して、ボタンをクリックします。

、 JavaScript で作成した計算の結果を 2 番目のテキストボックスに表示されます。

次の手順

このチュートリアルでは、 JavaScript IntelliSense を使用する方法を示しました。 Visual Studio でクライアントスクリプトを操作する方法について学習することがあります。詳細については、「Adding Client Capabilities and AJAX」を参照してください。 JavaScript IntelliSense に関する詳細については、 " " を参照してください JavaScript の IntelliSense。

参照

次の方法で共有