Hongik University
Mechanical System
Design Engineering,
Computer Engineering

Updated:

대화상자 표시하기

이 절에서는 웹 브라우저에 내장된 대화상자를 활용하여 입출력하는 방법을 배운다. 대화상자는 실제로 프로그래밍을 할 때 자주 사용되는 요소는 아니지만 입출력이 간단하기 때문에 프로그래밍을 학습할 때 자주 활용된다.

대화상자

웹 브라우저의 전역 객체인 Window 객체에는 대화상자를 표시하기 위한 메서드가 세 개 있다.

메서드 설명
window.alert 경고 대화상자를 표시
window.promt 사용자의 문자열 입력을 받는 대화상자를 표시
window.confirm [확인] 버튼과 [취소] 버튼이 있는 대화상자를 표시

Window 객체의 메서드는 앞에 붙은 window. 부분을 생략하고 호출할 수 있다.

alert(경고 대화상자)

alert 메서드는 경고 대화상자를 표시한다. 인수로는 경고 문자열을 받는다.

alert("안녕하세요!");

이 코드는 대화상자에서 다음처럼 표시된다.


확인 버튼을 누르면 대화상자가 사라지고 코드 제어권이 호출한 부분으로 돌아간다.

prompt(입력 대화상자)

prompt 메서드는 입력 대화상자를 표시한다. 인수로는 입력을 보조하는 문자열을 받는다.

var name= prompt("이름을 입력하십시오");

이 코드는 대화상자에서 다음처럼 표시된다.


사용자로부터 입력받은 문자열은 prompt 메서드의 변환값이 된다. 두 번째 인수로는 초기 입력 값을 지정할 수 있다. prompt가 반환하는 값은 문자열이지만 숫자 값을 구하려면 parseInt나 parseFloat 메서드를 활용해서 숫자로 바꾼다.

var name= prompt("이름을 입력하십시오", "이현규");
var age = parseInt(prompt("나이를 입력하십시오"));
var height = parseFloat(prompt("키를 입력하십시오"));

confirm —— confirm 메서드는 확인 버튼과 취소 버튼이 있는 확인 대화상자를 표시한다. 인수로는 메시지를 뜻하는 문자열을 받는다.

var ret = confirm("링크를 표시하시겠습니까?");

이 코드는 대화상자에 다음처럼 표시된다.


confirm 메서드는 논리값을 반환한다. 확인 버튼을 누르면 true가 반환되고 취소 버튼을 누르면 false가 반환된다.

console

이 절에서는 Console 객체의 메서들 콘솔에 값을 출력하는 방법을 배운다.

Console 객체의 메서드

지금까지 출력할 때 사용한 console.log()는 Console 객체의 메서드 중 하나이다. Console 객체의 주요 메서드는 다음과 같다.

메서드 설명
console.dir 객체의 대화형 목록을 출력
console.error 오류 메세지를 출력
console.info 메시지 타입 로그를 출력
console.log 일반 로그를 출력
console.time 처리 사간 측정용 타이머를 시작
console.timeEnd 처리 시간 측정요 타이머를 정지시키고 타이머를 시작한 후에 흐른 시간을 밀로초 단위로 출력
console.trace 스택 트레이스를 출력
console.warn 경고 메시지를 출력

콘솔에 텍스트 출력하기

문자열이나 변수 값을 콘솔에 로그로 출력하려면 console.log, console.info, console.warn, console.error 메서드를 사용한다. 이들 메서드가 받는 인수와 표시하는 문자열은 같다. 단지 메서드에 따라 로그 시작 부분에 주의 표식을 추가하는 등 로그 스타일이 다를 뿐이다.
Console 객체의 메서드에는 인수 여러 개를 쉼표로 구분해서 넘실수 있고 값을 한 문자열로 연결해서 인수로 넘기면 공백 문자를 빼고 출력할 수 있다. 또한 서식 문자열을 사용하여 값을 지정된 서식으로 변환해서 출력할 수 있다.

var a = [2, 4, 6];
console.log("배열", a, "의 길이는", a.length, "입니다."); // 배열 [2, 4, 6] 의 길이는3 입니다.
console.log("배열" + a + "의 길이는" + a.length + "입니다."); // 배열 2, 4, 6 의 길이는3 입니다.

var name = "Tom";
var height = 172.5;
console.log("그의 이름은 %s 이며 키는 %f cm 입니다", name, height); // 그의 이름은 Tom 이며 키는 172.5 cm 입니다

Console 객체의 메서드에는 첫 번째 인수로 받은 문자열 안에 포함되어 있는 서식 문자열을 두 번째 이후 인수의 값으로 바꾸는 기능이 있다.

서식 문자열 설명 주의사항
%o 객체를 가리키는 하이퍼링크로 변환 Node.js는 지원하지 않음
%d 정수값으로 변환 Node.js는 지원하지 않음
%i 정숫값으로 변환 Node.js는 지원하지 않음
%s 문자열로 변환  
%f 부동소수점 값으로 변환 Node.js는 지원하지 않음

객체의 프로퍼티를 목록으로 표시하기

console.dir 메서드는 객체의 프로퍼티를 나열한다. 인수로는 객체 하나를 받고 파이어폭스를 제외한 주요 웹 브라우저에는 객체의 펼침 상태를 뜻하는 ▶ 마크가 표시된다. ▶를 클릭하면 객체 내부의 프로퍼티를 펼처서 볼 수 있다.

var p = {x:1, y:2};
console.dir(p);

타이머

console.time과 console.timeEnd 메서드를 사용해서 특정 코드의 실행 시간을 측저할 수 있다. console.time 메서드에 타이머 이름을 뜻하는 문자열을 인자로 넘겨 호출한다. 그리고 실행시간을 측정하는 작업이 끝난 후에 console.timeEnd 메서드에 타이머 이름을 인수로 넘겨서 호출한다. 그러면 처리에 소요된 시간이 밀리초 단위로 표시된다.

console.time("answer_time");
alert("확인 버튼을 누르십시오"); //실행 시간을 측정하는 작업
console.timeEnd("answer_time");  // answer_time: 1216.106ms

이벤트 처리기 등록하기와 타이머 알아보기

이 절에서는 웹 브라우저에서의 입출력을 잠시 뒤로 하고 이벤트 처리기를 등록하는 방법과 타이머를 배운다. 이벤트 처리기를 등록하는 방법과 다음절에서 설명하는 ‘HTML 요소를 동적으로 읽고 쓰기’를 익히면 CUI(그래픽 유저 인터페이스)를 갖춘 대화형 프로그램을 만들 수 있다. 또한 타이머를 활용하면 슬라이드 쇼나 애니메이션처럼 일정 시간마다 동작을 반복하는 처리를 구현할 수 있다.

이벤트 처리기

웹 브라우저에서 동작하는 프로그램은 기본적으로 이벤트 주도형 프로그램(event driven program)이다. 이벤트란 사용자가 버튼을 클릭하는 행위처럼 단말기와 애플리케리션이 처리할 수 있는 동작이나 사건을 뜻한다. 이벤트 주도형 프로그램이란 이벤트가 발생할 때까지 기다렸다가 이벤트가 발생했을 때 미리 등록해 둔 작업을 수행하는 프로그램을 말한다.
이벤트 처리기란 이벤트가 발생했을 때 실행되는 함수를 말한다. 함수를 이벤트가 발생했을 때 동작할 이벤트 처리기로 설정하는 행위를 가리켜 ‘함수를 이벤트의 이벤트 처리기로 등록’한다고 한다. 함수를 이벤트 처리기로 등록하는 방법은 세 가지이다.
　① HTML 요소의 속성으로 등록하는 방법
　② DOM 요소의 프로퍼티로 등록하는 방법
　③ addEventListener 메서드를 사용하는 방법

HTML 요소의 속성에 이벤트 처리기 등록하기

HTML 요소에 이벤트 처리기 속성을 설정하면 그 요소에 이벤트가 발생했을 때 동작하는 이벤트 처리기를 등록할 수 있다. 먼저 click 버튼을 클릭하면 콘솔에 현재 시각을 표시하는 예제를 살펴보자.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>시각을 콘솔에 표시하기</title>
    <script>
        function displayTime(){
            var d = new Date();
            console.log("현재 시각은 " + d.toLocaleString() + "입니다.");
        }
    </script>
</head>
<body>
    <input type="button" value="click" onclick="displayTime()">
</body>
</html>

실행결과


이 예제에서 이벤트 처리기는 다음 HTML 요소에 등록되어 있다.

<input type="button" value="click" onclick="displayTime()">

여기서 onclick 부분을 이벤트 처리기 이름이라고 하며, 이벤트 처리기 이름은 곧 이벤트 유형을 뜻한다.

DOM에서 가져온 HTML 요소에 이벤트 처리기 지정하기

DOM(Document Object Model)은 자바스크립트 등의 프로그램이 HTML 요소를 조작할 수 있게하는 인터페이스이다.
DOM 객체 DOM에서는 HTML 문서나 HTML 요소를 가리키는 객체로 자바스크립트를 사용하여 HTML문서를 조작한다. DOM의 주요 객체는 다음과 같이 분류할 수 있다.

DOM 객체 설명
window Window 객체라고 부르며 웹 브라우저 윈도우 하나 또는 탭 하나를 가리킨다.
document Document 객체라고 부르며 HTML 문서 전체를 가리킨다. HTML 문서에서 HTML 요소 객체를 가져오거나 HTML 요소를 새로 만드는 등 HTML 문서 전반에 걸친 기능을 제공한다.
요소 객체 HTML 문서의 요소를 가리키는 객체이다.

DOM을 사용해서 이벤트 처리기 등록하기 다음 방법은 DOM을 사용하여 이벤트 처리기를 등록하는 전형적인 방법이다.
　① window.onload를 사용하여 HTML 문서를 다 읽어 들인 후에 ②와 ③을 실행한다.
　② document.getElementById 메서드를 사용하여 특정 id 속성 값을 가진 HTML 요소의 요소 객체를 가져온다.
　③ 요소 객체의 이벤트 처리기 프로퍼티에 이벤트 처리기로 동작할 함수를 등록한다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>시각을 콘솔에 표시하기</title>
    <script>
        function displayTime(){
            var d = new Date();
            console.log("현재 시각은 " + d.toLocaleString() + "입니다.");
        }
        // ① Window 객체의 onload 프로퍼티에 함수를 저장한다.
        // 이 함수는 웹 브라우저가 문서를 모두 읽어 들인 후에 실행된다
        window.onload = function(){
          // ② input 요소의 객체 가져오기
          var button = document.getElementById("button");
          // ③ input 요소를 클릭했을 때 동작하는 이벤트 처리기를 등록한다
          button.onclick = displayTime;
        };
    </script>
</head>
<body>
    <input type="button" value="click" id="button">
</body>
</html>

타이머

웹 브라우저의 window 객체에는 setTimeout과 setInterval 메서드가 있다. 이들 메서드를 활용하면 지정된 시간이 흐른 후에 함수를 실행하거나 일정한 시간 간격에 따라 함수를 반복 실핼할 수 있다.

지정된 시간이 흐른 후에 함수 실행하기 : setTimeout
setTimeout 메서드를 사용하면 일정 시간이 흐른 후에 한 번만 호출되는 함수를 등록할 수 있다.

setTimeout(function(){
    console.log(new Date());
},2000);

이 코드를 실행하면 콘솔에 2초후에 날짜가 표시된다. setTimeout 메서드의 첫 번째 인수로는 ‘실행하고자 하는 함수의 참조’, 두 번째 인수로는 ‘지연 시간’을 밀리초 단위로 지정한다. 또한 setTimeout()이 반환한 값을 cleatTimeout()의 인수로 넘겨서 실행하면 함수 실행이 취소된다.

setTimeout(function() {...}, 2000);
...
clearTimeout(timer);

지정된 시간마다 반복해서 실행하기 : setInterval
setInterval 메서드를 활용하면 일정한 시간 간격에 따라 반복해서 실행할 함수를 등록할 수 있다.

setInterval(function() {
    console.log(new Date());
},1000);

이 코드를 실행하면 1초마다 날짜가 콘솔에 표시된다. setInterval 메서드의 첫 번째 인수로는 ‘실행하고자 하는 함수의 참조’, 두 번째 인수로는 ‘시간 간격’을 밀리초 단위로 설정한다. 또한 setInterval()이 반환한 값을 clearInterval()의 인수로 넘겨서 실행하면 함수 실행이 취소된다.

setInterval(function() {...}, 1000);
...
clearInterval(timer);

setTimeout()과 setInterval()의 첫 번째 인수로 문자열을 넘길 수도 있다.

setInterval("console.log(new Date())", 1000);

이때 지정한 문자열은 내부적으로 eval()로 평가된 후에 실행된다.

HTML 요소를 동적으로 읽고 쓰기

이제부터는 자바스크립트를 활용해서 HTML 요소 안의 내용을 동적으로 읽고 쓰는 방법을 알아본다. 이 방법을 배우면 HTML의 폼요소 등을 사용자 인터페이스로 삼아 프로그램 입출력을 할 수 있게 된다.

HTML 요소의 innerHTML 프로퍼티로 읽고 쓰기

요소 객체의 innerHTML 프로퍼티는 그 HTML 요소의 내용을 기리키며, 이로써 HTML 요소의 내용을 읽거나 쓸 수 있다.

폼 컨트롤의 입력 값 읽기

input 요소 등의 폼 컨트롤 요소를 사용하면 사용자의 입력 값을 자바스크립트 프로그램에서 사용할 수 있다.

document.write

초창기 자바스크립트에서는 document.write가 처리 결과를 출력하는 유일한 수단이었다. 현재는 앞서 언급한 DOM을 사용하여 HTML 요소를 생성하거나 처리 결과를 HTML 문서로 출력하는 것이 일반적이다.

Canvas를 활용한 컴퓨터 그래픽스

댓글남기기

참고