이벤트 리스너(event listener) = 이벤트 핸들러(event handler) 이벤트가 발생했을 때 그 처리를 담당하는 함수 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행 이벤트 리스너 등록 작성된 이벤트 리스너는 먼저 해당 객체나 요소에 등록되어야만 호출될 수 있음 객체나 요소에 이벤트 리스너를 등록하는 방법 1. 이벤트의 대상이 되는 객체나 요소에 프로퍼티로 등록하는 방법 2. 객체나 요소의 메소드에 이벤트 리스너를 전달하는 방법 객체나 요소에 프로퍼티로 등록하는 방법 1. 자바스크립트 코드에서 프로퍼티로 등록 2. HTML 태그에 속성으로 등록 자바스크립트 코드에서 프로퍼티로 등록하는 방법은 거의 모든 브라우저가 대부분의 이벤트 타입을..

이벤트(event)란? 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있음 비동기식 이벤트 중심(event-driven)의 프로그래밍 모델 - 클라이언트 측 자바스크립트 이벤트 타입(event type) = 이벤트 명(event name) 발생한 이벤트의 종류를 나타내는 문자열 가장 많이 사용하는 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트가 폭넓게 제공 예제 HTML 문서의 특정 단락을 클릭하면 발생하는 이벤트를 처리 이 문자열을 클릭해 보세요! ... 코딩연습 ▶ 이벤트 명세(event specification) 예전에는 onload, onclick, onmouseover..

타이머(timer) window 객체는 일정 시간이 지난 뒤에 함수를 호출할 수 있도록 다음 메소드를 제공 1. setTimeout() 2. setInterval() 또한, 이렇게 설정된 함수의 호출을 취소할 수 있도록 다음 메소드를 제공 3. clearTimeout() 4. clearInterval() setTimeout() 메소드 명시된 시간이 지난 뒤에 지정된 함수를 호출 문법 window.setTimeout(호출할함수, 지연시간); 이 메소드가 성공적으로 호출되면, 설정된 timeoutID를 반환 이 메소드는 밀리초(milliseconds) 단위로 지연 시간을 설정할 수 있음 예제 function startTimeout() { setTimeout(printCurrentDate, 2000); } f..

대화 상자(dialog box) 사용자에게 보여줄 수 있는 간단한 대화 상자를 만들기 위해 window 객체는 다음과 같은 메소드를 제공 1. alert() 2. confirm() 3. prompt() alert() 메소드 사용자에게 간단한 메시지를 보여주고, 그에 대한 사용자의 확인을 기다림 문법 window.alert("간단한 메시지"); 사용자는 대화 상자의 확인 버튼을 눌러야만 다른 작업을 진행할 수 있음 예제 function alertDialogBox() { alert("확인을 누를 때까지 다른 작업을 할 수 없어요!"); } 코딩연습 ▶ window 객체의 모든 메소드나 프로퍼티를 사용할 때는 window라는 접두사를 생략할 수 있음 confirm() 메소드 사용자에게 간단한 메시지를 보여주고..

Navigator 객체 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체 이름은 넷스케이프(Netscape)의 초기 웹 브라우저였던 네비게이터(Navigator)에서 유래 브라우저 스니핑(browser sniffing) 과거에는 방문자의 웹 브라우저의 종류를 미리 파악하여 조치함으로써, 브라우저 간의 호환성을 유지 호환성을 유지하는 방법 navigator 객체 > 이러한 브라우저 스니핑에서 사용할 수 있는 다양한 표준 프로퍼티 및 비표준 프로퍼티를 제공 하지만 현재는 이 방법보다 필요한 프로퍼티만을 간단하게 테스트하는 기능 테스팅 방법을 더 많이 사용 현재 브라우저의 이름 navigator 객체의 appName과 appCodeName 프로퍼티는 현재 사용하고 있는 브..

History 객체 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체 자바스크립트는 사용자의 개인 정보를 보호하기 위해 이 객체에 접근하는 방법을 일부 제한하고 있음 히스토리 목록의 개수 history 객체의 length 프로퍼티는 브라우저 히스토리 목록의 개수를 반환 예제 function openDocument() { location.assign("/javascript/js_bom_history"); } document.getElementById("text").innerHTML = "현재 브라우저의 히스토리 목록의 개수는 " + history.length + "개 입니다."; 코딩연습 ▶ 히스토리 목록 접근하기 history 객체 back() 메소드 - 브라우저의 뒤로 가기 forwa..