코드노트

이벤트 전파는 이벤트가 발생했을 때 다른 영역에 전파하는것을 말한다. 이벤트 전파에는 캡처링과 버블링이 있다. 이벤트는 하위요소에서 상위요소로 탐색한다. const capts = document.querySelectorAll("div"); capts.forEach(function(div){ div.addEventListener("click", fnCapture, { capture: true }); }); 이벤트 캡처링 - 이벤트 발생 시 가장 상위 영역에서부터 탐색이 된다. - addEventListener에 capture를 true값을 주면 된다. - default값은 false See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen. 위 코드를 실행하게 ..

이벤트 전파 - 상위태그, 하위태그에 이벤트를 실행시켰을 때 전파가 되어 같이 실행되는것을 말한다. 클릭 See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen. codepen에서 클릭을 해보면 한번 클릭으로 세가지 알림창이 뜨는걸 볼 수 있다. 전파를 중단시키려면? 이벤트 전파를 막는 함수를 사용하면 된다. stopPropagation - 크롭, 사파리, 파이어폭스 cancelBubble - IE8 속성 true function fnDivArea(event){ event.stopPropagation(); alert('div 영역!!! '); } function fnSpanArea(e){ event.stopPropagation(); alert('span 영역..

이벤트 event - 시스템에서 사건이 일어나는 것 이벤트 핸들러 = 이벤트 리스너 - 이벤트를 발생했을 때 실행되는 코드 - 이벤트를 js에서 인식하여 사용하게 하는 것 이벤트핸들로 표기법 - on + 이벤트명 표기 - 모두 소문자로 표기 마우스 이벤트 (Mouse Event) 핸들러 click, doubleclick onclick, ondbclick 클릭 / 더블클릭 mousedown onmousedown 마우스 누를 때 mouseup onmouseup 눌렀던 마우스를 땠을 떄 mouseover onmouseover 요소 위로 마우스를 올렸을 때 mouseout onmouseout 요소 밖으로 마우스를 움지였을 때 포커스 이벤트 (Focus Event) 핸들러 focus onfocus 포커스 얻음 b..

클로저(Closure) - 함수와 함수가 선언된 어휘적 환경(렉시컬 환경)의 조합 - 외부 함수보다 충첩함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명주기가 종료한 외부 함수의 변수를 참조 - 중첩 함수 == 클로저 -> 내부함수가 외부함수 변수에 접근 가능 function init() { // name은 init에 의해 생성된 지역 변수 var name = "Mozilla"; // displayName() 은 내부 함수이며, 클로저 function displayName() { // 부모 함수에서 선언된 변수를 사용 alert(name); } displayName(); } init(); 쉽게 이야기하자면 함수안에 함수를 만들었을때 그 외부에 있는 변수를 사용할 수 있다. - 부모 함수에서 선언된 변..

우선순위 큐 (Priority Queue) - 우선 순위를 고려하여 먼저 넣은 데이터가 나오는 FIFO(First In First Out) 기반의 선형 자료 구조 * 일반 큐와 다른점은 무조건 적으로 먼저 넣은 데이터가 나오게 아니라 우선 순위를 정렬하여 나오게 된다. - 우선 수위 정렬 방식 : 배열 기반, 연결리스트 기반, 힙(Heap)기반 등의 정렬 방식이 존재 구현 메서드 // Element(): 데이터와 우선순위를 저장히기 위한 생성자 함수 function Element(data, priority) { this.data = data; this.priority = priority; } - data, priority의 필드를 설정해준다. // PriorityQueue(): Element 관리를 위한..

큐(Queue) - 먼저 넣은 데이터가 먼저 나오는 FIFO(First In First Out) 기반의 선형 자료 구조 - stack과 다르게 앞으로 먼저 나오는 자료구조 Queue(): 생성자 함수로 초기 데이터 설정 function Queue(array) { this.array = array ? array : []; this.tail = array ? array.length : 0; this.head = 0; } - array가 있는 경우에는 array 아니면 빈 배열 getBuffer(): 객체 내 데이터 셋 반환 Queue.prototype.getBuffer = function () { return this.array.slice(); }; - 현재 array를 slice로 복사하여 반환 isEmp..

Dom - 문서 객체 모델 - HTML, XML 문서의 인터페이스 - 문서의 구조화 된 표현 제공 HTML/CSS -> DOM -> JavaScript Node - HTML 문서의 트리를 구성하는 단위 노드 이름 Node Name - 노드의 이름, 태그에 따라 다른 값 지님 노드 값 Node Value - 노드의 값 Element - HTML 태그 - 노드 타입 Attr - 속성 프로토타입 (prototype) - 객체의 원래 상태 - 같은 생성자로부터 생성된 객체는 프로토타입을 공유 - 메모리 절약 생성자 (constructor function) - 객체 생성하는 함수 - 함수명 첫글자 대문자 - new 키워드 사용하여 호출 - this 키워드 이용 * 번거로움 해결, 메모리 효율성 증가 1. 자바스크..

연산자 - 연산자는 프로그램에서 데이터를 처리하여 결과를 산출할 목적으로 사용되는 문자 - 연산의 대상 값은 피연산자라고 하며, 피 연산자의 개수에 따라 단항 / 이항 / 삼항 연산자의 종류 존재 Scope란? - 변수 혹은 상수에 접근할 수 있는 범위 - 모듈 / 함수 내 코드에서 동일한 변수 사용시 간섭을 줄이는 용도로 사용 - Scope는 Global Scope와 Local Scope의 타입으로 구분 ...Global Scope : 전역에 선언되어 어디에서도 접근 가능 ...Local Scope(block, function level scope) : 특정 지역에 선언되어, 해당 지역 내에서만 접근 가능 조건문 if-else - 알고리즘에서 논리적 비교를 할 때 사용되는 조건식 - if, if els..

표현식을 설명하려면 값을 알아야한다. 자바스크립트에서 값은 표현식이 평가 되어 생성된 결과를 말한다. 10 + 10 === 20 20은 값이다. 변수에 할당 되는 것이 값이다. 값은 다양한 방법으로 생성할 수 있지만 기본적인 방법은 리터럴 이다. 리터럴 literal은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다. 표현식은 값으로 평가될 수 있는 문이다. 즉 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다. 값으로 평가될 수 있는 문은 모두 표현식이다. 그렇기 때문에 문법적으로 생각했을 때 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다는 것을 의미한다. 문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다. // 문의 집합으로 이뤄진 것..

javaScript란? - 객체(Object)기반의 스크립트 프로그래밍 언어 - ECMAScript 사양을 준수하는 범용 스크립팅 언어 / ECMAScript : 자바스크립트를 표준화하기 위해 만들어짐 - 자바와 직접적인 연관은 없으며, 웹의 동적 동작을 구현하기 위해 제작 - Mocha -> LiveScript -> JavaScript로 명칭 변경 - JavaScript는 JS엔진위에서 수행되며, Google V8, Firefox SpiderMonkey, Edge Chakra 존재 - JavaScript는 서버가 아니라 클라이언트에서 실행 - 인터프리터 방식으로 다른 언어에 비해 유연함 자바스크립트 기본 문법 변수 - 분류된 데이터에 대하여 담을 수 있는 이름을 가진 어떤 공간 변수 선언 방식 - 데..