대화상자
웹브라우저의 전역 객체인 window객체에는 대화상자를 표시하기 위한 메서드가 세개 있다.
window.alert // 경고 대화상자를 표시
window.prompt // 사용자의 문자열 입력을 받는 대화상자를 표시
window.confirm //[확인]버튼과 [취소]버튼이 있는 대화상자를 표시
prompt가 반환하는 값은 문자열. 숫자 값을 구하려면 parseInt나 parseFloat 메서드를 활용해서 숫자로 바꾸어 주어야 한다.
let age = parseInt(prompt('나이를 입력하시오'));
let height = parseFloat(prompt('키를 입력하십시오'))
console
console 객체는 웹 브라우저와 Node.js를 포함한 다양한 자바스크립트 실행 환겅에서 사용할 수 있다. 콘솔 출력을 돕는 다양한 기능을 제공
콘솔에 텍스트 출력
//문자열이나 변수 값을 콘솔에 로그로 출력
console.log
console.info
console.warn
console.error
객체의 프로퍼티를 목록으로 표시
// console.dir 메서드는 객체의 프로퍼티를 나열
let p = {a: 1, b: 2}
console.dir(p)
타이머(1)
//특정 코드의 실행 시간을 측정할 수 있다.실행 시간을 측정하는 작업이 끝난 후에 console.timeEmd메서드에 타이머 이름을 인수로 넘겨서 호출하면 처리에 소요된 시간이 밀리초 단위로 표시
console.time('answer_time')
alert('확인 버튼을 누르십시오') //실행 시간을 측정하는 작업
console.timeEnd('answer_time') //answer_time: 1216.106ms
이벤트 처리기
이벤트가 발생했을 때 실행되는 함수를 말한다.
- 이벤트 : 사용자가 버튼을 클릭하는 행위처럼 단말기와 애플리케이션이 처리할 수 있는 동작이나 사건을 뜻한다.
- 이벤트 주도형 프로그램 : 이벤트가 발생할 때까지 기다렸다가 이벤트가 발생했을 때 미리 등록해 둔 작업을 수행하는 프로그램
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function displayTime() {
let d = new Date();
console.log("현재 시각은 " + d.toLocaleString() + "입니다.")
}
// toLocalString() 메서드는 배열의 요소를 나타내는 문자열을 반환
</script>
</head>
<body>
<input type="button" value="click" onclick="displayTime()">
<!-- input 요소를 클릭 했을 때 함수 displayTime이 실행 -->
<!-- onlick: '마우스로 클릭했음'을 뜻하는 이벤트-->
</body>
</html>
DOM에서 가져온 HTML요소에 이벤트 처리기 지정하기
DOM(Document Object Model)은 자바스크립트 등의 프로그램이 HTML요소를 조작할 수 있게 하는 인터페이스.
DOM에서 이벤트 처리기를 등록하는 가장 큰 목적은 HTML코드와 자바스크립트 코드를 분리하기 위해서이다. 코드를 분리하면 프로그램의 가독성과 유지 보수성이 높아진다.
DOM객체
DOM의 주요 객체
- window: window객체라고 부르며 웹 브라우저 윈도우 하나 또는 챕 하나를 가리킨다.
- document: Document 객체라고 부르며 HTML문서 전체를 가리킨다.HTML문서에서 HTML 요소 객체를 가져오거나 HTML요소를 새로 만드는 등 HTML문서 전반에 걸친 기능을 제공
- 요소 객체: HTML문서의 요소를 가리키는 객체
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function displayTime() {
let d = new Date();
console.log("현재 시각은 " + d.toLocaleString() + "입니다.")
}
// 이벤트 처리기를 등록하는 작업의 실행 시점을 HTML문서 전체를 읽어 들인 이후로 미룬다. 이를 위해 window 객체의 onload 프로퍼티에 이벤트 처리기를 등록하는 작업을 수행하는 초기 설정 함수를 정의
// 이 코드 덕분에 웹 브라우저가 HTML문서 전체를 모두 읽어 들인 후에 우변의 함수를 실행시킬 수 있다.
window.onload = function(){
let button = document.getElementById('button')
button.onclick = displayTime;
}
// document.getElementById는 전달받은 인수를 id 속성의 값으로 가지고 있는 HTML요소의 요소 객체를 반환.만약 HTML 요소를 찾지 못하면 null을 반환.
// 요소 객체의 onclick 프로퍼티 값으로 함수 displayTime의 참조를 대입
</script>
</head>
<body>
<input type="button" value="click" id='button'>
</body>
</html>
타이머(2)
window 객체에는 setTimeout과 setInterval 메서드가 있다. 이들 메서드를 활용하면 지정된 시간이 흐른 후에 함수를 실행하거나 일정한 시간 간격에 따라 함수를 반복 실행할 수 있다.
let timer = setTimeout(function(){
console.log(new Date())
},2000);
// 콘솔에 2초 후에 날짜가 표시
clearTimeout(timer)
// setTimeout()으로 실행 한 함수를 멈출 때 사용
- setTimeout 메서드의 첫 번째 인수로 ‘실행하고자 하는 함수의 참조’, 두 번째 인수로는 ‘지연 시간’을 밀리초 단위로 지정
let timer = setInterval(function() {
console.log(new Date())
},1000)
// 1초마다 날짜가 콘솔에 표시
clearInterval(timer)
// setInterval()으로 실행 한 함수를 멈출 때 사용
- setInterval 메서드를 활용하면 일정한 시간 간격에 따라 반복해서 실행할 함수를 등록할 수 있다.
innerHTML 프로퍼티
요소 객체의 innerHTML 프로퍼티는 그 HTML요쇼의 내용을 가리키며, 이로써 HTML요소의 내용을 읽거나 쓸 수 있다.
window.onload = function() {
let startButton = document.getElementById('start')
let stopButton = document.getElementById('stop')
let display = document.getElementById('display')
let startTime,timer
startButton.onclick = start;
function start() {
startButton.onclick = null
stopButton.onclick = stop
startTime = new Date()
timer = setInterval(function() {
let now = new Date()
display.innerHTML = ((now - startTime)/1000).toFixed(2)
},10)
}
// id 속성 값이 display인 HTML 요소의 모든 자식 요소를 삭제하고, 우변의 표현식을 평가한 내용을 HTML코드로 바꾸어 대입
function stop() {
clearInterval(timer);
startButton.onclick = start;
}
};
<p id="display">0.00</p>
<input type="button" value="start" id="start">
<input type="button" value="stop" id="stop">
document.write
현재는 DOM을 사용하여 HTML 요소를 생성하거나 처리 결과를 HTML문서로 출력하는 것이 일반적. 따라서 document.write를 사용하는 경우 매우 드물다. document.write 메서드는 인수로 받은 문자열을 HTML문서의 body 요소 안에 출력한다. 이렇게 되면 HTML 문서의 내용이 바꾸게 되고 웹 브라우저는 수정된 HTML문서를 표시하게 되며 동적으로 HTML문서를 변경하기에는 적합하지 않다.