Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Kim's Programming

HTML - 자바스크립트(JavaScript) 객체 본문

Programming/HTML

HTML - 자바스크립트(JavaScript) 객체

Programmer. 2015. 8. 24. 13:00

사용자 정의 객체


    • 객체(object)란 프로그램 작성의 대상 도메인 내에서 명사적으로 표현될 수 있는 모든 것(thing)을 의미하며, 속성과 행위를 가질 수 있는 기본단위를 말합니다. 속성은 객체의 성질 또는 특징을 나타내며 행위는 메소드란 용어료 표현되는데 이는 객체가 수행할 수 있는 동작을 나타냅니다. 메소드는 객체가 가지는 처리기능으로써 자주 사용되는 개게의 처리기능을 미리 프로그래밍 해두고 필요할 때 마다 해당 메소드를 불러서 사용하게됩니다. 메소드를 활룔하면 함수에서 처럼 프로그램의 가독성(Readability)과 효율성이 높아집니다.

    • 자바스크립트에서 다루는 객체는 자바스크립트 자체에서 제공하는 내장 객체(Built-in object)와 사용자가 직접 특정 목적에 맞게 만들어서 사용하는 사용자 정의 객체(user-defined objects)로 구분됩니다.

    • 사용자 정의 객체는 사용자가 객체를 직접 정의하여 프로그램에서 사용하는 것으로 사용자 정의 객체를 만들기 위해서는 객체의 이름을 정하고 객체를 구성하는 구성요소인 속성과 메소드를 정의하는 절차가 필요합니다. 객체를 정의하는 방법은 함수를 정의하는 방법과 유사하기 떄문에 이렇게 정의된 객체를 객체의 생성자 함수라고도 부릅니다. 생성자 함수도 하나의 함수로 표현되며 함수의 이름은 객체를 함수 내에서 수행되는 내용은 객체의 속성들의 값을 지정하는 것입니다. 다음 소스는 생성자 함수를 정의한 것입니다.
      function student(name, age, grade)
      {
          this.name=name;
          this.age=age;
          this.grad=grad;
      }

    • 위의 내용은 student라는 객체를 정의하는 생성자 함수입니다. 위 소스에서는 3개의 매개변수를 받아서 student의 속성 즉 학생의 이름과 나이 그리고 점수를 정의합니다. 위 소스에서는 예약어 this가 사용되었는데 this는 "현재 객체"를 나타내는 자바스크립트 예약어이며 여기서 this는 student객체를 나타내는 것이됩니다.

    • 생성자 함수를 이용한 객체의 정의가 완료되면 객체를 생성하여 사용할 수 있습니다. 이제 student 객체로부터 hong이라는 이름의 학생객체를 생성방법은 다음과 같습니다.
      hong = new student("gil dong hong",20,3);

    • 위의 소스를 통해서 hong이라는 이름의 객체가 생성됩니다. hong이라는 객체는 name속성이 "gil dong hong" age속성이 20, grade 속성이 3이됩니다. 이미 만들어진 객체의 속성값을 변경시키는 것도 가능합니다. hong 이라는 객체의 학년이 4학년이 되었다고 하면 다음과 같이 hong객체의 grade속성값을 변경해주면 됩니다.
      hong.grade++;

    • 지금까지 객체의 속성은 변수처럼 한가지 값만 가지는 경우를 가정하였는데 속서자체도 또 다른 객체를 값으로 가지는 것이 가능합니다. 위의 소스에 score라는 속성을 추가면 score 속성은 또다른 객체를 속성값으로 가지게 되고 언어 외국어 수학 점수를 속성으로 가지는 객체라고 자정하면 다음과 같은 코드로 student 객체와 score객체를 만들 수 있습니다.
      function student(name, age, grade, score)
      {
          this.name=name;
          this.age=age;
          this.grade=grade;
          this.score=score;
      }
      function score( korean, English, math)
      {
          this.korean=korean;
          this.english=english;
          this.math=math;
      }

    • 위와 같이 정의된 student객체로부터 hong이라는 객체를 생성하는 예는 다음과 같습니다. 아래 예에서 점수 객체인 soreHong을 먼저 생성하고, hong객체를 생성할 때 매개변수로 이미 만들어놓은 scoreHong을 먼저 생성하고 Hong객체를 생성할 때 매개변수로 이미 만들어놓은 scoreHong을 지정함으로써 Hong객체 내의 속성으로 scoreHong이 포함되도록 하는 것입니다.
      scoreHong = new score(95,98,75);
      hong = new student("gil dong hong:,20,3,scoreHong);

    • 지금까지 student객체와 이에 딸린 속성들을 정의하는 방법들이었습니다. 이제는 이 객체를 이용하여 메소드를 정의하는법을 알아보겠습니다. student객체의 내용을 출력하는 showProfile이라는 메소드를  별도로 정의합니다. 이번에도 this라는 예약어를 사용합니다. 그렇기 떄문에 이 함수에 student객체가 현재 객체로 설정되어 있어야만 제대로 동작합니다.
      function showProfile()
      {
          document.write("Name : " +this.name+" <BR>"):
          document.write("Age : " +this.Age+" <BR>"):
          document.write("Grade : " +this.Grade+" <BR>"):
          document.write("korean Score : " +this..score.korean+" <BR>"):
          document.write("English Score : " +this.score.English+" <BR>"):
          document.write("math Score : " +this.score.math+" <BR>"):
      }

    • 위에서 정의된 메소드를 student객체에 정의해 주면 속성과 메소드를 동시에 가지는 student 객체의 정의가 완성됩니다. 다음은 객체생성자에서 위 메소드를 붙여서 사용할 수 있도록 하는 소스입니다.
      function student(name, age, grade, score)
      {
          this.name=name;
          this.age=age;
          this.grade=grade;
          this.score=score;
          this.showProfile=showProfile;
      }

    • 마치 속성 하나를 첨가하는 것처럼, 단순히 메소드 함수의 이름을 지정하는 것으로써 객체와 메소드 간의 연결이 이루어졌습니다. 이렇게 연결된 메소드를 사용하는 방법을 위에서 생성한 hong이라는 객체를 예로 살펴보겠습니다. 메소드 호출은 속성값 참조와 기본적으로 형태가 같으나, 뒤에 괄호()가 붙음으로써 이는 메소드 호출이라는 사실을 지정하게 됩니다.

      hong.showProfile();

    • 위의 내용들을 종합한 아래의 소스입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<HTML>
    <HEAD>
        <TITLE>
            사용자 정의 객체
        </TITLE>
    </HEAD>
    <BODY><H3>사용자 정의객체</H3>
        <SCRIPT language="JavaScript">
        function student(name, age, grade, score)
        {
            this.name=name;
            this.age=age;
            this.grade=grade;
                this.score=score;
                this.showProfile=showProfile;
        }
        function showProfile()
        {
                document.write("Name : " +this.name+" <BR>"):
                document.write("Age : " +this.Age+" <BR>"):
                document.write("Grade : " +this.Grade+" <BR>"):
        }
        hong = new student("gil dong hong:,20,3,scoreHong);
        hong.showProfile();
        </SCRIPT>
    </BODY>
<?HTML>
cs


시스템 내장 객체

    • 내장객체는 자바스크립트에서 미리 정의되어 있는 객체이기 떄문에 별도의 정의과정 없이 바로 생성하여 사용할 수 있습니다. 여기서는 흔하게 사용되는 시스템 내장객체를 표로 살펴보겠습니다.

Date 객체

    • Date객체는 프로그램에서 날짜와 시간에 대한 정보를 제공합니다. Date객체를 생성하는 형식은 다음과 같습니다.

      객체명=new Date();
      객체명=new Date(년,월,일);
      객체명=new Date(년,월,시,분,초);

    • Date객체의 주요 메소드는 다음과 같습니다.

       메소드 종류

       설명

       getYear()

       년도를 반환

       getMonth()

       월을 0~11까지의 숫자로 반환

       getDate()

       일자를 1~31까지의 숫자로 반환

       getDay()

       주중의 몇번째 요일인지 반환(0:일요일, 1 : 월요일 ....)

       getHour()

       시간을 0~23까지의 숫자로 반환

       getMinutes()

       분을 0~59까지의 숫자로 반환

       getSeconds()

       초를 0~59까지의 숫자로 반환

       getTime()

       1970년 1.1 0시 이후의 시간을 ms(1/1000초)로 표기

       setDate(일자)

       일자를 1~31까지의 숫자로 지정

       setHour(시간)

       시간을 0~23까지의 숫자로 지정

       setMinutes(분)

       분을 0~59까지의 숫자로 지정

       setSecond(초)

       초를 0~59까지의 숫자로 지정

       setTime(시간)

       1970년 1.1 0시 이후의 시간을 ms(1/1000초)로 지정

       setYear(년도)

       년도를 지정

       setMonth(월)

       월을 0~11까지의 숫자로 지정

String 객체


    • String 객체는 자바스크립트에서 사용되는 문자열을 처리하는 객체로서, new 연산자를 사용하여 객체를 생성할 필요 없이 바로 사용이 가능합니다.

    • String객체의 주요속성과 메소드는 다음과 같습니다. 메소드는 이름뒤에 ()가 있습니다.

       메소드 종류

       설명

       length

       문자의 개수

       big()

       글자를 좀더 크게

       small()

       글자를 좀더 작게

       bold()

       볼드체

       italics()

       이탤릭체

       strike()

       글자 가운데에 줄 긋기

       sub()

       아래 첨자

       sup()

       위 첨자

       foncolor("색")

       글자색

       fontsize(크기)

       글자 크기

       charAt(index)

       index가 지정하는 곳의 문자를 반환

       indexOf(string)

       string에 해당하는 문자열의 위치를 리턴(없으면 -1을 리턴)

       lastIndexOf(string)

       string에 해당하는 문자열 위치 반환(뒤부터)

       substring(index1,index2)

       index1부터 index2이전에 있는 문자열을 리턴

       concat(string)

       두 개의 문자열을 합친 문자열 반환

       toLowerCase(string)

       문자열을 모두 소문자로 변환

       toUpperCase(string)

       문자열을 모두 대문자로 변환

       slice(start_index,end_index)

       문자열 일부 추출

       substr(start_Index. length)

       문자열을 length만큼 잘라냄

Math 객체

    • Math객체는 수학연산을 위한 속성과 메소드를 제공하며 문자열 객체처럼 new연산자를 사용하여 객체를 생성할 필요없이 바로 사용할 수 있습니다.

    • Math객체의 주요속성과 메소드는 다음과 같습니다.

       메소드 종류 

       설명

       PI

       원주율, 파이(∏)

       LN10

       10의 자연로그(약 2.302)

       LN2

       2의 자연로그(약 0.693)

       SQRT1_2

       1/2제곱근 (0.707)

       SQRT2

       2의 제곱근(1.414)

       sin(x)

       sin 함수

       cos(x)

       cos함수

       tan(x)

       tan 함수

       abs(x)

       x의 절대값

       log(x)

       로그함수

       pow(x,y)

       x의 y승을 구하는 지수함수

       sqrt(x)

       제곱근함수

       random()

       0~1사이의 난수 발생

       round(x)

       x를 반올림

       floor(x)

       x보다 크거나 같은 숫자중 가장 큰 정수

       ceil(x)

       x보다 작거나 같은 숫자중 제일 작은 정수

       max(x,y)

       x,y중 최대값을 리턴

       min(x,y)

       x,y중 최소값을 리턴








저작자표시 비영리 동일조건

'Programming > HTML' 카테고리의 다른 글

HTML - 함수와 이벤트  (0) 2015.08.23
HTML - 반복문  (1) 2015.08.23
HTML - 조건문, 배열  (2) 2015.08.23
HTML - 변수, 상수, 자료형, 연산자  (0) 2015.08.23
HTML - 자바스크립트(JavaScript)  (0) 2015.08.22
'Programming/HTML' Related Articles more