ASP.NET에서 JavaScript 사용
Bill Evjen
요약: ASP .NET 응용 프로그램에서 JavaScript를 적용하는 방법을 알아봅니다. 컨트롤 포커스, 단추 롤오버 및 경고 수행 방식, 그리고 브라우저의 상태 표시줄에 텍스트를 표시하는 방법에 대해서도 알아봅니다.
목차
소개
서버 컨트롤에 JavaScript 추가
간단한 단추 롤오버 수행
컨트롤 포커스 설정
컨트롤 포커스 동적 변경
복잡한 JavaScript 함수 사용
개별 파일(.js)로 JavaScript 저장
요약
소개
웹 개발자들은 오랜 기간 동안 서버 쪽 처리 방식과 클라이언트 쪽 처리 방식을 적절히 조합하여 사용함으로써 브라우저가 지닌 기술상의 한계를 해결해왔습니다. 클라이언트 쪽의 논리 및 응용 프로그램 처리 방식을 사용하면 브라우저 기반 응용 프로그램의 응답성을 더욱 개선하여 더욱 빠른 속도를 내도록 할 수 있습니다. 이전에는 클라이언트 쪽 개발 시 대부분의 개발자들이 JavaScript를 사용하고, 서버 쪽 Microsoft Visual Basic Scripting Edition 또는 Microsoft JScript 코드와 함께 기존의 Microsoft Active Server Pages에 이 프로그래밍 언어를 조합해서 사용했습니다. 하지만 현재의 Microsoft ASP.NET과 새로운 모델을 사용하면 웹 개발자들이 자신의 ASP .NET 페이지에서 JavaScript 함수를 제대로 사용할 수 있습니다.
본 문서에서는 과거의 JavaScirpt 함수를 현재 사용할 수 있게 된 방법들에 대해 설명합니다. 이러한 작업은 여러 가지 방식으로 수행될 수 있으며 본 문서에서도 이와 관련한 다양한 가능성들에 대해 살펴보도록 하겠습니다. 또한 몇 가지 간단한 예제를 통해 ASP .NET 페이지에서 JavaScript를 사용할 수 있는 일반적인 사용 방식에 대해서도 설명하겠습니다.
서버 컨트롤에 JavaScript 추가
ASP .NET 페이지에 존재하는 특정 서버 컨트롤에 JavaScript를 추가하는 작업은 매우 간단합니다. 단추 서버 컨트롤을 한 예로 살펴봅시다. Microsoft Visual Studio .NET 또는 ASP.NET Web Matrix를 사용하여 페이지에 Button HTML 서버 컨트롤(HtmlInputButton 클래스)을 끌어서 놓으면 다음과 같이 구성됩니다.
<INPUT type="button" value="Button" runat="server" id="Button1">
이 단추는 코드를 숨긴 상태나 ASP .NET 페이지의 서버 쪽 스크립트에서 프로그래밍 방식으로 조작할 수 있는 일반적인 단추입니다. 예를 들어 페이지가 생성될 때 단추 텍스트를 할당하도록 하려면, 컨트롤을 마우스 오른쪽 단추로 클릭하고 서버 컨트롤로 실행을 선택하여 이 요소를 HTML 서버 컨트롤로 전환한 후에 단순히 단추의 값 속성을 사용하면 됩니다.
Visual Basic .NET
Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
Button1.Value = DateTime.Now.ToString()
End Sub
Visual C# .NET
void Page_Load(object sender, EventArgs e) {
Button1.Value = DateTime.Now.ToString();
}
위와 같이 하면 단추 텍스트로 날짜와 시간이 표시되는 단추가 페이지에 표시됩니다.
그림 1. 단추에 날짜와 시간 표시
여기서 한 가지 중요한 사실은 이 ASP .NET 페이지는 페이지를 생성한 서버에서 시간 정보를 가져온다는 것입니다. 따라서 웹 서버가 미국 중앙 표준 시간대(CST -6 GMT) 지역과 같은 특정 지역 내에 있을 경우, 이 페이지를 요청하는 사용자는 세계 어느 곳에서든 모두 동일한 시간을 보게 됩니다.
그러면 페이지를 보고 있는 사용자의 지역 시간을 단추에 표시하려면 어떻게 해야 할까요 가장 간단한 방법은 클라이언트 쪽에 JavaScript를 사용하는 것입니다.
이 예에서는 단추 웹 서버 컨트롤에 표시된 시간을 최종 사용자(웹 페이지를 보고 있는 사람)의 컴퓨터 시간으로 바꿔보겠습니다. 다음 코드는 이러한 작업을 수행하는 방법을 보여줍니다.:
Visual Basic .NET
<%@ Page Language="VB" %>
<script runat="server">
Sub Button1_Click(sender As Object, e As EventArgs)
Response.Write("Postback!")
End Sub
</script>
<html>
<head>
</head>
<body onload="javascript:document.forms[0]['Button1'].value=Date();">
<form runat="server">
<p>
<asp:Button id="Button1" onclick="Button1_Click"
runat="server" Font-Bold="True" Font-Names="Verdana"
Font-Size="Larger"></asp:Button>
</p>
</form>
</body>
</html>
Visual C# .NET
<%@ Page Language="C#" %>
<script runat="server">
void Button1_Click(object sender, EventArgs e) {
Response.Write("Postback!");
}
</script>
<html>
<head>
</head>
<body onload="javascript:document.forms[0]['Button1'].value=Date();">
<form runat="server">
<p>
<asp:Button id="Button1" onclick="Button1_Click"
runat="server" Font-Bold="True" Font-Names="Verdana"
Font-Size="Larger"></asp:Button>
</p>
</form>
</body>
</html>
이 코드에서는 클라이언트의 브라우저로 전송되기 전에 단추의 일부 특성이 서버 쪽에 할당되는 방식을 이해해야 합니다. 이 예에서 단추의 텍스트는 글꼴이 Verdana로 변경되었을 뿐만 아니라 특정 크기의 굵은 글꼴 유형으로 변경되었습니다. 클라이언트에서 단추의 HTML 코드를 수신하면 클라이언트 쪽 JavaScript가 단추의 텍스트를 최종 사용자 컴퓨터에 설정된 현재 시간으로 변경합니다. 전체 페이지에 생성된 HTML 코드는 다음과 같이 될 것입니다.
<html>
<head></head>
<body onload="javascript:document.forms[0]['Button1'].value=Date();">
<form name="_ctl0" method="post" action="NewFile.aspx" id="_ctl0">
<input type="hidden" name="__VIEWSTATE"
value="dDwtNTMwNzcxMzI0Ozs+fGKi5Pun0h+xthnqTZtIR9yEzL4=" />
<p>
<input type="submit" name="Button1" value="" id="Button1"
style="font-family:Verdana;font-size:Larger;font-weight:bold;" />
</p>
</form>
</body>
</html>
단추를 클릭하면 여전히 포스트백(postback)이 표시되며(Response.Write 명령으로 확인) 페이지를 다시 렌더링할 때 단추 컨트롤에 새로운 시간이 표시됩니다. 이 결과는 그림 2와 같이 나타납니다.
그림 2. 날짜 단추 클릭
여기에서는 onload 특성을 사용하여 페이지의 <body> 요소에 일부 JavaScript를 직접 배치했습니다. onload 특성 값으로는 첫 번째 <form> 섹션(HTML에서 여러 폼 포함 가능)에 있는 Button1 HTML 요소로 지정했습니다.
이러한 방법은 ASP .NET 웹 서버 컨트롤에 JavaScript를 쉽게 추가하여 사용할 수 있는 방법입니다. 하지만 다음 코드 일부 예제와 같이 단추 자체에 JavaScript 명령을 쉽게 추가할 수도 있습니다.
Visual Basic .NET
<%@ Page Language="VB" %>
<script runat="server">
Sub Page_Load(sender As Object, e As EventArgs)
Button1.Attributes.Add("onclick", _
"javascript:alert('ALERT ALERT!!!')")
End Sub
</script>
<html>
<head>
</head>
<body>
<form runat="server">
<asp:Button id="Button1" runat="server" Font-Bold="True"
Font-Names="Verdana" Font-Size="Larger"
Text="Click Me!"></asp:Button>
</form>
</body>
</html>
Visual C# .NET
<%@ Page Language="C#" %>
<script runat="server">
void Page_Load(object sender, EventArgs e) {
Button1.Attributes.Add("onclick",
"javascript:alert('ALERT ALERT!!!')");
}
</script>
<html>
<head>
</head>
<body>
<form runat="server">
<asp:Button id="Button1" runat="server" Font-Bold="True"
Font-Names="Verdana" Font-Size="Larger"
Text="Click Me!"></asp:Button>
</form>
</body>
</html>
서버 컨트롤의 attribute 속성을 사용하면 컨트롤 관련 추가 JavaScript를 컨트롤에 가장 쉽게 추가할 수 있습니다. 이 예에서 JavaScript는 스크립트 자체 뿐만 아니라 스크립트의 키와 함께(이 둘은 모두 string 값으로 표시됨) Attribute.Add 속성을 사용하여 추가되었습니다.
간단한 단추 롤오버 수행
웹 페이지에서 사용되는 단추의 경우 웹 개발자들이 가장 즐겨 사용하길 원하는 기능 중 하나는 단추의 롤오버 효과입니다. 롤오버란 최종 사용자가 웹 페이지에서 특정 단추 위로 마우스를 이동했을 때(단추를 클릭하지는 않음) 단추의 색이나 모양이 바뀌는 효과입니다. 이러한 기능은 특히 단추가 많은 웹 페이지에서 유용하며, 일반적으로 단추를 클릭하기 전에 먼저 단추에 대한 설명을 최종 사용자에게 제공한다는 면에서 여러 가지 장점이 있습니다.
이러한 효과는 서버 컨트롤이 사용되지 않던 과거에는 구현하기 쉬운 효과였으며, 현재는 서버 컨트롤에서도 어렵지 않게 구현할 수 있게 되었습니다. 다음 코드는 이러한 동작을 수행하기 위한 예제입니다.
Visual Basic .NET
<%@ Page Language="VB" %>
<script runat="server">
Sub ImageButton1_Click(sender As Object, e As ImageClickEventArgs)
Label1.Text = "Postback!"
End Sub
</script>
<html>
<head></head>
<body>
<form runat="server">
<p>
<asp:ImageButton id="ImageButton1"
onmouseover="this.src='button2.jpg'"
onclick="ImageButton1_Click"
onmouseout="this.src='button1.jpg'" runat="server"
ImageUrl="button1.jpg"></asp:ImageButton>
</p>
<p>
<asp:Label id="Label1" runat="server" />
</p>
</form>
</body>
</html>
Visual C# .NET
<%@ Page Language="C#" %>
<script runat="server">
void ImageButton1_Click(object sender, ImageClickEventArgs e) {
Label1.Text = "Postback!";
}
</script>
<html>
<head></head>
<body>
<form runat="server">
<p>
<asp:ImageButton id="ImageButton1"
onmouseover="this.src='button2.jpg'"
onclick="ImageButton1_Click"
onmouseout="this.src='button1.jpg'" runat="server"
ImageUrl="button1.jpg"></asp:ImageButton>
</p>
<p>
<asp:Label id="Label1" runat="server" />
</p>
</form>
</body>
</html>
<body> 요소를 통해 서버 컨트롤에 JavaScript를 할당하는 대신 이 예에서는 컨트롤의 onmouseover 이벤트와 onmouseout 이벤트를 사용하여 각 이벤트에 JavaScript 값을 할당했습니다. onmouseover 이벤트는 최종 사용자가 컨트롤 위로 마우스를 가져갈 때 발생하며 onmouseout 이벤트는 최종 사용자가 컨트롤 위에 놓인 마우스를 컨트롤 외부로 치울 때 발생합니다. 이 예에서는 단추 위에 마우스를 놓을 때 한 이미지를 표시하고 단추에서 마우스를 치우거나 페이지가 로드될 때 원래 이미지를 표시하도록 설정했습니다.
이와 같은 컨트롤에서 직접 작업 중인 경우에는 <body> 요소에서 JavaScript를 사용할 때와 같이 form에 컨트롤을 지정하는 대신, 변경하려는 속성 바로 뒤에 this 키워드를 사용할 수 있습니다.
컨트롤 포커스 설정
웹 폼을 구성할 때는 웹 서버 컨트롤의 포커스를 설정하도록 속성을 활성화할 수 없습니다(이 기능은 ASP .NET 2.0 Whidbey에 추가될 예정임). 따라서 .NET Framework 1.0 또는 1.1을 사용할 때 이 작업을 수행하려면 다른 방식으로 해야 합니다. 이 작업은 ASP.NET이 나오기 전에 사용했던 방식대로 JavaScript를 사용하여 수행할 수 있습니다.
예를 들어 ASP.NET 페이지에 여러 텍스트 상자가 있는 경우, 페이지의 <body> 태그에 다음 코드를 사용하면 페이지가 로드될 때 첫 번째 TextBox 컨트롤에 포커스를 설정할 수 있습니다.
<body onload="document.forms[0]['TextBox1'].focus();">
이러한 방식을 사용하면 페이지가 로드될 때 ID가 TextBox1인 요소에 포커스가 적용되어 최종 사용자는 마우스를 사용하여 포커스 위치를 지정하지 않아도 텍스트 입력을 즉시 시작할 수 있습니다.
컨트롤 포커스 동적 변경
ASP.NET 페이지에서 포커스를 동적으로 변경하려면 다음과 같이 <body> 태그를 HTML 서버 컨트롤로 전환합니다.
<body id="Body1" runat="server">
그런 다음 ASP.NET 서버 쪽 이벤트에 다음과 같은 코드 구성을 입력하여 포커스를 변경할 수 있습니다.
Visual Basic .NET
Body1.Attributes("onload") = "document.forms[0]['TextBox2'].focus();"
Visual C# .NET
Body1.Attributes["onload"] = "document.forms[0]['TextBox2'].focus();";
이 기술을 사용하면 폼의 다른 요소로 포커스를 지정할 수 있습니다. 폼에 여러 요소가 있고 OnTextChanged 이벤트를 사용할 경우에는 이 기능이 매우 유용합니다. 하지만 이렇게 하지 않으면 최종 사용자는 페이지 포스트백으로 인해 OnTextChanged 이벤트가 실행된 후에 마우스를 사용하여 폼에서 포커스를 다시 지정해야 합니다./P>
복잡한 JavaScript 함수 사용
지금까지 HTML 요소 내에서 간단한 JavaScript를 배치하는 방법과 심지어는 동적인 방식으로 JavScript 및 웹 서버 컨트롤을 사용하는 방법에 대해 다뤄 보았으므로, 이제는 코드에 전체 JavaScript 함수를 사용하는 예를 설명하겠습니다.
이러한 작업을 수행하기 위해서는 몇 가지 방식을 사용할 수 있으며 여기에서는 ASP .NET 코드에 사용할 수 있는 일반적인 방법에 대해 살펴보겠습니다. 본 문서에서는 RegisterStartupScript 메서드와 RegisterClientScriptBlock 메서드에 대해서 설명합니다.
참고 Visual Studio .NET 2002 또는 2003을 사용하는 Visual Basic .NET 개발자의 경우에는 이러한 고급 메서드의 표시 기능을 활성화시켜야 합니다. 이렇게 하려면 Visual Studio .NET의 메뉴 표시줄에서 도구 > 옵션을 클릭하고 텍스트 편집기 폴더에서 기본 폴더를 엽니다. 기본 폴더 내에서 고급 멤버 숨기기 확인란 선택을 취소합니다. 이렇게 하면 본 문서에서 다루려고 하는 메서드가 Microsoft Intellisense에 표시됩니다. 그림 3을 보십시오.
그림 3. Visual Studio .NET에서 고급 멤버 표시
RegisterStartupScript 메서드
이러한 목적에 사용 가능한 첫 번째 옵션은 .NET 클래스 중 하나를 사용하여 스크립트 블록을 등록하는 것입니다. 첫 번째는 RegisterStartupScript 메서드입니다. 이 클래스는 페이지가 로드될 때 JavaScript 함수를 시작하려는 경우에 가장 잘 사용됩니다. 예를 들어 두 개의 단추가 있는 ASP .NET 페이지를 Visual Studio .NET에 생성한다고 가정하십시오. Button1 및 Button2는 두 단추의 ID입니다. 그런 다음 Page_Load 이벤트 내에 다음 코드를 배치합니다.
Visual Basic .NET
Page.RegisterStartupScript("MyScript", _
"<script language=javascript>" & _
"function AlertHello() { alert('Hello ASP.NET'); }</script>")
Button1.Attributes("onclick") = "AlertHello()"
Button2.Attributes("onclick") = "AlertHello()"
Visual C# .NET
Page.RegisterStartupScript("MyScript",
"<script language=javascript>" +
"function AlertHello() { alert('Hello ASP.NET'); }</script>");
Button1.Attributes["onclick"] = "AlertHello()";
Button2.Attributes["onclick"] = "AlertHello()";
Page_Load 이벤트에서 이 코드를 사용하면 브라우저에서 다음과 같은 HTML 코드가 생성됩니다(설명을 위해 일부 HTML 코드는 생략되었음).
<HTML>
<HEAD>
<title>WebForm1</title>
</HEAD>
<body>
<form name="Form1" method="post" action="WebForm1.aspx" id="Form1">
<P>
<input type="submit" name="Button1" value="Button"
id="Button1" onclick="AlertHello()" />
<input type="submit" name="Button2" value="Button"
id="Button2" onclick="AlertHello()" /></P>
<script language=javascript>function AlertHello() {
alert('Hello'); }</script>
</form>
</body>
</HTML>
이 ASP.NET 페이지에서는 폼을 종료하기 전에(</form>) 페이지 하단에 배치된 JavaScript 함수에 주의해야 합니다.
RegisterStartupScript 메서드를 작업할 때 생성자는, 첫 번째는 스크립트의 키이고 두 번째는 스크립트 자체(string으로 표시됨)인 두 개의 매개 변수를 요청합니다.
Page.RegisterStartupScript("MyScript", _
"<script language=javascript>" & _
"function AlertHello() { alert('Hello ASP.NET'); }</script>")
페이지의 모든 JavaScript는 각각 고유 키가 지정되어 있어야 합니다. 키 이름이 동일한 JavaScript가 두 개 이상 존재할 경우에는 첫 번째 JavaScript만 페이지에 배치됩니다.
RegisterClientScriptBlock 메서드
이제는 RegisterClientScriptBlock 메서드를 사용하여 보다 고급의 단추 롤오버 예제를 만들어보겠습니다. 앞에서 설명한 롤오버 단추 예제의 문제점은 최종 사용자가 마우스를 단추 이미지 위로 가져올 때 개별 요청으로 서버에서 롤오버 이미지를 검색해야 한다는 사실이었습니다. 이보다 향상된 롤오버 단추 방식은 단추의 롤오버 이미지를 이미 다운로드하여 브라우저의 캐시에 저장하여 최종 사용자가 단추 위로 마우스를 움직일 때 이미지가 즉시 표시되도록 하는 것입니다. 이렇게 하기 위해서는 한 가지 JavaScript 함수를 작성해야 합니다. 다음 예는 이 함수를 페이지에 설정하기 위해 RegisterClientScriptBlock 메서드를 사용하는 것 뿐만 아니라 JavaScript 함수를 보여줍니다. 이 예에서 코드 숨김 방식에는 ImageButton 서버 컨트롤에 대한 Page_Load 이벤트 및 button-click 이벤트만 필요합니다.
Visual Basic .NET
Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
Page.RegisterClientScriptBlock("MyScript", _
"<script language=javascript>" & _
"if (document.images) {" & _
"MyButton = new Image;" & _
"MyButtonShaded = new Image;" & _
"MyButton.src = 'button1.jpg';" & _
"MyButtonShaded.src = 'button2.jpg';" & _
"}" & _
"else {" & _
"MyButton = '';" & _
"MyButtonShaded = '';" & _
"}" & _
"</script>")
ImageButton1.Attributes.Add("onmouseover", _
"this.src = MyButtonShaded.src;" & _
"window.status='Oh Yes! Click here!';")
ImageButton1.Attributes.Add("onmouseout", _
"this.src = MyButton.src;" & _
"window.status='';")
End Sub
Private Sub ImageButton1_Click(ByVal sender As System.Object, _
ByVal e As System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click
Label1.Text = "Postback!"
End Sub
Visual C# .NET
<%@ Page Language="C#" %>
<script runat="server">
void Page_Load(object sender, EventArgs e) {
Page.RegisterClientScriptBlock("MyScript",
"<script language=javascript>" +
"if (document.images) {" +
"MyButton = new Image;" +
"MyButtonShaded = new Image;" +
"MyButton.src = 'button1.jpg';" +
"MyButtonShaded.src = 'button2.jpg';" +
"}" +
"else {" +
"MyButton = '';" +
"MyButtonShaded = '';" +
"}" +
"</script>");
ImageButton1.Attributes.Add("onmouseover",
"this.src = MyButtonShaded.src;" +
"window.status='Oh Yes! Click here!';");
ImageButton1.Attributes.Add("onmouseout",
"this.src = MyButton.src;" +
"window.status='';");
}
void ImageButton1_Click(object sender, ImageClickEventArgs e) {
Label1.Text = "Postback!";
}
</script>
<html>
<head></head>
<body>
<form runat="server">
<p>
<asp:ImageButton id="ImageButton1"
onmouseover="this.src='button2.jpg'"
onclick="ImageButton1_Click"
onmouseout="this.src='button1.jpg'" runat="server"
ImageUrl="button1.jpg"></asp:ImageButton>
</p>
<p>
<asp:Label id="Label1" runat="server" />
</p>
</form>
</body>
</html>
U이 코드를 사용할 경우 브라우저에 대한 HTML 출력은 다음과 같이 나타납니다.
<HTML>
<HEAD>
<title>WebForm1</title>
</HEAD>
<body>
<form name="Form1" method="post" action="WebForm1.aspx" id="Form1">
<script language=javascript>if (document.images) {MyButton = new
Image;MyButtonShaded = new Image;MyButton.src =
'button1.jpg';MyButtonShaded.src = 'button2.jpg';}else {MyButton
= '';MyButtonShaded = '';}</script>
<P>
<input type="image" name="ImageButton1" id="ImageButton1"
onmouseover="this.src = MyButtonShaded.src;window.status='Oh
Yes! Click here!';" onmouseout="this.src =
MyButton.src;window.status='';" src="button1.jpg" border="0"
/></P>
<P>
<span id="Label1"></span></P>
</form>
</body>
</HTML>
이 출력에서는 RegisterClientScriptBlock을 사용할 경우 HTML 코드에서 열려 있는 <form> 요소에 JavaScript 함수가 직접 나타난다는 점에 유의해야 합니다. 이 예에서는 RegisterClientScriptBlock 메서드를 사용하여 JavaScript 함수를 추가할 뿐만 아니라 흥미를 목적으로 일부 JavaScript를 추가함으로써, 최종 사용자가 마우스를 위로 가져가면 브라우저의 상태 표시줄에도 텍스트가 표시되도록 할 수 있습니다. 그림 4를 참조하십시오.
그림 4. 작동 중인 롤오버 단추
이러한 JavaScript의 장점은 서버 쪽 이벤트를 다시 게시하는 작업이 제대로 작동한다는 점입니다. 이 예에서 ImageButton을 클릭하면 페이지가 다시 게시되어 Label 서버 컨트롤의 text 속성이 변경됩니다.
RegisterStartupScript 및 RegisterClientScriptBlock의 차이점
지금까지 ASP .NET 페이지에 JavaScript를 배치할 수 있는 두 가지 메서드를 살펴보았는데 그렇다면 이 둘의 차이는 무엇일까요 기본적인 차이점으로 RegisterStartupScript 메서드는 </form> 요소를 사용하기 전에 ASP .NET 페이지의 하단에 JavaScript를 배치한다는 점을 들 수 있습니다. 반면에 RegisterClientScriptBlock 메서드는 페이지에서 열려 있는 </form> 요소 바로 뒤에 JavaScript를 직접 배치합니다. 그렇다면 이 둘의 차이점은 무엇일까요 이러한 차이는 다음과 같이 이해될 수 있습니다.
예를 들어 다음과 같이 RegisterStartupScript 메서드를 사용하여 Visual Basic .NET에서 페이지가 브라우저로 로드될 때 페이지의 텍스트 상자에 대한 포커스 설정 방식을 살펴 보십시오.
Page.RegisterStartupScript("Testing", "<script
language=javascript>document.forms[0]['TextBox1'].focus();</script>")
이러한 방식은 브라우저가 페이지 하단에 이르고 이 JavaScript 코드를 만났을 때 페이지의 텍스트 상자가 생성되고 페이지에 배치되기 때문에 모두 제대로 작동됩니다. 하지만 그 대신 이 방식은 다음과 같이 작성됩니다(RegisterClientScriptBlock 메서드 사용).
Page.RegisterClientScriptBlock("Testing", "<script
language=javascript>document.forms[0]['TextBox1'].focus();</script>")
따라서 텍스트 상자 컨트롤에 포커스가 설정되지 않고 페이지에서 JavaScript 오류가 발생합니다(그림 5 참조).
그림 5. JavaScript 실행 오류
이러한 오류가 발생하는 이유는 텍스트 상자가 페이지에 배치되기 전에 브라우저에서 JavaScript가 실행되기 때문입니다. 따라서 이 JavaScript는 TextBox1을 찾지 못하게 됩니다.
개별 파일(.js)로 JavaScript 저장
JavaScript 함수는 개별 파일(.js 파일)로 저장하는 것이 가장 좋습니다. JavaScript 함수를 특정 프로젝트의 일부로서 개별 파일로 저장하면 앞에서 설명한 몇 가지 메서드를 사용하여 이러한 파일을 페이지에 가져올 수 있습니다.
예를 들어 다음 코드를 사용하면 .js 파일을 특정 ASP .NET 페이지에 포함시킬 수 있습니다.
Visual Basic .NET
Page.RegisterClientScriptBlock("MyScript", _
"<script language=javascript src='MyJavaScriptFile.js'>")
Visual C# .NET
Page.RegisterClientScriptBlock("MyScript",
"<script language=javascript src='MyJavaScriptFile.js'>");
해당 .js 파일을 ASP .NET 페이지로 가져온 후에는 이전처럼 아무 JavaScript 함수나 호출하여 사용할 수 있습니다. 이렇게 하면 JavaScript 함수를 매우 쉽게 관리할 수 있으며 다른 ASP .NET 페이지의 논리와 구분하여 관리할 수 있습니다. 또한 여러 ASP .NET 페이지에서 동일한 JavaScript 함수를 쉽게 사용할 수도 있습니다.
요약
본 문서에서는 ASP .NET 페이지에서 JavaScript를 사용하는 몇 가지 일반적인 방법들과 보다 일반적인 JavaScript 사용 예에 대해서 살펴보았습니다. 본 문서의 내용 중 특히 중요한 내용은 JavaScript를 개별 .js 파일로 저장하는 방법과 RegisterStartupScript 메서드 및 RegisterClientScriptBlock 메서드를 사용하여 페이지에서 JavaScript를 구현하는 방법입니다. 또한 ASP .NET 페이지에 컨트롤과 관련된 JavaScript를 배포하기 위한 HtmlGenericControl도 쉽게 사용할 수 있습니다.
저자 소개
Bill Evjen은 .NET 기술에 대한 적극적인 지지자로서 .NET 기술의 발전을 위해 커뮤니티에서 활발한 활동을 벌이고 있습니다. Bill Evjen은 미국 미조리주 세인트 루이스에 소재한 국제적인 뉴스 및 재무 서비스 기업인 Reuters (US) 의 기술 고문입니다. Bill은 전세계 100,000명 이상의 회원을 확보하고 있는 International .NET Association(INETA) (US) 의 창시자이자 회장입니다. Bill은 또한 관련 주제의 저자 및 강사로 활동 중이며 ASP.NET Professional Secrets, XML Web Services for ASP.NET, Web Services Enhancements, 및 Visual Basic .NET Bible(모두 Wiley (US) 에서 출간)의 저자이기도 합니다.
[펌] http://winflahed.tistory.com/tag/ASP.NET&JavaScript
