타이머(timer) 함수(메소드) 종류 및 사용법 메소드 특징 setTimeout() setTimeout() 메소드는 지정한 시간이 경과 되면 1회 (호출)실행합니다. 사용법 : setTimeout(호출할함수, 지연시간); clearTimeout() setTimeout() 메소드에 의해 함수가 호출되기 전에 실행되어야 (호출)실행을 취소할 수 있습니다. 사용법 : clearTimeout(setTimeout를 변수로 지정한 ID); setInterval() setInterval() 메소드는 지정된 시간 간격마다 지정된 함수를 반복적으로 (호출)실행 합니다. 사용법 : setInterval(호출할함수, 지연시간); clearInterval() clearInterval() 메소드의 인수로 전달하면, 반복되는 ..

BOM (Browser Object Model)은 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있습니다. 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델이다. 1. screen 객체는 화면 정보를 가져오는 객체입니다. 속성은 다음과 같습니다. 속성 특징 screen.width 화면의 가로 크기를 가져옵니다. screen.height 화면의 세로 크기를 가져옵니다. screen.availWidth 작업 표시줄이 차지하는 부분을 제외한 가로 크기를 가져옵니다. screen.availHeight 작업 표시줄이 차지하는 부분을 제외한 세로 크기를 가져옵니다. screen.colorDepth 화면의 색상 팔레트 깊이(픽셀당 비트 수)를 반환합니다. [화면의 색상 팔레트 깊이(픽셀당 ..

addEventListener() 메소드를 사용하면 하나의 객체에 여러 개의 이벤트 리스너를 등록할 수 있습니다. removeEventListener() 메소드를 사용하면 등록된 이벤트 리스너를 삭제할 수 있습니다. 예시) 결과) ※ 혹시 설명에 오류가 있다면 양해 부탁드립니다.

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 인터페이스입니다. 1. HTML 태그 이름(tag name)을 이용한 선택 예시) 고양이 개 닭 출력 결과 2. 아이디(id)를 이용한 선택 예시) 고양이 개 닭 출력 결과 3. 클래스(class)를 이용한 선택 예시) 고양이 개 닭 출력 결과 4. name 속성(attribute)을 이용한 선택 예시) 고양이 개 닭 출력 결과 5. CSS 선택자(selector)를 이용한 선택 예시) 고양이 개 닭 출력 결과 6. HTML 객체 집합(object collection)을 이용한 선택 예시) 출력 결과 7. DOM 요소의 내용 변경 예시) 원래 문장 출력 결과 ※ 혹시 설명에 오류가 있다면 양해 부..

this는 사전적 의미는 이것이지만 자바스크립트에서는 누가 나를 호출했느냐란 의미로 this가 어떻게 쓰여 졌느냐에 따라 달라진다는 것 입니다. 1. this를 단독으로 사용할 경우 // this를 단독 호출하는 경우 global object를 가리킵니다. var x = this; document.write(x); // 결과 : [object Window] 2. this를 함수 안에서 사용할 경우 // ===== 함수의 주인인 [object Window] 에게 바인딩이 됩니다. ===== function myFun() { return this; } document.write(myFun()); // 결과 : [object Window] // ===== addNum() 함수에서 this.num을 선언하여 실..

Object.assign()은 소스 개체에서 대상 개체로 모든 열거 가능한 속성과 자체 속성을 복사하고, 대상 객체를 반환합니다. 즉, 소스 개체의 열거 가능한 고유 속성을 대상 개체에 할당 할 수 있고 개체를 복제하거나 개체를 병합할 수 있습니다. Object.assign(target, ...sources)는 target이 빈객체{}가 아닐 경우, 반환 받은 값을 저장한 새로운 변수는 target과 참조값을 공유한다. 1. Object.assign() 사용법 var my_obj = {color: 'red'}; // my_obj 개체에서 열거 가능한 속성과 자체 속성을 cloned_my_obj에 복사 var cloned_my_obj = Object.assign({}, my_obj ); 2. Object...