티스토리 뷰

[JQUERY]자바스크립트

jQuery 011. 클래스(class)

가산동 2018. 9. 12. 23:33

클래스는 이전 글에서 알아봤던 함수(function)을 모아서 사용하기 위해 쓰입니다.

기본적으로 프로젝트를 진행하게되면 여러사람이 모여서 작업을 하기때문에 함수를 선언 하면서, 이름이 겹치거나 혹은 너무 많은 함수들로 인해 관리 및 수정이 어려울 수 있으 함수를 정리하기 위한 용도로 사용됩니다.


예제를 보기에 앞서 함수(function)이 생소하다면 이전글을 참고해주세요.

>> [[JQUERY]자바스크립트] - jQuery 009. 함수 function

>> [[JQUERY]자바스크립트] - jQuery 010. 함수 function ,매개변수(파라미터)


아래는 예제입니다.

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
32
33
34
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
        
            //클래스 생성
            var cal = new fnCal();
            
            //클래스 내부 함수 호출
            cal.add(5,10);
            cal.sub(10,5);
            
        });
        
        //클래스
        function fnCal(){
            //함수add
            this.add = function(a,b){
                document.write(a," + ",b," = ",a+b,"</br>");
            }
            this.sub = function(a,b){
                document.write(a," - ",b," = ",a-b),"</br>";
            }
        }
        
    </script>
</head>
    <body>
    </body>
</html>
cs

예제를 부분 별로 나눠보겠습니다.

19
20
21
22
23
24
25
26
27
28
        //클래스
        function fnCal(){
            //함수add
            this.add = function(a,b){
                document.write(a," + ",b," = ",a+b,"</br>");
            }
            this.sub = function(a,b){
                document.write(a," - ",b," = ",a-b),"</br>";
            }
        }
cs

fnCal()함수를 생성합니다. 기존에 함수(function)을 생성하는 방법과 동일합니다. '함수안에 함수를 넣는다' 쯤으로 이해하시면 됩니다.


22
23
24
            this.add = function(a,b){
                document.write(a," + ",b," = ",a+b,"</br>");
            }
cs


라인 22의 this는 'fnCal()' 자신을 말합니다. this.add = function(a,b){} 방식으로 fnCal()안에 'add(a,b)' 함수를 만듭니다. add는 a,b를 더한 값을 document.write()를 이용해 출력하는 함수입니다. 



아래는 document.wite() 의 설명입니다.

>> [[JQUERY]자바스크립트] - jQuery 003. 출력기능 document.write()


라인 25의 sub함수도 add와 마찬가지로 만들어줍니다.



10
11
            //클래스 생성
            var cal = new fnCal();
cs


class안의 함수를 호출하는 방식은 변수에 클래스를 담아 사용합니다.



13
14
15
            //클래스 내부 함수 호출
            cal.add(5,10);
            cal.sub(10,5);
cs



생성한 변수 cal에 .add 또는 .sub 를 붙여 함수를 호출하고 매개변수를 담아줍니다.


아래는 매개변수의 설명 링크입니다.

>> [[JQUERY]자바스크립트] - jQuery 010. 함수 function ,매개변수(파라미터)


결과를 예상해보면, add함수는 5+10인 15를 출력할 것이고, sub함수는 10-5인 5를 출력할 것입니다.

아래는 결과 화면입니다. 



이글에서 사용된 어도비 브라켓 설정 및 사용방법

[[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 설치하기

[[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 설정하기

[[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 제이쿼리(jquery) 연결하기


  







저작자표시 비영리 변경금지

'[JQUERY]자바스크립트' 카테고리의 다른 글

jQuery 013. parseFloat() 문자를 실수(소수점)로 바꾸기(변형하기)  (0) 2018.09.16
jQuery 012. parseInt(), 문자를 정수(숫자)로 바꾸기(형변환)  (0) 2018.09.15
jQuery 010. 함수 function ,매개변수(파라미터)  (0) 2018.09.11
jQuery 009. 함수 function  (0) 2018.09.10
jQuery 008. 증감연산자 ++,--  (0) 2018.08.04
댓글