2014-10-19 <Java Script for Web Developer> 책 4, 5, 10, 11장 요약

2014-10-19 <Java Script>책 4, 5, 10, 11장 요약

 

<Java Script for Web Developer> 교재

 

1. 자바스크립트란?

 웹 페이지와 상호작용하도록 디자인된 스크립트 언어.

  - 스크립트 언어란?

 소스 코드를 컴파일(Compile)하지 않고도 실행할 수 있는 프로그래밍 언어. 일반적으로 컴파일 언어보다 퍼포먼스가 낮지만, JIT 방식(반복되는 부분은 한 번은 미리 컴파일)으로 성능을 개선한 자바스크립트나, 액션스크립트 등이 있다.

   예) 그루비, 자바스크립트, 펄, 루비, 파이썬, PHP

2. 자바스크립트의 기능.

 ECMAScript 핵심기능 제공

 (특징: 정수와 부동소수점 구분 없음. 리턴타입 명시필요 없음.오버로딩 불가.  단, arguments.length == 1 처럼 흉내는 낼 수 있다.)

 문서 객체 모델(DOM). 웹 페이지 콘텐츠를 조작하는 메소드와 인터페이스 제공

 브라우저 객체 모델(BOM). 브라우저와 상호작용하는 메소드와 인터페이스 제공.

 

4장 변수와 스코프, 메모리

4.1 원시 값과 참조 값

• 자바스크립트의 변수는 느슨한 타입이다. 값과 데이터 타입은 스크립스 실행 중에 바뀔 수 있다.
• 원시값: 단순한 데이터. '값으로' 접근한다. 문자열도 '원시값'임을 주의. (타 언어에서는 참조값)
• 참조값: 객체를 가리키는 리모컨. 자바스크립트는 메모리 공간을 직접 조작하는 일이 불가능. 객체가 아니라 '참조'를 조작. 
• Undefined는 선언만 되고 초기화 되지 않은 변수이다. typeof - Undefined
• Null은 변수에 할당된 변수이다. typeof  - Object
• NaN

동적프로퍼티 (property n. 속성)

var person = new Object(); person.name = "Nicholas"; alert(person.name); // "Nicholas"

• 참조값에는 . 으로 값(프로퍼티) 추가가 가능.
• 원시값은 진짜 값이 복사되고 참조값은 리모컨이 복사된다.
• 매개변수(parameter)는 오직 원시 값으로만 전달. 참조 값은 Heap의 메모리 주소 값을 보낸다. 때문에, 다음과 같은 상황이 벌어진다.

function setName(obj) {  obj.name = "Nicholas"  obj = new Object();  obj.name = "Greg" } var person = new Object(); setName(person) alert(person.name); // "Nicholas"

• obj는 단지 리모컨을 담는 그릇으로 새로운 리모컨이 들어가게 된다. 만일 참조상태였다면, person에 새로운 객체가 담겼을 것이다.
• 타입판별: 원시값 typeof 참조값 instanceof

 

4.2 실행 컨텍스트와 스코프

• 실행 컨텍스트 execution context를 컨텍스트라고 부른다. 변수 접근 여부나 행동을 규정.
• 실행 컨텍스트 = 전역 컨텍스트 + 함수 컨텍스트,
• 전역 컨텍스트: 전역 컨텍스트에 있는 변수와 함수에만 접근할 수 있다. 웹브라우저에서 전역 컨텍스트를 window라고 부른다.
• 함수 컨텍스트: 해당 스코프의 변수, 스코프가 속해있는 컨텍스트에 있는 변수, 전역 컨텍스트에 있는 변수에 모두 접근 가능. (해당 스코프가 속해있지 않는 컨텍스트의 로컬변수에는 접근 불가)
• 모든 변수는 스코프라고 부르기도 하는 컨텍스트에 존재. 컨텍스트는 변수의 존재기간, 접근성 등을 결정.
• 스코프 체인: 실행 컨텍스트에 진입할 때 마다 생성, 변수와 함수 검색에 쓰임.
• 실행 컨텍스트는 변수에 할당된 메모리를 언제 해제할 수 있는지 판단하는데 도움이 된다.

 

4.2 가비지 콜렉션

• 자바스크립트는 자동으로 가비지 컬렉션을 수행.
• 표시하고 지우기: 컨텍스트 내외부를 표시하여 외부일 경우 제거.
• 참조카운팅: 참조되는 횟수를 기준으로 추적. 순환참조라는 심각한 문제가 발생.
• 인터넷 익스플로어 8버전은 객체중 일부가 네이티브 자바스크립트 객체가 아니다. BOM과 DOM의 객체들이 C++의 COM(구성 요소 객체 모델 Component Object Model)로 구현되었다. COM 객체는 가비지 컬렉션에 참조카운팅 방식을 사용. 때문에 반드시 이를 해결해야 한다.

var element = document.getElementById("some_element"); var myObject = new Object (); myObject.element = element; element.someObject = myObject; // 참조 카운팅의 순환오류 발생   // 전부 사용한 이 후 myObject.element = null; element.someObject = null; // 변수에 null을 할당하면 순환오류를 해결할 수 있다.

• 이를 Dereference(참조제거)라고 한다.  Dereference는 메모리 관리에도 쓰이는 데 전역 변수 및 전역 객체의 프로퍼티에 null을 할당하면 성능이 올라간다.
• null을 할당하는 순간 메모리가 회수 되는 것은 아니다. 다음 가비지 컬렉션 사이클 때 메모리가 회수된다.
• 익스플로어 9버전은 BOM과 DOM객체가 Native JavaScript 객체임.

 

5장 참조 타입

5.1 Object 타입

• 객체 리터럴 표기법 (Json 표기법)

var person = {}; // new Object();와 동일

var person = {  name: "Nicholas",  age: 29,  7: None }

alert(person["name"]; // "Nicholas" alert(person.name); // "Nicholas"

person["first name"] = "Nicholas" // 프로퍼티 이름에 공백이 있기에 .(점) 방식으로는 접근 불가.

 

5.2 Array 타입

var colors = new Array(3); var colors = Array(3); // new 생략가능 var colors = ["red", "blue", "green"] // 배열 리터럴 표기

• .length 프로퍼티는 읽기 전용이 아니다. 배열 길이가 바뀌면서 데이터를 제거하나거 빈 슬롯을 추가

colors.length = 2; alert(colors[2]); // undefined

• 배열의 최대 길이 4,294,967,295. 이 길이를 넘기면 에러발생.

if (value instanceof Array) {  // 배일일 때 실행하는 코드 }

if (Array.isArray(value) {  // 배일일 때 실행하는 코드  // IE9 이상 지원 문법 }

• 자바스크립트의 배열은 스택과 큐메소드 사용가능
• 스택: Last In First Out 방식  큐: First In First Out 방식.

.pop() 마지막 데이터 반환 .push() 마지막에 데이터 추가 .shift() 맨 앞 데이터 반환 .unshift() 맨 앞 데이터 추가.

• reverse() 배열 순서 변경 sort() 문자열 기준 오름차순 정렬. (1, 10, 2, 3, 4) 비교함수가 필요

function compare(value1, value2) {  if (value1 < value2) {    return -1;  } else if (value1 > value2){    return 1;  } else {   return 0;  } }

var values = [ 0, 5, 1, 10, 15 ]; values.sort(compare); alert(values); // 0, 1, 5, 10, 15

• splice 메소드

colors.splice(0,2, "red", "green")  // 처음 2개 삭제 colors.splice(2,0, "red", "green")  // 인덱스2부터 red와 green을 삽입 colors.splice(2,1, "red", "green")  // 인덱스2부터 1개의 데이터를 삭제후 그 자리에 red와 green을 삽입 splice는 삭제한 배열을 반환

• 반복메소드 every(), filter(), forEach(), map(), some()
• 콜백함수?

 

5.3 Date 타입

• 기본적인 사용법은 java와 동일, 세부 내용은 158p 참조

 

5.4 RegExp 타입

• 정규표현식의 지원. 입력된 값의 유효성을 체크한다. (ex. 비밀번호 자릿수, 대소문자, 특수문자 등)

var regExpName = /정규표현식/[Flag]

Flag - g 전역, i 대소문자 구분없음, m 행이 바뀌어도 찾음

// bat이나 cat중 처음 나온 것에 일치, 대소문자 구분 없음 var pattern1 = /[bc]at/i; // pattern1과 동일 var pattern2 = new RegExp("[bc]at", "i");

• 리터럴 패턴? 문자열?

 

5.5 Function 타입

• 자바스크립트에서는 함수도 객체다.
• 함수 지정이 호출보다 아래줄에 있어도 호출된다. (실행 컨텍스트에 우선순위 부여)
• 변수라고 해서 new 함수 표현식 하지 말 것. 함수 선언할 것. 에러 나는 경우 있다.
• 함수를 파라미터로 받아서 다른 함수를 리턴할 수 있다.
• 재귀 함수 쓸 때, .callee 사용하면 함수 이름에 의존하는 약점을 극복할 수 있다.
• call()과 apply()로 this를 바꿀 수 있다.

 

5.6 원시 래퍼 타입

5.7 내장된 싱글톤 객체

• Global (ex. encodeURI(), 6decodeURIComponent(), eval() )
• Math는 싱글톤 객체.

5.8 요약

 

10장 DOM

 기본적으로 웹문서는 HTML과 XML과 같은 마크업 언어로 작성된 문서로 익스플로러나 Firefox 같은 웹 브라우저는 이렇게 HTML이나 XML 같은 마크업 언어로 작성된 문서들을 여러분이 쉽게 이해할 수 있도록 바꾸는 작업을 수행합니다. 그래서 여러분들을 이러한 브라우저를 통해 문자열에서부터 그림, 테이블 등을 볼 수 있게 되는 것입니다.

 그리고 이러한 해석 과정에서 HTML 페이지를 하나의 트리(Tree) 형태의 모델로 저장하는데 이를 DOM(Document Object Model)이라고 합니다.

 DOM은 HTML 문서를 하나의 트리(Tree) 형태로 나타낼 수 있는데 트리는 노드(node)들로 구성됩니다. 여기서 노드(node)란 DOM 트리에 존재하는 요소(Element), 속성(Attribute), 텍스트(Text), HTML 문서 전체를 나타내는 Document 등을 노드라고 합니다.

 

10.1 노드의 계층 구조

• DOM은 HTML과 XML문서에 대한 API. 플랫폼과 언어에 독립적인 페이지 표현 및 조작 방법.
• p376 그림 10-1,

10.2 DOM 다루기

• DOM조작은 자바스크립트에서 가장 느린 작업. 특히나 NodeList 객체는 '살아있는' 것으로 간주해서 접근할 때 마다 다시 쿼리한다. 최소화 하는 편이 좋다.

10.3 요약

 

11장 DOM 확장

11.1 선택자 API

11.2 요소 간 이동

11.3 HTML5

11.4 전용 확장

11.5 요약