Object(객체)

  • 객체라고 할 때는 프로그램에서 실체가 있는 모든 것
  • 인스턴스는 클래스를 기반으로 만들어진 객체
int a = 10;
String str = new String("HI");
  • a는 클래스로부터 만들어진 것이 아니라서 객체라는 표현은 사용하지만 인스턴스라고 하지는 않습니다.
  • str은 객체라고 하기도 하고 인스턴스라고 하기도 합니다.

1.종류

1) 사용자 정의 객체: 사용자가 만든 객체

2) BOM(Browser Object Model): 브라우저가 처음부터 제공하는 객체

  • 이미 만들어진 객체를 바로 사용
  • 이름이 이미 결정되어 있음

3) DOM(Document Object Model): 브라우저가 제공하는 생성자나 클래스를 이용해서 개발자가 만든 객체로 * body 태그 안에 있는 태그들

  • 메모리 상에서는 트리 형태로 펼쳐져 있습니다.
  • body 태그 안에 만들어 둔 태그를 찾아서 사용
  • 이름은 개발자가 직접 생성

2.사용자 정의 객체
var 변수명 = {속성이름:값, 속성이름:값....}

  • 자바스크립트나 파이썬은 사용자 정의 객체가 Map 형식 - 나중에 속성을 추가하거나 삭제하는 것이 가능

1) 객체가 자신의 속성에 접근

  • 객체["속성"] 또는 객체.속성 으로 접근 가능

2) 속성에 값으로 함수를 대입하는 것도 가능

3) for - in을 이용하면 객체의 모든 속성을 순회할 수 있습니다.

4) 속성이름 in 객체 를 이용하면 속성이 객체에 존재하면 true 없으면 false

  • 자바스크립트에서는 이 구문을 많이 사용하는데 BOM, DOM 처럼 브라우저가 제공하는 객체들은 브라우저마다 소유한 속성이 달라서 어떤 속성이 있는지 확인해서 속성을 호출해야 하는 경우가 종종 있기 때문입니다.
  • IE 와 다른 브라우저를 구분해서 동작을 수행하기 위해서입니다.

5) with

  • with(객체이름){ }을 하게되면 { }안에서는 객체이름. 을 생략하고 속성 사용이 가능합니다.
  • 이렇게 하게되면 속성이 window 객체에 있는 것인지 객체 안에 속한 것인지 혼동이 올 수 있습니다.

6) 속성 제거 및 추가
객체이름["속성이름"] = 값;

  • 속성이 존재하면 수정이지만 없으면 생성입니다.

  • delete(객체이름["속성이름"]) 을 이용하면 속성 제거

7) 생성자 함수

  • 자바스크립트는 클래스 개념이 없습니다.
  • 자바스크립트에서는 클래스는 없지만 생성자의 개념은 존재해서 동일한 모양의 여러 개의 객체를 만들고자 할 때 생성자를 이용.
  • 생성자 안에서 this.속성을 만들면 이 속성이 객체의 속성이 됩니다.
  • this.을 붙이지 않으면 지역변수가 됩니다.
  • 생성자 함수의 이름 시작은 대문자로 하는 것이 관례

3.일반 내장 객체

1) Object 객체

  • 자바스크립트의 최상위 객체
  • 다른 모든 객체들이 가져야 하는 공통 속성을 소유
  • 사용자 정의 객체도 Object 객체의 하위 객체입니다.
  • toString(): 객체를 문자열로 리턴해주는 함수
    • 이 함수는 출력하는 함수에 객체를 매개변수로 대입하면 자동으로 호출
  • Object.prototype.속성이름 = 값을 추가하면 모든 자바스크립트 객체에 속성이 추가가 됩니다.

2) Number 객체

  • 숫자 자료형 객체

3) String 객체

  • 문자열 객체
  • 다른 언어가 가진 메소드들을 대부분 소유
  • length가 함수가 아니고 속성

4) Math

  • Java 의 Math 객체와 동일
  • 객체를 만들지 않고 Math.속성 또는 메소드()로 사용
  • random(): 0.0~1.0 사이의 랜덤한 실수 리턴
  • PI, E 라는 속성을 이용해서 파이값과 자연로그 값을 사용

5) Date

  • 날짜를 위한 객체
  • 날짜 및 시간은 기준시를 기준으로 지나온 시간을 정수로 저장
  • 필요에 따라 이 정수를 년월일 시분초로 변환
  • 자바스크립트는 시간의 단위가 1/1000초(밀리초)
  • 객체 생성

new Date(): 현재 날짜 및 시간
new Date(정수) : 1970년 1월 1일 자정부터 지나온 시간 - epoch time
new Date(년, 월, 일, 시, 분, 초, 밀리초): 뒤에서부터 생략 가능

  • 메소드
    get단위(), set단위(값)
    getTime(): epoch time을 리턴

6) Array

  • 배열 객체
  • 배열은 Double Linked List
  • 앞이나 뒤에서 삽입가능하고 중간에 삽입이나 삭제도 가능
  • reverse(), pop() - 마지막 요소를 꺼내서 리턴, push() - 저장, shift() - 첫번째 데이터를 제거하고 리턴, unshift() - 첫번째에 데이터를 저장
  • remove(데이터) - 데이터 삭제
  • indexOf(데이터) - 데이터를 찾아서 위치를 리턴하는데 없으면 음수 리턴

  • sort() - 데이터를 오름차순 정렬

    • 숫자 데이터는 문자열로 치환해서 정렬합니다.
    • 매개변수가 2개이고 정수를 리턴하는 함수를 대입하면 메소드를 이용해서 비교한 후 정렬

  • 배열에 추가된 함수 : forEach(), filter(), map()

    • forEach는 매개변수가 1개이고 리턴이 없는 함수를 대입해서 배열의 모든 요소가 함수를 수행하도록 합니다.

  • filter는 매개변수가 1개이고 boolean을 리턴하는 함수를 대입해서 배열의 모든 요소 중에서 true를 리턴하는 데이터를 가지고 새로운 배열을 만들어서 리턴합니다.

  • map 은 매개변수가 1개이고 데이터를 리턴하는 함수를 대입해서 배열의 모든 요소를 가지고 함수를 수행해서 리턴된 값들을 가지고 새로운 배열을 만들어서 리턴합니다.

7) JSON 객체

  • JSON: 자바스크립트 객체 표현 방법을 이용해서 데이터를 표현

[ ]: 배열

{속성:값, 속성:값....}

  • 직접 작성하는 경우에는 속성이름에 ""를 해주어야 합니다.

    • 실제로는 직접 작성하는 경우는 거의 없음
    • 데이터를 만드는 것은 데이터를 가져와서 라이브러리를 이용해서 변환

  • JSON.parse(문자열): JSON 형식의 문자열을 자바스크립트의 자료형으로 변환

  • JSON.stringfy(자바스크립트객체): JSON 형식의 문자열로 변환
    • parse가 중요합니다.
    • 최근에 서버가 클라이언트가 넘겨주는 데이터 포맷 중에서 가장 많이 사용되는 것이 JSON입니다.
    • 스마트 폰은 거의 대부분 JSON입니다.
    • google 과 apple이 데이터를 JSON으로 넘겨줍니다.

Back-End 언어를 할 때는 HTML을 만들어주는 것도 중요하지만 JSON 이나 XML 형식의 데이터를 리턴하는 것도 중요합니다.

4.BOM(Browser Object Model)

  • 브라우저가 처음부터 제공하는 객체

1) window 객체

  • 웹 브라우저에 해당하는 객체
  • location 속성: 현재 URL 확인
  • opener 속성: 팝업 창의 경우 자신을 출력할 window
  • self 속성: 자신
    • opener 나 self 속성은 예전에 팝업 창을 이용할 때 많이 사용하던 속성

  • open(): 팝업창을 만들어주는 메소드

    • 첫번째 매개변수로 출력할 url
    • 두번째 매개변수로 통신을 할 때 사용할 이름
    • 세번째 매개변수로 윈도우 모양을 객체로 대입
    • 네번째 매개변수는 history 변경여부 - 팝업창의 주소를 기억할지 여부를 설정

  • 타이머 관련 메소드

    • setTimeout(함수, 시간): 시간이 지난 후에 함수를 1번만 수행
    • setInterval(함수, 시간): 시간 단위로 함수를 계속 수행

  • setTimeout 이나 setInterval 로 타이머를 만들고 결과를 변수에 대입하면 타이머를 중지할 수 있습니다.
    clearTimeout(타이머)
    clearInterval(타이머)

  • 광고처럼 이미지를 순서대로 보여주다가 마우스를 갖다 대면 중지 한다던가 하는 것들이 타이머와 ajax 조합입니다.

2) screen

  • 화면과 관련된 정보를 소유한 객체
  • width 와 height 속성

3) location 객체

  • url 관련된 객체
  • href 속성: 현재 URL, 다른 URL을 대입하면 그 URL로 이동
  • reload(): 새로고침

4) navigator 객체

  • userAgent: 접속한 운영체제와 브라우저 정보를 문자열로 리턴
    • 이 속성을 이용해서 어떤 기기에서 접속했는지 알 수 있고 어떤 브라우저인지 알아냅니다.
    • 모바일 운영체제에서 접속하면 모바일 페이지로 이동시키는 것도 이 속성을 이용
//userAgent에 mobile에 있는 텍스트가 있는지 확인
        var result = false;
        for(var idx in mobile){
            if(userAgent.toLowerCase().indexOf(mobile[idx]) >= 0){
                result = true;
                break;
            }
        }
        if(result == true){
            //location.href="모바일페이지 URL";
            alert("스마트 폰에서 접속");
        }else{
            alert("pc에서 접속");
        }

5) history

  • 이동한 URL에 대한 정보를 가진 객체
  • back(): 뒤로
  • forward(): 앞으로
  • go(인덱스): 인덱스 만큼 이동

results matching ""

    No results matching ""