10.1 모듈과 네임스페이스 생성
10.2 네임스페이스에서 심벌 가져오기
10.3 모듈 유틸리티

JSON은 자바스트립트의 엄격한 부분집합이며 자바스크립트의 여러 가지 패턴을 사용해 구조화된 데이터를 표현한다. XML대신 JSON을 권하는 이유는 eval()에 직접 넘길 수 있고 DOM을 따로 생성할 필요가 없기 때문이다.  JSON이 자바스크립트와 문법을 공유하긴 하지만 가장 중요한 점은 JSON이 프로그래밍 언어가 아니라 데이터 형식임을 이해하는 것이다. 많은 프로그래밍 언어에서 JSON 파싱과 직렬화를 지원한다.

20.1 문법

JSON 문법은 세가지 타입을 사용한다.JSON은 구조회된 데이터를 표현하는 방식일 뿐이며 자바스크립트의 문법과 매우 비슷하다.

20.1.1 단순한 값

자바스크립트 문자열과 JSON 문자열의 차이는 JSON 문자열은 반드시 큰 따옴표로 감싸야만 유효하다는 점이다. 불리언 값과 null은 그 자체로 유효한 JSON이나 현실적으로 JSON은 복잡한 구조를 표현하기 위해 사용한다. 

20.1.2 객체

JSON 객체는 객체 리터럴 표기법과 매우 비슷하지만 자바스크립트 예제와는 몇가지 다른 점이 있다. 첫번째, 변수 선언이 없다. 두번째, 문장을 마치는 세미콜론이 없다. 자바스크립트 문장이 아니므로 필요없다. 값은 JSON에서 허용하는 모든 타입을 쓸 수 있으며 객체 안에 객체를 써도 된다. 

{
  "name" : "Nicholas",
  "age" : 29,
  "school": {
    "name" : "Merrimark College"
  }

20.1.3 배열

JSON 배열은 자바스크립트의 배열 리터럴 표기법으로 표현하는데 변수와 세미콜론은 없다. 

20.2 파싱과 직렬화

JSON은 친근한 문법 뿐만 아니라 데이터를 파싱하면 바로 사용할 수 있는 자바스크립트 객체가 된다. 

20.2.1 JSON 객체

JSON 객체에는 stringify()와 parse() 두가지 메서드가 있는데 이들 메서드는 각각 자바스크립트 객체를 JSON 문자열로 직렬화하며 JSON을 파싱하여 네이티브 자바스크립트 값으로 바꾼다. 

JSON.stringify()는 자바스크립트 객체를 JSON 문자열로 직렬화하고, JSON 문자열을 JSON.parse()에 넘기면 적절한 자바스크립트 값이 생성된다. 자바스크립트 객체를 직렬화할 때는 모든 함수와 프로토타입 멤버가 생략되고 값이  undefined인 프로퍼티도 모두 생략한다. 

20.2.2 직렬화 옵션

JSON.stringify() 메서드는 직렬화할 객체 외에 두 가지 매개변수를 더 받을 수 있는데 이들 매개변수는 자바스크립트 객체를 직렬화할 때 적용할 옵션을 설정한다. 첫 번째 매개변수는 필터이며 배열이나 함수를 쓸 수 있다. 두 번재 매개변수는 JSON 문자열의 들여쓰기를 조절한다. JSON.stringify()가 제공하는 기능 이상이 필요할때 toJSON() 메서드를 사용할수 있는데 toJSON() 메서드는 어떤 직렬화 값도 반환하게 할 수 있으며 적절히 동작한다. toJSON() 메서드를 필터 함수와 함께 쓸 수도 있으므로 다양한 직렬화 과정이 어떤 순서로 발생하는지 이해하는 것이 중요하다. 

20.2.3 파싱 옵션

JSON.parse() 메서드 역시 각 키-값 쌍에서 호출될 콜백 함수를 추가적인 매개변수로 받는다. 

자바스크립트의 원래 목적 중 하나는 폼 처리를 브라우저에서 분담하여 서버까지 왕복하는 일을 줄이는 것이었는데 웹 폼에서 일반적인 문제에 대한 네이티브 솔루션을 제공하지 못하자 개발자들은 자바스크립트로 필드의 유효성을 검사하고 표준 폼 컨트롤의 기본 동작을 확장하기 시작했다. 

14.1 폼 기본

웹 폼은 HTML에서는 <form> 요소로, 자바스크립트에서는 HTMLFormElement 타입으로 표현된다. HTMLFormElement에서는 HTMLElement를 상속하므로 다른 HTML 요소와 같은 프로퍼티를 가진다. HTMLFormElement에는 다음 프로퍼티와 메서드가 추가된다.

<form> 요소에 대한 참조를 얻는 데 가장 많이 쓰이는 방법은 id속성을 지정한 후 getElemenetById()를 이용하는 것이다. 

 var form = document.getElementById("form1");

폼은 document.forms 컬렉션을 통해서 숫자형 인덱스와 name으로도 접근할 수 있다.

var firstForm = document.forms[0];   // 페이지의 첫 번째 폼
var myForm = document.forms["form2"];   // 이름이 "form2"인 폼

폼에는 id와 name을 모두 쓸 수 있고 두 값이 같을 필요는 없다. 

14.1.1 폼 전송

전송 버튼은 <input>요소나 <button> 요소의 type 속성을 "submit"으로 지정해서 정의하고 이미지 버튼은 <input> 요소의 type 속성을 "image"로 지정해서 정의한다. 

<input type="submit" value="Submit Form">  // 범용 전송 버튼
<button type="submit">Submit Form</button>  // 커스텀 전송 버튼
<input type="image" src="graphic.gif">  // 이미지 버튼

14.1.2 폼 리셋

리셋 버튼은 <input>이나 <button>요소의 type 속성을 "reset"으로 지정하여 생성한다.

<input type="reset" value="Reset Form"> // 범용 리셋 버튼
<button type="reset">Reset Form</buttom>  // 커스텀 리셋 버튼

14.1.3 폼 필드

폼 요소도 네이티브 DOM 메서드로 접근할 수 있는데 폼 요소는 각 폼의 프로퍼티인 elements 컬렉션에 속한다.  elements 컬렉션은 폼에 포함된 모든 폼 필드에 대한 참조의 순서 있는 목록이며 <input>, <textarea>, <button>, <selet>, <fieldset> 요소가 이 컬렉션에 속하고, 인덱스와 name 두 가지로 접근 가능하다. 

공통 폼 필드 메서드

각 폼필드에 공통인 메서드는 focus()와 blue()이다. focus() 코드는 요소의 type속성이 hidden이거나 display 또는 visibility로 숨긴 필드일 경우 에러가 발생하므로 HTML5에서는 폼 필드에 autofocus 속성을 도입하여 이를 지원하는 브라우저에서는 자바스크립트를 쓰지 않아도 자동으로 요소에 포커스를 옮긴다. focus()의 반대로 요소에서 포커스를 제거하는 메서드는 blur()이다. 

폼 필드 공통 이벤트

14.2 텍스트 박스 스크립트

HTML에는 한 줄짜리 텍스트 박스인 <input> 요소와 여러 줄 텍스트 박스인 <textarea> 요소가 있다. value 속성은 텍스트 박스의 초기 값이며 maxlength 속성은 텍스트 박스에 최대 몇 글자까지 입력할 수 있는지 나타낸다.  두 텍스트 박스는 모두 콘텐츠를 value 프로퍼티에 저장한다. 따라서 다음과 같이 value 프로퍼티의 값을 통해 텍스트 박스의 값을 읽고 쓸수 있다. 

14.3 <select> 요소 스크립트

SELECT 박스는 <select> 요소와 <option> 요소로 생성한다. 

- 선택된 옵션이 없으면 SELECT 박스의 값은 빈 문자열이다.

- 선택된 옵션이 있고 해당 옵션에 value 속성이 있다면 SELECT 박스의 값은 선택된 옵션의 value 속성이다. value 속성이 빈 문자열이어도 그대로 적용된다. 

- 선택된 옵션에 value 속성이 없으면 SELECT 박스의 값은 해당 옵션의 텍스트이다. 

- 여러 옵션이 선택되었으면 SELECT 박스의 값은 선택된 첫 번째 옵션을 따르며 이전 규칙을 적용한다. 

14.4 폼 직렬화

Ajax가 등장하면서 '폼직렬화'가 주요 과제가 되었다.  자바스크립트로 폼을 직렬화 할때는 type, name, value 프로퍼티를 함께 사용한다.

serialize() 함수는 문자열을 쿼리스트링 형식으로 반환하지만 다른 직렬화 형식으로 쉽게 바꿀수 있다.

14.5 리치 텍스트 편집

웹 애플리케이션에서 가장 흔히 필요한 기능은 웹 페이지의 리치 텍스트를 편집하는 기능('위지웍WYSIWYG')으로 기본 테크닉은 페이지에 빈 HTML 파일을 포함한 iframe 을 삽입하는 것이다. 편집하려면 반드시 designMode를 "on"으로 설정해야 하며 문서를 완전히 불러온 후에만 가능하다.