뮁이의 개발새발

Chapter 5. 클로저클로저란?어떤 컨텍스트 A에서 선언한 내부함수 B의 실행 컨텍스트가 활성화된 시점에 B의 outerEnvironmentReference가 참조하는 대상인 A의 LexicalEnvironment에 접근이 가능하게 됨.이때 A에서는 B에서 선언한 변수에 접근할 수 없지만 B에서는 A에서 선언한 변수에 접근이 가능함내부함수 B가 A의 LexicalEnvironment를 언제나 사용하는것은 아님.내부함수에서 외부 변수를 참조하는 경우에 한해서만 combination이 됨.⇒ 어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상// 외부 함수의 변수를 참조하는 내부 함수(1)var outer = function() { var a = 1; var inner = functio..

Chapter 4. 콜백함수콜백함수란?다른 코드의 인자로 넘겨주는 함수ex) 알람을 설정하는 함수(시계의 제어권 X) / 수시로 시간을 확인하는 함수 (시계의 제어권 O)즉 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수제어권var count = 0;var cbFunc = function() { console.log(count); if (++count > 4) clearInterval(timer);};var timer = setInterval(cbFunc, 300);// -- 실행 결과 --// 0 (0.3초)// 1 (0.6초)// 2 (0.9초)// 3 (1.2초)// 4 (1.5초)여기서 setInterval의 구조는 var intervalID = ..

Chapter 3. this this란? 자기 자신이 속한 객체를 가리키는 식별자를 참조할 수 있는 키워드 메서드의 주인이라고 생각하면 편함 JS에서는 함수와 객체의 구분이 느슨하기 때문에, 이 둘을 구분하는 거의 유일한 기능임. 상황에 따라 달라지는 this this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정됨 실행 컨텍스트는 함수를 호출할 때 생성됨 this는 함수가 호출될 때 결정됨 전역 공간에서의 this 전역 객체를 가르킴 브라우저 - window / Node.js - global 전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로도 할당함 var a = 1; console.log(a); // 1 console.log(window.a) // 1 console.log(this..

Chapter 2. 실행 컨텍스트 1. 실행 컨텍스트란? 실행할 코드에 제공할 환경 정보를 모아놓은 객체 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아올렸다가, 위부터 차례대로 실행하게 됨. 실행 컨텍스트를 구성할 수 있는 방법 : 전역공간, eval()함수, 함수 전역 컨텍스트가 콜스택에 담김 자바 스크립트 파일이 열리는 순간 전역 컨텍스트가 활성화됨 순차적으로 수행 outer를 호출하면, outer에 대한 환경 정보를 수집. 실행 컨텍스트 생성하여 콜스택에 넣음 outer과 관련된 내부의 코드를 순차적으로 수행 이후 스택에 쌓인 차례대로 수행 ⇒ 한 실행 컨텍스트가 콜 스택의 맨 위에 쌓이는 순간이 곧 현재 실행할 코드에 관여하게 되는 시..

Chapter 1. 데이터 타입 데이터 타입의 종류 기본형 vs 참조형 기본형 값이 담긴 주솟값을 바로 복제 불변성을 가짐 참조형 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제함. 데이터 타입에 관한 배경지식 메모리의 낭비를 최소화하기 위해, bit와 byte라는 데이터의 단위를 생성함. 그러나, 메모리 용량이 커진 현상황에서 자바스크립트가 등장. 이에 대한 결과로, 숫자는 정수/부동소수형의 구분 없이 8바이트를 확보하게 됨. 형변환 불필요 식별자란? 어떤 데이터를 식별하는 데 사용하는 이름, 즉 변수명 변수 선언 변할 수 있는 데이터를 만든다. 이 데이터의 식별자는 a로 한다. 결국, 변수는 변경 가능한 데이터가 담길 수 있는 공간 또는 그릇 변수를 선언하는 순간, 해당 변수의 집주소(식..

[bind()] - 선택된 DOM 객체의 이벤트에 지정한 핸들러를 연결하는 함수 - 동적으로 생성한 DOM 객체에는 적용 X [unbind()] - 객체 이벤트에서 지정한 핸들러를 지운다. [on()] - bind()와 마찬가지로 DOM 객체에 이벤트 핸들러 연결 - 동적으로 생성한 DOM 객체에도 적용 가능 - 이벤트 연결에 가장 기본이 되는 함수로 권장 [off()] - DOM 객체의 이벤트 제거 [one()] - on()->이벤트 실행->off() [keyboard event] - keydown: 키보드 누를 때 발생 - keypress : 글자가 입력될 때 발생 (ex 아이디 중복검사) - keyup : 키보드를 뗄 때 발생 [Window Event] - ready : DOM 객체가 준비되면 발생..

[jQuery] - 경량 javascript library - 조작, 이벤트 핸들링, 애니메이션, Ajax등을 api를 통해 간편하게 사용 => 쉽고 빠른 개발~! - 메소드 체인을 제공하여, 반복적인 코딩을 줄여줌. [특징] - 어떤 브라우저에서도 동일하게 동작. => 대체코드 작성 필요X - 네이티브 DOM API보다 직관적이고 편리한 API를 제공! [기본 구문] $(selector).action(); - $(selector)는 탐색한 DOM 객체들을 담은 래퍼세트를 반환 [jQuery에서의 DOM 탐색] - CSS에서 사용하는 Selector 표현 방식을 사용 - DOM 탐색 결과로 래퍼세트(Wrapper Set)라는 DOM을 래핑 한 객체를 반환. [기본 형식] $("h1").css("color..

[Event] - 웹 페이지에서의 여러가지 동작 (상호작용) - ex: 마우스 클릭, 키보드 클릭 ... [마우스 이벤트] - onclick : 마우스로 클릭 - ondblclick: 더블클릭 - onmouseup: 마우스 버튼을 올렸을 때 - onmousedown: 마우스 버튼을 눌렀을 때 [키보드 이벤트] - onkeypress: 키보드가 눌려 졌을때 (눌렀다가 떼면 발생) - onkeydown: 키보드를 누르는 순간 발생 - onkeyup: 키보드의 누르고 있던 키를 뗄 때 발생 [Frame(UI) 이벤트] - onload: 모든 frame이 로딩 되었을 때 - onabort: 로딩하는 중 취소하여 중단 되었을 때 - onselect: 텍스트를 선택 했을때 [폼(form) 이벤트] - form이 전..