HTML5 Intermediate 2일

audio 태그 예제

* addEventListener의 마지막 인수 : event bubbling, event capturing 여부 지정.

- bubbling 시 자식이 이벤트를 처리해도 부모에게 전파됨.

* 객체의 속성 존재 여부 판단: if( navigator.geolocation ) --> if( 'geolocation' in navigator )

* JavaScript에서

- 100 OR 200 ==> 100 - 처리과정: 100 --> OR --> 끝 ==>100

- 100 AND 200 ==> 200 - 처리과정: 100 --> AND --> 200 --> 끝 ==> 200

* Client Storage

1. Web Storage: Key-Value 형태. 복잡한 데이터를 담기에는 역부족.

2. Web SQL: 크롬과 사파리에 구현되어 있으며 sqllite3로 구현. 특정 제품에 종속된다는 이유로 HTML5 표준 스펙에서 빠짐. 모질라 계열(파이어 폭스)에서 반대함.

3. Indexed DB: Web SQL이 스펙에서 빠지면서 포함됨. 객체 저장소 제공. 저장된 객체에 인덱스를 부여하여 빨리 찾을 수 있도록 함.

* Web Storage:

- localStorage: 도메인 별로 값을 영구 저장하는 저장소. 변경 이벤트 제공 --> 동기화 작업 가능. 같은 도메인의 여러 어플리케이션에서 공유할 수 있음.

- sessionStorage: 임시 저장소. 한 어플리케이션에서 사용하는 임시 데이터. 다른 어플리케이션에서 이 값을 읽을 수 없음. Browser를 닫았을 때 값이 없어지며, 같은 Browser 인스턴스에서 F5로 갱신하거나 다른 곳에 다녀와도 지워지지 않음.

- 둘 다 window 객체의 속성으로 제공됨.

- 둘을 사용하기 위한 API는 동일함.

- 기본적인 API

-- storage.setItem(key, value) : 데이터 저장. key는 문자열, value도 문자열.

-- storage.getItem(key) : 데이터 반환

-- removeItem(key) : 데이터 제거

-- clear() : 데이터 모두 제거. 주의해서 사용해야 함!!

* window 객체의 메소드 및 속성을 사용할 때는 'window.' 쓰지 않아도 됨.

* JavaScript 객첵 생성 방법

1. 암시적 방법

var obj = { name: '홍길동', age: 24, married: true }

2. 명시적 방법

function People() {

  this.name = '홍길동';

  this.age = 24;

  this.married = true;

}

var obj = new People();

* JSON --> Object : JSON.parse(JSON 문자열)

* Object --> JSON : JSON.stringify( object )

* JavaScript의 Type: 총 6가지임

- Primitive Type: string, number, boolean

- Reference Type: function, object(Array 포함)

- undefined

- 이 중 function, undefined는 JSON으로 표현 안됨.