├── chapter2 ├── 2-2.md ├── 2-0.md ├── 2-3.md ├── 2-1.md ├── 2-4.md └── 2-5.md ├── README.md ├── chapter6 ├── 6-9.md ├── 6-3.md ├── 6-4.md ├── 6-5.md ├── 6-10.md ├── 6-8.md ├── 6-6.md ├── 6-2.md ├── 6-7.md └── 6-1.md ├── chapter7 ├── 7-10.md ├── 7-5.md ├── 7-12.md ├── 7-4.md ├── 7-3.md ├── 7-11.md ├── 7-7.md ├── 7-2.md ├── 7-6.md ├── 7-1.md ├── 7-8.md └── 7-9.md ├── chapter4 ├── 4-12.md ├── 4-6.md ├── 4-3.md ├── 4-11.md ├── 4-4.md ├── 4-5.md ├── 4-1.md ├── 4-10.md ├── 4-2.md ├── 4-9.md ├── 4-8.md ├── 4-13.md └── 4-7.md ├── chapter9 ├── 9-4.md ├── 9-9.md ├── 9-1.md ├── 9-3.md ├── 9-8.md ├── 9-2.md ├── 9-7.md ├── 9-5.md └── 9-6.md ├── chapter13 ├── 13-5.md ├── 13-6.md ├── 13-2.md ├── 13.md └── 13-3.md ├── chapter15 ├── 15-10.md ├── 15-6.md ├── 15-5.md ├── 15-3.md ├── 15-8.md ├── 15.md ├── 15-4.md ├── 15-2.md └── 15-9.md ├── chapter3 ├── 3-4.md ├── 3-3.md ├── 3-5.md ├── 3-9.md ├── 3-7.md ├── 3-6.md ├── 3-0.md ├── 3-1.md ├── 3-2.md ├── 3-10.md └── 3-8.md ├── chapter8 ├── 8-5.md ├── 8-4.md ├── 8-3.md ├── 8-8.md ├── 8-6.md ├── 8-2.md ├── 8-1.md └── 8-7.md ├── chapter5 ├── 5-3.md ├── 5-2.md ├── 5-1.md ├── 5-4.md ├── 5-7.md ├── 5-5.md └── 5-6.md ├── chapter11 ├── 11-3.md ├── 11-2.md ├── 11-1.md └── 11-4.md ├── chapter1 ├── 1-0.md ├── 1-1.md └── 1-2.md ├── chapter17 └── event.md ├── chapter16 ├── bonus.md └── css.md ├── chapter12 └── 12-2.md ├── chapter10 └── 10-1.md └── chapter14 └── 14.md /chapter2/2-2.md: -------------------------------------------------------------------------------- 1 | # 2.2 주석 2 | 3 | - 두가지 형태의 주석을 지원함 4 | - `//` 뒤에 나오는건 다 주석처리 5 | - `/*` 와 `*/` 사이의 내용은 다 주석처리 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [WeCode](https://wecode.co.kr) 수료생들의 자바스크립트 스터디입니다. 2 | 3 | 코뿔소 동물책: 자바스크립트 완벽 가이드를 7주의 기간동안 스터디 할 예정입니다. 4 | -------------------------------------------------------------------------------- /chapter2/2-0.md: -------------------------------------------------------------------------------- 1 | # 어휘구조 2 | 3 | - 변수 이름을 어떻게 작성해야 하는지 4 | - 어떤 문자를 주석으로 사용할 수 있는지 5 | - 하나의 프로그램 문장이 다른 문장과 어떻게 구분이 되는지 6 | -------------------------------------------------------------------------------- /chapter6/6-9.md: -------------------------------------------------------------------------------- 1 | ### 6.9 객체 직렬화하기 2 | 3 | - 객체의 상태를 문자열로 변환하는 과정, JSON.stringify() 메서드 사용 4 | - 이때 생성된 문자열은 이후 객체 복원에 사용 가능 JSON.parse() 메서드 사용 5 | -------------------------------------------------------------------------------- /chapter7/7-10.md: -------------------------------------------------------------------------------- 1 | ## 7.10 배열타입 2 | 3 | ECMAScript5 이전에는 여부를 판단하기가 어려웠다. 그러나 4 | ECMAScript5부터 Array.isArray() 함수를 통해서 특정 객체가 배열인지 여부를 판단할수 있다. 5 | -------------------------------------------------------------------------------- /chapter4/4-12.md: -------------------------------------------------------------------------------- 1 | ### 4.12 평가 표현식 2 | 3 | - 자바스크립트는 문자열을 자바스크립트 코드로 해석하고 평가한 값을 값으로 출력할 수 있는데 전역함수 eval()이 이를 수행한다. 4 | ```js 5 | eval("3" + "2"); //5 6 | ``` 7 | - 매우 강력한 기능이지만 실제로는 거의 사용되지 않는다. 8 | -------------------------------------------------------------------------------- /chapter7/7-5.md: -------------------------------------------------------------------------------- 1 | ## 7.5 배열에 원소를 추가하거나 삭제하기 2 | 3 | 간단하게 배열의 새 인덱스에 값을 할당해주면 값을 추가 할수도 있고, 4 | 5 | 추가나 삭제에 관련된 배열 메서드 사용법은 추가 7-8장에서 확인하도록 하자. 6 | 7 | 객체에서 프로퍼티를 지울 때와 마찬가지로 delete 연산자로 배열의 원소도 지울 수 있다. 8 | -------------------------------------------------------------------------------- /chapter9/9-4.md: -------------------------------------------------------------------------------- 1 | ## 9.4 클래스 확장하기 2 | 3 | 객체는 생성된 이후에도 프로토타입이 변경되어도 그대로 상속받는다. 4 | 한마디로 자바스크립트의 객체의 프로토타입에 메서드를 추가함으로서 클래스를 확장할수 있다고 한다. 5 | 6 | 하지만 그것은 추가 메서드가 열거되지 않게 할 방법이 없기 때문에 권장하지 않는다고 한다. 7 | 그래서 안정되게 확장하는 방법은 Obhect.defineProperty() 메서드를 통해서 안전하게 클래스에서 확장한다고 한다. 8 | 9.8.1에서 추후 다룰 예정 9 | -------------------------------------------------------------------------------- /chapter2/2-3.md: -------------------------------------------------------------------------------- 1 | # 2.3 리터럴 2 | 3 | - 리터럴은 프로그램에 직접 나타나는 데이터 값 4 | 5 | ``` 6 | 12; // number 7 | 1.2; // float 8 | ("hello world"); // string 9 | true; // boolean 10 | false; // boolean 11 | /javascript/gi; // regex 12 | null; 13 | ``` 14 | 15 | - 자세한 건 3장에 나옴 16 | -------------------------------------------------------------------------------- /chapter13/13-5.md: -------------------------------------------------------------------------------- 1 | #### 접근성 2 | 3 | 웹은 정보 전파를 위한 매우 강력하고 매력적인 도구이고, 자바스크립트 프로그램이 4 | 이런 정보에 대한 접근성을 높일 수 있다. 5 | 하지만 자바스크립트 프로그래머가 시각 장애나 신체적 장애가 있는 방문자가 정보에 접근하지 6 | 못하도록 하는 코드는 무심결에 쉽게 만들어진다. 7 | 8 | 자바스크립트가 있어야 정보를 볼 수 있도록 웹 사이트를 디자인했다면, 9 | 장애가 있는 사용자를 소외시킨 것이다. 10 | 자바스크립트의 적절한 역할은 정보의 표현 방식을 개선하는 것이므로 정보 표현 자체를 11 | 대행해서는 안 된다. 12 | -------------------------------------------------------------------------------- /chapter4/4-6.md: -------------------------------------------------------------------------------- 1 | ### 4-6. 객체 생성 표현식 2 | 3 |
4 | 5 | - 새 객체를 생성하고, 생성자라고 부르는 함수를 호출해 객체에 속한 프로퍼티들을 초기화 6 | - new 키워드가 앞에 붙는다는 점을 제외하면 호출 표현식과 유사하다. 7 | 8 | ```js 9 | new Object() 10 | new Point(2,3) 11 | ``` 12 | - 객체의 생성자 함수를 인자 없이 호출할때는 괄호를 생략할 수 있다. 13 | 14 | ```js 15 | new Object 16 | new Date 17 | ``` 18 | -------------------------------------------------------------------------------- /chapter4/4-3.md: -------------------------------------------------------------------------------- 1 | ### 4-3. 함수 정의 표현식 2 | 3 |
4 | 5 | - 함수 정의 표현식은 함수를 정의하고 함수 정의 표현식의 값은 새로 정의된 함수이다. 6 | - 일반적으로 function 키워드 + 중괄호로 둘러싸인 쉼표로 구별된 식별자(매개변수이름)목록 + 중괄호로 둘러싸인 코드(함수본체)로 이루어진다. 7 | 8 | ```js 9 | let square = function (x) { 10 | return x * x; 11 | }; 12 | ``` 13 | 14 | - 함수 정의 표현식은 함수 이름을 포함할 수 있으며 함수 정의 표현식 대신 함수 구문을 사용해 정의할 수 있다.(8장에서 자세히) 15 | -------------------------------------------------------------------------------- /chapter6/6-3.md: -------------------------------------------------------------------------------- 1 | ### 6.3 프로퍼티 삭제하기 2 | 3 | - delete 연산자는 객체의 프로퍼티를 삭제한다. 4 | - delete 연산자는 상속받은 프로퍼티가 아닌 고유 프로퍼티만 지울 수 있다. 5 | - 삭제에 성공하거나, 프로퍼티가 존재하지 않아서 아무 영향도 끼지지 못한 경우에는 true를 반환한다. 6 | ```js 7 | delete book.author; //true : book 객체의 author 프로퍼티가 삭제됨 8 | delete book["title"]; //true : book 객체의 title 프로퍼티가 삭제됨 9 | delete book["dfdsf"]; //true : 일치하는 프로퍼티가 없어도 true 를 반환 10 | ``` 11 | -------------------------------------------------------------------------------- /chapter15/15-10.md: -------------------------------------------------------------------------------- 1 | #### 15-10 Document 객체의 다른 특징들 2 | 3 | #### 15-10-1 Document 프로퍼티 4 | 5 | ``` 6 | cookie : 자바스크립트 프로그램이 HTTP 쿠키를 읽고 쓸 수 있게 하는 프로퍼티 7 | domain : 웹 페이지 간의 상호작용에서 주 도메인이 같은 믿을 수 있는 웹 서버들의 동일 출처 정책과 관련된 보안 제약 사항을 완화시키는 데 사용 8 | location : Location 객체 참조 9 | referrer : 현재 문서 이전 문서의 URL. 사용자가 주소창에 직접 입력한 경우는 해당되지 않는다. 10 | title : 문서의 요소 사이에 있는 텍스트 11 | URL : 읽기 전용 URL 문자열 12 | ``` 13 | -------------------------------------------------------------------------------- /chapter9/9-9.md: -------------------------------------------------------------------------------- 1 | ## 9.9 모듈 2 | 3 | 클래스를 사용하는 이유는 코드를 모듈화 해서 재사용성을 높이기 위해 처리하는 것이다. 4 | 5 | #### 9.9.1 네임스페이스로서의 객체 6 | 7 | 전역 함수와 전역 변수를 정의하는 대신에 네임스페이스의 객체를 사용해서 모듈을 만드는 것이다. 8 | 9 | 이름 충돌을 방지해서 네임스페이스를 잘 만들어야한다. 10 | 11 | #### 9.9.2 private 네임스페이스 와 함수 유효범위 12 | 13 | 모듈밖에서 사용되지 않아야할 추가적인 함수나 메서드를 만들어야할때 private 한 네임스페이스로 만들어서 사용한다. 14 | 15 | 모듈 코드는 함수 유효범위내에 봉인되어있음으로 모듈 내보내는 방식이라던지 적합한 모듈 생성방식을 잘 고려해서 사용해야한다. 16 | -------------------------------------------------------------------------------- /chapter6/6-4.md: -------------------------------------------------------------------------------- 1 | ### 6.4 프로퍼티 검사하기 2 | 3 | - 주어진 이름의 프로퍼티가 있는지 검사할 때는 메서드를 이용하거나 단순히 접근할 수도 있다. 4 | - in 연산자, hasOwnProperty(), propertyIsEnumerable() 메서드를 사용할 수 있다. 5 | ```js 6 | let o = { x: 1 }; 7 | "x" in o; //true 8 | "toString" in o; // true: 객체 o 에 상속받은 Object.prototype에 toString이 있음 9 | o.hasOwnProperty("x"); //true 10 | o.hasOwnProperty("toString"); //false: hasOwnProperty()는 고유 프로퍼티만 검사한다. 상속받은 경우 false 를 반환한다 11 | ``` 12 | -------------------------------------------------------------------------------- /chapter3/3-4.md: -------------------------------------------------------------------------------- 1 | # 3.4 null, undefined 2 | 3 | - `null`은 아무 값도 갖지 않음 4 | 5 | - `typeof null === 'object'` 6 | - 객체가 없음을 뜻하는 특수한 객체 7 | - 근데 일반적으로 그냥 값이 없다로됨 8 | 9 | - `undefined`도 값이 없음 10 | 11 | - `null`보다 심한 부재상태 12 | - 초기화되어 있지 않은 변수, 존재하지 않는 객체 프로퍼티나 배열의 원소에 접근할 때 13 | - 반환값이 없는 함수의 반환값 14 | - 실 인자가 전달되지 않을 때 15 | - 미리 선언된 전역변수 16 | - 읽기전용 17 | - `typeof undefined === 'undefined'` 18 | 19 | - `null`,`undefined` 모두 falsy한 값 20 | -------------------------------------------------------------------------------- /chapter7/7-12.md: -------------------------------------------------------------------------------- 1 | ## 7.12 문자열을 배열처럼 사용하기 2 | 3 | 문자열은 chatAt() 메서드로 접근 가능하지만 대괄화를 통해서 접근이 가능하다 4 | 아까 위에 유사배열에 사용했던 call 방식을 통해 배열에 사용되는 메서드들이 사용이 가능하다. 5 | 6 | ![](https://images.velog.io/images/dear_sopi9211/post/9e8d8f87-09f4-426a-95bb-678bb93e7050/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-11-05%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%205.38.13.png) 7 | 8 | 다만 문자열은 읽기전용이라 값이 변하지 않는데 이렇게 배열 메서드를 사용해서 문자열을 수정하려고 해도 오류는 발생하지 않는다. 9 | -------------------------------------------------------------------------------- /chapter3/3-3.md: -------------------------------------------------------------------------------- 1 | # 3.3 불리언 2 | 3 | - `true`, `false` 4 | - falsy한 값들 5 | 6 | ``` 7 | undefined; 8 | null; 9 | 0 - 0; 10 | NaN; 11 | ""; // empty string 12 | ``` 13 | 14 | - `.toString()` method가 있음 15 | - `'true'`, `'false'`를 반환 16 | - MDN보면 `.valueOf()`도 있음 17 | 18 | - `true`, `false` 반환 19 | 20 | - 연산자 21 | - `&&` AND 연산자 22 | - 앞 과 뒤가 다 `true`일 때 23 | - `||` OR 연산자 24 | - 앞 과 뒤 둘중 하나가 `true`일 때 25 | - `!` NOT 연산자 26 | - `true` / `false`를 뒤집음 27 | - 4.10에 자세히 나옴 28 | -------------------------------------------------------------------------------- /chapter3/3-5.md: -------------------------------------------------------------------------------- 1 | # 3.5 전역객체 (global object) 2 | 3 | - 자바스크립트에서 프로그램 전역에서 사용할 수 있게 정의한 것 4 | 5 | - `undefined`, `Infinity`, `NaN` 과 같은 global properties 6 | - `isNaN()`, `parseInt()`등과 같은 global functions 7 | - `Date()`, `RegExp()`, `String()`등의 global constructors 8 | - `Math`, `JSON`과 같은 global objects 9 | 10 | - `this` 키워드로 참조 가능 11 | 12 | ```javascript 13 | var global = this; // 전역 객체를 참조하는 변수를 정의 14 | ``; 15 | ``` 16 | 17 | - 클라이언트에서는 `Window` 객체를 뜻함 18 | - 자기 자신을 참조하는 `window` 프로퍼티가 있음 19 | -------------------------------------------------------------------------------- /chapter15/15-6.md: -------------------------------------------------------------------------------- 1 | #### 15-6 노드의 생성, 삽입, 삭제 2 | 3 | #### 15-6-1 노드 생성 4 | 5 | `createElement()` 메서드로 새로운 Element 노드를 생성할 수 있다. 6 | 전달인자로 요소의 태그명을 넘긴다. 7 | 8 | #### 15-6-2 노드 삽입 9 | 10 | `appendChild()`나 `insertBefore()`로 생성한 노드를 문서에 삽입할 수 있다. 11 | 12 | #### 15-6-3 노드 삭제 13 | 14 | `removeChild()` 메서드는 문서 계층 구조에서 하나의 노드를 삭제한다. 15 | 해당 메서드는 삭제하려는 노드가 아니라 삭제하려는 노드의 부모 노드에서 실행해야 한다. 16 | 전달인자로 삭제할 자식 노드를 넘긴다. 17 | `replaceChild()` 메서드는 자식 노드 하나를 삭제하고 새 노드로 교체한다. 18 | 부모 노드에서 해당 메서드를 실행할 때 첫 번째 인자로 새 노드를, 두 번째 전달인자로 19 | 교체될 노드를 넘긴다. 20 | -------------------------------------------------------------------------------- /chapter15/15-5.md: -------------------------------------------------------------------------------- 1 | #### 15-5 요소의 내용 2 | 3 | #### 15-5-1 요소 내용이 HTML일 때 4 | 5 | Element 객체의 innerHTML 프로퍼티는 해당 요소의 내용을 HTML 마크업 문자열로 반환한다. 6 | innerHTML을 통해서 값을 지정하면 항상 파싱이 일어나지만, 웹 브라우저의 HTML 파싱 성능이 상당히 괜찮으므로 7 | 보통은 사용해도 상관없다. 8 | 하지만 += 연산자로 텍스트 조각을 반복해서 덧붙이는 과정에는 직렬화와 파싱의 두 단계가 필요하기 때문에 비효율적이다. 9 | 10 | #### 15-5-2 요소 내용이 일반 텍스트일 때 11 | 12 | textContent, innerText를 사용해서 문서에 일반 텍스트를 삽입할 수 있다. 13 | 14 | ``` 15 | let pElement = document.getElementsByTagName("p")[0]; 16 | let text = pElement.textContent; 17 | pElement.textContent = "Change Text"; 18 | ``` 19 | -------------------------------------------------------------------------------- /chapter7/7-4.md: -------------------------------------------------------------------------------- 1 | ## 7.4 배열의 길이 2 | 3 | 모든 배열에는 length 프로퍼티가 있다. 4 | 이것은 자바스크립트의 **객체와 배열을 구분하는 중요한 특징**이며 5 | 희소배열이 아닌 그냥 배열인 경우에 **length === 원소의 개수**가 같다. 6 | 배열의 가장 큰 index 값보다 하나 더 큰 값이다 (인덱스는 0부터 시작하니까) 7 | 8 | 그리고 length와 index 절대로 같을수가 없다. 9 | 10 | 만약 length를 기존 length와 값보다 작은 수로 할당하게 되면 length 보다 크거나 같은 인덱스의 원소는 배열에서 삭제된다. 11 | 또 기존 원소보다 크게 설정하게 되면 단지 배열 끝부분은 원소가 새로이 추가되는 것이 아니라 빈 공간을 생성한다. 12 | 이렇게 배열이 삭제되거나 불필요하게 커지는 것을 막기위해서 **Object.defineProperty()** 를 사용하면 해당 length는 read-only로 만들수 있다. 13 | 14 | ``` 15 | a = [1,2,3,4,5] 16 | a.length = 0; // [] 17 | a.lehgth = 5; // new Array(5) 18 | ``` 19 | -------------------------------------------------------------------------------- /chapter4/4-11.md: -------------------------------------------------------------------------------- 1 | ### 4.11 할당 표현식 2 | 3 | - 자바스크립트에서는 = 연산자를 사용해 변수나 프로퍼티에 값을 할당한다. 4 | ```js 5 | i = 0; //변수 i 의 값을 0으로 설정 6 | o.x = 1; //객체 o의 프로퍼티 x 의 값을 1로 설정 7 | ``` 8 | - 좌변에는 좌변값(변수, 객체프로퍼티, 배열의 원소)이, 우변에는 타입에 상관없이 어떤 값이라도 올 수 있다. 9 | - 여러개를 할당할 경우에는 아래와 같이 작성한다. 10 | 11 | ```js 12 | i = j = k = 0; //세 변수의 값을 0으로 초기화한다 13 | ``` 14 | 15 | #### 4.11.1 연산을 동반하는 할당 16 | 17 | - 일반적인 = 할당연산자 이외에도 다수의 할당 연산자가 있다. 18 | - += , =+, \*=, /= , %=, <<=, >>=, >>>=, &=, |=, ^= 19 | - += 연산자는 덧셈과 할당을 함께 수행한다. 20 | ```js 21 | total += sales_tax; 22 | total = total + sales_tax; // 두 식은 같다. 23 | ``` 24 | -------------------------------------------------------------------------------- /chapter7/7-3.md: -------------------------------------------------------------------------------- 1 | ## 7.3 희소배열 2 | 3 | 희소배열(sparse array)은 배열에 속한 원소의 위치가 연속적이지 않은 배열을 말한다. 4 | 한마디로 lenght 값이 실제 원소의 개수보다 큰 배열을 말한다. 5 | 6 | 희소배열은 보통 배열보다 느리고 메모리를 많이 사용하고 원소를 찾는데에 시간이 일반 객체의 속성 값을 찾는 시간만큼 오래 걸린다고 한다. 7 | 8 | 희소배열을 생성하는 방법은 Array 생성자 함수를 통해서 만들거나 단순히 배열의 크기보다 큰 인덱스에 값을 할당해서도 만들수 있다. 9 | 10 | 다만 배열 리터럴에 단순히 ,만 추가해서 만들경우엔 해당 인덱스의 원소는 undefined로 원소가 존재한다고 한다. 11 | 12 | ``` 13 | let arr1 =[,,,]; 14 | let arr2 = new Array(3); 15 | let arr3[1000] = 1 // => arr3.lenght = 1001 16 | o in arr1 // => 모든 원소들은 undefined라는 값이 있기때문에 true 17 | o in arr2 // => 원소가 존재하지않음으로 false 18 | ``` 19 | 20 | 이해하는 것에는 굉장히 중요하지만 실무에는 거의 사용될 일이 없다고 한다. 21 | -------------------------------------------------------------------------------- /chapter6/6-5.md: -------------------------------------------------------------------------------- 1 | ### 6.5 프로퍼티 열거하기 2 | 3 | - 프로퍼티가 있는지 테스트하기보다 열거하고 싶을때는 for/in 루프를 사용한다. 4 | - 열거 가능한 프로퍼티마다 for/in 루프 몸체가 실행된다. 5 | - 상속받은 내장 메서드는 열거할 수 없으나, 사용자가 임의로 추가한 프로퍼티들은 열거할 수 있다. 6 | ```js 7 | const o = { x: 1, y: 2, z: 3 }; //열거 가능한 3개의 고유 프로퍼티 8 | for (p in o) console.log(p); //x,y,z : 열거할 수 없는 toString은 출력되지 않는다 9 | ``` 10 | - Object.keys() 함수를 이용하면 객체가 가진 고유 프로퍼티 중에 열거할 수 있는 프로퍼티 이름을 배열에 담아 반환한다. 11 | - Object.getOwnPropertyNamse()함수는 해당 객체가 가진 모든 고유 프로퍼티의 이름을 배열로 반환한다. 12 | ```js 13 | const o = { x: 1, y: 2, z: 3 }; 14 | Object.keys(o); ///['x','y','z'] 15 | Object.getOwnPropertyNames(o); ///['x','y','z'] 16 | ``` 17 | -------------------------------------------------------------------------------- /chapter13/13-6.md: -------------------------------------------------------------------------------- 1 | #### 13-6 보안 2 | 3 | #### 13-6-1 자바스크립트가 할 수 없는 것 4 | 5 | 악성 코드에 대한 웹 브라우저의 일차적인 방어책은 특정 기능들을 제공하지 않는 것인데, 6 | 자바스크립트 프로그램은 클라이언트 컴퓨터의 데이터를 삭제하거나 바이러스를 침투시킬 수 없다. 7 | 8 | #### 13-6-2 동일 출처 정책 9 | 10 | 자바스트립트는 스크립트를 포함하고 있는 문서와 같은 출처의 문서에 있는 window와 11 | Document 객체의 속성만 사용할 수 있다. 12 | 문서의 출처는 불러온 URL의 프로토콜과 호스트, 포트로 정의한다. 13 | 문서의 출처가 다른 경우. 14 | 15 | ``` 16 | 1. 다른 여러 서버에서 불러온 문서. 17 | 2. 같은 호스트에 포트만 다른 서버에서 불러온 문서. 18 | 3. http: 프로토콜을 사용해서 불러온 문서와 같은 웹 서버에서 https: 프로토콜을 사용해서 불러온 문서. 19 | ``` 20 | 21 | 동일 출처 정책을 해제할 수 있는 방법들 중 출처 간 자원공유(Cross-Origin Resource Sharing)가 있다. 22 | 요청 헤더와 Access-Control-Allow-Origin이라는 응답 헤더로 출처를 확장한다. 23 | -------------------------------------------------------------------------------- /chapter8/8-5.md: -------------------------------------------------------------------------------- 1 | ## 8.5 네임스페이스로의 함수 2 | 3 | 자바스크립트는 함수 단위의 유효범위를 갖는다 (스코프) 4 | 5 | ![](https://images.velog.io/images/dear_sopi9211/post/d08797ee-ed0a-45f5-84c3-843d4e6e5319/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-11-05%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%207.48.15.png)![](https://images.velog.io/images/dear_sopi9211/post/e22d41a0-10a1-4865-972a-2aaa4113583c/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-11-05%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%207.48.20.png) 6 | 7 | 한마디로 하나의 전역변수 안에 여러가지 지역변수를 사용해서 전역변수의 네임스페이스를 어지럽히지 말라!! 8 | 또는 이름이 없는 익명 함수 (스코프) 안에서 사용해라! 9 | 또한 익명 함수의 네임스페이스는 프로퍼티 이름 배열을 내부로 감추는 구실도 하고있음. 10 | -------------------------------------------------------------------------------- /chapter4/4-4.md: -------------------------------------------------------------------------------- 1 | ### 4-4. 프로퍼티 접근 표현식 2 | 3 |
4 | 5 | - 객체의 프로퍼티나 배열의 원소값으로 평가 6 | - 자바스크립트에서는 두가지 문법으로 프로퍼티에 접근 가능하다. 7 | 8 |
9 | 10 | #### 1. 표현식.식별자 11 | 12 | 여기서 표현식은 객체이며 식별자는 앞서 지정한 객체에서 찾을 프로퍼티의 이름이다. 13 | 14 |
15 | 16 | #### 2. 표현식[표현식] 17 | 18 | 여기서도 앞서 표현한 객체의 특정 프로퍼티 이름이나 배열 내 원소의 인덱스 값이 대괄호와 함께 사용된다. 19 | 20 | ```js 21 | let o = { x: 1, y: { z: 3 } }; 22 | let a = [o, 4, [5, 6]]; 23 | o.x; //1 24 | o.y.z; //3 25 | o["x"]; //1 26 | a[0].x; //1 27 | ``` 28 | 29 | - 두 표현식 모두 점(.)이나 대괄호 왼쪽 표현식이 먼저 평가되고 만약 평가된 값이 null이나 undefined 일 경우 프로퍼티를 갖지 않기 때문에 표현식은 TypeError 를 발생시킨다. 30 | - 두 방법 중 .식별자 문법이 더 간단하지만 접근하려는 프로퍼티 이름이 '합법적'식별자일때만 사용할 수 있고, 식별자를 미리 알고 있어야 하며, 프로퍼티 이름이 예약어거나 공백을 포함하거나, 숫자일 경우에는 반드시 대괄호를 사용해야 한다. 31 | -------------------------------------------------------------------------------- /chapter8/8-4.md: -------------------------------------------------------------------------------- 1 | ## 8.4 값으로서의 함수 2 | 3 | 함수는 정의될수도 있고 호출될수도 있다는 것이다. 4 | 함수는 문법이자 값이고 5 | 문법이자 데이터이다. 6 | 7 | 한마디로 함수를 새로운 변수에 할당하면 해당 변수는 같은 함수를 참조 하게 되며 8 | 객체 프로퍼티에 할당 될수도 있는데 그것을 메서드라고 하며 9 | 배열 요소에도 할당 될수도 있다. 10 | 또한 선택적 인자를 함수로 받기도 한다 예를 들어 Array.sort 는 어떻게 나열할지를 함수로 받는다. 11 | 12 | ### 8.4.1 자신만의 함수로 프로퍼티 정의하기 13 | 14 | 함수는 특별한 종류의 객체임으로 함수도 프로퍼티를 가질수 있다. 15 | 예를 들어 함수의 프로퍼티를 사용하는 경우는 16 | 전역변수에 저장해서 값이 증가하거나 이전 값이 반복되지 않아야 하는 함수일 경우에 유용하다. 17 | 굳이 전역변수에 설정할 필요없이 해당 함수 자체에서 저장해서 사용하게끔 처리한다. 18 | 19 | ![](https://images.velog.io/images/dear_sopi9211/post/6912007c-b50a-42ff-9268-a24e7d1d917e/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-11-05%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%207.45.47.png) 20 | -------------------------------------------------------------------------------- /chapter15/15-3.md: -------------------------------------------------------------------------------- 1 | #### 15-3 문서 구조와 탐색 2 | 3 | #### 15-3-1 문서가 Node 트리일 때 4 | 5 | Node 객체에는 다음과 같은 중요한 프로퍼티가 정의되어 있다. 6 | 7 | ``` 8 | parentNode : 한 객체의 부모에 해당하는 상위 Node 객체 9 | childNodes : 한 노드의 자식 노드에 해당하는 하위 NodeList 10 | firstChild, lastChild : 한 노드의 자식 노드 중 첫 번째 노드와 마지막 노드 11 | nextSibling, previousSibling : 한 노드의 이전 또는 다음 형제 노드 12 | nodeType : 노드의 종류 13 | ``` 14 | 15 | #### 15-3-2 문서가 Element 트리일 때 16 | 17 | 문서에서 주된 관심사가 Element 객체(요소) 자체일 때는 Element 객체의 계층 구조로 다루는 API가 효과적이다. 18 | 어떤 Element 객체의 parentNode는 언제나 다른 Element 객체이며, 계층 구조의 최상위는 Document 객체이다. 19 | 20 | ``` 21 | firstElementChild, lastElementChild : Element 자손 객체만 반환한다. 22 | nextElementSibling, previousElementSibling : Element 형제 객체만 반환한다. 23 | childElementCount : 자손 객체의 수를 반환한다. 24 | ``` 25 | -------------------------------------------------------------------------------- /chapter15/15-8.md: -------------------------------------------------------------------------------- 1 | #### 15-8 문서와 요소의 기하학적 특징과 스크롤 2 | 3 | #### 15-8-1 문서 좌표와 뷰포트 좌표 4 | 5 | 브라우저는 요소의 위치를 픽셀 단위로 측정한다. 6 | 요소의 X,Y 좌표는 문서의 좌측 상단 모서리나 문서를 출력한 뷰포트의 좌측 상단 모서리를 7 | 기준점으로 삼는다. 8 | 뷰표느란 실제로 문서 내용이 출력되는 브라우저 영역을 말한다. 9 | 10 | #### 15-8-2 요소의 기하학적 특징 조회 11 | 12 | 어떤 요소의 크기와 위치를 알아내는 가장 쉬운 방법은 `getBoundingClientRect()` 메서드를 13 | 호출하는 것이다. 14 | 반환 값은 left, right, top, bottom 프로퍼티를 가진 객체다. 15 | 16 | #### 15-8-3 지정한 위치의 요소 알아내기 17 | 18 | `elementFromPoin()` 메서드는 전달인자로 X,Y 좌표를 넘기면 지정한 위치에 있는 Element 객체를 반환한다. 19 | 20 | 모든 HTML 요소는 다음과 같은 프로퍼티를 다 가지고 있다. 21 | 22 | ``` 23 | offsetWidth, offsetHeight, offsetLeft, offsetTop, offsetParent, clientWidth, clientHeight,clientLeft, clientTop, scrollWidth, scrollHeight, scrollLeft, scrollTop 24 | ``` 25 | -------------------------------------------------------------------------------- /chapter4/4-5.md: -------------------------------------------------------------------------------- 1 | ### 4-5. 호출 표현식 2 | 3 | - 함수나 메서드를 호출하는 문법 4 | - 호출될 함수를 가리키는 함수표현식 + 괄호, 쉼표로 구성된 호출 인자의 목록 5 | 6 | ```js 7 | f(0); //f는 함수 표현식, 0은 인자 표현식 8 | Math.max(x, y, z); //Math.max는 함수, x,y,z는 호출 인자 9 | ``` 10 | 11 | - 호출 표현식이 평가될 때 순서 12 | 13 | 1. 함수표현식 평가(함수표현식의 값이 호출할 수 없는 객체일 경우 TypeError 발생) 14 | 2. 호출인자 표현식이 순서대로 평가 15 | 3. 함수 선언 시 지정했던 인자 이름에 인자 값이 차례로 할당 16 | 4. 함수 본문 실행 17 | 18 | 19 | 20 | 21 | 22 |
단독으로 사용다른 식별자와 사용
식별자 뒤에 괄호 x변수프로퍼티
식별자 뒤에 괄호 o함수메소드
23 | 24 |

25 | 26 | ```js 27 | alert("aaa"); //alert은 함수 28 | Array.length; //length는 프로퍼티 29 | input; //input은 변수 30 | Math.abs(-200); //abs는 메서드 31 | ``` 32 | -------------------------------------------------------------------------------- /chapter7/7-11.md: -------------------------------------------------------------------------------- 1 | ## 7.11 유사배열 객체 2 | 3 | 자바스크립트의 배열의 특징 4 | 5 | - length가 자동으로 추가된다. 6 | - length를 임의로 설정해서 배열의 크기를 줄일 수 있다. 7 | - 배열은 Array.prototype에 정의된 유용한 메서드들을 상속한다. 8 | - 배열의 class 속성 값은 "Array"로 설정된다. 9 | 10 | 그러나 length를 가지고 있으며 정수 이름의 프로퍼티를 가지고있는 객체는 일종의 배열로 취급할수도 있다. 11 | 해당 알고리즘이 읽기전용으로 하거나 배열의 길이를 바꾸지않는다면유사객체에서도 알고리즘이 잘 작동하기에 더욱 더 헷갈릴수 있다. 12 | 13 | - Array.isArray 메서드로 유사배열인지 아닌지가 확인이 가능하며. 14 | 15 | - 유사 배열은 Array.prototype 을 상속 받지 않기 때문에 배열 메서드를 해당 객체에서 호출할수가 없고 Function.call 메서드를 통해서 간접적으로 호출 가능하다. 16 | (call로 this바인드해서 사용하는 방식) 17 | 18 | ``` 19 | function f() { 20 | let arr = Array.from(arguments); 21 | arr.forEach((value, key) => { 22 | console.log(`${value} : ${key}`); 23 | }); 24 | } 25 | ``` 26 | 27 | - Array.from은 유사배열은 진짜배열로 바꿔준다. 28 | -------------------------------------------------------------------------------- /chapter15/15.md: -------------------------------------------------------------------------------- 1 | ## 15. 문서 스크립팅 2 | 3 | 클라이언트 측 자바스크립트는 정적인 HTML 문서를 상호작용이 가능한 웹 애플리케이션으로 4 | 바꾸는 역할을 하며, 웹 페이지의 내용을 제어하는게 자바스크립트의 주된 작업이다. 5 | Document 객체는 해당 창의 내용을 나타내며, DOM으로 알려진 문서 객체 모델이라는 6 | 거대한 API의 일부이고, 문서 내용을 나타내고 조작하는 역할을 하는 중요한 객체다. 7 | 8 | #### 15-1 DOM 개요 9 | 10 | 문서 객체 모델은 HTML과 XML문서의 내용을 조작하고 나타내는 기반 API다. 11 | 12 | HTML이나 XML 문서의 요소 집합이 DOM에서는 객체의 계층 구조로 표현된다. 13 | 14 | ``` 15 | 16 | 17 | javascript 18 | 19 | 20 |

Document

21 |

Node

22 | 23 | 24 | ``` 25 | 26 | 위와 같은 HTML 문서는 아래와 같은 계층 구조로 표현된다. 27 | Document => html => head => title => javascript 28 | Document => html => body => h1 => Document 29 | Document => html => body => p => Node 30 | -------------------------------------------------------------------------------- /chapter6/6-10.md: -------------------------------------------------------------------------------- 1 | ### 6.10 객체 메서드 2 | 3 | - 모든 자바스크립트 객체가 상속받는 Object.prototype 의 프로퍼티들은 대부분 메서드이다. 4 | 5 | #### 6.10.1 toString() 6 | 7 | - 어떠한 인자도 받지 않고, 호출 대상이 되는 객체의 값을 어떠한 방식으로든 문자열로 만들어 반환 8 | ```js 9 | const o = { x: 1, y: 2, z: 3 }; 10 | o.toString(); //'[object, Object]' 11 | ``` 12 | 13 | #### 6.10.2 toLocalString() 14 | 15 | - 객체의 지역화 된 문자열 표현을 반환 16 | 17 | #### 6.10.3 toJSON() 18 | 19 | - Date 객체의 문자열을 반환 20 | ```js 21 | const jsonDate = new Date().toJSON(); 22 | console.log(jsonDate); //2020-10-21T19:13:27.483Z 23 | ``` 24 | 25 | #### 6.10.4 valueOf() 26 | 27 | - 객체를 다를 원시 타입으로 변환하려 할 때 호출된다. 28 | ```js 29 | const stringObj = new String("foo"); 30 | console.log(stringObj); // String { "foo" } 31 | console.log(stringObj.valueOf()); //"foo" 32 | ``` 33 | -------------------------------------------------------------------------------- /chapter7/7-7.md: -------------------------------------------------------------------------------- 1 | ## 7.7 다차원 배열 2 | 3 | 자바스크립트는 다차원 배열을 지원하지 않는다 4 | ![](https://images.velog.io/images/dear_sopi9211/post/5843461e-e72a-4191-95e7-6ae354857101/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-11-05%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.26.12.png) 5 | 6 | 그치만 배열의 배열응 사용해서 흉내를 낼수있다고 한다. 7 | 단순히 []연산자를 2번 사용하기만 하면 된다. 8 | 9 | ``` 10 | let table = new Array(10); 11 | for (let i =0; i< table.length; i++){ 12 | table[i]= new Array(10) 13 | } 14 | // 2차원 배열을 만들었다. 15 | 16 | ``` 17 | 18 | ![](https://images.velog.io/images/dear_sopi9211/post/32c7a739-859e-4a48-a686-1e4e509b84b1/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-11-05%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.30.21.png) 19 | -------------------------------------------------------------------------------- /chapter5/5-3.md: -------------------------------------------------------------------------------- 1 | ### 5.3 선언문 2 | 3 | - var(let,const), function 는 각각 변수와 함수를 선언하고 정의하는 선언문이다. 4 | 5 | #### 5.3.1 var 6 | 7 | - var 문은 하나 또는 그 이상의 변수를 선언한다. 8 | ```js 9 | var i; //하나의 변수를 선언, i 의 값은 undefined 10 | var j = 0; //하나의 변수와 값을 선언 11 | var p, q; //두 변수를 선언 12 | ``` 13 | - 함수 내부에서 사용한 var 문은 지역변수, 해당 함수 내에서만 사용 가능 14 | - 변수에 초기값을 지정하지 않으면 undefined 15 | 16 | #### 5.3.2 function 17 | 18 | - function 키워드는 함수를 정의하는데 쓰인다. 19 | ```js 20 | let f = function (x) { 21 | return x + 1; 22 | }; //변수에 함수를 할당하는 표현식 23 | function f(x) { 24 | return x + 1; 25 | } //변수 이름을 포함한 문장 26 | ``` 27 | - 함수 몸체는 중괄호와 내부의 문장들로 구성되며 이 문장들은 함수가 정의될 때는 실행되지 않는다. 28 | - 함수가 호출되면 실행될 수 있도록 새로운 함수 객체와 연결된다. 29 | - 함수선언문은 자바스크립트 최상위 단계에서도, 다른 함수 내에서도 나타날 수 있다. 30 | - 중첩될 때에는 중첩된 함수 내에서 최상위 단계에 위치해야 한다. = if문이나 while 문 같은 다른 문장 안에 있을 수 없다. 31 | -------------------------------------------------------------------------------- /chapter9/9-1.md: -------------------------------------------------------------------------------- 1 | ## 9.1 클래스와 프로토 타입 2 | 3 | 자바스크립트 클래스는 같은 프로토타입 객체로부터 프로퍼티를 상속받은 객체의 집합이다. 4 | 5 | ![](https://images.velog.io/images/dear_sopi9211/post/c450ee5f-2d4e-4561-b55d-279b946299c4/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-11-12%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.38.03.png) 6 | 7 | 팩토리패턴 함수는 중복되는 부분을 팩토리 패턴 함수 안에 넣어서 바뀌는 부분만 인자로 받는 함수로 새로운 객체를 만들어 냄 8 | (컨스트럭터를 안쓰려고 쓰는게 팩토리패턴이다 라고 함) 9 | 객체끼리 공유할수있는 점 10 | 11 | 프로토타입은 객체의 프로퍼티들을 상속한다. 12 | 13 | 저기서 사용되는 this는 호출 대상 객체에 접근한다. 14 | 15 | ``` 16 | let prototype = { 17 | jeyden : "idot", 18 | } 19 | 20 | let study = { 21 | soyeon : "good" 22 | } 23 | 24 | study.__proto__ = prototype; 25 | study.prototype = prototype; 26 | 27 | 28 | study.__proto__.jeyden = idot 29 | //__proto__ 는 생략해도 됨. 30 | study.jeyden = idot 31 | 32 | ``` 33 | -------------------------------------------------------------------------------- /chapter4/4-1.md: -------------------------------------------------------------------------------- 1 | ## 4. 표현식과 연산자 2 | 3 | 표현식이란? 자바스크립트 인터프리터가 값(value)로 평가하는 자바스크립트 구문 4 | 5 | - 간단한 표현식(기본표현식) : 임의의 상수, 변수에 할당된 임의의 값 6 | - 복잡한 표현식(복합표현식) : 기본표현식이 결합된 표현식의 형태 7 | ex) 배열접근 표현식은 `[`(열린대괄호) + 숫자로 평가되는 표현식 +`]`(닫힌대괄호) 가 결합된 형태 8 | ex) 함수호출 표현식은 함수객체 + 인자표현식이 결합된 형태 9 | 10 | ### 4-1. 기본 표현식 11 | 12 | 가장 기본적인 형태로서 다른 표현식을 포함하지 않는 독립적 표현식. 13 | 상수, 리터럴 값, 특정 키워드들, 변수 참조가 이에 해당한다. 14 | 15 | - 리터럴 16 | 17 | ```js 18 | 1.23 //숫자 리터럴 19 | "hello" //문자 리터럴 20 | /pattern/ //정규표현식 리터럴 21 | ``` 22 | 23 | - 예약어 24 | 25 | ```js 26 | true; //불리언 true 값으로 평가 27 | false; //불리언 false 값으로 평가 28 | null; //null 값으로 평가 29 | this; //'현재'객체로 평가 30 | ``` 31 | 32 | - 변수참조

33 | 자바스크립트에서는 프로그램 안에 존재하는 각 식별자들을 일단 변수라고 가정하고 값을 살펴본 뒤 해당 식별자를 이름으로 하는 변수가 없다면 해당 표현식을 undefined 라고 평가한다. 34 | 35 | ```js 36 | i; //변수 i 의 값으로 평가 37 | sum; //변수 sum 의 값으로 평가 38 | undefined; //전역변수, null 과 달리 키워드가 아니다. 39 | ``` 40 | -------------------------------------------------------------------------------- /chapter11/11-3.md: -------------------------------------------------------------------------------- 1 | ### 11.3 해체 할당 2 | 3 | - 등호의 오른쪽에 있는 값은 배열 또는 객체이고, 왼쪽에는 배열 문법이나 객체 리터럴 문법과 비슷한 문법으로 하나 이상의 변수 이름을 지정한다. 배열과 같이 사용할 때 간편하면서도 강력크하다. 4 | 5 | ```js 6 | let [x, y] = [1,2] // let x=1, y=2 와 같다. 7 | [x,y] = [x+1, y+1] // x = x+1, y = y+1 과 같다. 8 | [x,y] = [y,x] // 두 변수의 값을 바꾼다. 9 | ``` 10 | 11 | - 해체 할당의 왼쪽에 있는 변수긔 개수가 오른쪽에 있는 배열 요소의 개수와 일치할 필요는 없다. 할당되지 못한 변수는 'undefined' 로 설정된다. 왼쪽에 있는 변수의 목록에서 오른쪽의 특정 값을 건너뛰려면 쉼표를 추가하면 된다. 12 | 13 | ```js 14 | let [x,y] = [1]; // x = 1, y = undefined 15 | [x, y] = [1,2,3]; // x = 1, y = 2 16 | [, x, ,y] = [1,2,3,4] // x = 2, y = 4 17 | ``` 18 | 19 | - 객체의 해체 할당은 혼란스러울 수 있는데, 프로퍼티와 변수 이름에 같은 식별자를 사용하려는 유혹이 있기 때문이다. 20 | 21 | ```js 22 | let transparent = { r: 0.0, g: 0.0, b: 0.0, a: 1.0 } // RGBA 색상 23 | let { r: red, g: green, b: blue } = transparent; // red: 0.0, green: 0.0, blue: 0.0 24 | 25 | // r, g, b는 객체에서 빼내려는 프로퍼티 (key)의 이름이라는 것을 기억해야 한다! 26 | ``` -------------------------------------------------------------------------------- /chapter3/3-9.md: -------------------------------------------------------------------------------- 1 | # 3.9 변수 선언 2 | 3 | - 변수를 사용하려면 선언(declaration)해야함 4 | - 책은 오래돼서인지 `var`을 쓰는데, 요즘엔 `let`, `const`많이씀 5 | 6 | - `let`은 `var`처럼 변수를 먼저 선언하고 나중에 할당 가능 7 | - 선언하고 할당 안하면 `undefined` 8 | - `const`는 선언할 때 할당해야함 9 | 10 | - `let`은 `for loop`에서 사용가능, `const`는 TypeError 11 | 12 | ```javascript 13 | const array = [1, 2, 3]; 14 | for (let i = 0; i < array.length; i++) { 15 | console.log(i); 16 | } 17 | //0 18 | //1 19 | //2 20 | 21 | for (const j = 0; j < array.length; j++) console.log(j); // TypeError 22 | ``` 23 | 24 | - 자바스크립트는 변수 선언할 때 type을 명시하지 않아도 됨 25 | 26 | ## 3.9.1 반복된 선언과 생략된 선언 27 | 28 | - `let` 문장에서는 변수를 하나 이상 선언할 수 있음 29 | - 반복된 변수 선언에 초기값이 부여되면 대입문처럼 동작함 30 | 31 | ```javascript 32 | let i, j; 33 | let k = 0, 34 | l = 4; 35 | console.log(i, j, k, l); // undefined, undefined, 0, 4 36 | ``` 37 | 38 | - 선언 안된 변수를 읽으면 에러남 (`m is not defined`) 39 | - 선언하지 않은 변수에 값을 넣으려면 에러남 40 | - `non-strict` mode에서는 가능 41 | -------------------------------------------------------------------------------- /chapter5/5-2.md: -------------------------------------------------------------------------------- 1 | ### 5.2 복합문과 빈 문장 2 | 3 | - 중괄호로 감싸는 문장 블록은 여러 문장을 하나의 복합문으로 묶을 수 있다. 4 | - 따라서 아래의 코드는 단일 문장과 마찬가지로 취급된다. 5 | ```js 6 | { 7 | x = Math.PI; 8 | cx = Math.cos(x); 9 | console.log("cos(𝝿)=" + cx); 10 | } 11 | ``` 12 | - 문장블록은 내부의 기본문장들은 세미콜론으로 끝나지만 문장블록 자체는 세미클론으로 끝나지 않는다. 13 | - 필수는 아니지만 내부의 문장들은 들여쓰기를 해주는 것이 좋다. 14 | - 자바스크립트 문법에서 하나의 문장이 있어야 할 곳에 여러 문장을 사용할 수 있게 해준다. 15 | 16 | - 이와 반대인 빈 문장은 하나의 문장이 있어야 할 곳에 아무런 문장도 두지 않을 수 있도록 한다. 17 | ```js 18 | //빈문장 19 | ``` 20 | - 자바스크립트 인터프리터는 빈문장을 만나면 아무것도 실행하지 않는다. 21 | - 몸체가 비어있는 루프를 만들때 유용하다 22 | ```js 23 | for (i = 0; i < a.length; a[i++] = 0); //배열 a를 초기화한다. 24 | //별도의 몸체가 필요없는 루프이나, 자바스크립트 문법 상 루프 몸체에 하나의 문장이 와야 하므로 25 | //세미콜론만 있는 빈 문장을 사용했다. 26 | ``` 27 | - for, while 루프 또는 if문이 끝나는 오른쪽 괄호 다음에 의도치 않은 세미콜론을 넣는 경우 버그가 발생할 수도 있다. 28 | ```js 29 | if (a == 0 || b == 0); //조건과 무관하게 아무 것도 실행하지 않는다. 30 | a = null; // 이 행은 항상 실행된다. 31 | ``` 32 | -------------------------------------------------------------------------------- /chapter5/5-1.md: -------------------------------------------------------------------------------- 1 | ## 5.문장 2 | 3 | - 4장에서의 표현식이 자바스크립트의 구절(phrase)라면, 비슷한 의미로 문장(statement)는 명령을 말한다. 4 | - 표현식이 어떤 값을 생성하기 위해서 평가되는 것이라면, 구문은 일을 하기 위해 실행하는 부분 5 | - 자바스크립트는 순서대로 실행되는 문장들의 집합 6 | - 문장의 실행 순서를 바꿈으로서 자바스크립트 인터프리터를 제어할 수 있는데 이를 수행하는 몇 가지의 문장이 존재한다. 7 | - if, switch 같은 조건문은 표현식의 값에 따라 다른 문장의 실행 여부를 결정할 수 있게 한다. 8 | - while, for 문과 같은 순환문은 특정 문장들을 반복 실행하게 한다. 9 | - break, return, throw 같은 도약문은 특정 부분으로 건너뛰게 한다. 10 | 11 | ### 5.1 표현문 12 | 13 | - 가장 단순한 형태의 부수 효과가 있는 표현문으로 할당문이 이러한 표현문 중 하나이다. 14 | ```js 15 | greeting = "hello" + name; 16 | counter++; //증감 연산자들은 변수 값 자체를 바꾸는 부수 효과가 있는데 마치 변수에 값을 할당한 것과 같은 효과 17 | ``` 18 | - 표현문의 다른 종류로는 함수 호출이 있다. 19 | 20 | ```js 21 | alert(greeting); 22 | window.Close(); 23 | //위와 같은 클라이언트 측 함수 호출은 표현식이지만 웹브라우저에 영향을 주는 부수효과가 있다. 24 | ``` 25 | 26 | 함수의 부수효과? 27 | 28 | - 코사인을 계산하는 Math.cos(x) 라는 함수가 있을 때, 이를 계산한 뒤 결과를 버리진 않을 것이다. 29 | 다만 계산된 값을 나중에 쓸 수 있도록 cx = Math.cos(x)와 같이 변수에 담아두게 된다. 30 | -------------------------------------------------------------------------------- /chapter13/13-2.md: -------------------------------------------------------------------------------- 1 | #### 13-2 HTML 안에 자바스크립트 포함하기 2 | 3 | 클라이언트 측 자바스크립트를 HTML 문서 안에 내장하는 방법은 4가지다. 4 | 5 | ``` 6 | 1. 태그 안에 직접 작성. 7 | 2. 25 | ``` 26 | 27 | 2. 28 | 29 | ``` 30 | 31 | ``` 32 | 33 | 2번과 같은 방법은 js 파일에 순수하게 자바스크립트만 있어야 한다. 34 | script 태그 사이에는 아무것도 없다. 35 | 36 | 3. 37 | 38 | ``` 39 | 40 | ``` 41 | 42 | 4. 43 | 44 | ``` 45 | 46 | ``` 47 | -------------------------------------------------------------------------------- /chapter6/6-8.md: -------------------------------------------------------------------------------- 1 | ### 6.8 객체 속성 2 | 3 | - 모든 객체는 prototype, class, extensible 속성을 가지고 있다. 4 | 5 | #### 6.8.1 prototype 속성 6 | 7 | - 프로퍼티를 상속하는 객체를 지정한다. 8 | - Object.getPrototypeOf() 를 이용해 객체의 프로포타입을 검사할 수 있다. 9 | - 객체 a가 b의 프로토타입인지 알아보기 위해서는 isPrototypeOf()메서드를 이용한다. 10 | ```js 11 | let p = { x: 1 }; //객체 p를 정의 12 | let o = Object.create(p); //객체 p를 프로토타입으로 하는 객체 o를 생성 13 | p.isPrototypeOf(o); //true 14 | ``` 15 | 16 | #### 6.8.2 class 속성 17 | 18 | - 객체의 클래스 속성은 객체의 타입에 대한 정보를 담고 있는 문자열이다. 19 | - 어떠한 방법으로도 이 속성을 변경할 수 없고, 그 값을 질의할 때는 toString()메서드를 이용한다. 20 | 21 | #### 6.8.3 extensible 속성 22 | 23 | - 객체에 새 프로퍼티를 추가할 수 있는지 여부를 결정 24 | - 잠겨있는 객체의 상태를 고정하고, 외부에서 변경하는 것을 막기 위함이다. 25 | - 확인하기 위해서는 Object.isExtensible() 메서드를 사용한다. 26 | - Object.preventExtensions() 를 통해서 객체를 확장할 수 없도록 설정할 수도 있다. 27 | - Object.seal() 메서드를 통해 객체가 가진 모든 고유 프로퍼티를 설정 불가능하게 할 수 있다.(쓰기 제외) 28 | - Object.freeze() 메서드는 객체를 더 단단히 잠그는데, 확장불가, 프로퍼티 설정 변경 불가하게 하고 전부 읽기 전용으로 만든다. 29 | - 위 두가지 메서드는 주어진 객체에만 영향을 주며, 객체가 가진 프로토타입 객체에는 영향을 미치지 않는다. 30 | -------------------------------------------------------------------------------- /chapter1/1-0.md: -------------------------------------------------------------------------------- 1 | # 1장 자바스크립트 소개 2 | 3 | ### 자바스크립트 언어의 특성 4 | 5 | 1. 웹 프로그래밍 언어 6 | 2. 고수준, 동적언어 7 | 8 | - 고수준 언어: 인간의 언어에 가까울수록 고수준 언어 9 | - 동적언어: 실행 시 자료형을 정함. run을 해야지 에러가 발생. 자바스크립트 코드 작성하면 실제로 돌려보기 전까지는 에러인지 아닌지를 알수가 없음. 10 | - 반대로 정적언어는 컴파일 시 자료형을 지정해서 run하기 전에 에러를 찾을 수 있음 11 | - 그럼 컴파일은 뭐고 런은 뭐냐 12 | - 컴파일은 고수준 언어로 쓰인 코드를 컴퓨터가 이해할 수 있는 저수준 언어로 바꾸는 것. 13 | - 동적언어는 컴퓨터가 번역에 성공하지 못했는데 실행하려고 하니까 에러가 발생하고, 정적언어는 컴퓨터가 번역에 성공하지 못해서 에러가 발생 14 | 15 | 3. 객체지향 프로그래밍과 함수형 프로그래밍 스타일을 모두 잘 표현하는 언어 16 | - 이건 세션이 따로 필요할듯 17 | 4. `Java`에서 문법을 가져옴 18 | 5. `Scheme`에서 1종함수(first-class function) 개념을 가져옴 19 | 6. `Self`에서 프로토타입 기반 상속 개념을 가져옴 20 | 21 | ### 자바스크립트 역사 22 | 23 | 설명이 되어있긴한데, [이 영상](https://www.youtube.com/watch?v=wcsVjmHrUQg&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC)이 조금 더 이해하기 쉬운듯. 15분짜리니 좀 길다 24 | 25 | ### 실행환경 26 | 27 | - 다른 언어와 다르게 자바스크립트 코어는 텍스트, 배열, 날짜, 정규표현식을 다루는 최소한의 API만 정의하고 입출력 기능은 없음 28 | 29 | - 입출력은 `호스트 환경`에서 담당함 30 | - 해당 호스트 환경은 `웹브라우저`임 31 | 32 | - 웹 브라우저는 자바스크립트 엔진을 내장하고 있기 때문 33 | -------------------------------------------------------------------------------- /chapter3/3-7.md: -------------------------------------------------------------------------------- 1 | # 3.7 변경 불가능한 원시 타입 값과 변경 가능 객체 참조 2 | 3 | - 원시 타입(primitive type)은 수정 안됨(immutable) 4 | - number, undefined, null, boolean은 누가봐도 안됨 5 | - string은 될 것 같지만 안됨 6 | 7 | ```javascript 8 | const s = "hello"; 9 | s.toUpperCase(); // 'HELLO' 10 | console.log(s); // 'hello' 11 | ``` 12 | 13 | - 객체는 변경 가능함 14 | 15 | ```javascript 16 | let o = { x: 1 }; 17 | o.x = 2; 18 | o.y = 3; 19 | console.log(o); // { x: 2, y: 3 } 20 | 21 | let a = [1, 2, 3]; 22 | a[0] = 0; 23 | a[3] = 4; 24 | console.log(a); // [0,2,3,4] 25 | ``` 26 | 27 | - 객체는 값으로 비교되지 않음 28 | - 객체는 참조타입(reference type) 원시타입(primitive type)과 구분됨 29 | - 객체는 참조로 비교됨 30 | 31 | ```javascript 32 | let o = { x: 1 }; 33 | let p = { x: 1 }; 34 | console.log(o === p); // false 35 | 36 | let a = []; 37 | let b = []; 38 | console.log(a === b); // false 39 | 40 | let c = []; 41 | let d = c; 42 | d[0] = 1; 43 | c[0]; 44 | console.log(c === d); // true 45 | ``` 46 | 47 | - 객체에 변수를 할당하는 것은 참조를 할당하는 것 48 | - d[0]에 값을 할당했는데 c[0]도 변해서 사실 놀랐음 49 | - 복사본을 만들려면 객체의 프로퍼티 또는 배열의 원소를 복사해야 함 50 | - `.slice()`, `[...array]` 등 51 | -------------------------------------------------------------------------------- /chapter9/9-3.md: -------------------------------------------------------------------------------- 1 | ## 9.3 자바 스타일 클래스 2 | 3 | 자바에서 비롯된 자바스크립트라 객체지향 언어에 있는 4가지 유형이 있다. 4 | 5 | #### 인스턴스 필드 6 | 7 | 인스턴스마다 있는 프로퍼티나 변수로 , 개별 객체의 상태를 저장 8 | 9 | #### 인스턴스 메서드 10 | 11 | 클래스의 모든 인스턴스가 공유하는 메서드로 , 개별 인스턴스를 대상으로 호출 12 | 13 | #### 클래스 필드 14 | 15 | 인스턴스가 아니라 클래스와 관련된 프로퍼티나 변수다 16 | 17 | #### 클래스 메서드 18 | 19 | 인스턴스가 아니라 클래스와 관련된 메서드다. 20 | 21 | 자바스크립트와 자바가 다른 점 중에 한가지는 함수가 값이고 메서드와 필드 사이에 뚜렷한 구분이 없다고 한다. 22 | 한마디로 프로퍼티 **값이 함수**면 그 프로퍼티는 **메서드**이고 함수가 아니면 프로퍼티나 **'필드'** 이다. 23 | 그럼에도 해당 4가지 멤버를 자바스크립트에서도 사용이 가능하다. 24 | 25 | #### 생성자 객체 26 | 27 | 생성자 함수(객체)는 클래스 이름을 정의한다. 28 | 29 | 생성자 객체에 추가된 프로퍼티는 클래스의 필드와 메서드이다. 30 | 31 | #### 프로토타입 객체 32 | 33 | 이 객체의 프로퍼티는 클래스의 모든 인스턴스의 상속한다. 34 | 그 값이 함수인 프로퍼티는 인스턴스 메서드로 동작한다. 35 | 36 | #### 인스턴스 객체 37 | 38 | 각 인스턴스는 독립적 객체이고 인스턴스에 직접 정의 된 프로퍼티는 다른 인스턴스에 공유되지 않는다 함수가 아닌 프로퍼티는 인스턴스 필드로 작동한다. 39 | 40 | **클래스를 정의 하는 과정** 41 | 42 | 프로퍼티 설정하는 생성자 함수 작성 > 생성자의 프로토 타입 객체에 인스턴스 메서드 정의 > 생성자 자체에 클래스 필드와 클래스 프로퍼티 정의 43 | 44 | **자바와의 차이점** 45 | 46 | 여기서 자바스크립트여서 사용해야하는 부분은 this를 사용해서 인스턴스 메서드를 사용해야한다. 47 | (이외의 내용은 우리가 자바를 모르기에 그냥 생략) 48 | -------------------------------------------------------------------------------- /chapter11/11-2.md: -------------------------------------------------------------------------------- 1 | ### 11.2 상수와 범위 변수 2 | 3 | 언어 확장에 대해 살펴본다. 자바스크립트 1.5나 그 이후의 버전에서는 const 키워드를 사용하여 상수를 정의할 수 있다. 4 | 5 | ```js 6 | const pi = 3.14 // 상수를 정의하고 값을 할당 7 | pi = 4 // 이후의 모든 할당은 무시된다 8 | const pi = 4 // 상수를 재정의하는 것은 잘못된 것! 9 | var pi = 4 // 이 또한 잘못된 것! 10 | ``` 11 | 12 | | 변수에 대한 블록 유효범위가 없다는 것은 오랫동안 자바스크립트의 단점으로 간주되었지만, 이제 "let, const" 키워드를 추가함으로써 이를 해결하였다. 13 | 14 | ```js 15 | function oddsums(n) { 16 | let total = 0, result = []; 17 | 18 | for(let x = 1; x <= n; x++) { 19 | let odd = 2 * x-1; 20 | total += odd; 21 | result.push(total) 22 | } 23 | // 여기서 x나 odd를 사용하려면 참조 에러가 발생한다! (Reference Error) 24 | return result; 25 | } 26 | 27 | oddsums(5); // [1, 4, 9, 16, 25]; 28 | ``` 29 | 30 | - 변수가 초기화되기 전에 사용되는 것을 막는 방법은 let 블록 구문을 사용하여 해당 블록에서 사용하려는 변수와 그 변수를 초기화하는 표현식을 결합하는 것이다. 31 | 32 | ```js 33 | let x = 1, y = 2; 34 | let (x = x+1, y = y+1) { // 해당 블록에서 새로 정의된 x,y 는 밖에서 정의된 x,y를 가린다. 35 | console.log(x+y) // 즉, 밖에 있는 x,y가 아닌 새로 생성된 변수. 3+2 는 5 36 | } 37 | 38 | console.log(x + y) // 원래 밖에 정의된 값. 1+2는 3 39 | ``` -------------------------------------------------------------------------------- /chapter5/5-4.md: -------------------------------------------------------------------------------- 1 | ### 5.4 조건문 2 | 3 | - 특정 표현식의 값에 따라 문장을 실행하거나 건너뛰는데 이를 '분기'라 한다. 4 | 5 | #### 5.4.1 if 6 | 7 | ```js 8 | if (표현식) 문장; 9 | //이러한 형태에서 표현식의 값이 true 이면 문장이 실행되고, false 이면 실행되지 않는다. 10 | 11 | if (표현식) 문장1; 12 | else 문장2; 13 | //위와 동일하나 표현식이 false 경우 문장2가 실행된다. 14 | ``` 15 | 16 | - else 가 어느 if문에 속했는지 알기 위해서, 유지보수를 위해서 중괄호를 사용한다. 17 | 18 | #### 5.4.2 else if 19 | 20 | - else if는 자바스크립트 고유의 구문은 아니나 if/else 문을 반복해서 사용하던 것이 관습으로 굳어져 널리 쓰이게 되었다. 21 | 22 | #### 5.4.3 switch 23 | 24 | - switch 문은 if 문에서 동일한 표현식이 여러번 반복되는 문제점을 해결할 수 있다. 25 | ```js 26 | switch(표현식){ 27 | 문장들 28 | } 29 | ``` 30 | - 스위치문의 case 절은 오직 실행하려는 코드의 시작지점만 결정한다. 31 | - break문이 없으면 해당 case 에서 시작해 블록 끝까지 계속 실행하므로 break 문으로 코드 실행을 중지할 수 있다. 32 | - switch 키워드 다음에 나오는 표현식을 평가한 후, 대응하는 값을 찾을때까지 순서대로 case 문을 평가한다. 33 | - case 를 판별할때는 엄격한 동치(===)를 사용한다. 34 | 35 | ```js 36 | switch(n){ 37 | case 1 : //n ===1 이면 여기서 시작 38 | break; //여기서 멈춘다 39 | case 2 : //n===2 이면 여기서 시작 40 | break; //여기서 멈춘다 41 | default: //모든 경우에 해당하지 않으면 여기서 시작 42 | break; //여기서 멈춘다 43 | ``` 44 | -------------------------------------------------------------------------------- /chapter9/9-8.md: -------------------------------------------------------------------------------- 1 | ## 9.8 ES5 클래스 2 | 3 | #### 9.8.1 열거되지 않는 프로퍼티 만들기 4 | 5 | for/in 문을 썼을때 열거되지 않는 프로퍼티를 만드는 방법은 Object.defineProperty()를 사용하면된다. 6 | 7 | #### 9.8.2 변경되지 않는 클래스 정의하기 8 | 9 | 읽기전용의 클래스로 만들고 싶을때는 Object.defineProperties()와 Object.create() 를 사용해서 불병성을 구현하면 된다. 10 | 11 | #### 9.8.3 객체 상태를 캡슐화 하기 12 | 13 | private 상태를 사용해서 캡슐화 또는 숨기기 가능했으나 14 | getter / setter 메서드 프로퍼티 정의로 접근자 메서드를 임의로 교체할 수 없게 견고한 캡슐화 실현 15 | 예제 9-21 16 | 17 | #### 9.8.4 클래스 확장 막기 18 | 19 | Object.preventExtensions() 는 객체를 확장할수 없게 한다. 20 | Object.seal()은 객체가 확장되는걸 막을 뿐 아니라 기존 프로퍼티도 재설정이 불가능하다. 21 | Object.freeze()은 Object.seal()을 모두 수행하고 모든 프로퍼티를 읽기전용으로 만든다. 22 | 23 | #### 9.8.5 서브클래스와 ES5 24 | 25 | Object.create()의 메서드를 사용해서 새로운 서브 클래스를 만드는 방식을 설명한다 자세한 예제는 9-22 통해 확인 가능하다. 26 | 27 | #### 9.8.6 프로퍼티 디스크립터 28 | 29 | Descriptor란 설명자 라는 뜻으로 30 | ES5의 Object 클래스에는 총 5개의 프로퍼티 디스크립터가 있다. 31 | get: 프로퍼티의 값을 출력 32 | set: 프로퍼티의 값을 반환 33 | enumerable: 프로퍼티의 열거 가능여부 설정 34 | configurable: 프로퍼티의 삭제 가능여부 설정 35 | writable: 프로퍼티의 쓰기 가능여부 설정 36 | 37 | https://cinos81.bitbucket.io/blog/_site/javascript/2016/07/13/property-descriptor.html 38 | -------------------------------------------------------------------------------- /chapter4/4-10.md: -------------------------------------------------------------------------------- 1 | ### 4.10 논리 표현식 2 | 3 | -논리연산자 ||, &&, ! 는 불리언 대수를 수행한다. 4 | 5 | #### 4.10.1 논리 AND(&&) 6 | 7 | - 두 피연산자가 모두 true 일 경우에만 true 를 반환 8 | - 모든 자바스크립트 값은 불리언으로 평가될 수 있으므로 &&의 피연산자가 반드시 불리언 값이 올 필요는 없다. 9 | - false 로 평가되는 값은 false, null, undefined, 0, -0, NaN, ""(빈문자열), 0n = falsy 10 | - 이외에는 모두 true 11 | - 좌변 표현식을 먼저 평가하는데 이때 좌변의 값이 flasy면 우변의 표현식을 평가하지 않는다.(단축평가) 12 | ```js 13 | if (a === b){ 14 | stop() 15 | } 16 | //a===b를 만족할 때만 stop()함수를 호출 17 | 18 | a === b 19 | ) && stop(); //위와 같이 동작한다. 20 | ``` 21 | 22 | #### 4.10.2 논리 OR(||) 23 | 24 | - 불리언 Or 을 수행 25 | - 좌변의 값이 falsy 로 평가되면 전체 표현식은 바로 그 값이 되고, 좌변의 값이 true 로 평가되면 두번째 피연산자의 값이 표현식의 값으로 반환된다. 26 | - 다음의 코드는 여러 값 중에 최초로 true로 평가되는 값을 선택하는 경우 사용된다. 27 | ```js 28 | let max = max_width || preference.max_width || 500; 29 | //max_width가 정의되어 있으면 사용하고, 없으면 preference 객체의 속성을 찾아보고, 거기에도 없으면 하드코딩된 상수를 사용한다. 30 | ``` 31 | 32 | #### 4.10.3 논리 NOT(!) 33 | 34 | - !는 단항연산자로 단일 피연산자 앞에 놓인다. 35 | - 피연산자의 불리언 값을 반대로 바꾼다. 36 | - 피연산자 값을 불리언 값으로 변환한 후 값을 반전한다. 37 | - 단항연산자이므로 결합된 표현식을의 전체를 반전시키고 싶다면 괄호를 사용해야한다. !(p && q) === !p || !q 38 | -------------------------------------------------------------------------------- /chapter5/5-7.md: -------------------------------------------------------------------------------- 1 | ### 5.7 기타 2 | 3 | #### 5.7.1 with 4 | 5 | - with 문은 유효범위 체인(변수의 이름을 찾기 위해 순서대로 검색되는 객체 리스트)을 임시로 확장할 때 쓰인다. 6 | - with 문은 유효범위 체인의 첫번째에 객체를 추가한 후, 문장을 실행한 후 유효범위 체인을 원상태로 돌려놓는다. 7 | ```js 8 | with (객체) 문장; //문법 9 | ``` 10 | - with 문을 사용하는 자바스크립트 코드는 최적화하기 힘들고 속도도 현저히 느리다. 11 | - with 문은 strict 모드에서는 사용할 수 없고, 비엄격 모드에서도 사용하지 않는 것이 좋다. 12 | 13 | #### 5.7.2 debugger 14 | 15 | - debugger 문은 평소에는 아무것도 하지 않는다. 16 | - 디버거 프로그램을 사용할 수 있고, 디버거가 실행중일 때 코드 디버깅을 수행한다. 17 | - debugger 문은 코드의 실행을 잠시 멈추고 디버거 프로그램을 사용해 디버깅을 진행하게 된다. 18 | ```js 19 | fucntion f(o){ 20 | if(o===undefined) debugger; //디버깅을 하기 위한 임시 코드 21 | ... //기존의 코드는 여기서부터 시작한다 22 | ``` 23 | 24 | #### 5.7.3 "use strict" 25 | 26 | - ECMAScript 5에서 처음 소개 27 | - 스크립트의 시작 부분이나 함수 몸체의 시작 부분에 올 수 있으며, 실제 실행문 앞에 오기만 하면 된다. 28 | - 사용하는 이유는 이후에 오는 코드들이 엄격 모드를 따르게 하기 위해서다. 29 | - 엄격모드가 실행되면 강력한 에러검사와 몇가지 언어적 문제점을 수정하며, 향상된 보안 기능을 제공한다. 30 | - with 문은 엄격모드에서 사용불가 31 | - 엄격 모드에서는 모든 변수는 반드시 선언되어야 한다. 선언되지 않은 변수, 함수, 함수의 인자, 전역 객체 프로퍼티에 값을 할당할 경우 referenceError 예외가 발생한다(표준모드에서는 묵시적으로 승인된다) 32 | - 메서드가 아닌 함수의 this 값은 undefined 이다. (표준모드에서는 항상 전역객체를 this의 값으로 넘겨준다) 33 | -------------------------------------------------------------------------------- /chapter4/4-2.md: -------------------------------------------------------------------------------- 1 | ### 4-2. 객체와 배열의 초기화 표현식

2 | 3 | 새로 생성된 객체난 배열을 값으로 하는 표현식, '객체리터럴'과 '배열리터럴'이라고 하기도 하지만 일반리터럴과 달리 기본표현식은 아니다. 4 | 5 | - 배열 초기화 표현식 : 6 | 7 | - 대괄호와 쉼표로 구분 8 | - 배열 초기화 표현식의 값은 새로 생성된 배열 9 | - 생성된 배열의 원소들은 각각 쉼표로 구분된 표현식의 값들로 초기화된다 10 | 11 | ```js 12 | [][(1 + 2, 3 + 4)]; //빈배열 : 대괄호 안에 표현식이 없으면 원소가 없음 // 두 개의 원소를 가진 배열 13 | ``` 14 | 15 | - 원소 표현식으로 또 다른 배열 초기화 표현식을 사용할 수도 있다 = 중첩 배열이 가능하다 16 | 17 | ```js 18 | let matrix = [ 19 | [1, 2, 3], 20 | [4, 5, 6], 21 | [7, 8, 9], 22 | ]; 23 | ``` 24 | 25 | - 배열이 초기화될 때마다 원소표현식이 평가된다 = 평가될 때마다 원소의 값은 달라질 수 있다. 26 | - 쉼표 사이의 값을 생략함으로서 원소의 값을 정의하지 않을 수 있다. 27 | 28 | ```js 29 | let sparseArray = [1, , , , 5]; //세 개의 정의되지 않은 원소를 포함해 총 다섯개의 원소를 가지고 있다. 30 | ``` 31 | 32 | - 객체 초기화 표현식 : 33 | - 중괄호 사용, 각 하위 표현식 앞에는 프로퍼티의 이름과 클론(:)사용 34 | ```js 35 | let p = { x: 2.3, y: -1.2 }; //2개의 프로퍼티를 가진 객체 36 | ``` 37 | - 중첩이 가능 38 | ```js 39 | let recangle = {upperLeft : {x:2, y:2}, lowerRight : {x:1,y:5} 40 | ``` 41 | - 프로퍼티 이름으로 식별자 대신 문자열 사용이 가능 42 | ```js 43 | let side = 1 44 | let square = { "upperLeft" : {x: p.x, y: p.y}, "lowerRight" : {x: p.x + side, y: p.y + side} 45 | ``` 46 | -------------------------------------------------------------------------------- /chapter15/15-4.md: -------------------------------------------------------------------------------- 1 | #### 15-4 속성 2 | 3 | HTML 요소는 태그의 이름과 속성이라 부르는 이름, 값 쌍들의 집합으로 구성된다. 4 | 5 | #### 15-4-1 Element 객체의 프로퍼티인 HTML 속성 6 | 7 | HTMLElement 객체에는 해당 요소의 HTML 속성에 대응하는 읽기/쓰기 프로퍼티가 있다. 8 | HTMLElement에는 id와 title과 같은 범용 HTML 속성이 프로퍼티로 정의되어 있고, 9 | onclick 같은 이벤트 핸들러 프로퍼티도 존재한다. 10 | 특정 서브타입에는 해당 요소만의 전용 속성이 정의되어 있다. 11 | 12 | ``` 13 | 14 | 15 | ``` 16 | 17 | 몇 가지 HTML 속성명은 자바스크립트의 예약어와 겹친다. 18 | 이런 경우 일반적인 규칙은 프로퍼티 이름 앞에 html 접두사를 붙이는 것이다. 19 | 20 | ``` 21 | 22 | ``` 23 | 24 | class는 실제로 사용하지는 않지만 자바스크립트의 예약어다. 25 | 그런데 class HTML 속성은 접두사를 붙이는 규칙에서 예외다. 26 | 자바스크립트 코드에서 class는 className이다. 27 | 28 | HTML 요소의 style 프로퍼티 값은 문자열이 아닌 CSSStyleDeclaration 객체다. 29 | 30 | #### 15-4-3 Dataset 속성 31 | 32 | 자바스크립트 코드로 HTML 요소를 선택하고 조작할 때 추가 정보를 요소에 첨부할 수 있으면 유용하다. 33 | class 속성에 특수 식별자를 추가하는 방법이 종종 쓰이지만, 어떤 경우에는 추가하려는 정보가 너무 복잡해서 34 | 비표준 속성을 사용하게 된다. 35 | 그러나 HTML 문법의 적합성을 포기해야하기 때문에 data- 라는 접두사를 붙여주면 문법에 맞는 유효한 속성으로 36 | 여긴다. 37 | 38 | #### 15-4-4 속성이 Attr 노드일 때 39 | 40 | Node 타입에는 attributes 프로퍼티가 존재한다. 41 | 이 프로퍼티의 값은 Element 객체면 요소의 모든 속성을 가리키는 읽기 전용의 유사 배열 객체가 된다. 42 | 43 | ``` 44 | document.body.h1.attributes.bgcolor //

요소의 bgcolor 속성 45 | ``` 46 | -------------------------------------------------------------------------------- /chapter3/3-6.md: -------------------------------------------------------------------------------- 1 | # 3.6 래퍼(wrapper) 객체 2 | 3 | - 자바스크립트 객체는 복합적인(composite)값 4 | - 프로퍼티(property) 또는 이름있는 값들의 모임 5 | - `.`을 사용하여 값에 접근 6 | - number, string, boolean값에서 method를 사용하기 위해 생성되는 임시객체가 wrapper object 7 | 8 | ```javascript 9 | const s = "hello world!"; 10 | var word = s.substring(1, 3); 11 | ``` 12 | 13 | - string은 객체가 아닌데 method가 있음 14 | - 자바스크립트는 s 의 property, method를 참조할 때 `new String(s)`를 호출한 것 처럼 생각함 15 | - 문자열(string)도 객체(object)라고 보는거임 16 | - 프로퍼티 참조가 끝나면 `new String()`으로 생성된 임시객체는 메모리에서 회수됨 17 | - 자세한건 6장에 나옴 18 | - `Number()`, `Boolean()`은 객체처럼 method가 있지만, `null`, `undefined`는 없음 19 | 20 | ```javascript 21 | const s = "test"; 22 | s.len = 4; 23 | let t = s.len; 24 | console.log(t); // undefined 25 | ``` 26 | 27 | - `t`가 `undefined`인 이유는, `s.len = 4`이후 property참조가 끝나서 임시객체가 메모리에서 회수됐기 때문 28 | - 값 할당은 임시객체에서 이루어지는 것이고, 사라지게됨 29 | - 임시객체의 property는 읽기 전용이고, 값을 할당할 수 없음 30 | - 그래서 `s.len`도 `console.log()`해보면 `undefined`임 31 | 32 | ```javascript 33 | const s = "test"; 34 | const n = 1; 35 | const b = true; 36 | 37 | const S = new String(s); 38 | const N = new Number(n); 39 | const B = new Boolean(b); 40 | 41 | console.log(typeof s); // string 42 | console.log(typeof S); // object 43 | 44 | console.log(s == S); // true 45 | console.log(s === S); // false 46 | ``` 47 | -------------------------------------------------------------------------------- /chapter9/9-2.md: -------------------------------------------------------------------------------- 1 | ## 9.2 클래스와 생성자 2 | 3 | 생성자는 새로 생성된 객체를 초기화 하는 용도로 사용되는 함수이다. 4 | 5 | 사용법은 new 키워드를 사용해서 호출하면 되며 자동으로 새로운 객체가 생성된다. 6 | 또한 생성자의 prototype 의 프로퍼티들을 상속받는다 7 | 그래서 한 생성자를 사용한 모든 객체들은 같은 객체를 상속한다. 8 | 같은 클래스의 멤버인 것이다. 9 | 10 | ![](https://images.velog.io/images/dear_sopi9211/post/5372443e-ce22-4598-b200-19a655f28480/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-11-12%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.15.04.png) 11 | 12 | 여기서 생성자 함수처럼 사용되는 함수들은 앞에 대문자로 기록하는게 일반적임 13 | 14 | 또한 생성자를 호출하게되면 .prototype 이고 이것은 정해진 규칙이다. 15 | 16 | 9.1 예제 함수에서는 range.methods 로 프로토타입을 상속시켰는데 이것은 임의로 작성한 것이다. 17 | 18 | ### 9.2.1 생성자와 클래스 구별 19 | 20 | 생성자 함수가 클래스를 구별을 하는 핵심이 아니다 21 | 다른 두 생성자가 같은 프로토타입 객체를 가리키는 프로토타입 프로퍼티를 가질수있다. 22 | 그럼 각각의 생성자 함수는 같은 클래스의 인스턴트를 만들수가 있다. 23 | 24 | 주로 생성자는 객체가 어떤 클래스에 속한 것인지 검사할때 instanceof 연산자과 함께 사용된다고 한다. 25 | 해당 객체의 프로토타입을 상속하는지 검사한다. 26 | 27 | instanceof 연산자는 이후에 더 나올 예정이라고 한다 28 | 29 | ### 9.2.2 constructor 프로퍼티 30 | 31 | 모든 자바스크립트 함수는 생성자로 사용될수가 있다. 그렇게 생성자로 호출되려면 prototype 프로퍼티가 필요하다. 32 | 그리고 자바스크립트는 일부 메서드를 반환하는 함수 제외하고는 모든 함수에 자동으로 prototype 프로퍼티가 설정된다. 33 | 그 값은 constructor 프로퍼티 하나만을 가진 객체다. 해당 프로퍼티는 열거되지 않으며 해당 값은 함수 객체이다. 34 | 35 | 해당 객체는 자신의 생성자를 가리키는 constructor 함수객체를 상속하고있다는 뜻이다. 36 | 생성자는 클래스를 구별하는데도 쓸 수 있고 constructor를 통해서 객체의 클래스를 얻을수도 있다. 37 | 38 | -------------------------------------------------------------------------------- /chapter6/6-6.md: -------------------------------------------------------------------------------- 1 | ### 6.6 프로퍼티 Getter 와 Setter 2 | 3 | - 프로퍼티의 값은 getter/setter 메서드로 대체할 수 있다. 4 | - 데이터프로퍼티 : 값을 저장하기 위한 프로퍼티로 일반적으로 사용하는 프로퍼티 5 | - 접근자 프로퍼티 : 값이 없고 프로퍼티를 읽거나 쓸 때 호출하는 함수를 값 대신 지정할 수 있는 프로퍼티를 말한다. 접근자 프로퍼티의 본질은 함수이며 이 함수는 값을 획득하고 설정하는 역할을 한다(getter/setter) 6 | - 프로그램이 객제의 접근자 프로퍼티의 값에 접근하면 자바스크립트 엔진이 getter 메서드를 호출하고, 프로퍼티의 값을 변경하려고 하면 setter 메서드를 호출한다. 7 | - 접근자 프로퍼티를 정의하는 방법은 확장된 객체 리터럴 문법을 사용하는 것이다. 8 | ```js 9 | let o = { 10 | //데이터 프로퍼티 11 | date_prop: value, 12 | //한 쌍의 함수로 정의된 접근자 프로퍼티 13 | get accessor_prop() { 14 | /*함수 몸체*/ 15 | }, 16 | set accessor_prop(value) { 17 | /*함수 몸체*/ 18 | }, 19 | }; 20 | ``` 21 | - 접근자 프로퍼티는 그 이름이 프로퍼티 이름과 같은 하나 또는 두 개의 함수 22 | - function 키워드 대신 get/set을 사용하고 프로퍼티 이름 뒤에 콜론을 사용하지 않는다. 23 | 24 | ```js 25 | let user = { 26 | name: "John", 27 | surname: "Smith", 28 | 29 | get fullName() { 30 | return `${this.name} ${this.surname}`; 31 | } 32 | 33 | set fullName(value) { 34 | [this.name, this.surname] = value.split(" "); 35 | } 36 | }; 37 | 38 | // 주어진 값을 사용해 set fullName이 실행 39 | user.fullName = "Alice Special" 40 | 41 | alert(user.fullName); // Alice Special 42 | alert(user.name); // Alice 43 | alert(user.surname); // Special 44 | ``` 45 | 46 | - 이와 같이 getter 와 setter 매서드를 구현하면 객체에 fullName 이라는 가상의 프로퍼티가 생기게 되는데, 가상의 프로퍼티는 읽고 쓸 순 있지만 실제로는 존재하지 않는다. 47 | -------------------------------------------------------------------------------- /chapter7/7-2.md: -------------------------------------------------------------------------------- 1 | ## 7.2 배열의 원소 읽고 쓰기 2 | 3 | 배열의 각 원소에 접근할때는 [] 연산자를 사용한다. 4 | 여기서 []안에는 음이 아닌 정수의 값으로 평가되는 표현식이 위치할 수 있다. 5 | 6 | ``` 7 | // 콘솔에 찍어서 나오는 값 보기!! 8 | 9 | let arr = ["world"]; 10 | let firstValue = arr[0]; 11 | arr[1] = 2; 12 | arr[arr[1]] = "Hi"; // 여기서 Hi는 arr 배열의 2번째 인덱스를 원소 값이다. 13 | arr[arr[1]+1] = "Sophia"; // 여기서 Sophia는 arr 배열의 3번째 인덱스를 원소 값이다. 14 | ``` 15 | 16 | 그리고 객체 프로퍼티에 접근하는 []와 똑같이 동작한다. 17 | 18 | ``` 19 | o= {}; 20 | o[1]="one"; 21 | 22 | o = {1: "one"} 23 | ``` 24 | 25 | 위와 같이 객체[]의 인덱스가 1이라면 문자열 1로 변환해 "1"이라는 프로퍼티 네임에 one이라는 문자가 담기는 것이다. 26 | 27 | 여기서 배열의 인덱스와 객체 프로퍼티 이름을 구별하는 방법 28 | 모든 배열은 객체이고, 29 | 모든 인덱스 값은 프로퍼티 이름이지만, 30 | 프로퍼티 이름은 **0과 최대 인덱스가 가능한 값의 사이의 정수**여야만 **인덱스**가 될 수 있다. 31 | 또한 배열은 프로퍼티 가운데 인덱스인 것들은 사용하면 lenght 프로퍼티의 값이 자동으로 갱신된다. 32 | 33 | 배열[]안에 음수나 정수가 아닌 수들이 사용할 수 있기는 하다. 그렇게 되면 인덱스로 접근하는 것이 아니라 문자열로 변환해 위의 코드와 같이 **프로퍼티 네임**으로 사용된다. 34 | 35 | ``` 36 | a[-1.23]= true; 37 | a[1.000] = 1; 38 | 39 | a = {"-1.23": true, "1.000" : 1} 40 | ``` 41 | 42 | 그러나 **양의 정수**가 담긴 **문자열**이 들어온다고 하면 그것은 **인덱스**로 인색해 해당 인덱스의 원소로 접근하게 된다. 43 | 44 | ``` 45 | a[1000] = 1; 46 | // a 배열의 1000번째 원소에 값은 1이다. 47 | ``` 48 | 49 | 자바스크립트 배열에서는 객체에 존재하지 않는 프로퍼티 이름의 질의 해도 에러가 발생하지 않고 단순히 undefined값이 반환된다. (배열에도 적용) 50 | 51 | 여기서 모든 배열은 객체임으로 객체에 프로토타입으로 부터 원소를 상속받을수 있고 getter , setter 메서드를 통해 정의된 원소도 가질 수 있으나, 배열에 사용하게 되면 일반 객체의 프로퍼티를 조회하는 시간이 비슷하기에 최적화에 대한 고려가 있다고 한다. 52 | -------------------------------------------------------------------------------- /chapter17/event.md: -------------------------------------------------------------------------------- 1 | # 17장 이벤트 다루기 2 | ## 이벤트 분류 3 | 이벤트는 일반적으로 다음과 같이 묶을 수 있다. 그리고 이런 분류가 뒤따라오는 긴 이벤트 목록을 이해하는 데 도움이 될 것이다. 4 | * 장치 의존적인 입력 이벤트 5 | 마우스나 키보드 같은 특정 입력 장치에 직접 연결된 이벤트(mousedown, keydown, keypress) 6 | * 장치 독립적인 입력 이벤트 7 | 특정 입력 장치와 직접 관련이 없는 입력 이벤트다. 예를 들면 click 이벤트는 링크나 버튼이 작동되었음을 나타낸다. 이 이벤트는 보통 마우스 클릭을 통해 일어나지만 키보드는 물론이고, 터치 기반 장치에서는 손동작으로도 일어날 수 있다. 8 | * 사용자 인터페이스 이벤트 9 | UI 이벤트는 웹 애플리케이션의 UI를 정의하는 HTML 폼 요소의 고수준 이벤트다. 10 | - 텍스트 필드에 키보드 커서가 위치할 때 발생하는 focus 11 | - 폼 요소에 출력된 값을 변경할 때 발생하는 change 12 | - 폼의 전송 버튼을 사용자가 클릭했을 때 발생하는 submit이벤트 13 | 14 | * 상태변화 이벤트 15 | - 문서를 끝까지 불러왔을 때 Window 객체에서 발생하는 load 이벤트 16 | - DOMContentLoaded 이벤트 17 | - HTML5 History 매커니즘 18 | 19 | * 특정 API의 이벤트 20 | - 드래그 앤 드롭 API 21 | - `