소스1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>클로저를 이용한 bean 객체 생성</title>
    <script>
        function bean(a){
            return{'getter':function(){ return a;},
                   'setter':function(b){a=b;}};
        }
        var obj = bean(1000);
        document.write("1 : "+obj.getter()+"<br/>");
        obj.setter(500);
        document.write("2 : "+obj.getter()+"<br/>");
        obj.setter(100);
        document.write("3 : "+obj.getter());
 
    </script>
</head>
<body>
    
</body>
</html>
cs

결과1


소스2

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>클로저를 이용한 bean 객체 생성</title>
    <script>
         function student(num,kor,eng,math){
            
            return{'getnum':function(){ return num;}
                  ,'setnum':function(a){num=a;}
                  ,'getkor':function(){ return kor;}
                  ,'setkor':function(b){kor=b;}
                  ,'geteng':function(){ return eng;}
                  ,'seteng':function(c){eng=c;}
                  ,'getmath':function(){ return math;}
                  ,'setmath':function(d){math=d;}
            };
        }
        
        var arr = new Array();
        arr[0]=student(1111,80,90,80);
        arr[1]=student(2222,70,90,90);
        arr[2]=student(3333,75,64,60);
        arr[3]=student(4444,95,98,87);
        
        document.write("<table>");
        for(var bean in arr){
            document.write("<tr>");
 
            document.write("<td>");
                document.write(arr[bean].getnum()+" | ");
            document.write("</td>");
            document.write("<td>");
                document.write(arr[bean].getkor());
            document.write("</td>");
            document.write("<td>");
                document.write(arr[bean].geteng());
            document.write("</td>");
            document.write("<td>");
                document.write(arr[bean].getmath());
            document.write("</td>");
 
            document.write("</tr>");
        }
        document.write("</table>");
 
    </script>
</head>
<body>
    
</body>
</html>
cs

결과2


소스3 (this를 이용한)

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>클로저를 이용한 bean 객체 생성</title>
    <script>
    
        function student(){
            
            return{'num':0,'kor':0,'eng':0,'math':0
                  ,'getnum':function(){ return this.num;}
                  ,'setnum':function(a){this.num=a;}
                  ,'getkor':function(){ return this.kor;}
                  ,'setkor':function(b){this.kor=b;}
                  ,'geteng':function(){ return this.eng;}
                  ,'seteng':function(c){this.eng=c;}
                  ,'getmath':function(){ return this.math;}
                  ,'setmath':function(d){this.math=d;}
            };
        }
        
        var arr = new Array();
        arr[0]=student();
        arr[0].setnum(1111);
        arr[0].setkor(90);
        arr[0].seteng(95);
        arr[0].setmath(85);
        arr[1]=student();
        arr[1].setnum(2222);
        arr[1].setkor(78);
        arr[1].seteng(88);
        arr[1].setmath(95);
        
        document.write("<table>");
        for(var bean in arr){
            document.write("<tr>");
 
            document.write("<td>");
                document.write(arr[bean].getnum());
            document.write("</td>");
            document.write("<td>");
                document.write(arr[bean].getkor());
            document.write("</td>");
            document.write("<td>");
                document.write(arr[bean].geteng());
            document.write("</td>");
            document.write("<td>");
                document.write(arr[bean].getmath());
            document.write("</td>");
 
            document.write("</tr>");
        }
        document.write("</table>");
    </script>
</head>
<body>
    
</body>
</html>
cs

결과3


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

'* Programming > JavaScript' 카테고리의 다른 글

주소/우편번호 찾기 API  (0) 2019.10.24
인쇄하기  (0) 2018.03.08
THIS  (0) 2016.10.05
클로져(Closure)  (0) 2016.10.05
function(){} (함수) / 콜백함수  (0) 2016.10.04

소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>THIS</title>
    <script>
        function func1(){
            alert(window==this);
        }
        func1();
        
        var obj={'a':'aaaa','b':function(){
            return this.a;
        }};
        alert("obj.b() : "+obj.b());
        
    </script>
</head>
<body>
    
</body>
</html>
cs

결과


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

'* Programming > JavaScript' 카테고리의 다른 글

인쇄하기  (0) 2018.03.08
클로저를 이용한 bean 객체 생성  (0) 2016.10.05
클로져(Closure)  (0) 2016.10.05
function(){} (함수) / 콜백함수  (0) 2016.10.04
Math.floor() / Math.round()  (0) 2016.10.04

소스1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>클로져</title>
    <script>
        var a=1000;
        function func1(a){
           a = 100;  
            return a;
        };
        alert('첫번째 a : '+a);
        a=func1();
        alert('두번째 a : '+a);
    </script>
</head>
<body>
    
</body>
</html>
cs

결과1

처음 a는 가장위에 선언해준 a=1000이 출력되고,

두번째 a는 func1함수에 선언해준 a=100이 출력이된다.


소스2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>클로져</title>
    <script>
        var a=1000;
        function func1(a){
            function func2(){
                var a = 100;  
            };
            func2();
            return a;
        };
        alert('첫번째 a : '+a);
        a=func1(a);
        alert('두번째 a : '+a);
    </script>
</head>
<body>
    
</body>
</html>
cs

결과2

처음 a는 가장위에 선언해준 a=1000이 출력되고,

두번째 a또한 가장위에 선언해준 a=1000이 인자로 들어가서 리턴된 값이 출력이 된다.


소스3

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>클로져</title>
    <script> 
        var a=1000;
        function func1(){
            var func2 = function(){
            alert("func2");
            };
            return func2;
        };
        
        alert("첫번째 a:"+a);
        a=func1();
        a();
        alert(" 두번째 a:"+a);
        alert(" 세번째 a:"+window.a);
    </script>
</head>
<body>
    
</body>
</html>
cs

결과3

소스3이 핵심이다.

참고 사이트

https://developer.mozilla.org/ko/docs/JavaScript/Guide/Closures

http://blog.javarouka.me/2012/01/javascripts-closure.html


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

'* Programming > JavaScript' 카테고리의 다른 글

클로저를 이용한 bean 객체 생성  (0) 2016.10.05
THIS  (0) 2016.10.05
function(){} (함수) / 콜백함수  (0) 2016.10.04
Math.floor() / Math.round()  (0) 2016.10.04
*JSON  (0) 2016.10.04

함수 선언과 실행

소스

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
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <script>
        var a = func1();    //먼저 func1()실행
        document.write("  func1() : "+a+"<br/>");   //리턴받은값 1000을 a에서 출력
        document.write("<hr/>");    
        func2();            //func2(a,b)가 실행
        document.write("<hr/>");    
        func2(1,2);         //func2(a,b)가 실행
        document.write("<hr/>");
 
        var func2 = function(){         //익명클래스와 같은 느낌 익명함수. 
            document.write("실행<br/>")  //자료형의 마지막은 함수형
        }
        func2();
 
        function func1(){
            document.write("javasc..");
            return 1000;
        }
        function func2(){
            document.write("func2e");
            return;
        }
         function func2(a,b){
            document.write("func2"+"<br/>");
            document.write("a="+a+", b="+b);
            return;
        }    
        
    </script>
</head>
<body>
    
</body>
</html>
cs

결과


+추가

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <script>
        var a = func1();    //먼저 func1()실행
        document.write("  func1() : "+a+"<br/>");   //리턴받은값 1000을 a에서 출력
        document.write("<hr/>");    
        func2();            //func2(a,b)가 실행
        document.write("<hr/>");    
        func2(1,2);         //func2(a,b)가 실행
        document.write("<hr/>");
 
        var func2 = function(){         //익명클래스와 같은 느낌 익명함수. 
            document.write("실행<br/>")  //자료형의 마지막은 함수형
        }
        func2();
 
        function func1(){
            document.write("javasc..");
            return 1000;
        }
        function func2(){
            document.write("func2e");
            return;
        }
         function func2(a,b){
            document.write("func2"+"<br/>");
            document.write("a="+a+", b="+b);
            return;
        } 
        
        document.write("<hr/>"); 
        document.write("<hr/>"); 
        var arr1=[1,100,func2,300];
        arr1[2](); //하면 배열에 들어간 함수가 실행됨. 
 
        var obj1={'a':"aa", 'b':func2, 'c':1000};
        obj1.b();
    </script>
    
</head>
<body>
    
</body>
</html>
cs

추가 된 부분

        document.write("<hr/>"); 
        document.write("<hr/>"); 
        var arr1=[1,100,func2,300];
        arr1[2](); //하면 배열에 들어간 함수가 실행됨. 
 
        var obj1={'a':"aa", 'b':func2, 'c':1000};
        obj1.b();

 결과


콜백함수

소스1

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function func1(){
            document.write("func1()<br/>");
        }
        function func3(){
            document.write("func3()<br/>");
        }
        function func2(a){
            a();
            return;
        }
        
        func1();
        func2(func3); //callback
        func2(function(){
            document.write("<h1>aaa</h1>");
            return;
        });
    </script>
</head>
<body>
    
</body>
</html>
cs

결과1


소스2

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
       var func1 = function(){
            alert("func 1");
            return;
        };/*선언*/
        func1();/*실행*/
        
        (function(){
            alert("func 0");
            return;
        })();/*선언과 동시에 실행*/
        
        var $ = function(a){
            a();
            return;
        };
        $(function(){
            var a = 100;
            alert('a : '+a);
        });
    </script>
</head>
<body>
    
</body>
</html>
cs

결과2 (순서대로 확인버튼 누른것이다)


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

'* Programming > JavaScript' 카테고리의 다른 글

THIS  (0) 2016.10.05
클로져(Closure)  (0) 2016.10.05
Math.floor() / Math.round()  (0) 2016.10.04
*JSON  (0) 2016.10.04
구구단 만들기  (0) 2016.10.04

Math.floor()

소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var a = Math.floor(0.6);
        var b = Math.floor(1.76);
        var c = Math.floor(5);
        var d = Math.floor(5.1);
        var e = Math.floor(-5.1);
        var f = Math.floor(-5.9);
        
        var x = a + "<br>" + b + "<br>" + c + "<br>" + d + "<br>" + e + "<br>" + f;
        
        document.write(x);
    </script>
</head>
<body>
    
</body>
</html>
cs

결과


Math.round()

소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var a = Math.round(2.6);
        var b = Math.round(2.50);
        var c = Math.round(2.49);
        var d = Math.round(-2.51);
        var e = Math.round(-2.5);
        var f = Math.round(-2.49);
        
        var x = a + "<br>" + b + "<br>" + c + "<br>" + d + "<br>" + e + "<br>" + f;
        
        document.write(x);
    </script>
</head>
<body>
    
</body>
</html>
cs

결과


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

'* Programming > JavaScript' 카테고리의 다른 글

클로져(Closure)  (0) 2016.10.05
function(){} (함수) / 콜백함수  (0) 2016.10.04
*JSON  (0) 2016.10.04
구구단 만들기  (0) 2016.10.04
기본 자바스크립트 사용하기  (0) 2016.09.28

+ Recent posts

티스토리툴바