연습: JavaScript 파일에 지역화된 리소스 추가

Visual Studio 2010

업데이트: 2007년 11월

이 연습에서는 ECMAScript(JavaScript) 파일에 지역화된 리소스를 포함하는 방법을 보여 줍니다. 이 연습에서 리소스는 문자열입니다. 독립 실행형 JavaScript 파일을 만들었을 때와 응용 프로그램이 서로 다른 언어 및 문화권에 대해 서로 다른 값을 제공해야 할 때 지역화된 리소스를 JavaScript 파일에 포함시켜야 합니다.

독립 실행형 JavaScript는 어셈블리에 리소스로 포함되지 않으므로 리소스 파일의 값에 액세스할 수 없습니다. 대신 지역화된 문자열 값을 스크립트 파일에 직접 포함시켜야 합니다. 지역화된 값은 브라우저에서 스크립트가 실행될 때 검색됩니다.

지원되는 각 언어 및 문화권에 대해 별도의 스크립트 파일을 만듭니다. 각 스크립트 파일에서 해당 언어 및 문화권에 대해 지역화된 리소스 값을 포함하는 JSON 형식의 개체를 넣습니다.

이 자습서의 절차를 구현하려면 다음이 필요합니다.

  • Microsoft Visual Studio 2005 또는 Microsoft Visual Web Developer Express Edition

  • AJAX 사용 ASP.NET 웹 사이트

JavaScript 파일에 리소스 값을 추가하려면

  1. 웹 사이트의 루트 디렉터리에서 Scripts라는 폴더를 추가합니다.

  2. Scripts 폴더에서 CheckAnswer.js라는 JScript 파일을 추가한 다음 코드를 파일에 추가합니다.

    Sys.Application.add_load(SetButton);
    function SetButton()
    {
        $get('Button1').value = Answer.Verify;
    }
    function CheckAnswer()
    {
        var firstInt = $get('firstNumber').innerText;
        var secondInt = $get('secondNumber').innerText;
        var userAnswer = $get('userAnswer');
    
        if ((Number.parseLocale(firstInt) + Number.parseLocale(secondInt)) == userAnswer.value)
        {
            alert(Answer.Correct);
            return true;
        }
        else
        {
            alert(Answer.Incorrect);
            return false;
        }
    }
    
    Answer={
    "Verify":"Verify Answer",
    "Correct":"Yes, your answer is correct.",
    "Incorrect":"No, your answer is incorrect."
    };
    
    
    

    스크립트 코드가 Sys.Application 클래스의 load 이벤트에 대한 처리기를 추가합니다. 처리기가 단추 텍스트를 설정합니다. 문자열에 텍스트를 설정하는 대신 Answer.Verify라는 클래스에 정의된 값에 텍스트를 설정합니다. 따라서 코드가 지역화된 값을 사용할 수 있습니다.

    스크립트에는 두 숫자를 추가한 것에 대한 사용자의 결과를 확인하는 함수도 포함되어 있습니다. alert 함수를 사용하여 대답이 올바른지 여부를 알려 줍니다. 단추 텍스트와 마찬가지로 alert 대화 상자에 표시되는 메시지는 서버에 대한 포스트백 없이 지역화된 문자열 값으로 설정됩니다.

    Answer라는 형식이 스크립트에서 사용되어 파일에서 사용할 지역화된 값의 컬렉션을 정의합니다. Answer 형식은 CheckAnswer.js 파일의 끝에서 JSON 형식으로 정의됩니다.

  3. Scripts 폴더에서 CheckAnswer.it-IT.js라는 JScript 파일을 추가합니다. 파일에 다음 코드를 추가합니다.

    Sys.Application.add_load(SetButton);
    function SetButton()
    {
        $get('Button1').value = Answer.Verify;
    }
    function CheckAnswer()
    {
        var firstInt = $get('firstNumber').innerText;
        var secondInt = $get('secondNumber').innerText;
        var userAnswer = $get('userAnswer');
    
        if ((Number.parseLocale(firstInt) + Number.parseLocale(secondInt)) == userAnswer.value)
        {
            alert(Answer.Correct);
            return true;
        }
        else
        {
            alert(Answer.Incorrect);
            return false;
        }
    }
    Answer={
    "Verify":"Verificare la risposta",
    "Correct":"Si, la risposta e’ corretta.",
    "Incorrect":"No, la risposta e’ sbagliata."
    };
    
    
    

    이 파일은 이탈리아어 값의 Answer 형식을 포함하고 있다는 것을 제외하고는 CheckAnswer.js 파일과 동일합니다.

    지역화된 텍스트를 더 많은 언어로 제공하려면 더 많은 JavaScript 파일을 만들면 됩니다. JavaScript 코드는 항상 동일하지만 Answer 형식에 정의된 값의 언어는 서로 다릅니다. 각 JavaScript 파일의 이름에는 해당 언어 및 로캘이 포함되어야 합니다.

이제 방금 만든 스크립트 코드를 사용하는 ASP.NET 웹 페이지를 만들 수 있습니다. 이 페이지에서 언어를 변경한 결과를 테스트해 볼 수 있습니다.

ASP.NET 웹 페이지에서 JavaScript 리소스 값을 사용하려면

  1. ASP.NET 웹 페이지를 만듭니다.

  2. 웹 페이지의 콘텐츠를 다음 태그 및 코드로 바꿉니다.

    <%@ Page Language="C#" AutoEventWireup="true" UICulture="auto" Culture="auto" %>
    <script runat="server">
    
    
        protected void Page_Load(object sender, EventArgs e)
        {   
            int _firstInt;
            int _secondInt;
    
            Random random = new Random();
            _firstInt = random.Next(0, 20);
            _secondInt = random.Next(0, 20);
    
            firstNumber.Text = _firstInt.ToString();
            secondNumber.Text = _secondInt.ToString();
    
            if (IsPostBack)
            {
                userAnswer.Text = "";
                System.Threading.Thread.CurrentThread.CurrentUICulture = System.Globalization.CultureInfo.CreateSpecificCulture(selectLanguage.SelectedValue);
            }
            else
            {
                selectLanguage.Items.FindByValue(System.Threading.Thread.CurrentThread.CurrentUICulture.TwoLetterISOLanguageName).Selected = true;
            }
        }
    
        protected void selectLanguage_SelectedIndexChanged(object sender, EventArgs e)
        {
            System.Threading.Thread.CurrentThread.CurrentUICulture = System.Globalization.CultureInfo.CreateSpecificCulture(selectLanguage.SelectedValue);
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Client Localization Example</title>
    </head>
    <body>
        <form id="form1" runat="server" >
            <asp:DropDownList runat="server" AutoPostBack="true" ID="selectLanguage" OnSelectedIndexChanged="selectLanguage_SelectedIndexChanged">
                <asp:ListItem Text="English" Value="en"></asp:ListItem>
                <asp:ListItem Text="Italian" Value="it"></asp:ListItem>
            </asp:DropDownList>
            <br /><br />
            <asp:ScriptManager ID="ScriptManager1" EnableScriptLocalization="true" runat="server">
            <Scripts>
                <asp:ScriptReference Path="scripts/CheckAnswer.js" ResourceUICultures="it-IT" />
            </Scripts>
            </asp:ScriptManager>
            <div>
            <asp:Label ID="firstNumber" runat="server"></asp:Label>
            +
            <asp:Label ID="secondNumber" runat="server"></asp:Label>
            =
            <asp:TextBox ID="userAnswer" runat="server"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" OnClientClick="return CheckAnswer()" />
            <br />
            <asp:Label ID="labeltest" runat="server"></asp:Label>
            </div>
        </form>
    </body>
    </html>
    
    
    

    태그는 DropDownList 컨트롤, Label 컨트롤 두 개, TextBox 컨트롤 및 Button 컨트롤을 만듭니다. 페이지는 임의로 생성된 두 개의 정수를 표시하고 사용자에게 이를 추가할 것을 요청합니다. 그리고 대답을 위한 텍스트 상자를 제공합니다. 단추를 클릭하면 JavaScript CheckAnswer 함수가 호출됩니다.

    DropDownList 컨트롤을 사용하면 브라우저의 설정을 변경하지 않고도 언어 설정을 변경할 수 있습니다. DropDownList 컨트롤의 SelectedIndex 속성이 변경되면 CurrentThread 인스턴스의 CurrentUICulture 속성이 선택한 값으로 설정됩니다.

    Bb398935.alert_note(ko-kr,VS.100).gif참고:

    스레드에 대한 문화권 정보를 설정하는 방법에 대한 자세한 내용은 방법: ASP.NET 웹 페이지 전역화를 위한 Culture 및 UI Culture 설정을 참조하십시오.

    ScriptManager 컨트롤에는 CheckAnswer.js 스크립트 파일에 대한 참조가 포함되어 있습니다. 이로 인해 페이지가 실행될 때 페이지가 CheckAnswer.js 파일을 검색합니다.

    참조의 ResourceUICultures 속성은 웹 사이트에 스크립트의 이탈리아어 버전이 포함되어 있다는 것을 나타내기 위해 "it-IT"로 설정되어 있습니다. 따라서 ScriptManager 개체는 DropDownList 컨트롤에서 "이탈리아어"를 선택할 때 또는 브라우저에서 기본 언어로 "이탈리아어"를 설정할 때 이탈리아어 버전을 검색합니다.

  3. 페이지를 실행합니다.

    임의로 생성된 두 개의 숫자와 대답을 입력할 TextBox 컨트롤이 있는 더하기 문제가 표시됩니다. 대답을 입력하고 Verify Answer 단추를 클릭하면 메시지 창에 대답이 올바른지 여부를 알려 주는 응답이 표시됩니다.

    기본적으로 이 응답은 영어로 표시됩니다.

  4. 드롭다운 목록에서 "이탈리아어"를 선택하여 언어를 이탈리아어로 변경합니다.

  5. 퀴즈를 다시 수행합니다.

    이번에는 이탈리아어로 응답합니다.

이 연습에서는 독립 실행형 JavaScript 파일에 지역화된 리소스 값을 추가하는 방법을 설명했습니다. 지역화된 값은 개별 지역화된 JavaScript 파일의 일부분인 JSON 형식의 개체로 만들어집니다. 지역화된 값은 하드 코딩된 문자열을 사용하는 대신 JSON 개체를 참조하여 표시됩니다. 브라우저의 언어 설정이나 사용자가 지정하는 언어 설정에 맞는 지역화된 문자열이 표시됩니다.

표시: