Where The Streets Have No Name

javascript [필수] -(3) 객체 정의하기 본문

Developement/Web

javascript [필수] -(3) 객체 정의하기

highheat 2006. 4. 14. 15:03
  • 객체 유형 정의
    • 프로퍼티 : 객체에 들어 있는 데이터 값에 액세스할 때 사용.
    • 메소드 : 객체에 어떤 작업을 할 때 사용하는 함수.
  • 객체 유형 만들기
    사용자가 직접 객체 유형을 정의하고 특정 객체 인스턴스를 만들 수 있 는데 이렇게 만들려면 객체 유형의 특정 인스턴스를 만들 때 사용되는 함수를 정의하기만 하면 된다. 본래 이러한 생성자 함수는 다음과 같은 일을 한다.
    • 객체 유형의 프로퍼티에 값을 할당한다.
    • 객체 유형의 메소드로 사용할 수 있는 다른 함수를 지정한다.
  • 객체 사용 예
    1. table 객체의 정의 (table.js)
      function table_getValue(row,col){
      return this.data[row* this.columns+col ];
      }
      function table_setValue(row,col,value){
      this.data[row* this.columns+col ]=value;
      }
      function table_set(contents){
      var n=contents.length;
      for(var j=0;jthis.data[j]=contents[j];
      }
      function table_isHeader(row,col){
      return this.header[row* this.columns+col ];
      }
      function table_makeHeader(row,col){   this.header[row* this.columns+col ]=true;
      }
      function table_makeNormal(row,col){   this.header[row* this.columns+col ]=false;
      }
      function table_makeHeaderRow(row){   for(var j=0;j< this.columns+j)
        this.header[row* this.columns+col ]=true;
      }
      function table_makeHeaderColumn(col){   for(var i=0;i< this.rows;++i)
        this.header[i* this.columns+col ]=true;
      }
      function table_write(doc){
      doc.write("<TABLE BORDER="+ this.border+">");
      for(var i=0;i< this.rows;++i) {
        doc.write("<TR>");
        for(var j=0;j< this.columns;++j) {
          if( this.header[i* this.columns+j ]) {
            doc.write("<TH>");
            doc.write( this.data[i* this.columns+j ]);
            doc.write("</TH>");
          }
          else {
            doc.write("<TD>");
            doc.write( this.data[i* this.columns+j ]);
            doc.write("</TD>");
          }
        }
        doc.writeln("</TR>");
      }
      doc.writeln("</TABLE>");
      }
      funtion table(rows,columns) {
        this.rows=rows
      this.columns=columns
      this.border=0
      this.data=new Array(rows*columns)
      this.header=new Array(rows*columns)
        this.getValue=table_getValue
      this.setValue=table_setValue
      this.set=table_set
      this.isHeader=table_isHeader
      this.makeHeader=table_makeHeader
      this.makeNormal=table_makeNormal
      this.makeHeaderRow=table_makeHeaderRow
      this.makeHeaderColumn=table_makeHeaderColumn
      this.write=table_write
       }

    2. table 객체 사용하기
      <HTML>
      <HEAD>
      <TITLE>Defining Object Types</TITLE
      <SCRIPT LANGUAGE="JavaScript" SRC="table.js"><!-
      //-></SCRIPT>
      </HEAD>
      <BODY>
      <H1>Defining Object Types</H1>
      <SCRIPT LANGUAGE="JavaScript"><!-
      t=new table(3,4)
      contents=new
      Array("This","is","a","test","of","the","table","object.","Let's","see","it","work")
      t.set(contents)
      t.border=4
      t.makeHeaderColumn(0)
      t.write(document)
      //-></SCRIPT>
      </BODY>
      </HTML>

    3. 객체 유형에 프로퍼티와 메소드 추가
      : prototype 프로퍼티를 통해서 인스턴스화할 수 있는 미리 정의된 객체 유형에 프로퍼티와 메소드 추가
      사용 예
      <HTML>
      <HEAD>
      <TITLE>Updating Object Types </TITLE>
      <SCRIPT LANGUAGE="JavaScript" SRC="table.js"><!-
      //-></SCRIPT>
      </HEAD>
      <BODY>
      <H1>Updating Object Types</H1>
      <SCRIPT LANGUAGE="JavaScript"><!-
      function table_colorWrite(doc){
      ........
      함수 정의
      ........
      ........
      }
      t=new table(3,4)
      table.prototype.bgColor="Cyan"
      table.prototype.colorWrite=table_colorWrite
      .............
      .............
      t.colorWrite(document)
      //-></SCRIPT>
      </BODY>
      </HTML>

    4. 프로퍼티와 메소드 삭제
      delete objectName.propertyName
      delete objectName.methodName
'Developement/Web' Related Articles more