빠른 시작: HTML 컨트롤 추가 및 이벤트 처리(HTML)

  • 아티클

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

모든 앱은 단추, 확인란, 드롭다운 목록 등과 같은 컨트롤이 필요합니다. JavaScript로 작성한 Windows 런타임 앱에서는 두 가지 형식의 컨트롤(기본 HTML 컨트롤 및 JavaScript용 Windows 라이브러리 컨트롤)을 사용할 수 있습니다. 기본 HTML 컨트롤은 단추 및 확인란과 같은 HTML 표준의 일부인 컨트롤입니다.

이제 HTML 컨트롤을 어떻게 만들고 사용하는지에 대해 집중적으로 알아보겠습니다. 다음 항목인 빠른 시작: WinJS 컨트롤 및 스타일 추가에서는 WinJS 컨트롤을 만들고 사용하는 방법에 대해 설명합니다.

(Windows만 해당) 앱 기능 전체 프로세스 시리즈의 일부로 이 기능의 작동 방법을 살펴보세요.: 사용자 조작: 터치식 입력... 등 및 Windows 스토어 앱 UI 전체 프로세스의 일부로 이 기능의 작동 방법을 살펴보세요.

사전 요구 사항

컨트롤이란 무엇인가요?

많은 응용 프로그램 프로그래밍 모델에서는 콘텐츠를 표시하거나 상호 작용하는 컨트롤이 필요합니다. 대부분의 HTML 요소는 콘텐츠를 표시하고 다양한 이벤트에 반응할 수 있으므로 JavaScript로 작성한 Windows 런타임 앱에서 컨트롤과 요소 사이의 구분은 항상 명확하지는 않습니다. 대화형 작업을 수행하는 것이 주목적인 요소와 객체를 컨트롤이라고 합니다. 이 범주에 속하는 요소와 개체의 목록은 기능별 컨트롤을 참조하세요.

HTML 컨트롤 추가

JavaScript로 작성한 Windows 런타임 앱에서는 모든 HTML 컨트롤을 사용할 수 있습니다.

Hh465402.wedge(ko-kr,WIN.10).gif HTML 컨트롤을 추가하려면

  • HTML 컨트롤을 추가하려면 일반적인 웹 페이지처럼 컨트롤의 HTML을 페이지에 추가합니다. 다음 예제에서는 button를 만듭니다.

    <button id="button1">An HTML Button</button>

    쉽게 검색하고 조작할 수 있도록 일반적으로 컨트롤에 ID 또는 클래스 이름을 할당하는 것이 좋습니다. 나중에 이벤트 연결 방법을 설명할 때 단추의 ID를 사용하여 단추를 찾습니다.

컨트롤 HTML은 단추 HTML만큼 항상 간단하지는 않습니다. 예를 들어 slider 컨트롤을 만들려면 다음 input 입력 요소를 사용합니다.

<input type="range" />

사용할 수 있는 HTML 컨트롤 목록과 해당 컨트롤을 만드는 데 사용하는 태그는 컨트롤 목록을 참조하세요.

이벤트 처리

모든 컨트롤은 사용자의 동작에 반응하게 하는 이벤트를 제공합니다. 예를 들어 단추 컨트롤이 제공하는 click 이벤트는 사용자가 단추를 클릭하면 발생합니다. 이벤트 처리기라는 함수를 만들어 이벤트를 처리하고 이벤트 처리기를 컨트롤에 등록합니다.

이벤트 처리기를 등록하는 방법은 두 가지입니다. HTML에서 이벤트 처리기를 추가하는 한 가지 방법은 컨트롤의 이벤트 특성을 JavaScript 이벤트 처리기 함수 또는 JavaScript 구문의 이름에 설정하는 것입니다. 이 접근 방식에 대한 지침은 선언적으로 이벤트 처리기를 설정하는 방법을 참조하세요.

또 다른 방법은 이벤트 처리기를 프로그래밍 방식으로 추가하는 것입니다.

Hh465402.wedge(ko-kr,WIN.10).gif프로그래밍 방식으로 이벤트 처리기를 등록하려면

  1. 컨트롤을 만들고 ID를 할당합니다. 다음 예제에서는 단추를 만들고 단추에 ID "button1"을 할당합니다.

    <button id="button1">An HTML button</button>

  2. 이 예제를 위해 단락 요소를 만들고 ID "button1Output"을 할당합니다. 이 요소는 단추 클릭 이벤트에 대한 정보를 표시하는 데 사용합니다.

    <p id="button1Output"></p>

  3. JavaScript 코드에서 이벤트 처리기를 정의합니다. 대부분의 이벤트 처리기는 이벤트에 대한 정보를 포함하는 Event 개체를 단일 인수로 사용합니다. 다른 이벤트는 해당 이벤트와 관련된 정보를 제공하는 다른 유형의 이벤트 정보 개체를 반환할 수 있습니다.

    click 이벤트는 누른 마우스 단추, 이벤트를 발생시킨 개체 등과 같은 이벤트에 대한 정보를 포함하는 MouseEvent 개체를 제공합니다. 다음 예제에서는 MouseEvent 개체를 사용하여 사용자가 클릭한 점의 x 및 y 좌표를 가져오는 click 이벤트 처리기를 만듭니다.

    click 이벤트는 터치 및 키보드 상호 작용에도 응답하지만, 이 항목의 예제에서는 사용자가 마우스로 클릭한다고 가정합니다. 터치 및 다른 장치를 사용한 상호 작용에 대한 자세한 내용은 사용자 조작에 응답을 참조하세요.

    function button1Click(mouseEvent) {
    var button1Output = document.getElementById("button1Output");
    button1Output.innerText =
    mouseEvent.type
    + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";

}

  4. 이제 이벤트를 검색하고 addEventListener를 호출하여 컨트롤에 이벤트를 연결해야 합니다. 문제는 '컨트롤을 검색해야 하는 시기'입니다. 컨트롤을 JavaScript 코드의 아무 곳에나 추가해도 되지만, 그러면 컨트롤이 있는 위치보다 더 앞에서 호출될 수도 있습니다.

    • default.html 및 default.js에서 정의된 컨트롤을 앱의 시작 페이지에 추가하는 경우 WinJS.UI.processAll 함수를 사용하여 이벤트 처리기를 등록합니다. 각 Microsoft Visual Studio 템플릿은 activated 이벤트 처리기에서 WinJS.UI.processAll을 호출하는 default.js 파일을 만듭니다. 비동기 메서드이기 때문에 WinJS.UI.processAll 메서드는 Promise를 반환합니다. 이벤트 처리기를 연결하려면 WinJS.UI.processAll이 반환한 Promise에 then 또는 done 함수를 제공하고 이 함수를 사용하여 이벤트 처리기를 연결합니다. promise에 대한 자세한 내용은 JavaScript의 비동기 프로그래밍을 참조하세요.

      다음 예제에서는 WinJS.UI.processAll을 사용하여 단추의 이벤트 처리기를 연결합니다.

      (function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll().done(function () {
                var button1 = document.getElementById("button1");
                button1.addEventListener("click", button1Click, false);
                })
            );
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    // The click event handler for button1
    function button1Click(mouseEvent) {
        var button1Output = document.getElementById("button1Output");
        button1Output.innerText =
            mouseEvent.type
            + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";

    }

    app.start();
})();

      WinJS.UI.processAll 메서드에 대한 자세한 내용은 빠른 시작: WinJS 컨트롤 및 스타일 추가를 참조하세요.

    • 페이지 컨트롤에 페이지를 추가할 경우, 페이지 컨트롤의 ready 함수를 사용하여 이벤트 처리기를 연결합니다(다음에 표시된 것처럼 document.getElementById 대신 querySelector 사용).

      WinJS 페이지 컨트롤은 콘텐츠를 다시 사용 가능한 모듈식 단위로 나누는 방법을 제공합니다. 앱을 만드는 데 사용한 Visual Studio 템플릿에 따라 앱에 하나 이상의 페이지 컨트롤이 자동으로 포함될 수도 있습니다.

      페이지 컨트롤을 만들면 단추의 이벤트 처리기를 추가하는 데 사용할 수 있는 ready 함수가 자동으로 포함됩니다. 다음 예제에서는 단추에 click 이벤트 처리기를 추가하는 페이지 컨트롤의 전체 JavaScript 코드를 보여 줍니다.

      
// home.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        ready: function (element, options) { // Fires when the user navigates to home.html
            var button1 = element.querySelector("#button1");
            button1.addEventListener("click", this.button1Click, false);
        },

        button1Click: function(mouseEvent) {
            var button1Output = document.getElementById("button1Output");
            button1Output.innerText =
            mouseEvent.type
            + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";
        }
    });
})();

      이전 예에서 this는 WinJS.UI.Pages.define 호출로 생성된 페이지 개체를 참조합니다. 또한 button1Click: function(mouseEvent) {...}는 said 페이지 개체에 대한 속성(익명 함수)을 만듭니다. 따라서 this.button1Click(button1.addEventListener("click", this.button1Click, false))은 실제로 button1Click 함수를 참조합니다.

      
button1Click: function(mouseEvent) {
    var button1Output = document.getElementById("button1Output");
    button1Output.innerText =
    mouseEvent.type
    + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";
}

      페이지 컨트롤에 대한 자세한 내용은 페이지 컨트롤 추가를 참조하세요.

    • 사용자 지정 HTML 및 JavaScript 파일에 컨트롤을 추가하는 경우 DOMContentLoaded 이벤트를 처리하고 이 이벤트를 사용하여 WinJS.UI.processAll을 호출합니다. document 개체는 코드가 실행될 때 이미 존재하기 때문에 코드 내 아무 곳에서나 DOMContentLoaded 이벤트를 등록할 수 있습니다. WinJS.UI.processAll이 반환한 Promise에 then 또는 done 함수를 제공하고 이 함수를 사용하여 이벤트 처리기를 연결합니다.

앱을 실행하고 단추를 클릭하면 클릭한 지점의 좌표가 표시됩니다.

설명

JavaScript URI 사용 안 함

앱에서는 JavaScript URI를 실행하지 않으므로 이벤트 처리기에 JavaScript URI를 사용하지 마세요. 이를 사용하면 단추를 클릭했을 때 아무 동작도 발생하지 않습니다.


<!-- Incorrect code. Do not use this in your solution. -->
<button id="button1" onclick="javascript: 2 + 2;">An HTML Button</button>

이 제한은 앱의 로컬 컨텍스트에 있는 코드(앱 패키지에 포함된 코드)에만 적용되고, 앱에서 액세스한 외부 웹 페이지에 있는 코드에는 적용되지 않습니다.

양식 사용

일반적인 HTML 웹 사이트에서는 컨트롤 및 다른 입력 요소가 보통 form 요소에 포함되어 있습니다. form 요소는 데이터를 서버로 전달할 때 사용됩니다. 일반적인 앱에 대한 대부분의 프로그래밍은 클라이언트 기반이기 때문에 보통은 form 요소를 사용할 필요가 없습니다.

투명 계층 사용

일반적으로 빈 div 요소와 같은 전체 화면 투명 계층을 사용하여 특정 사용자 조작을 감지하거나 애니메이션을 표시합니다. 그러나 HTML 컨트롤에 투명 계층을 적용하면 사용자 조작에 대한 응답이 느려질 수 있습니다. HTML 컨트롤의 응답 기능을 유지하려면 해당 컨트롤 위에 투명 계층을 배치하지 마세요.

요약 및 다음 단계

HTML 컨트롤을 만드는 방법과 이벤트 처리기를 연결하는 방법에 대해 배웠습니다.

다음에서는 빠른 시작: WinJS 컨트롤 및 스타일 추가를 읽고 JavaScript로 작성한 Windows 런타임 앱에 제공되는 새로운 WinJS 컨트롤을 사용하는 방법에 대해 알아봅니다.

특정 컨트롤에 대한 자세한 정보는 컨트롤 목록을 참조하세요.

샘플

관련 항목

기본 앱 코딩

빠른 시작: WinJS 컨트롤 및 스타일 추가

컨트롤 목록