김철용 기록소

이벤트 리스너 이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 한다. 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다. 이벤트 리스너 등록 작성된 이벤트 리스너는 먼저 해당 객체나 요소에 등록되어야만 호출될 수 있다. 객체나 요소에 이벤트 리스너를 등록하는 방법은 다음과 같다. 1. 이벤트의 대상이 되는 객체나 요소에 프로퍼티로 등록하는 방법 2. 객체나 요소의 메소드에 이벤트 리스너를 전달하는 방법 객체나 요소에 프로퍼티로 등록하는 방법 객체나 요소에 프로퍼티로 이벤트 리스너를 등록할 때는 다음과 같은 방법을 사용할 수 있다. 1. 자바스크립트 코드에서 프로퍼티로 등록 2..

이벤트란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다. 따라서 클라이언트 측 자바스크립트를 비동기식 이벤트 중심(event-driven)의 프로그래밍 모델이라고 한다. 이벤트 타입 이벤트 타입은 발생한 이벤트의 종류를 나타내는 문자열로, 이벤트 명(event name)이라고도 한다. 가장 많이 사용하는 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트가 폭넓게 제공되고 있다. 이벤트 명세(event specification) 예전에는 onclick, onload, onmouseover와 같이 단순한 이벤트만을 사용했다. 하지만 웹 기술의 발전에 따라 touch나..

window 객체는 일정 시간이 지난 뒤에 함수를 호출할 수 있도록 다음 메소드를 제공한다. 1. setTimeout() 2. setInterval() 또한, 이렇게 설정된 함수의 호출을 취소할 수 있도록 다음 메소드를 제공한다. 1. clearTimeout() 2. clearInterval() setTimeout() setTimeout() 메소드는 명시된 시간이 지난 뒤에 지정된 함수를 호출한다. window.setTimeout(호출할함수, 지연시간); 이 메소드가 성공적으로 호출되면, 설정된 timeoutID를 반환한다. 이 메소드는 밀리초 단위로 지연 시간을 설정할 수 있다. HTML 삽입 미리보기할 수 없는 소스 1초 후에 색 바뀜 setInterval() setInterval() 메소드는 지정된..

사용자에게 보여줄 수 있는 간단한 대화 상자를 만들기 위해 window 객체는 다음과 같은 메소드를 제공한다. 1.alert() 2. confirm() 3. prompt() alert() window 객체의 alert() 메소드는 사용자에게 간단한 메시지를 보여주고, 그에 대한 사용자의 확인을 기다린다. HTML 삽입 미리보기할 수 없는 소스 버튼 누르기 사용자는 대화 상자의 확인 버튼을 눌러야만 다른 작업을 할 수 있다. confirm() window 객체의 confirm() 메소드는 사용자에게 간단한 메시지를 보여주고, 사용자가 확인이나 취소를 누르면 그 결과를 불리언 값으로 반환한다. confirm() 메소드 confirm 대화상자 prompt() window 객체의 prompt() 메소드는 사용자..

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

screen 객체는 사용자의 디스플레이 화면에 대한 다양한 정보를 저장하는 객체이다. 사용자의 화면 크기 screen 객체의 width와 height 프로퍼티는 사용자의 디스플레이 화면의 크기를 픽셀 단위로 변환한다. 사용자의 화면 크기 실제 사용할 수 있는 화면의 크기 screen 객체의 availWidth와 availHeight 프로퍼티는 실제 사용할 수 있는 화면의 크기를 픽셀 단위로 반환한다. 이 프로퍼티는 운영체제의 작업 표시줄과 같은 공간을 모두 제외한 크기를 반환한다. 실제 사용할 수 있는 화면 크기 한 색상당 사용할 수 있는 비트 수 screen 객체의 colorDepth 프로퍼티는 사용자 화면에서 한 색상당 사용할 수 있는 비트 수를 반환한다. 대부분의 컴퓨터는 24비트의 트루 컬러나 3..

history 객체는 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체이다. 자바스크립트는 사용자의 개인 정보를 보호하기 위해 이 객체에 접근하는 방법을 일부 제한하고 있다. 히스토리 목록의 개수 history 객체의 length 프로퍼티는 브라우저 히스토리의 목록 개수를 반환한다. 히스토리 목록의 개수 아래 버튼을 눌러 새로운 문서를 연 뒤 브라우저의 뒤로가기 버튼 누르기 새로운 문서 열기 히스토리 목록 접근하기 history 객체에는 브라우저의 뒤로 가기와 앞으로 가기 버튼과 같은 동작을 하는 back() 메소드와 forward() 메소드를 가지고 있다. 또한, go() 메소드를 이용하면 인수로 전달받는 정수만큼 히스토리 목록 사이를 이동할 수 있다. HTML 삽입 미리보기할 수 없..

location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있다. 이 객체는 window 객체의 location 프로퍼티와 document 객체의 location 프로퍼티에 같이 연결되어 있다. location 객체의 프로퍼티와 메소드를 이용하면, 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있다. 현재 문서의 URL 주소 location 객체의 href 프로퍼티는 현재 문서의 전체 URL 주소를 문자열로 반환한다. 현재 문서의 URL 주소 현재 문서의 호스트 이름 location 객체의 hostname 프로퍼티는 현재 문서의 인터넷 호스트 이름을 반환한다. 현재 문서의 호스트 이름 서버에 연결되어 있는 파일이 아니기 때문에 호스트..

브라우저 객체 모델 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다. 이 때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다. 브라우저 객체 모델은 문서 객체 모델과 달리 W3C의 표준 객체 모델은 아니다. 하지만 이 모델은 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해준다. Window 객체 window 객체는 웹 브라우저의 창을 나타내는 객체로, 대부분의 웹 브라우저에서 지원하고 있다. 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 된다. window 객체의 메소드는 전역 함수이며, 프로퍼티는 전역 변수가 된다. 문서 객체..