6.1 대화상자 표시하기
6.1.1 대화상자
Web Browser의 전역 객체인 Window객체에는 대화상자를 표시하기 위한 메서드가 세 개 있습니다.
| 메서드 | 설명 |
|---|---|
| window.alert | 경고창 표시 |
| window.prompt | 사용자의 문자열 입력을 받는 대화상자 표시 |
| window.confirm | [확인] 버튼과 [취소] 버튼이 있는 대화상자를 표시 |
6.1.2 alert(경고 대화상자)
alert("하위!");6.1.3 prompt(입력 대화상자)
let name = prompt("누구신가요?"); // 용민 입력
console.log(name); // 용민6.1.4 confirm(확인 대화상자)
확인과 취소 버튼이 있는 대화상자를 표시
let check = confirm("확인 / 취소가 있는 버튼생깁니다");
// 확인 누를시 console.log(check) => true
// 취소 누를시 console.log(check) => false6.2 console
6.2.1 console 객체의 메서드
console.dir / error / info / log 등을 활용하여 웹브라우저와 node js를 포함한 다양한 자바스크립트 실행 환경에서 사용이 가능합니다.
consoe 객체로 출력하는 방법은 alert에 비해 사용방법이 간단하고, 부모 창의 동작을 간섭받지 않기에 디버깅하는데 자주 사용됩니다!
6.2.2. 콘솔에 텍스트 출력하기
문자열이나 변수 값을 콘솔에 로그로 출력할려면 console.log, console.info, console.wran, console.error 메서드를 사용합니다. 메서드에 따라 로그 시작 부분에 주의 표식을 추가하는 등 로그 스타일이 다른 것이다.
let a = [1, 3, 5];
console.log("array", a, "length is" + a.length + " 입니다.");6.2.3 객체의 프로퍼티를 목록으로 표시하기
console.dir 메서드는 객체의 프로퍼티를 나열합니다. 인수로는 객체 하나를 받습니다.
let a = {x:1, y:2}
console.dir(a);
// object
// x:1
// y:2
// [[prototype]]: Object6.2.4 타이머
console.time과 console.timeEnd 메서드를 사용해서 특정 코드의 실행 시간을 측정가능합니다.
console.time("time end");
alert("확인버튼을 눌러주세요");
console.timeEnd("time end");
// time end: 20244.5458984375 msconsole.time 메서드에 타이머 이름을 뜻하는 문자열을 인자로 넘겨 호출. 그리고 실행 시간을 측정하는 작업이 끝난 후에 console.timeEnd 메서드에 타이머 이름을 인수로 넘겨 호출. 그러면 처리에 소요된 시간이 밀리초 단위로 표시!
6.3 이벤트 처리기 등록하기와 타이머 알아보기
6.3.1 이벤트 처리기
Web Browser 에서 동작하는 프로그램은 기본적으로 이벤트 주도형 프로그램(event driven program)이다. 즉, 이벤트가 발생할 때까지 기다렸다가 이벤트가 발생했을 떄 미리 등록해 놓은 작업을 수행하는 프로그램입니다.
6.3.2 HTML 요소의 속성에 이벤트 처리기 등록하기
<html>
<head>
<title>시각 콘솔 표시</title>
<script>
function displayTime() {
let d = new Date();
console.log("현재 시각은" + d.toLocaleString() + "입니다");
}
</script>
</head>
<body>
<input type="button" value="click" onclick="displayTime()">
</body>
</html>
<!-- 2iframeConsoleRunner-6bce046e7128ddf9391ccf7acbecbf7ce0cbd7b6defbeb2e217a867f51485d25.js:1 현재 시각은2023. 2. 21. 오후 10:41:10입니다 -->onclick="displayTime()" 이 부분이 이벤트 처리기 속성입니다.
이벤트 처리기의 이름은 여러가지가 있습니다.
필요한 이벤트 처리기는 mdn에서 찾아서 적용하면 됩니다.
6.3.3 DOM에서 가져온 HTML 요소에 이벤트 처리기 지칭
// 1. Window 객체의 onload 프로퍼티에 함수를 저장한다.
// 이 함수는 웹 브라우저가 문서를 모두 읽어 들인 후에 실행.
window.onload = function() {
// 2. input 요소의 객체 가져오기
var button = document. getElementById("button");
// 3. input 요소를 클릭했을 떄 동작하는 이벤트 처리기를 등록.
button.onClick = displayTime;
};6.3.4 타이머
Window객체에는 setTimeout과 setInterval 메서드가 있다.
지정된 시간이 흐른 후에 함수 실행: setTimeout
setTimeout(function() {
console.log(new Date());
}, 2000);setTimeout은 첫번쨰 인수로, 실행하고자 하는 함수의 참조, 두번쨰 인수로 지연 시간을 밀리초 단위로 지정.
즉, 지정된 시간이 흐른 후(2초) 지정된 함수를 한 번 실행합니다.
setTimeout()이 반환한 값을 clearTimeout()의 인수로 넘겨서 실행하면 함수 실행이 취소됩니다!
var timer = setTimeout(function() {
console.log("hi");
}, 2000);
clearTimeout(timer);
console.log(timer) // 2
지정된 시간마다 반복해서 실행하기 : setInterval
setInterval 메서드를 활용하면 일정한 시간 간격에 따라 반복해서 실행할 함수를 등록할 수 있다.
setInterval(function() {
console.log(new Date());
}, 1000);1초마다 날짜가 반복하여 콘솔에 출력됩니다. setInterval 메서드의 첫 번째 인수로는 '실행하고자 하는 함수의 참조'. 두번째 인수로는 '시간간격'을 밀리초 단위로 설정합니다.
또한, setInterval() 이 반환한 값을 clearInterval()의 인수로 넘겨 실행하면 실행이 취소됩니다.
var timer = setInterval(function() {
console.log(new Date());
}, 1000);
clearInterval(timer); // 반복 실행 취소6.4 HTML 요소를 동적으로 읽고 쓰기
6.4.1 HTML 요소의 innerHTML 프로퍼티로 읽고 쓰기
innerHTML 프로퍼티는 그 HTML 요소의 내용을 가리키며, HTML 요소의 내용을 읽고/쓰기가 가능하다.
6.4.2 폼 컨트롤의 입력 값 읽기
input 요소 등의 폼 컨트롤 요소를 사용하면 사용자의 입력 값을 자바스크립트 프로그램에서 사용할 수 있다.
| 요소 | type 속성 값 | property | 설명 |
|---|---|---|---|
| input | number, text등 | value | 입력된 값을 문자열로 반환한 값 |
| checkbox, radio | checked | 항목의 선택 여부를 뜻하는 논리값 | |
| select | - | selectedIndex | 선택된 option 요소를 가리키는 0부터 시작하는 번호 |
| textarea | - | value | 입력된 문자열 |
6.4.3 document.write
초창기 JS에서는 document.write가 처리 결과를 출력하는 유일한 수단이었다. 현재는 DOM을 사용하여 HTML요소를 생성하거나 처리 결과를 HTML 문서로 출력하는 것이 일반적이다. 따라서 document.write을 사용하는 경우는 매우 드물다.
document.write 은 인수로 받은 문자열을 HTMl 문서의 body요소에 출력한다. 이리 되면 HTML 문서의 내용이 변경되고 웹 브라우저는 수정된 HTML 문서를 표시한다.
<body>
<script>
document.write("<p>하이하이</p>");
</script>
</body>위와 같이 작성시
<body>
<p>하이하이</p>
</body>HTML 문서를 실행하는 도중에 document.write가 실행한다는 점에 유의해야합니다.
또한 이벤트 처리기로 등록한 함수 안에서 document.write를 사용해서는 안된다. 이벤트 처리기 실행되면 HTML 문서 전체 내용이 document.write가 출력한 값으로 바뀐다. 즉, HTML문서를 동적으로 수정할 수 없습니다. 따라서 동적으로 HTML 문서를 변경하려면 DOM을 사용해야 합니다.
