JavaScript_STUDY/JavaScript08.html at master · CreativePersonDW/JavaScript_STUDY · GitHub

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<html lang='ko'>
    <head>
        <title>함수</title>
    </head>
    <body>
        <h1>함수</h1>
        <h3>function 함수명(){소스 코드 작성}로 작성해서 실행하는 방법</h3>
        <button onclick="test1();">실행확인</button>
        <p id="p1"></p>
        <script>
            function test1(){
                document.getElementById("p1").innerHTML="test1()함수 실행됨.";
            }
        </script>

        <h3>함수명 = function(){소스 코드 작성} : 익명함수</h3>
        <!-- 대표적인 익명함수형 예제는 window.onload이다. -->
        <!-- 위의 함수 형태로 썼을 시 -->
        <script>
        // function window.onload(){
        //     alert("실행 되니?");
        // }
        window.onload=function(){
            // alert("실행 되니?");
        }
        </script>

        <h3>스스로 실행하는 함수 : (function(){})();</h3>
        <p id = "p2"></p>
        <script>
            (function(){
                // alert("난 언제?");
                document.getElementById("p2").innerHTML += "자동으로 혼자 실행됨...<br>";
            })()
        </script>

        <h3>함수의 전달인자와 매개변수</h3>
        <button id="btn1">실행확인</button>
        <p id="p3"></p>
        <script>
            function test3(value){
                document.getElementById("p3").innerHTML += value + "<br>";
            }
            document.getElementById("btn1").onclick = function(){
                // 지정된 매개변수와 같은 값을 전달 했을 시
                // test3(window.prompt('메세지를 입력하세요.'));

                // 지정된 매개변수보다 많은 개수를 전달 했을 시
                // 초과한 전달인자는 무시한다.
                // test3('안녕하세요','반갑습니다');

                // 지정된 매개변수보다 적은 개수를 전달 했을 시
                // 전달되지 않은 매개변수는 undefined로 자동 설정된다.
                test3();
            }
        </script>

        <h3>함수의 리턴처리</h3>
        <button onclick="test4();">실행확인</button>
        <p id="p5"></p>
        <script>
            function returnFunction(){
                return Math.floor(Math.random()*100)+1;
            }
            function test4(){
                var value=returnFunction();
                document.getElementById('p5').innerHTML = value;
            }
        </script>

        <h3>가변인자 함수 테스트</h3>
        <button onclick="test5();">실행확인</button>
        <p id="p5"></p>
        <script>
            function sumAll(){
                console.log('arguments의 타입 : ' + typeof(arguments));
                console.log('arguments의 길이 : ' + arguments.length);
                console.log(arguments);

                var sum = 0;
                for(var i = 0 ; i < arguments.length ; i++){
                    sum += arguments[i];
                }
                document.getElementById('p5').innerHTML+='더하기 결과 : ' + sum + "<br>";
            }

            function test5(){
                sumAll(1,2,3,4,5,6,7,8,9,10);
                sumAll(11,22,33,44);
            }
        </script>


        <br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br>
    </body>
</html>