본문 바로가기

학원

 (182)
[JavaScript] addEventListener 메소드 addEventListener() 메소드 태그의 이벤트 리스너 속성값으로는 다수의 이벤트 처리 함수 호출이 가능하다. 이벤트 버튼1 하지만 Node(Element) 객체의 이벤트 리스너 속성에는 하나의 이벤트 처리 함수만 등록할 수 있다. 이벤트 버튼2 >> evnetHandleTwo 함수의 명령만 실행된다. Node(Element) 객체의 addEventListener() 메소드를 사용하면 다수의 이벤트 처리 함수 등록이 가능하다. 이벤트 버튼3 Node.addEventListener(eventName, callback[, useCapture])를 이용하여 이벤트 처리 함수 등록 → addEventListener() 메소드를 호출할 때 useCapture 매개변수를 이용하면 캐쳐링 또는 버블링 단계에서..
[JavaScript] 이벤트 전파(Event Propagation) 이벤트 전파(Event Propagation) 브라우저에서 발생된 이벤트는 window 객체에 먼저 도착하고 DOM Tree를 이용하여 이벤트가 발생된 태그에 도착한 후 다시 반대방향으로 이동하여 window 객체에 도착한 다음 이벤트는 소멸된다. 이벤트 전파는 HTML 요소 간에 발생한 이벤트가 어떻게 전파되는지를 나타내는 개념이다. 이벤트 전파는 이벤트가 발생한 요소부터 상위 요소로 전달되는 방식에 따라 캡쳐링(Capturing) 단계와 버블링 단계(Bubbling)로 구분할 수 있다. 캡쳐링(Capturing) 단계 캡쳐링은 이벤트가 window 객체(최상위 요소)로부터 시작하여 타겟 객체(이벤트가 발생된 요소)까지 모든 객체에 이벤트가 전파되는 과정이다. 이벤트가 상위 요소로 전파되면서 하위 요소..
[JavaScript] 이벤트 처리(Event Handle) / this 키워드 / 태그의 기본 이벤트 처리 기능 이벤트 처리(Event Handle) 이벤트(Event)는 태그(박스모델 - Element 객체)에서 발생되는 다양한 사건을 의미한다. 태그에서 발생된 이벤트에 대한 처리를 자바스크립트 명령으로 작성하여 실행한다. 이벤트 처리(Event Handle)를 통해 사용자의 동작에 따른 상호작용, 웹 페이지의 상태 변화에 따른 동적인 처리 등을 구현할 수 있다. 1. 태그의 이벤트 리스너 속성(onXXX)의 속성값으로 이벤트 처리 명령을 작성할 수 있다. → 태그에서 이벤트 리스너 속성의 이벤트가 속성값으로 설정된 명령을 실행한다. 버튼-1 2. 태그를 검색하여 Element 객체로 제공받아 Element 객체의 이벤트 리스너 속성에 이벤트 처리 함수를 등록할 수 있다. → 태그에서 이벤트 리스너 속성의 이벤트..
[JavaScript] DOM(Document Object Model) : 문서 객체 모델 / Element 객체 DOM(Document Object Model) : 문서 객체 모델 DOM은 document 객체를 기반으로 제공되는 HTML 태그의 Element 객체이다. DOM은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 자바스크립트를 사용하여 태그에서 이벤트가 발생될 경우 이벤트 처리 함수를 사용하여 태그를 Element 객체로 제공받아 조작이 가능하다. 이를 통해 동적인 페이지(DHTML:dynamicHTML)를 구현할 수 있다. - DHTML(Dynamic HTML; 동적 HTML): 정적 마크업 언어인 HTML과 클라이언트 기반 스크립트 언어(ex.자바스크립트) 그리고 스타일 정의 언어인 CSS를..
[JavaScript] BOM(Browser Object Model) BOM(Browser Object Model) BOM은 브라우저를 기반으로 제공되는 자바스크립트의 내장객체이다. BOM은 웹 브라우저 기능 요소를 직접 제어할 수 있는 객체의 모음이다. 객체 모델의 종류 : window(상위 객체), navigator, location, history, document 등 1) window 객체 window 객체는 브라우저 창(window)를 객체로 표현하여 브라우저 창과 관련된 정보와 동작을 제어하는 다양한 메소드와 속성을 제공한다. window 객체는 자바스크립트의 최상위객체이자 전역객체이며 모든 객체가 소속된 글로벌 객체이다. → JSC(Javascript core), DOM, BOM을 포함한 전역 객체이다. window 객체의 프로퍼티나 메소드는 window를 생..
[JavaScript] Date 클래스 함수 / Math 클래스 함수 / JSON 클래스 함수 Date 클래스 함수 날짜와 시간이 저장된 객체를 생성하기 위한 클래스 함수이며 Date 클래스 함수의 프로퍼티와 메소드를 제공한다. 클라이언트 플랫폼(OS)의 현재 날짜와 시간이 저장된 Date 객체를 생성하여 변수에 저장한다. var now=new Date(); Date.toString() : Date 객체에 저장된 날짜와 시간을 문자값을로 변환하여 반환하는 메소드 alert("now.toString() = "+now.toString()); //Date 객체가 저장된 변수를 출력하면 toString() 메소드가 자동으로 호출된다. alert("now = "+now); Date.toLocaleString() : Date 객체에 저장된 날짜와 시간을 클라이언트 플랫폼에 맞는 패턴의 문자값으로 변환하여 반..
[JavaScript] Number 클래스 함수 / String 클래스 함수 Number 클래스 함수 숫자값이 저장된 객체를 생성하기 위한 클래스 함수이며 Number 클래스 함수의 프로퍼티와 메소드를 제공한다. 매개변수에 전달된 숫자값이 저장된 Number 객체를 생성하여 변수에 저장 var num=new Number(100); 매개변수에 문자값을 전달해도 숫자값으로 변환되어 저장된다. var num=new Number("100"); var num=new Number(100); var num=new Number("100"); console.log("변수의 자료형 = "+typeof(num));//변수의 자료형 = object Number.toString() : Number 객체에 저장된 숫자값을 문자값으로 변환하여 반환하는 메소드 alert("num.toString() = "+..
[JavaScript] 구조 분해 할당(Destructuring Assignment) 구조 분해 할당(Destructuring Assignment) 구조 분해 할당은 Object 객체 또는 Array 객체의 요소를 해체하여 요소값을 개별적인 변수에 저장하여 제공하기 위한 기능이다. 배열 분해 할당(Array Destructuring) 배열 분해 할당은 배열의 요소를 변수에 할당하는 것이다. [ ] 대괄호를 사용하여 할당할 변수를 지정하고, 할당할 배열을 대상으로 분해한다. 구조분해할당 문법을 이용하지 않은 경우 var array=["홍길동","임꺽정","전우치"]; var one=array[0]; var two=array[1]; var three=array[2]; alert("one = "+one+", two = "+two+", three = "+three); //one = 홍길동, tw..

티스토리툴바