JS - [객체의 종류]

   < 객체의 종류 >

1) 내장객체 : 자바스크립트 엔진 내장되어있는 객체

2) 브라우저 객체 모델 (BOM) : 브라우저에 내장된 객체 (계층형 구조)

3) 문서 객체 모델 (DOM) : HTML 문서 구조를 표현하는 객체

 

---

1. 내장 객체

 

   < 날짜 객체 : Date >

- 날짜 정보(시간정보)를 저장하는 객체

   * var today = new Date();

     년도 : today.getFullYear()

     월 : today.getMonth() (0~11 로 반환)

     일 : today.getDate()

     시 : today.getHours()

     분 : today.getMinutes()

     초 : today.getSeconds()

 

* new Date("년/월/일") -> new Date("2022/3/8")

* new Date(년,월-1,일) -> new Date(2022/2/8)

 

* 날짜 객체 - 날짜 객체 = 남은일수 (ms 단위로 나옴)

// 1ms - 1/1000 s

// 1s - 1000ms

// 1m - 1000 * 60 ms

// 1h - 1000 * 60 * 60 ms

// 1d - 1000 * 60 * 60 * 24 ms

 

 

---

    < 배열 객체 : Array >

- 데이터를 한번에 연속된 공간에 여러 개 저장

- 배열의 요소 사용 : 참조변수[인덱스 값];

 

- 배열객체 생성

  1) var 참조변수 = new Array();

  2) var 참조변수 = new Array(값, 값, 값, ....);

  3) var 참조변수 = [값, 값, 값, ....];

 

ex)

  var arr1 = new Array();

  arr1[0] = 100;

  arr1[1] = 200;

  arr1[2] = 300;

  arr1[3] = 400;

  arr1[4] = 500;

*  반복문에 사용

  for (var i in arr1)

  for (var i=0; i < arr1.length ; i++)

 

 

 

- var foods = [ 'apple', 'banana', 'lemon', 'orange' ];

- var numbers = [ 3, 6, 7, 5, 8, 9, 2, 1 ];

 

document.write(foods.join(",")); => apple,banana,lemon,orange

document.write(foods.join(numbers)); => apple36758921banana36758921 ...

 

 

 

- 배열 오름차순 정렬 : numbers.sort();

- 배열 순서 뒤집기 : numbers.reverse();

  ㄴ 배열 자체 순서를 바꿈!!!

 

 

 

---

   < 문자객체 - 동작(스타일) >

- var msg = "itwill";

  msg.bold()

  msg.italics()

  msg.fontsize(15)

  msg.fontcolor('blue')

 

* 위 동작을 한번에 처리 -> 체이닝 기법

  ex) msg.bold().italics().fontsize(15).fontcolor('red')

 

 

---

   < 문자객체 - 동작(데이터) >

- msg.toUpperCase() : 대문자로 변경

- msg.toLowerCase() : 소문자로 변경

- msg.charAt(2) : 2번 인덱스 문자 값 가져옴

 

 

  * msg = "itwill busan";

- substring(시작값, 끝 값-1)

  msg.substring(1, 3) => tw

- substring(시작값)

  msg.substring(1) => twill busan

- slice(시작, 끝-1)

  sg.slice(2,5) => wil

- substr(시작, 개수)

  msg.substr(2,5) => will

 

 

 

- indexOf(문자) / lastIndexOf(문자) : 해당 문자가 있을 경우 문자의 인덱스 번호를 리턴

                                                 없을 경우 -1 리턴

* indexOf는 앞에서부터, lastIndexOf는 뒤에서 부터 찾음

 

        

 

- split(구분 문자, 개수)  

* msg = "itwill busan";

  var tmp = msg.split(" ", 2);   -> array 형태로 저장

  tmp[0] => itwill

  tmp[1] => busan

  msg.split(" ", 2) => itwill, busan

  msg.split(" ", [ 1 ]) => itwill

 

 

---

2. 브라우저 내장 객체

 

 - window-[document, screen, location, history...]

        

   < window/document 객체 >

window.document.속성; => title, location, bgColor, fgColor,....

window.document.동작(); => write();

        

ex)

document.bgColor="yellow";

document.fgColor="red";

              

 

---

   < location 객체 >

location.속성; => href, host, hostname, protocol, por

location.동작(); => reload(), replace()

 

       

---

    < history 객체 >

- 사용자가 방문한 페이지 기록정보를 제공하는 객체

- history.forward(); -> 앞 페이지로 이동

- history.back(); -> 뒤 페이지로 이동

- history.go(); -> 앞 뒤 페이지로 이동(-1은 한 칸 뒤로, -2는 두 칸 뒤로, +1은 한 칸 앞으로)

 

 

---

    < navigator 객체 >

- 방문한 클라이언트의 정보를 처리하는 객체 (클라이언트의 브라우저, OS 정보 등)

- navigator.userAgent; -> 클라이언트 정보 얻어옴

 

 

---

   < 이미지 객체 >

- document안에 이미지 정보들이 배열로 들어있음

  이미지 태그로 삽입하고, document.images[0]로 확인 가능

  window.document.images[인덱스] . 속성

                                               . 동작()

- 이미지에 name 속성을 주면 name으로 접근가능

  window.document.name . 속성

                                  . 동작()

                                                        

 

---

    < 이벤트 >

- 이벤트 : 브라우저(객체)에서 클라이언트(사용자)가 취하는 모든 동작

- 이벤트 핸들러 : 자바스크립트로 이벤트를 실행하는 동작

 

- window 객체 정보는 생략 가능

   - window.alert("안녕하세요!");

   - alert("안녕하세요!")

         => 두개 같음!

 

- window.open(): 새창열기     ex)  (window.)open("url 경로", "창이름", "옵션값");

- window.close(): 창닫기

 

---