대화상자 표시하기
| 메서드 | 설명 |
|---|---|
| window.alert | 경고 대화상자를 표시 |
| window.prompt | 사용자의 문자열 입력을 받는 대화상자를 표시 |
| window.confirm | [확인] 버튼과 [취소] 버튼이 있는 대화상자를 표시 |
alert(경고 대화상자)
alert("안녕하세요!");
prompt(입력 대화상자)
var age = parseInt(prompt("나이를 입력하세요"));
confirm(확인 대화상자)
var ret = confirm("링크를 표시하겠습니까?");
이벤트 처리기 등록하기와 타이머 알아보기
이벤트 처리기
웹 브라우저에서 동작하는 프로그램은 기본적으로 이벤트 주도형 프로그램이다. 이벤트 주도형 프로그램이란 이벤트가 발생할 때까지 기다렸다가 이벤트가 발생했을 때 미리 등록해 둔 작업을 수행하는 프로그램을 의미한다.
함수를 이벤트 처리기로 등록하는 방법은 세 가지이다.
- HTML 요소의 속성으로 등록하는 방법
- DOM 요소의 프로퍼티로 등록하는 방법
- addEventListener 메서드를 사용하는 방법
HTML 요소의 속성에 이벤트 처리기 등록하기
<!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>
<input type="button" value="click" onclick="displayTime()">
밑줄로 강조한 부분이 이벤트 처리기 속성이다. onclick 부분을 이벤트 처리기 이름이라고 하며, 이벤트 처리기 속성에는 이벤트가 발생했을 때 실행할 자바스크립트 문장을 문자열로 만들어 대입한다.
하지만 이벤트 처리기 속성을 이용하면 HTML 코드와 자바스크립트 코드가 뒤섞이는 단점이 존재한다. 이를 분리하려면 'DOM 요소에 이벤트 처리기 지정하기'를 사용하거나 'addEventListener 메서드'를 이용하는 방법이 있다.
DOM에서 가져온 HTML 요소에 이벤트 처리기 지정하기
DOM 객체
DOM은 자바스크립트 등의 프로그램이 HTML 요소를 조작할 수 있게 하는 인터페이스이다.
- window : window 객체라고 부르며 웹 브라우저 윈도우 하나 또는 탭 하나를 가리킴
- document : Document 객체라고 부르며 HTML 문서 전체를 가리킴. HTML 문서에서 HTML 요소 객체를 가져오거나 HTML 요소를 새로 만드는 등 HTML 문서 전반에 걸친 기능을 제공
- 요소 객체 : HTML 문서의 요소를 가르키는 객체
DOM을 사용해서 이벤트 처리기 등록하기
- window.onload를 사용하여 HTML 문서를 다 읽어 들인 후 에 2와 3을 실행
- 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() + " 입니다.");
}
// 1. Window 객체의 onload 프로퍼티에 함수를 저장한다
// 이 함수는 웹 브라우저가 문서를 모두 읽어 들인 후에 실행된다
window.onload = function() {
// 2. input 요소의 객체 가져오기
var button = document.getElementById("button");
// 3. input 요소를 클릭했을 때 동작하는 이벤트 처리기를 등록한다
button.onclick = displayTime;
};
</script>
</head>
<body>
<input type="button" value="click" id="button">
</body>
</html> - Window 객체의 onload 프로퍼티에 함수를 저장한다
DOM에서 이벤트 처리기를 등록하는 가장 큰 목적은 자바스크립트와 HTML을 분리하기 위해서이다. 이를 구현하기 위해 script를 head의 자식 요소로 배치하고 DOM을 사용하여 body 바깥에서 body 안에 있는 HTML을 조작한다.
그러나 head 안에 script 요소는 코드가 실행되는 시점에서 body를 읽지 못하는 상황이기 때문에 이벤트 처리기를 등록하는 작업의 실행 시점을 HTML 문서 전체를 읽어 들인 이후로 미룬다. 이를 위해window.onload = function() {...};이처럼 초기 설정 함수를 정의한다.
웹 브라우저는 HTML 문서를 위에서부터 차례대로 해석한다. 도중에 script 요소를 발견하면 script 내부를 해석하는데 이때 동기 실행(블로킹 실행)되는데 script안의 작업이 끝나기 전까지 HTML 문서의 해석은 멈추게 된다.
-
getElementById 메서드로 요소 객체를 가져온다
var button = document.getElementById("button");
document.getElementById는 전달받은 인수를 id 속성의 값으로 가지고 있는 HTML 요소의 객체를 반환한다. 이 요소 객체가 가진 메서드를 사용해서 HTML 요소를 조작하는 다양한 작업을 수행할 수 있다. -
이벤트 처리기 프로퍼티에 이벤트 처리기로 동작할 함수를 등록한다
button.onclick = displayTime;
요소 객체의 onclick 프로퍼티 값으로 함수 displayTime의 참조를 대입한다. 이 결과로 input 요소를 클릭하면 함수 displayTime이 실행된다. 여기서 onclick 이벤트 처리기를 등록하기 위한 프로퍼티를 가리켜 이벤트 처리기 프로퍼티라고 부른다.
타이머
지정된 시간이 흐른 후에 함수 실행하기 : setTimeout
setTimeout(fucntion() {
console.log(new Date());
}, 2000);이 코드를 실행하면 2초 후에 콘솔에 날짜가 표시된다.
지정된 시간마다 반복해서 실행하기 : setInterval
setInterval(function(){
console.log(new Date());
}, 1000);이 코드를 실행하면 1초마다 콘솔에 날짜가 표시된다.
지연 시간을 0밀리초로 지정하면 어떻게 될까?
지정된 함수가 즉시 실행될 거 같지만, 실제로는 현재 실행중인 이벤트 처리기의 작업이 끝나길 기다렸다가 바로 실행된다.
HTML 요소를 동적으로 읽고 쓰기
HTML 요소의 innerHTML 프로퍼티로 읽고 쓰기
...
<script>
window.onload = function() {
var startButton = document.getElementById("start"); // start 버튼 요소
var stopButton = document.getElementById("stop"); // stop 버튼 요소
var display = document.getElementById("display"); // 결과를 표시하는 요소
var startTime,timer;
startButton.onclick = start; // strat 버튼 활성화
function start() {
startButton.onclick = null; // start 버튼 비활성화
stopButton.onclick = stop; // stop 버튼 활성화
startTime = new Date();
// 0.01 초마다 경과한 시간을 표시
timer = setInterval(function() {
var now = new Date();
// #display에 경과한 시간 쓰기
display.innerHTML = ((now - startTime)/1000).toFixed(2);
},10);
}
function stop() {
clearInterval(timer); // 타이머 해제
startButton.onclick = start; // strat 버튼 활성화
}
};
</script>
</head>
<body>
<p id="display">0.00</p>
<input id="start" type="button" value="start">
<input id="stop" type="button" value="stop">
...이 예제는 요소 객체 display의 innerHTML 프로퍼티에 경과 시간을 대입해서 id 속성 값이 display인 HTML 요소의 내용을 갱신한다.
display.innerHTML = ((now - startTime)/1000).toFixed(2);
id 속성 값이 display인 HTML 요소의 모든 자식 요소를 제거하고, 우변의 표현식을 평가한 내용을 HTML코드로 바꾸어 대입한다.
폼 컨트롤의 입력 값 읽기
var h = parseFloat(document.getElementById("height").value);
var w = parseFloat(document.getElementById("weight").value);input 요소 객체의 value 프로퍼티로 input 요소의 입력 값을 구한다.
document.write
초장기 자바스크립트에서는 document.write가 처리 결과를 출력하는 유일한 수단이었다. 현재는 DOM을 사용하여 HTML 요소를 생성하거나 처리 결과를 HTML 문서로 출력하는 것이 일반적이다.
주의해야 할 점으로 이벤트 처리기로 등록한 함수 안에서 document.write를 사용해서는 안 되는데, 만약 사용하게 된다면 이벤트 처리기가 실행되면 HTML 문서의 전체 내용이 document.wirte가 출력한 값으로 바뀌게 되어 HTML 문서를 수정할 수 없게 된다.
