チュートリアル : JScript IntelliSense
更新 : 2007 年 11 月
このチュートリアルでは、IntelliSense を使用して、Visual Studio でクライアント スクリプトを開発します。IntelliSense を使用すると、言語リファレンスを簡単に利用できます。コーディング時に、コード エディタを離れて構文やパラメータ一覧などの言語要素を探す必要はありません。代わりに、編集モードのまま必要な情報を検索し、言語要素をコードに直接挿入できます。Visual Studio では、Microsoft JScript 用および JavaScript などその他の ECMAScript 言語用の IntelliSense をサポートしています。
.gif "メモ") メモ : |
|---|
このドキュメントでは、Jscript に関してのみ説明します。ただし、Visual Studio および Visual Web Developer の IntelliSense は、JavaScript を含むすべての ECMAScript で動作します。 |
Visual Studio は、次の機能で IntelliSense をサポートします。
ダイナミック HTML (DHTML: Dynamic HTML) ドキュメント オブジェクト モデル (DOM: Document Object Model) 要素
組み込みオブジェクト
ユーザー定義の変数、関数、およびオブジェクト
外部ファイル参照
XML コード コメント
ASP.NET AJAX オブジェクト
Visual Studio の IntelliSense の機能の詳細については、「IntelliSense の使用方法」を参照してください。JScript 用 IntelliSense の詳細については、「JScript IntelliSense の概要」を参照してください。
前提条件
このチュートリアルを実行するには、次のコンポーネントが必要です。
- Visual Studio 2008 または Microsoft Visual Web Developer Express Edition。
Web サイトおよびページの作成
最初に、ASP.NET Web サイトを作成し、サポートするオブジェクト、参照、およびスクリプトを含めます。「チュートリアル : 新しい ASP.NET Web サイトの作成」の手順などを実行して Web サイトを作成済みの場合は、その Web サイトを使用し、このチュートリアルの次のセクションに進むことができます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。
Web アプリケーションを作成するには
Visual Studio 2008 または Microsoft Visual Web Developer Express Edition を開きます。
[ファイル] メニューの [新しい 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 要素を確認できます。
ページへのコントロールおよび JScript コードの追加
ここで、Default.aspx ページにコントロールおよび JScript コードを追加します。
コントロールと JScript コードを追加するには
[デザイン] タブをクリックしてデザイン ビューを表示します。
[ツールボックス] の [AJAX Extensions] タブから、UpdatePanel コントロールをページにドラッグします。
[ツールボックス] の [標準] タブから、次のコントロールをページにドラッグします。
各コントロールの Text プロパティを、次の値に設定します。
Button1: 計算
Label2: 半径の入力
Label3: 面積の出力
[ソース] タブをクリックして、ソース ビューを表示します。
強調表示された次のスクリプト参照を asp:ScriptManager 要素に追加します。
<asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Path="JScript.js" /> </Scripts> </asp:ScriptManager>ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の下で、[JScript ファイル] を選択し、[追加] をクリックします。
Visual Studio によって JScript.js という名前の新しい JScript ファイルが作成され、開かれます。
メモ :.js ファイルの名前は、asp:ScriptManager 要素のスクリプト参照に表示される名前と一致する必要があります。
JScript.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; }JScript.js ファイルを保存して、閉じます。
JScript IntelliSense の表示
JScript IntelliSense は、DHTML DOM 要素、組み込みオブジェクト、ユーザー定義のオブジェクトなどの多くの種類のクライアント オブジェクトについての詳細を表示するために使用されます。IntelliSense を使用すると、XML コメントのあるスクリプトや Microsoft AJAX Library オブジェクトについての情報を表示することもできます。
JScript 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 キーを押してページを実行します。
半径の値を入力して、ボタンをクリックします。
JScript で作成した計算の結果が、2 番目のテキスト ボックスに表示されます。
次の手順
このチュートリアルでは、JScript IntelliSense を操作する方法を説明しています。Visual Studio のクライアント スクリプトの操作方法について、より詳細な学習が必要な場合もあります。詳細については、「AJAX およびクライアント機能の追加」を参照してください。JScript IntelliSense の詳細については、「JScript IntelliSense の概要」を参照してください。