달력

1

« 2020/1 »

2015. 2. 1. 00:08

13.html-은닉화 / 캡슐화 Development/JavaScript, jQuery, ...

은닉화 / 캡슐화

   

소스 코드

   

  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
TAG eclipse, javascript, web, 스크립트, 웹, 웹 개발, 웹개발, 이클립스, 자바 스크립트, 자바스크립트, 자바스크립트 개발
Trackback (0) : Comment (0)
Posted by codedragon codedragon

댓글을 달아 주세요

2015. 1. 19. 14:08

은닉화 / 캡슐화- 12.html Development/JavaScript, jQuery, ...

   

은닉화 / 캡슐화

   

   

소스 코드

   

  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
TAG eclipse, javascript, web, 스크립트, 웹, 웹 개발, 웹개발, 이클립스, 자바 스크립트, 자바스크립트, 자바스크립트 개발
Trackback (0) : Comment (0)
Posted by codedragon codedragon

댓글을 달아 주세요

2015. 1. 14. 07:48

프로토타입을 사용한 메소드 생성- 11.html Development/JavaScript, jQuery, ...

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

   

   

학습내용

(중요)프로토타입은

  • 생성자 함수를 사용해 생성된 객체가 공통으로 가지는 공간
  • 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>


 

   

출력결과

   

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

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
09.html-생성자 함수를 이용한 객체 생성  (0) 2014.12.22
TAG eclipse, javascript, web, 스크립트, 웹, 웹 개발, 웹개발, 이클립스, 자바 스크립트, 자바스크립트, 자바스크립트 개발
Trackback (0) : Comment (0)
Posted by codedragon codedragon

댓글을 달아 주세요

2015. 1. 4. 12:58

prototype 확인- 21.html Development/JavaScript, jQuery, ...

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

  • age: 30
  • 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

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

은닉화 / 캡슐화- 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
09.html-생성자 함수를 이용한 객체 생성  (0) 2014.12.22
생성자 함수를 이용한 객체 생성- 08.html  (0) 2014.12.12
TAG eclipse, javascript, prototype, web, 객체, 객체 리터럴, 리터럴, 스크립트, 웹, 웹 개발, 웹개발, 이클립스, 자바 스크립트, 자바스크립트, 자바스크립트 개발, 태그를 입력해 주세요., 프로토타입
Trackback (0) : Comment (0)
Posted by codedragon codedragon

댓글을 달아 주세요

2014. 12. 28. 00:33

배열에 객체 저장- 10.html Development/JavaScript, jQuery, ...

배열에 객체 저장

   

학습내용

자바와 유사

동일한 패턴 사용시

   

소스 코드

   

  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>


   

 

출력결과

   

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

프로토타입을 사용한 메소드 생성- 11.html  (0) 2015.01.14
prototype 확인- 21.html  (0) 2015.01.04
배열에 객체 저장- 10.html  (0) 2014.12.28
09.html-생성자 함수를 이용한 객체 생성  (0) 2014.12.22
생성자 함수를 이용한 객체 생성- 08.html  (0) 2014.12.12
배열과 객체의 사용- 07.html  (0) 2014.12.06
TAG eclipse, javascript, web, 스크립트, 웹, 웹 개발, 웹개발, 이클립스, 자바 스크립트, 자바스크립트, 자바스크립트 개발
Trackback (0) : Comment (0)
Posted by codedragon codedragon

댓글을 달아 주세요

2014. 12. 23. 11:28

Eclipse-이클립스에서 삭제된 파일 복구하기 Development

Package Exploer에서

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

Restore from Local History… 메뉴 클릭

   

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

해당 파일 체크 후 >

Restore 클릭

   

   

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

'Development' 카테고리의 다른 글

Twitter API-TwitterDev Gallery  (0) 2015.01.09
Visual Studio Online – TechDays, pdf  (0) 2014.12.23
Eclipse-이클립스에서 삭제된 파일 복구하기  (0) 2014.12.23
앱인벤터(App Inventor) 교제  (0) 2014.12.09
갈릴레오(Galileo) 보드를 활용한 홈네트워크&자동차 만들기 교제  (0) 2014.12.09
아두이노(Arduino) 교제  (0) 2014.12.09
TAG Android, App, C language, C Programming, C 프로그래밍, c언어, C프로그래밍, eclipse, google, java, java programming, javascript, JDK, mobile, PYTHON, python Language, Python Programming, Python 프로그래밍, python언어, Python프로그래밍, restore, Restore from Local History, sdk, smartphone, SUN, Sun microsystems, web, 개발언어, 구글, 모바일폰, 복구, 복구가능, 복원, 삭제 파일, 삭제 파일 복구, 삭제된 파일, 삭제한 파일, 삭제한 파일 복구, 스마트폰, 스크립트, 씨 프로그래밍, 씨프로그래밍, 안드로이드, 앱, 웹, 웹 개발, 웹개발, 이클립스, 자바, 자바 스크립트, 자바 프로그래밍, 자바스크립트, 자바스크립트 개발, 태그를 입력해 주세요., 파이썬, 파일 복구, 파일 복원, 히스토리
Trackback (0) : Comment (0)
Posted by codedragon codedragon

댓글을 달아 주세요

2014. 12. 22. 19:15

09.html-생성자 함수를 이용한 객체 생성 Development/JavaScript, jQuery, ...

생성자 함수를 이용한 객체 생성 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>


   

 

출력결과

   

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

prototype 확인- 21.html  (0) 2015.01.04
배열에 객체 저장- 10.html  (0) 2014.12.28
09.html-생성자 함수를 이용한 객체 생성  (0) 2014.12.22
생성자 함수를 이용한 객체 생성- 08.html  (0) 2014.12.12
배열과 객체의 사용- 07.html  (0) 2014.12.06
속성 제거- 06.html  (0) 2014.11.30
TAG eclipse, javascript, web, 객체, 객체 생성, 객체생성, 생성, 생성자, 생성자 함수, 생성자함수, 스크립트, 웹, 웹 개발, 웹개발, 이클립스, 자바 스크립트, 자바스크립트, 자바스크립트 개발
Trackback (0) : Comment (0)
Posted by codedragon codedragon

댓글을 달아 주세요

2014. 12. 12. 00:31

생성자 함수를 이용한 객체 생성- 08.html Development/JavaScript, jQuery, ...

   

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

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

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

   

소스 코드

   

  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>

 

   

출력결과

   

   

   

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

배열에 객체 저장- 10.html  (0) 2014.12.28
09.html-생성자 함수를 이용한 객체 생성  (0) 2014.12.22
생성자 함수를 이용한 객체 생성- 08.html  (0) 2014.12.12
배열과 객체의 사용- 07.html  (0) 2014.12.06
속성 제거- 06.html  (0) 2014.11.30
후손 선택자- 08.html  (0) 2014.11.25
TAG eclipse, javascript, web, 스크립트, 웹, 웹 개발, 웹개발, 이클립스, 자바 스크립트, 자바스크립트, 자바스크립트 개발
Trackback (0) : Comment (0)
Posted by codedragon codedragon

댓글을 달아 주세요

2014. 12. 6. 12:59

배열과 객체의 사용- 07.html Development/JavaScript, jQuery, ...

   

배열과 객체의 사용

객체를 최소로 만들고,

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

   

학습내용

자바에는 없는 형태

패턴이 바뀔 경우

   

소스 코드

   

  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>

 

   

출력결과

   

   

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

09.html-생성자 함수를 이용한 객체 생성  (0) 2014.12.22
생성자 함수를 이용한 객체 생성- 08.html  (0) 2014.12.12
배열과 객체의 사용- 07.html  (0) 2014.12.06
속성 제거- 06.html  (0) 2014.11.30
후손 선택자- 08.html  (0) 2014.11.25
빈 객체에 속성 추가- 05.html  (0) 2014.11.23
TAG eclipse, javascript, web, 스크립트, 웹, 웹 개발, 웹개발, 이클립스, 자바 스크립트, 자바스크립트, 자바스크립트 개발
Trackback (0) : Comment (0)
Posted by codedragon codedragon

댓글을 달아 주세요

2014. 11. 30. 12:55

속성 제거- 06.html Development/JavaScript, jQuery, ...

속성 제거 

객체의 프로퍼티를 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>


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

생성자 함수를 이용한 객체 생성- 08.html  (0) 2014.12.12
배열과 객체의 사용- 07.html  (0) 2014.12.06
속성 제거- 06.html  (0) 2014.11.30
후손 선택자- 08.html  (0) 2014.11.25
빈 객체에 속성 추가- 05.html  (0) 2014.11.23
객체의 활용- 04.html  (0) 2014.11.19
TAG eclipse, javascript, web, 스크립트, 웹, 웹 개발, 웹개발, 이클립스, 자바 스크립트, 자바스크립트, 자바스크립트 개발
Trackback (0) : Comment (0)
Posted by codedragon codedragon

댓글을 달아 주세요