js 3일차 - 2일차 정리

###########################################################################
###########################################################################
6장. 객체 (object) - **********************
###########################################################################

1. 종류 3가지
  ==> 자바처럼 상속과 비슷한 개념(프로토타입(prototype) 관계)으로 계층구조화 되어 있음.
      최상위 객체는 Object 이다.
  ==> 객체의 구성요소는 변수,메서드(정적메서드, 인스턴스 메서드),생성자를 가짐.
  1> 데이터(기본+참조) 관련 객체
      -문자관련 ==> String 객체가 관리
      -수치    ==> Number 객체가 관리
      -날짜    ==> Date 객체가 관리
      -배열    ==> Array 객체가 관리 (***************)
                 Set/Map 같은 컬렉션 제공됨(ES6)
      -JSON   ==> object 객체가 관리
  2> BOM ( Browser Object Model)
    - 웹 브라우저 관련 객체 
    - 종류
      Window 객체
      Screen 객체
      Histroy 객체
      Location 객체
      Navigator 객체
  3> DOM ( Document Object Model )
   - html 문서 관련 객체
   - Document 객체 ( 자동으로 생성됨. document 변수로 참조 )


2. 데이터 관련 객체

 1> 문자데이터 관련 객체

   - String 객체 관리
   - 생성방법 3가지

     가. 리터럴값만 이용 (권장)
        let s = "hello";

     나. new 생성자 이용       
        let s2 = new String("hello");

     다.  생성자 이용    
       let s3 = String("hello");
     
    - 문자열 표현방법 3가지
      가. 'hello' 이용
      나. "hello" 이용
      다. `hello` 이용( 백틱, template literal ) (*****************************)

        * 백틱장점 2가지
1> 변수삽입 가능: ${변수}이용
2> 들여쓰기, 엔터 같은 동작이 그대로 적용되어 출력포맷의 가독성이 높아진다.


    - 메서드 조회
     http://developer.mozilla.com


2> 수치 데이터 관련 객체

   - 정수와 실수를 모두 관리한다.
   - Number 객체가 관리한다.

    - 생성방법 3가지

    가. 리터럴값만 이용 (권장)
        let n = 100;

     나. new 생성자 이용       
        let n2 = new Number(100);

     다.  생성자 이용    
       let n3 = Number(100);

    
    - Number객체 메서드 정리


3> 날짜 데이터 관련 객체

   - Date 객체가 관리.
   - 생성방법 2가지

      let d = new Date();

      let d2 = Date();


4> 배열 데이터 관련 객체

  - Array 객체가 관리
  - 특징: 자바의 List 처럼 동작됨.

  - 생성방법 
     
    var n = [10,20,30];
    var n = [];

    var n = new Array();
    var n = new Array(10,20,30);

    var n = Array();
    var n = Array(10,20,30);


3. spread 연산자 ( 전개구문 )(************************)

   기능: 배열|JSON 요소를 펼치는 기능으로서
        기존 배열을 펼쳐서 새로운 배열을 만들 때 사용함.

   문법: [...배열]

   예>

    // spread 연산자 (전개 구문)
    
     var n = [10,20,30];
     var x = n;  // 얕은 복사(주소값  복사, x 변경하면 n도 영향 받음)

     //1. 배열 복사 
     var n2 = [...n];   // 깊은 복사 ( 실제값 복사, n2 변경해도 n은 영향 없음 )
     console.log(n2);
    

     //2. 기존 배열에 새로운 값을 추가
     var n = [10,20,30];
     var n2 = [...n, 40, 50]
     var n2 = [40, 50, ...n]
     console.log(n2);
    
     //3. 배열 연결
     var n = [10,20,30];
     var n2 = [100,200,300];
    
     var n3 = [...n, ...n2];
     console.log(n3);
    

     // 4. 문자열 전개
     var x = [...'hello'];
     console.log(x);  // ['h', 'e', 'l', 'l', 'o']


4. BOM ( Browser Object Model)
    - 웹 브라우저 관련 객체 
    - 종류
      Window 객체 : 전역객체( window 변수를 생략하고 사용이 가능하다.(***) )
                   웹브라우저 창 자체를 의미.
      Screen 객체 : 창의 크기 정보 ( width/height )
      History 객체 : 웹 페이지의 뒤로/앞으로 기능
      Location 객체 : 웹 브라우저의 URL 정보
      Navigator 객체 : 웹 브라우저 자체 정보
    
    - 특징: 웹 브라우저를 open하면 자동으로 객체생성이 된다.
           개발자는 명시적 생성없이 참조해서 사용할 수 있음.
   어떤 변수명으로 되어 있을까?

    Window 객체 참조:  window 변수를 사용한다.
    Screen 객체 참조:  screen 변수를 사용한다.
    History 객체 참조:  history 변수를 사용한다.
    Location 객체 참조:  location 변수를 사용한다.
    Navigator 객체 참조:  navigator 변수를 사용한다.



5. Window 객체

  - 전역객체
  - window 변수로 참조 가능.
    하지만 일반적으로 생략해서 사용.
  
  - screen, location, history. navigator, document 은
    Window 객체의 속성이다.
    원래는 window.screen
         window.location
 window.history
 window.navigator
 window.document  사용하는것이 원칙이지만 일반적으로 window 는 생략하고 사용된다.


  - window.opener : 자식창에서 부모창 참조할 때 사용.
  - 부모에서 새로운 창(자식창)을 만드는 방법

     var childWin = open("child.html");  // window.open("child.html"); 동일
 
    현재 창 닫기
      window.close();

    부모창 닫기
      opener.close();

    자식창 닫기
      childWin.close();