달력

12

« 2019/12 »

  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  

은닉화 / 캡슐화

   

소스 코드

   

  1. function Rectangle(width, height){
  2.                         //지역변수는 외부에서 호출 불가(은닉화)
  3.                         var width = width;             
  4.                         var height = height;
  5.                         this.getWidth = function(){
  6.                                 return width;
  7.                         };
  8.                         this.getHeight = function(){
  9.                                 return height;
  10.                         };
  11.                 }
  12.                  
  13.                 var rectangle = new Rectangle(6, 8);
  14.                  
  15.                 //외부에서 호출불가
  16.                 document.write(rectangle.width + ', ' + rectangle.height + '<br>');
  17.                 //메소드를 통해 접근
  18.                 document.write(rectangle.getWidth() + ', ' + rectangle.getHeight())


   

   

출력결과

'Development > JavaScript, jQuery, ...' 카테고리의 다른 글

상속- 15.html  (0) 2015.03.19
try~catch- 14.html  (0) 2015.03.09
13.html-은닉화 / 캡슐화  (0) 2015.02.01
은닉화 / 캡슐화- 12.html  (0) 2015.01.19
프로토타입을 사용한 메소드 생성- 11.html  (0) 2015.01.14
prototype 확인- 21.html  (0) 2015.01.04
Posted by codedragon codedragon

댓글을 달아 주세요

   

은닉화 / 캡슐화

   

   

소스 코드

   

  1. <script type="text/javascript">
  2.                 function Rectangle(width, height){
  3.                         //지역변수는 외부에서 호출 불가(은닉화)
  4.                         var width = width;             
  5.                         var height = height;
  6.                         this.getWidth = function(){
  7.                                 return width;
  8.                         };
  9.                         this.getHeight = function(){
  10.                                 return height;
  11.                         };
  12.                          
  13.                         this.setWidth = function(width){
  14.                                 //검증
  15.                                 if(width < 0){
  16.                                         alert('음수를 입력할 없습니다.');
  17.                                 }else{
  18.                                         width = width;
  19.                                 }
  20.                                  
  21.                         };
  22.                         this.setHeight = function(height){
  23.                                 //검증
  24.                                 if(height < 0){
  25.                                         alert('음수를 입력할 없습니다.');
  26.                                 }else{
  27.                                         height = height;
  28.                                 }
  29.                         };
  30.                 }
  31.                  
  32.                 Rectangle.prototype.getArea = function(){
  33.                         return this.getWidth() * this.getHeight();
  34.                 };
  35.                  
  36.                 var rectangle = new Rectangle(6, 8);           
  37.                 document.write('AREA = ' + rectangle.getArea() + '<br>');
  38.                  
  39.                 rectangle.setWidth(-5);
  40.                 document.write('AREA = ' + rectangle.getArea()+ '<br>');                         
  41.            
  42. </script>
  43. </head>
  44. <body>
  45.    
  46. </body>


   

 

출력결과

   

   

   

   

   

   

   

   

   

'Development > JavaScript, jQuery, ...' 카테고리의 다른 글

try~catch- 14.html  (0) 2015.03.09
13.html-은닉화 / 캡슐화  (0) 2015.02.01
은닉화 / 캡슐화- 12.html  (0) 2015.01.19
프로토타입을 사용한 메소드 생성- 11.html  (0) 2015.01.14
prototype 확인- 21.html  (0) 2015.01.04
배열에 객체 저장- 10.html  (0) 2014.12.28
Posted by codedragon codedragon

댓글을 달아 주세요

프로토타입을 사용한 메소드 생성

   

   

학습내용

(중요)프로토타입은

  • 생성자 함수를 사용해 생성된 객체가 공통으로 가지는 공간
  • prototype영역 호출
  • 메모리 영역의 효율성 증가
  • 상속에서도 동일한 개념이 나옴

   

   

소스 코드

   

  1. <script type="text/javascript">
  2.         function Student(name, korean, math, english, science){
  3.                 this.name = name;
  4.                 this.korean = korean;
  5.                 this.math = math;
  6.                 this.english = english;
  7.                 this.science = science;
  8.         }
  9.          
  10.         //프로토타입은 생성자 함수를 사용해 생성된 객체가 공통으로 가지는 공간
  11.         //prototype영역 호출
  12.         //메모리 영역의 효율성 증가
  13.         Student.prototype.getSum = function(){
  14.                 return this.korean + this.math + this.english + this.science;
  15.         };
  16.         Student.prototype.getAverage = function(){
  17.                 return this.getSum()/4;
  18.         };
  19.         Student.prototype.toString = function(){
  20.                 return this.name + ', ' + this.getSum() + ', ' + this.getAverage();
  21.         };
  22.          
  23.          
  24.         var students = [];
  25.         students.push(new Student('홍길동', 99, 88, 55, 66));
  26.         students.push(new Student('일지매', 99, 77, 67, 78));
  27.         students.push(new Student('대장금', 45, 65, 65, 87));
  28.         students.push(new Student('금잔디', 99, 88, 55, 66));
  29.         students.push(new Student('하회탈', 99, 88, 55, 66));
  30.         students.push(new Student('곰탱이', 99, 80, 55, 66));
  31.          
  32.         //출력
  33.         var output = '이름, 총점, 평균\n';
  34.         for(var i in students){
  35.                 output += students[i].toString() + '\n';
  36.         }
  37.         alert(output);
  38. </script>
  39. </head>
  40. <body>
  41.    
  42. </body>


 

   

출력결과

   

Posted by codedragon codedragon

댓글을 달아 주세요

prototype 확인

객체 리터럴 방식으로 생성된 객체는 Object.prototype 객체가 프로토타입 객체가 된다는 것을 확인 할 수 있습니다.

   

소스 코드

   

  1. <script type="text/javascript">
  2.         var student = {
  3.             name: 'student',
  4.             age: 30
  5.         };
  6.          
  7.         console.log(student.toString());
  8.         console.dir(student);
  9. </script>
  10. </head>
  11. <body>
  12.    
  13. </body>


   

   

출력결과

   

크롬 브라우저의 출력결과

Object

  • age30
  • name"student"
  • __proto__: Object
  • __defineGetter__: function __defineGetter__() { [native code] }
  • __defineSetter__: function __defineSetter__() { [native code] }
  • __lookupGetter__: function __lookupGetter__() { [native code] }
  • __lookupSetter__: function __lookupSetter__() { [native code] }
  • constructor: function Object() { [native code] }
  • hasOwnProperty: function hasOwnProperty() { [native code] }
  • isPrototypeOf: function isPrototypeOf() { [native code] }
  • propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
  • toLocaleString: function toLocaleString() { [native code] }
  • toString: function toString() { [native code] }
  • valueOf: function valueOf() { [native code] }
  • get __proto__: function __proto__() { [native code] }
  • set __proto__: function __proto__() { [native code] }

  

3라인

객체 리터럴 방식으로 생성된 객체는 Object.prototype 객체가 프로토타입 객체가 된다는 것을 확인 할 수 있습니다.

9~14

라인

toString()외에 hasOwnProperty(), valueOf90등과 같은 자신의 프로토타입인 Object.prototype객체에 포함된 다양한 메소드를 마치 자신의 프로퍼티인 것 처럼 상속받아 사용할 수 있습니다.

   

   

student객체와 Object.prototype객체와의 도식도

   

   

ECMAScript 명세서- 세부 참조

ECMAScript 명세서-8.6.2 Object Internal Properties and Methods

자바스크립트의 모든 객체는 자시의 프로토타입을 가리키는 Prototype라는 숨겨진 프로퍼티를 가집니다.

   

Object,prototype 객체가 포함하고 있는 메서드 확인하기

ECMAScript 명세서- 15.2.4 Properties of the Object Prototype Object

   

ECMAScript 참조

http://codedragon.tistory.com/46

Posted by codedragon codedragon

댓글을 달아 주세요

배열에 객체 저장

   

학습내용

자바와 유사

동일한 패턴 사용시

   

소스 코드

   

  1. <script type="text/javascript">
  2.         //생성자 함수
  3.         function Student(name, korean, math, english, science){
  4.                 //속성 지정
  5.                 //this 전역변수로 this없으면 지역변수
  6.                 this.name = name;
  7.                 this.korean = korean;
  8.                 this.math = math;
  9.                 this.english = english;
  10.                 this.science = science;
  11.                  
  12.                 //메소드 지정
  13.                 this.getSum = function(){
  14.                         return this.korean + this.math + this.english + this.science;
  15.                 };
  16.                 this.getAverage = function(){
  17.                         return this.getSum()/4;
  18.                 };
  19.                 this.toString = function(){
  20.                         return this.name + ', ' + this.getSum() + ', ' + this.getAverage();
  21.                 };             
  22.         }
  23.          
  24.         var students = [];
  25.         students.push(new Student('홍길동', 99, 88, 55, 66));
  26.         students.push(new Student('일지매', 99, 77, 67, 78));
  27.         students.push(new Student('대장금', 45, 65, 65, 87));
  28.         students.push(new Student('금잔디', 99, 88, 55, 66));
  29.         students.push(new Student('하회탈', 99, 88, 55, 66));
  30.         students.push(new Student('곰탱이', 99, 80, 55, 66));
  31.          
  32.         //출력
  33.         var output = '이름, 총점, 평균\n';
  34.         for(var i in students){
  35.                 output += students[i].toString() + '\n';
  36.         }
  37.         alert(output);
  38. </script>
  39. </head>
  40. <body>
  41.    
  42. </body>


   

 

출력결과

   

Posted by codedragon codedragon

댓글을 달아 주세요

Package Exploer에서

삭제한 패키지 폴더 선택 > 마우스 우클릭 >

Restore from Local History… 메뉴 클릭

   

복구가능한 히스토리에 파일이 존재하는 경우

해당 파일 체크 후 >

Restore 클릭

   

   

복가능한 히스토리가 없는 경우 메세지

Posted by codedragon codedragon

댓글을 달아 주세요

생성자 함수를 이용한 객체 생성 2

   

   

소스 코드

   

  1. <script type="text/javascript">
  2.         //생성자 함수
  3.         function Student(name, korean, math, english, science){
  4.                 //속성 지정
  5.                 //this 전역변수로 this없으면 지역변수
  6.                 this.name = name;
  7.                 this.korean = korean;
  8.                 this.math = math;
  9.                 this.english = english;
  10.                 this.science = science;
  11.                  
  12.                 //메소드 지정
  13.                 this.getSum = function(){
  14.                         return this.korean + this.math + this.english + this.science;
  15.                 };
  16.                 this.getAverage = function(){
  17.                         return this.getSum()/4;
  18.                 };
  19.                 this.toString = function(){
  20.                         return this.name + ', ' + this.getSum() + ', ' + this.getAverage();
  21.                 };             
  22.         }
  23.          
  24.         //생성자 함수를 이용한 객체 생성
  25.         var student = new Student('홍길동', 90, 77, 80, 95);
  26.          
  27.         //출력
  28.         document.write(student);
  29.          
  30.          
  31.         document.write('<br>');
  32.         //생성자 함수를 이용한 객체 생성
  33.         var student2 = new Student('대장금', 53, 87, 86, 67);       
  34.         document.write(student2);
  35.          
  36.          
  37. </script>
  38. </head>
  39. <body>
  40.    
  41. </body>


   

 

출력결과

   

Posted by codedragon codedragon

댓글을 달아 주세요

   

생성자 함수를 이용한 객체 생성

생성자 함수는 대문자로 시작, 명사형식

일반 함수는 소문자로 시작, 동사형식

   

소스 코드

   

  1. <script type="text/javascript">
  2.         //생성자 함수
  3.         function Person(name){
  4.                 this.name = name;              
  5.         }
  6.          
  7.         //객체 생성
  8.         var mySon = new Person('홍길동');
  9.          
  10.         //출력
  11.         document.write(mySon.name + '<br>');
  12.         document.write(mySon['name'] + '<br>');
  13.          
  14. </script>
  15. </head>
  16. <body>
  17.    
  18. </body>

 

   

출력결과

   

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

   

배열과 객체의 사용

객체를 최소로 만들고,

배열의 객체에 접근해서 동적으로 배열 요소 추가

   

학습내용

자바에는 없는 형태

패턴이 바뀔 경우

   

소스 코드

   

  1. <script type="text/javascript">
  2.         // 객체 생성
  3.         var students = [];
  4.          
  5.         //객체를 배열에 저장
  6.         students.push( { name:'홍길동', korean:90, math:70, english:89, science:80 } );
  7.         students.push( { name:'이순신', korean:95, math:79, english:78, science:87 } );
  8.         students.push( { name:'유관순', korean:100, math:96, english:67, science:67 } );
  9.         students.push( { name:'일지매', korean:89, math:85, english:87, science:98 } );
  10.         students.push( { name:'대장금', korean:99, math:97, english:96, science:88 } );
  11.          
  12.         //students배열내의 모든 객체에 메소드 추가
  13.         for(var i in students){
  14.                 //총점 구하는 메소드 추가
  15.                 students[i].getSum = function(){
  16.                         return this.korean + this.math + this.english + this.science;
  17.                 };
  18.                  
  19.                 //평균 구하는 메소드 추가
  20.                 students[i].getAverage = function(){
  21.                         return this.getSum()/4;                
  22.                 };             
  23.         }
  24.          
  25.         //출력
  26.         var output = "이름, 총점, 평균\n";
  27.         for(var i in students){
  28.                 output += students[i].name + ' , ' + students[i].getSum() + ', ' +students[i].getAverage() + '\n';
  29.         }
  30.          
  31.         alert(output);
  32.          
  33. </script>
  34. </head>
  35. <body>
  36.    
  37. </body>

 

   

출력결과

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

속성 제거 

객체의 프로퍼티를 delete연산자를 이용해 즉시 제거할 수 있습니다.

delete연산자는 객체의 프로퍼티를 삭제할 뿐, 객체 자체를 삭제하지는 못합니다.

delete(student.취미);

   

   

소스 코드

// 객체 생성

var student = {};

//객체에 속성 추가

student.name = '홍길동';

student.hobby = '피아노';

student.specialty = '자바';

student.willjob = '프로그래머';

document.write('<br>====================================<br>');

//객체의 메소드 추가

student.toString = function(){        //속성의 명세 호출하기

var msg = '';

for(var key in this){        //this: 객체 안에서 객체 참조

if(key!='toString'){

msg += key + ' : ' + this[key] + '<br>';        

}                                

}

return msg;

};

//출력

document.write(student + '<br>');

   


   

   

소스 코드

document.write('<br> 속성 제거====================================<br>');

//속성 제거

//delete student.hobby; 동일

delete(student.hobby);

document.write(student + '<br>');

   


   

   

   

객체 삭제 시도

delete는 프로퍼티만 제거하고 객체는 제거하지 않습니다.

객체가 삭제되지 않아 student객체의 값이 그대로 출력된 것을 확인할 수 있습니다.

   

  1. //객체 삭제 시도
  2. delete student;
  3. document.write(student + '<br>');

 

   

   

   

   

전체 소스

  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>속성 제거</title>
  5. <script type="text/javascript">
  6.         // 객체 생성
  7.         var student = {};
  8.          
  9.         //객체에 속성 추가
  10.         student.name = '홍길동';
  11.         student.hobby = '피아노';
  12.         student.specialty = '자바';
  13.         student.willjob = '프로그래머';
  14.          document.write('<br>====================================<br>');
  15.                 //객체의 메소드 추가
  16.                 student.toString = function(){  //속성의 명세 호출하기
  17.                         var msg = '';
  18.                  
  19.                         for(var key in this){   //this: 객체 안에서 객체 참조
  20.                                 if(key!='toString'){
  21.                                         msg += key + ' : ' + this[key] + '<br>';       
  22.                                 }                              
  23.                         }
  24.                         return msg;
  25.                 };
  26.                 //출력
  27.                 document.write(student + '<br>');
  28.                  
  29.                 document.write('<br> 속성 제거====================================<br>');
  30.                  
  31.                 //속성 제거
  32.                 //delete student.hobby; 동일
  33.                 delete(student.hobby);
  34.                 document.write(student + '<br>');
  35.                  
  36.                 document.write('<br> 객체 삭제 시도====================================<br>');
  37.                 //객체 삭제 시도
  38.                 delete student;
  39.                 document.write(student + '<br>');
  40.                  
  41. </script>
  42. </head>
  43. <body>
  44.    
  45. </body>
  46. </html>


Posted by codedragon codedragon

댓글을 달아 주세요