7.1 브라우저 객체에서 알아두어야할 기본 기능

• 브라우저 객체의 계층 구조
• confirm 메소드
  확인 대화상자를 표시하는 메소드. alert 와의 차이는 단지 메시지만을 표시하지 않고 확인 의사까지 요구한다.
• setInteral/setTimeout 메소드
  일정 시간마다 혹은 일정 시간이 경과하 ㄴ후에 어떠한 처리를 실시하고 싶은 경우, 이용하는 기능이다. ex) 50초마다 시간 표시 갱신등

  ```	document.addEventListener('DOMContententLoaded',function(){
  var timer=window.setTinterval((
  	function(){
      		var dat=newDate();
              document.GetElementById('result').textContent=dat.toLocaleTimeString();
     }.50);// 이경우 50 초 후의 interval로 실행       
  ```

• location 객체
  버튼을 클릭함으로써 별도의 페이지로 이동하거나 현재의 페이지를 리로드하고 싶은 상황이 발생한다. 이 때 이용하는 것이 location 객체다.
• history 객체
  이력에 따라서 브라우저의 페이지를 전후로 가고 싶은 경우, 페이지 이력을 관리하고 싶은 경우, history 객체를 이용한다.
• pushState 메소드
• navigator 객체

7.2 디버그 정보 출력하기 -Console 객체

• console에 log 출력하기
• 특정 코드가 몇 번 실행 되었는지 카운트 하기
  console.count(label)
  label : 레이블 문자열
• 조건식이 false 인 경우에만 로그 출력하기: assert 메소드를 이용
• 객체를 보기 쉬운 형식으로 출력하기 : dir 메소드
  console.dir(window); 와 같은 형식으로 호출하며, 객체를 트리 형태로 출력하기 때문에 편리하다.

7.3 사용자 데이터 저장하기-Storage 객체

• Web Storage 를 이용하여 정보를 보관/ 취득할 수 있다.
  스토리지라는 것은 브라우저에 내장된 데이터 저장소이다.
  key 와 value 값이 쌍으로 저장되어있다.
  쿠키는 js를 조작하기도 어렵고 크기도 작게 제한이 되어있다. 따라서 웹 스토리지를 많이 이용한다.

  ```
  var storage =localStorage; 
  storage.setItem('fruit','apple');
  storage.fruit2='tangereen';
  storage['fruit3']='grape';
  storage.removeItem('fruit');
  
  delete storage.fruit1;
  storage.clear();
  ```

• 크롬에서는 [application] 탭의 [local storage]에서 이를 확인 할 수 잇을 것이다.

7.4 서버 연계로 고급 UI 구현하기- Ajax

• Ajax 란 서버 측과 비동기 통신을 실시한 후 응답 받은 결과를 DOM 경유로 페이지에 반영하는 구조이다. 하여 이는 다음과 같은 절차를 갖는다.
  1. 페이지 상에서 이벤트 발생
  2. JAVAsCRIPT+XMLHttpRrequest로 서버에 대해 Request를 송신
  3. 처리 결과를 XML 이나 JSON등의 형식으로 Response
  4. 수신한 Response를 받아 DOM으로 페이지를 갱신
     이는 동기화 통신의 방식과는 다르게 서버가 처리 중인 상황에서도 클라이언트 측 조작이 가능하다는 장점을 가진다.

7.5 비동기 처리 간단하게 표현하기

7.6 백그라운드로 JavaScript의 코드 실행하기 - Web Worker