모던 자바스크립트 입문을 정리한 내용입니다.
대화 상자를 표시하는 메서드
- window.alert : 경고 대화상자를 표시
alert("안녕하세요"); - window.prompt : 사용자의 문자열 입력을 받는 대화상자를 표시
var name = prompt("이름을 입력하십시오") - window.confirm : [확인] 버튼과 [취소] 버튼이 있는 대화상자를 표시
var ret = confirm("링크를 표시하시겠습니까?");
- 대화상자는 모달(modal) 창입니다. 대화상자가 떠 있는 중에는 부모 창의 작업이 일시적으로 정지 상태가 되어 부모 창을 조작할 수 없게 된다는 뜻입니다.
- 대화상자에서는 일반 텍스트만 표시할 수 있으며 줄 바꿈 문자 등은 이스케이프 시퀀스로 표현합니다.
객체의 프로퍼티를 목록을 표시하기
- console.dir 메서드는 객체의 프로퍼티를 나열합니다.
var p = {x:1, y:2};
console.dir(p);
object
x:1
y:2
> __proto__: object타이머
- console.time과 console.timeEnd 메서드를 사용해서 특정 코드의 실행 시간을 측정할 수 있습니다.
console.time("answer_time");
alert("확인 버튼을 누르십시오"); // 실행 시간을 측정하는 작업
console.timeEnd("answer_time"); // answer_time : 1216.106ms이벤트 처리기
- 웹 브라우저에서 동작하는 프로그램은 기본적으로 이벤트 주도형 프로그램입니다.
- 이벤트 : 사용자가 버튼을 클릭하는 행위처럼 단말기와 애플리케이션이 처리할 수 있는 동작이나 사건을 뜻합니다.
- 이벤트 주도형 프로그램 : 이벤트가 발생할 때까지 기다렸다가 이벤트가 발생했을 때 미리 등록해 둔 작업을 수행하는 프로그램
HTML요소의 속성에 이벤트 처리기 등록하기
...
<script>
function displayTime() {
var d = new Date();
console.log("현재 시각은 " + d.toLocaleString() + " 입니다.");
}
</script>
<body>
<input type = "button" value = "click" onclick="displayTime()">
</body>- 이 예제에서 이벤트 처리기는 다음 HTML 요소에 등록되어 있습니다.
- 여기에서 onclick 부분을 이벤트 처리기 이름이라고 하며, 이벤트 처리기 이름은 곧 이벤트 유형을 뜻합니다.
- onclick 이외에도 onmouseup, onmouseout 등 여러가지 이벤트 처리기들이 있습니다.
- HTML 속성에 이벤트 처리기를 등록하면 HTML 코드와 자바스크립트 코드가 뒤섞이는 단점이 있습니다.
DOM에서 가져온 HTML요소에 이벤트 처리기 지정하기
- DOM은 자바스크립트 등의 프로그램이 HTML 요소를 조작할 수 있게 하는 인터페이스입니다.
DOM 객체
- window : Window 객체라고 부르며 웹 브라우저 윈도우 하나 또는 탭 하나를 가리킵니다.
- document : Document 객체라고 부르며 HTML 문서 전체를 가리킵니다. HTML 문서에서 HTML 요소 객체를 가져오거나 HTML 요소를 새로 만드는 등 HTML 문서 전반에 걸친 기능을 제공합니다.
- 요소 객체 : HTML문서의 요소를 가리키는 객체입니다.
DOM을 사용해서 이벤트 처리기 등록하기
...
<script>
function displayTime() {
var d = new Date();
console.log("현재 시각은 " + d.toLocaleString() + " 입니다.");
}
window.onload = function() {
var button = document.getElementById("button");
button.onclick = displayTime;
};
</script>
<body>
<input type = "button" value = "click" onclick="displayTime()">
</body>- window.onload를 사용해서 HTML 문서를 다 읽어들인 후에 다음 단계를 실행합니다.
- document.getElementById 메서드를 사용하여 특정 id 속성 값을 가진 HTML 요소의 요소 객체를 가져옵니다.
- 요소 객체의 이벤트 처리기 프로퍼티에 이벤트 처리기로 동작할 함수를 등록합니다.
- 여기에서 onclick 이벤트 처리기를 등록하기 위한 프로퍼티를 가리켜 이벤트 처리기 프로퍼티라고 부릅니다.
자바스크립트 프로그램의 작성법
- 자바스크립트 코드는 body 요소 안의 HTML 요소에 작성하지 않습니다. 모두 head 요소 안의 script 요소 안에 작성합니다. 이때 script 요소 안에 직접 코드를 작성하는 방법이 있고, 별도 파일로 작성한 코드를 읽어 들이는 방법이 있습니다. 보통은 script요소 여러 개를 head 요소 안에 배치합니다.
- window.onload에 등록한 함수는 이벤트 처리기의 설정을 비롯한 기타 프로그램의 초기 설정 작업을 수행합니다. 이 함수 안에서 등록된 각각의 이벤트 처리기는 해당 이벤트에 반응하여 다양한 작업을 수행합니다.
- window.onload = function() {...}를 제외한 코드는 이벤트 처리기 함수와 그 안에서 사용하는 다양한 함수를 정의합니다. 또한 필요에 따라서는 전역 변수를 선언하기도 합니다.
타이머
지정된 시간이 흐른 후에 함수 실행 : setTimeout
- 일정 시간이 흐른 후에 한 번만 호출되는 함수입니다.
setTimeout(function() {
console.log(new Date());
}, 2000);-
이 코드를 실행하면 콘솔에 2초 후에 날짜가 표시됩니다. setTimeout 메서드의 첫 번째 인수로는 '실행하고자 하는 함수의 참조', 두 번째 인수로는 '지연 시간'을 밀리초 단위로 지정합니다.
-
또한 setTimeout()이 반환한 값을 clearTimeout()의 인수로 넘겨서 실행하면 함수 실행이 취소됩니다.
지정된 시간마다 반복해서 실행하기 : setInterval
- 일정한 시간 간격에 따라 반복해서 실행하는 함수입니다.
setInterval(function() {
console.log(new Date());
}, 1000);- 이 코드를 실행하면 1초마다 날짜가 콘솔에 표시됩니다. setInterval 메서드의 첫 번째 인수로는 '실행하고자 하는 함수의 참조'거나 "문자열", 두 번째 인수로는 '시간 간격'을 밀리초 단위로 설정합니다.
- 첫 번째 인수가 문자열일 경우, 내부적으로 eval()로 평가된 후에 실행됩니다.
- 또한 setInterval()이 반환한 값을 clearInterval()의 인수로 넘겨서 실행하면 함수 실행이 취소됩니다.
데이터데이터데이터!!