달력

7

« 2020/7 »

  •  
  •  
  •  
  • 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
  •  
2020. 5. 15. 00:30

모던 JavaScript 튜토리얼 Development/JavaScript, jQuery, ...



 

 

모던 JavaScript 튜토리얼

 

https://ko.javascript.info/


 


저작자표시비영리

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

Axios - HTTP 비동기 통신 라이브러리  (0) 2020.06.21
모던 JavaScript 튜토리얼  (0) 2020.05.15
JavaScript 자바스크립트 개발자 포럼  (0) 2020.04.18
Axios 러닝 가이드 - Axios 라이브러리 공식 문서(번역판)  (0) 2020.04.09
.offset() 메소드 vs .position() 메소드  (0) 2020.03.28
상속, 클래스 기반의 언어에서 상속, 프로토타입 기반의 언어의 상속  (0) 2020.03.22
TAG javascript, 자바스크립트
Trackback (0) : Comment (0)
Posted by codedragon codedragon

댓글을 달아 주세요

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

댓글을 달아 주세요