44. JavaScript - object

1. 자바스크립트의 객체

1. 객체

1. 자바스크립트에서 객체는 웹 화면과 관련된 모든 대상을 가리키는 것을 의미한다.
2. 자바스크립트 객체의 종류
   • DOM(문서 객체 모델: Doucumnt Object Model) : 웹 문서면 자체도 객체지만 웹 문서 안의 태그들도 객체로 받아서 사용할 수 있다.
   • BOM(브라우저 객체 모델: Browser Object Model) : 브라우저에서 사용하는 정보를 받아오는 객체 모델. navigator, history, location, screen 등이 존재합니다.
   • 내장객체 : String, Array, Date, Math 등 자바스크립트 내부에 구현되어 있는 객체.
   • 사용자정의 객체 : 사용자에 필요에 따라서 직접 구현한 객체

2. 내장객체

1. Date: 날짜와 시간정보를 나타내주는 객체. 객체의 인스턴스화 new Date();
   • 현재 날짜와 시간 : new Date();
   • 특정 날짜 : new Date('2023-05-18');
   • 특정 날짜와 시간 : new Date('2023-05-23T09:47:25');
2. Date의 메소드
   • getFullYear() : 연도를 4자리로 리턴
   • getMonth() : 월을 0-11까지 값으로 리턴. 1월이 0, 12월이 11로 리턴.
   • getDate() : 1~31일 까지의 날짜를 리턴.
   • getDay() : 0~6까지 숫자로 요일을 표시. 0이 일요일, 6이 토요일
   • getTime() : 1970년 1월 1일 자정이후부터 흐른 시간을 밀리초 단위로 리턴.
   • getHours() : 0~23까지의 시간을 리턴.
   • getMinutes() : 0~59까지의 분을 리턴.
   • getSeconds()/getMilliseconds() : 059초/0999밀리초 리턴.
   • setFullYear() : 연도를 4자리로 설정.
   • setMonth() : 월을 0~11까지 숫자로 설정.
   • setDate() : 1~31까지 날짜 설정.
   • setTime() : 1970년 1월 1일 자정이후부터 흐른 시간을 밀리초 단위로 설정.
   • setHours()/setMinutes()/setSeconds()/setMilliSeconds(): 시분초 설정/밀리초 설정
   • toString() : Date 객체 타입을 문자열로 변경.

3. Math 객체

1. Math의 속성
   • PI : 상수로 3.141952... 값을 가지고 있는 원주율
   • SQRT2 : 루트 2 값을 가지고 있다. 1.41.....
2. Math의 메소드
   • abs() : 절대값 반환.
   • ceil() : 소수점 이하 올림
   • floor() : 소수점 이하 버림
   • round() : 소수점 이하 반올림
   • max() : 매개변수 중 최대값 반환
   • min() : 매개변수 중 최소값 반환
   • pow() : 매개변수의 지수값 반환
   • random() : 0~1사이의 무작위 수를 반환
   • sqrt() : 매개변수의 제곱근을 반환

4. String 객체

1. 문자열 객체. 자바스크립트에서 가장 많이 사용.
2. let str = "문자열"; let str = new String("문자열");
3. String 객체의 메소드
   • charAt(idx) : idx에 있는 문자 반환
   • indexOf(문자열) : 문자열 왼쪽부터 검사를 진행해서 문자열이 발견된 첫 번째 index반환
   • indexOf(문자열, idx) : idx 이후에서 문자열이 발견된 첫 번째 index 반환
   • lastIndexOf(문자열) : 문자열 오른쪽부터 검사를 진행해서 파라미터로 온 문자열이 발견된 최초 index를 반환
   • substr(idx, count) : idx부터 count개만큼 문자열 잘라서 반환
   • substring(idx1, idx2) : idx1 ~ idx2까지의 문자열 잘라서 반환. idx2는 포함되지 않음
   • replace(문자열1, 문자열2) : 최초로 발견된 문자열1을 문자열2로 치환하여 반환
   • replaceAll(문자열1, 문자열2) : 포함된 모든 문자열1을 문자열2로 치환하여 반환
   • split(문자열) : 파라미터로 받아온 문자열 기준으로 문자열을 잘라서 배열에 담아 반환

5. BOM(Browser Object Model)

1. window라는 객체가 최상위 객체. 브라우저가 켜지면서 제일 먼저 생성되는 객체. 각 창이나 탭마다 하나씩 생성된다.
2. window 객체가 포함하는 하위 객체로는 document, navigator, history, location, screen이 있다.
   • document: 웹 문서마다 하나씩 존재 body태그를 만나면 생성. HTML 문서의 정보가 들어있다. 문서에 포함된 태그들을 조작할 수 있다.
   • navigator: 현재 사용중인 브라우저의 정보를 담고 있는 객체
   • history: 현재 창의 사용자 접속 기록 정보를 담고 있는 객체
   • location: 현재 창의 url 정보를 담고 있으면 조작할 수 있는 객체
   • screen: 현재 사용중인 화면 정보를 담고 있는 객체
3. 원래는 window.document, window.alert() .. window 내부에 있는 속성이나 메소드를 사용해야 하는 데 window. 생략할 수 있도록 자바스크립트 내부에 구현되어 있다.
4. window 객체의 속성
   • innerHeight: 내용의 높이를 저장
   • innerWidth: 내용의 가로길이를 저장
   • localStorage: 웹 브라우저에서 데이터들을 저장하는 로컬스토리지를 반환
   • sessionStorage: 웹 브라우저에서 데이터들을 저장하는 세션스토리지를 반환
   • name: 브라우저 창의 이름.
   • scrollX: 스크롤 했을 때 수평으로 이동하는 픽셀수
   • scrollY: 스크롤 했을 때 수직으로 이동하는 픽셀수
   • screenX: 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어진 가로 거리
   • screenY: 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어진 세로 거리
5. window 객채의 메소드
   • alert(): 알림창 표출
   • blur(): 현재 창의 모든 포커스 제거
   • close(): 현재 창을 닫음
   • confirm(): 확인창 표출
   • focus(): 현재 창에 포커스 부여
   • moveTo(): 현재창을 지정한 좌표로 이동
   • open(): 팝업창 열기
   • prompt(): 사용자 입력창 표출
   • scroll(): 특정 위치로 스크롤
   • setInterval(): 지정한 시간 간격으로 동일한 동작을 반복
   • let interval = setInterval(() => { 반복될 동작 }, 시간(밀리초단위로 지정)); let interval = setInterval(function() { 반복될 동작 }, 시간(밀리초단위로 지정));
   • clearInterval(인터벌 변수명): 지정된 인터벌을 삭제한다.
   • setTimeout: 지정한 시간 이후에 한 번 실행하는 메소드
   • let timeout = setTimeout(() => { 한 번 실행될 내용 }, 시간(밀리초단위)); let timeout = setTimeout(function() { 한 번 실행될 내용 }, 시간(밀리초단위));
   • setTimeout을 재귀함수로 계속 호출하면 setInterval과 동일하게 동작한다.

6. DOM(Document Object Model)

1. DOM은 HTML 웹 문서에 선언된 태그들을 직접 선택하여 조작이 가능한 객체 모델.
2. DOM에서 태그를 선택하는 방식
   • document.getEelementById(태그의 아이디 값): 태그에 지정된 아이디로 태그를 선택해서 객체로 가져옴. 아이디는 한 웹 문서안에서 유일해야하므로 태그가 하나씩 선택된다.
   • document.getElementsByClassName(태그의 클래스 값): 태그에 지정된 클래스로 태그를 선택해서 객체로 가져옴. 클래스는 중복가능해서 여러개 태그를 배열로 반환.
   • document.getElementsByTagName(태그명): 태그 이름으로 태그를 선택해서 객체로 가져옴.
   • document.querySelector(css선택자): css선택자에 해당하는 태그를 선택해서 객체로 가져옴. css선택자에는 #아이디, .클래스 등 css에서 사용했던 선택자를 넣어주면 된다.
3. DOM의 속성값 변경
   • 스타일 변경: 태그선택.style.속성 = 속성값;
   • 태그의 속성의 값 확인: 태그선택.속성명;
   • 태그의 속성의 값 변경: 태그선택.속성명 = 새로운 속성 값;
   • 태그의 속성의 값 확인하는 메소드: 태그선택.getAttribute(속성명);
   • 태그의 속성의 값 변경하는 메소드: 태그선택.setAttribute(속성명, 새로운 속성값);
   • 태그의 모든 하위태그 확인: 태그선택.innerHTML;
   • 태그의 모든 하위태그를 삭제하고 새로운 태그를 추가: 태그선택.innerHTML = 새로운 태그 문자열;
   • 태그의 모든 하위 텍스트 확인: 태그선택.innerText;
   • 태그의 모든 하위 태그 삭제하고 새로운 텍스트를 추가: 태그선택.innerText = 새로운 텍스트;
   • 태그의 이벤트 등록: 태그선택.addEventListner(등록될이벤트(클릭, 더블클릭, ...), 콜백함수(이벤트가 발생했을 때 동작할 실행문))
   • 태그의 이벤트 삭제: 태그선택.removeEventListner(등록된 이벤트);
   • 간단하게 이벤트 등록: 태그선택.이벤트 = function() {
   • };

7. 사용자 정의 객체

1. ES5 버전까지는 class라는 개념이 없었다. class를 정의하지 않고 객체를 직접 만들거나 생성자 함수를 통해서만 객체를 생성하여 사용할 수 있었다.
2. 객체 생성 방식
3. const 객체변수명 = new Object(); const 객체변수명 = { 속성, 기능 };
4. 객체 사용
5. console.log(객체변수명.속성키); 객체변수명.속성키 = 값; 객체변수명.함수명(파라미터);
6. 사용자 정의 함수를 통한 생성자 함수
   • 객체를 별도로 선언하지 않고도 생성자 함수만 정의하여 객체를 생성하는 방식

   • function 객체명(파라미터) {
        파라미터들로 속성들 초기화
     }
     
     const 객체변수명 = new 객체명(초기화값);

7. 자바스크립트의 객체는 키와 값으로 매핑되어 있다. 키값은 문자열로 지정해야되는데 ", ' 묶지 않아도 문자열로 지정된다.