연습: 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가 지원됩니다.
DHTML DOM(문서 개체 모델) 요소
내장 개체
사용자 정의 변수, 함수 및 개체
외부 파일 참조
XML 코드 주석
ASP.NET AJAX 개체
Visual Studio의 IntelliSense 기능에 대한 자세한 내용은 IntelliSense 사용을 참조하십시오. JScript용 IntelliSense에 대한 내용은 JScript IntelliSense 개요를 참조하십시오.
사전 요구 사항
이 연습을 완료하려면 다음과 같은 구성 요소가 필요합니다.
- Visual Studio 2008 또는 Microsoft Visual Web Developer Express Edition
웹 사이트 및 페이지 만들기
먼저 ASP.NET 웹 사이트를 만들고 지원하는 개체, 참조 및 스크립트를 포함시켜야 합니다. 예를 들어 연습: 새 ASP.NET 웹 사이트 만들기 단계에 따라 이미 웹 사이트를 만든 경우에는 해당 웹 사이트를 사용하고 이 연습의 다음 단원으로 넘어가면 됩니다. 그렇지 않을 경우에는 다음 단계에 따라 새 웹 사이트와 페이지를 만듭니다.
웹 응용 프로그램을 만들려면
Visual Studio 2008 또는 Microsoft Visual Web Developer Express Edition을 엽니다.
파일 메뉴에서 새 웹 사이트를 클릭합니다.
새 웹 사이트 대화 상자가 표시됩니다.
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.
위치 목록에서 파일 시스템을 선택합니다.
위치 목록 옆에 있는 상자에 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.
예를 들어 폴더 이름을 C:\IntellisenseWebSite1로 입력합니다.
언어 목록에서 Visual Basic 또는 Visual C#을 클릭한 다음 확인을 클릭합니다.
선택한 프로그래밍 언어가 웹 사이트의 서버 기반 코드를 만드는 기본값이 됩니다. 이 연습에서는 브라우저에서 실행되는 클라이언트 스크립트로만 작업할 것이므로 이 옵션은 중요하지 않습니다.
Visual Web Developer에서 폴더 및 Default.aspx라는 새 페이지를 만듭니다. 새 페이지가 만들어지면 기본적으로 Visual Web Developer의 소스 뷰에 페이지가 표시되고 여기서 페이지의 HTML 요소를 볼 수 있습니다.
페이지에 컨트롤 및 JScript 코드 추가
이제 Default.aspx 페이지에 컨트롤과 JScript 코드를 추가할 수 있습니다.
컨트롤 및 JScript 코드를 추가하려면
디자인 탭을 클릭하여 디자인 뷰로 전환합니다.
도구 상자의 AJAX 확장 탭에서 UpdatePanel 컨트롤을 페이지로 끌어서 놓습니다.
도구 상자의 표준 탭에서 다음 컨트롤을 페이지로 끌어서 놓습니다.
컨트롤의 Text 속성을 다음과 같은 값으로 설정합니다.
Button1: Calculate
Label2: Radius Input
Label3: Volume Output
소스 탭을 클릭하여 소스 뷰로 전환합니다.
asp:ScriptManager 요소에 다음과 같이 강조 표시된 스크립트 참조를 추가합니다.
<asp:ScriptManager ID="ScriptManager1" > <Scripts> <asp:ScriptReference Path="JScript.js" /> </Scripts> </asp:ScriptManager>솔루션 탐색기에서 웹 사이트 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.
새 항목 추가 대화 상자가 표시됩니다.
Visual Studio에 설치되어 있는 템플릿에서 JScript 파일을 선택한 다음 추가를 클릭합니다.
Visual Studio에서 JScript.js라는 새 파일을 만들고 엽니다.
참고:.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(Dynamic HTML 문서 개체 모델) 요소, 내장 개체 및 사용자 정의 개체 등 다양한 형식의 클라이언트 개체에 대한 정보를 표시하는 데 사용됩니다. 또한 IntelliSense를 사용하여 XML 주석 처리된 스크립트와 Microsoft AJAX 라이브러리 개체에 대한 정보를 표시할 수도 있습니다.
JScript IntelliSense를 보려면
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(여는 괄호를 입력하면 IntelliSense를 통해 앞서 만든 calcVolume 함수에 기반한 XML 코드 주석이 편집기에 표시됩니다.
함수가 다음과 같이 보이도록 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);이 줄은 </script> 태그 내부에 있어야 하지만 displayVolume 함수 내부에 있어서는 안 됩니다.
참고:$addHandler 메서드는 Sys.UI.DomEvent 클래스의 addHandler 메서드에 대한 바로 가기를 제공하는 ASP.NET AJAX 함수입니다.
페이지를 저장하고 Ctrl+F5를 눌러 실행합니다.
반지름 값을 입력하고 단추를 클릭합니다.
JScript로 작성한 계산 결과가 두 번째 텍스트 상자에 표시됩니다.
다음 단계
이 연습에서는 JScript IntelliSense로 작업하는 방법에 대해 설명했습니다. Visual Studio에서 클라이언트 스크립트로 작업하는 방법에 대한 자세한 내용은 AJAX 및 클라이언트 기능 추가를 참조하십시오. JScript IntelliSense에 대한 자세한 내용은 JScript IntelliSense 개요를 참조하십시오.