[JavaScript] 객체

객체

• 객체
  • 객체란 name과 value로 구성된 프로퍼티의 정렬되지 않은 집합
• 객체 property 참조
  • 객체명.프로퍼티명
  • 객체명[”프로퍼티명”]
• 객체 메소드 참조
  • 객체명.메소드명()
  • 예시

    • var person = {
          name: "홍길동",      // 이름 프로퍼티를 정의함.
          birthday: "030219",  // 생년월일 프로퍼티를 정의함.
          pId: "1234567",      // 개인 id 프로퍼티를 정의함.
          fullId: function() { // 생년월일과 개인 id를 합쳐서 주민등록번호를 반환함.
              return this.birthday + this.pId;
          }
      };
      
      person.name;    // 홍길동
      person["name"]; // 홍길동
      
      person.fullId(); // 0302191234567
      person.fullId;  // function () { return this.birthday + this.pId; }

• 객체의 생성 방법 3가지
  • 리터럴 표기

    • var 객체이름 = {
          프로퍼티1이름: 프로퍼티1의값,
          프로퍼티2이름: 프로퍼티2의값,
          ...
      };
      
      //예시
      var kitty = {
          name: "나비",
          family: "코리안 숏 헤어",
          age: 1,
          weight: 0.1
      };

  • 생성자 함수 (new 연산자 사용)
    • JS 제공 생성자나 사용자가 작성하여 사용 가능
    • 예시
      • var day = new Date();
      • document.write("올해는 " + day.getFullYear() + "년입니다.");
  • Object.create()

    • Object.create(프로토타입객체[, 새로운객체의프로퍼티1, 새로운객체의프로퍼티2, ...]);
      
      //예시
      var obj = Object.create(null, {             // null 프로토타입을 사용하여 새로운 객체를 만들고
          x: { value: 100, enumerable: true },    // x좌표를 나타내는 열거할 수 있는 프로퍼티와
          y: { value: 200, enumerable: true }     // y좌표를 나타내는 열거할 수 있는 프로퍼티를 추가함.
      });
      
      obj.x; // x좌표
      obj.y; // y좌표 
      Object.getPrototypeOf(obj); // 객체의 프로토타입을 반환해 줌.

      
      
      
• this 키워드
• 객체 프로퍼티 삭제
  • delete 객체명.프로퍼티명;
  • 프로퍼티 삭제시 값 뿐만 아니라 프로퍼티 그 자체가 삭제
• 객체 프로퍼티 순회
  • for - in 문 사용
    • for (var 변수명 in 객체) { … }
    • Object.keys(객체명) 메소드 사용
      • 열거할 수 있는 프로퍼티 이름 배열에 담아 반환
      • 예시
        • Object.defineProperty(myDog, 'color', {enumerable : false} );
        • document.write(Object.keys(myDog) + "<br>"); // name, age
    • Object.getOwnPropertyNames(객체명) 메소드 사용
      • 모든 프로퍼티 이름 배열에 담아 반환
• Math 객체
  • Math 메소드 종류
    • Math.min, max()
    • Math.random()
    • Math.round()
    • Math.floor()
      • 전달받은 값과 같거나 작은 수 중에서 가장 큰 정수 반환(소수점→ 정수 변환시 사용, 내림)
    • Math.ceil()
      • 전달받은 값과 같거나 큰 수중에서 가장 작은 정수 반환(소수점→ 정수 변환시 사용, 올림)
    • Math.sin() - 사인 함수값 반환
• Date 객체
  • Date 객체 초기화
    • new Date()
    • new Date(”날짜 문자열”)
    • new Date(밀리초)
      • ex) new Date(80000000); // 1970년 1월 1일 0시부터 해당 밀리초만큼 지난 날짜
    • new Date(년, 월, 일, 시, 분, 초, 밀리초)
      • 년, 월, 일 만 인자로 전달도 가능
  • Date 메소드
    • Date.now()
    • var 변수명 = new Date();
      • 변수명.getFullYear()
      • getDate(), getDay(), getTime()
• String 객체
  • 문자열 길이
    • 문자열.length;
  • String 메소드
    • 위치 찾기
      • indexOf(’찾는문자’)
      • lastIndexOf(’찾는문자’)
    • 지정된 위치의 문자 반환
      • charAt(인덱스)
    • 문자열 추출
      • slice(시작인덱스, 끝인덱스)
      • substring(시작인덱스, 끝인덱스)
      • substr(시작인덱스, 끝인덱스)
    • 문자열 분리, 배열로 반환
      • split(구분자)
      • split(””) - 한문자씩 나눔
    • 문자열 결합
      • concat(문자열1, 문자열2,…)
    • 대소문자 변환
      • toUpperCase()
      • toLowerCase()
    • 공백 제거
      • trim()
• Array 객체
  • Array 메소드
    • Array.isArray()
    • Array.from(객체들) - 배열처럼 변환
    • Array.of(n) - n개의 배열 요소를 가지는 배열 생성
  • 원본 배열 변경 메소드
    • push(값) - 마지막 요소 추가
      • push(인덱스, 값) - 인덱스 위치 요소 추가
    • pop() - 마지막 요소 제거 후 반환
    • shift() - 첫 요소 제거 후 반환
    • unshift(값) - 가장 앞에 요소 추가
    • reverse() - 순서 반대로
    • sort()
    • splice(새로운요소삽입할시작인덱스, 제거할요소의개수, 넣을값들) - 기존 요소 제거 후 새로운 요소 추가
  • 참조 메소드 (원본 변경 X)
    • join() - 배열의 모든 요소를 하나의 문자열로 반환
    • slice(시작인덱스, 끝인덱스) - 추출하여 새로운 배열 반환
      • slice(시작인덱스) - 시작부터 끝까지 반환
    • concat(배열) - 배열들 합쳐서 새로운 배열 반환
    • toString() - 배열의 모든 요소 하나의 문자열로 반환
  • 원본 배열 반복적 참조 메소드
    • 배열명.forEach(함수명) - 각 배열요소마다 함수 호출
    • .map(함수명) - 각 배열요소마다 반복적으로 명시된 콜백함수 실행 후 새로운 배열에 담아 반환
    • .filter(함수명) - 각 배열요소마다 함수 실행후 결과값이 true인 요소들만 새로운 배열에 담아 반환
    • .every(함수명) - 각 배열요소마다 함수 실행후 모든 결과값이 true일 때 true 반환
    • .some(함수명) - 각 배열요소마다 함수 실행후 결과값 하나라도 true면 true 반환
    • .reduce(함수명) - 두개의 인수를 전달받고 실행 → 반환된 결과값과 세번째 요소를 전달받고 실행 → 반복 …
    • .reduceRight(함수명) - reduce의 반대, 마지막 요소부터
• Document 객체
  • Document 객체
    • Document 객체는 웹페이지 그 자체를 의미
    • 웹페이지의 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 함
  • Document 메소드
    • HTML 요소의 선택
      • document.getElementsByTagName(태그이름)
        • 해당 태그이름의 요소 모두 선택
      • .getElementById(아이디)
        • 해당 아이디의 요소를 선택
      • .getElementsByClassName(클래스이름)
        • 해당 클래스에 속한 요소 모두 선택
      • .getElementsByName(name속성값)
        • 해당 name 속성값을 가지는 요소 모두 선택
      • .querySelectorAll(선택자)
        • 해당 선택자로 선택되는 요소 모두 선택
    • HTML 요소의 생성
      • document.createElement(HTML요소)
        • 해당 HTML 요소 생성
      • .write(텍스트)
        • HTML 출력 스트림을 통해 텍스트 출력
    • HTML 이벤트 핸들러 추가
      • document.getElementById(아이디).onclick = function(){ 실행할코드 }
        • 마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드를 추가
    • HTML 객체의 선택
      • document.anchors
        • name 속성을 가지는 <a> 요소 모두 반환
      • .body
        • <body> 요소 반환
      • .cookie
        • HTML 문서의 쿠키 반환
      • .domain
        • HTML 문서가 위치한 서버의 도메인 네임 반환
      • .forms
        • <form> 요소 모두 반환
      • .images
        • <img> 요소 모두 반환
      • .links
        • href 속성을 가지는 <area> 요소와 <a> 요소 모두 반환
      • 등등..
• DOM 요소의 선택
  • 특정 HTML 요소 선택 방법
    • HTML 태그 이름을 이용한 선택
      • var 변수명 = document.getElementsByTagName(”태그이름”);
      • 해당 태그의 모든 요소 선택됨
      • 변수명.style.color = “red” 같이 변경 가능
    • 아이디를 이용한 선택
      • var 변수명 = document.getElementById(”아이디명”)
      • 해당 아이디명 요소 선택됨
    • 클래스를 이용한 선택
      • var 변수명 = document.getElementsByClassName(”클래스명”)
      • 해당 클래스명인 요소 선택
    • name 속성을 이용한 선택
      • var 변수명 = document.getElementsByName(”name속성값”)
      • 해당 name 속성값인 요소 선택
    • CSS 선택자를 이용한 선택
      • var 변수명 = document.querySelectorAll(”태그명.클래스명”)
      • 해당 클래스명 요소에서 해당 태그 요소만을 선택
    • HTML 객체 집합을 이용한 선택
      • var 변수명 = document.객체명;
      • 예시
        • var title = document.title; //<titile> 요소 선택
        • document.write(title);
  • DOM 요소의 내용 변경
    • innerHTML 프로퍼티 이용
      • 예시
        • var str = document.getElementById(”text”);
        • str.innerHTML = “내용변경”;
    • 속성값 변경
      • 예시
        • var link = document.getElementById(”link”)
        • link.href = “/js/intro”;
        • link.innerHTML = “내용변경”;
  • DOM 요소의 스타일 변경
    • style 프로퍼티 이용
      • 예시
        • var str = document.getElementById(”text”);
        • function changeRedColor() { str.style.color = “red”;}