자바스크립트 함수와 이벤트

2021. 4. 8. 22:29ㆍ자바스크립트

728x90

함수의 종류

  • 선언적 함수
    • function name(){ };
  • 익명 함수
    • 변수에 저장하여 실행
    • 다른 함수의 매갸변수 자리에서 사용
    • function (){ }
  • 즉시 실행함수
    • 선언과 동시에 실행
    • (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
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#result {
    border: 1px solid red;
    height: 300px;
    font-size: 15px;
}
</style>
<script>
    window.onload = init;
 
    function call1() {
        result.innerHTML = this.innerText;
    }
    function call2() {
        result.innerHTML = this.innerText;
        var f = function() {
            alert("이름 없음")
        }
        result.innerHTML += "<br>" + f;
        f();
 
    }
    function call3() {
        result.innerHTML = this.innerText;
        (function() {
            alert("선언과 동시에 실행")
        })();
    }
    function call4() {
        result.innerHTML = this.innerText;
 
        var arr1 = [ 1, 2, 3, 4, 5 ];
        var arr2 = Array();
        var arr3 = Array(5);
        var arr4 = Array(10, 20, 30);
        result.innerHTML += "arr1=" + arr1.length;
        result.innerHTML += "<br>arr2=" + arr2.length;
        result.innerHTML += "<br>arr3=" + arr3.length;
        result.innerHTML += "<br>arr4=" + arr4.length;
        result.innerHTML += "<br>arr4=" + arr4;
 
        sum(10, 20, 30);
        sum2(10, 20, 30, 40, 50);
 
    }
 
    function sum(a, b, c) {
        result.innerHTML += "<br>" + (a + b + c);
    }
 
    function sum2() {
        var total = 0;
        for (var i = 0; i < arguments.length; i++) {
            total += arguments[i];
        }
        result.innerHTML += "<br>" + total;
    }
 
    function sum3() {
        var total = 0;
        for (var i = 0; i < arguments.length; i++) {
            total += arguments[i];
        }
        return total;
    }
 
    function call5() {
        result.innerHTML = this.innerText;
        result.innerHTML += "<br>" + sum3(10, 20, 30, 40, 50);
    }
 
    function call6() {
        result.innerHTML = this.innerText;
 
        t1(3, 4);
 
        function sqare(x) {
            return x * x;
        }
 
        function t1(width, height) {
            var c = Math.sqrt(sqare(width) + sqare(height));
            alert(c);
        }
    }
    function call7() {
        result.innerHTML = this.innerText;
        //callback 함수: 함수를 받은 쪽에서 호출, 매개변수로 전달되는 함수
        var f = function() {
            alert("callback 함수");
        }
        t7(f);
        setInterval(function() {
            result.innerHTML = new Date();
        }, 1000)
    }
    function t7(f) {
        for (var i = 0; i < 3; i++) {
            f();
        }
    }
    //callback 함수: 함수가 파라메타로 전달, 함수호출은 받은 쪽에서 수행
    function call8() {
        result.innerHTML = this.innerText;
        var cnt = 0;
        setInterval(
                function() {
                    var r = Math.random() * 256;
                    var g = Math.random() * 256;
                    var b = Math.random() * 256;
                    var sz = Math.random() * 30;
                    result.style.backgroundColor = `rgb(${r},${g},${b})`;
                    cnt++;
                    result.innerHTML += `<span style="font-size:${sz}px">${cnt}</span>`;
                }, 1000)
    }
 
    function call9() {
        result.innerHTML = this.innerText;
        var cnt = 0;
        setInterval(function() {
            var r = Math.random() * 80;
            result.style.fontSize = `${r}px`;
            cnt++;
            result.innerHTML += cnt;
        }, 1000)
    }
 
    function call10() {
        //클로져: 지역변수는 함수종료후 자동 제거
        //     지역변수가 다른 곳에서 사용되면 제거되지 않고 남아 있음
        //    지역변수는 함수내에서만 유효
        //    지역변수를 담고 있는 함수를 리턴해서 남아 있도록한다.
 
        var f = f10("자바스크립트");
        f("허리야 ㅠㅜ");
 
        f10("HTML")("아이고");
    }
 
    function f10(subject) {
        var a = 100;
 
        return function(b) {
            alert(subject + a + b);
        };
 
    }
 
    function add() {
        var counter = 0;
        return function() {
            counter++;
            return counter;
        };
    }
 
    ff = add();
 
    function call11() {
        result.innerHTML = ff();
    }
 
    function call12() {
        for (let i = 1; i <= 3; i++) {
            setTimeout(function() {
                alert(i);
            }, 0);
        }
    }
 
    function call13() {
        for (var i = 1; i <= 3; i++) {
            (function(aa) {
                setTimeout(function() {
                    alert(aa);
                }, 0);
            })(i);
        }
    }
    
    function call14() {
        var arr = [100,200,300];
        arr.forEach(function(elt, i, array) {
            result.innerHTML += `<br> ${i}번째 ${elt}....${array}`;
        });
        
        var arr = ["자바","프레임워크","웹"];
        arr.forEach(function(element) {
            result.innerHTML += `<br> ${element}`;
        });
    }
    
    function call15() {
        function sum(a,b){
            result.innerHTML += `<br> ${a+b}`;
        }
        sum(10,20);
        
        var f = (a,b) => {result.innerHTML += `<br> 람다식? ${a+b}`;};
        f(10,20);
        
        var f2 = (a,b) => a+b
            result.innerHTML += `<br> 람다식? ${f2(10,20)}`;
    }
 
    function init() {
        btn1.onclick = call1;
        btn2.onclick = call2;
        btn3.onclick = call3;
        btn4.onclick = call4;
        btn5.onclick = call5;
        btn6.onclick = call6;
        btn7.onclick = call7;
        btn8.onclick = call8;
        btn9.onclick = call9;
        btn10.onclick = call10;
        btn11.onclick = call11;
        btn12.onclick = call12;
        btn13.onclick = call13;
        btn14.onclick = call14;
        btn15.onclick = call15;
    }
</script>
</head>
<body>
    <button id="btn1">선언적함수</button>
    <button id="btn2">익명함수</button>
    <button id="btn3">즉시 실행함수</button>
    <button id="btn4">매개변수</button>
    <button id="btn5">리턴</button>
    <button id="btn6">내부함수</button>
    <button id="btn7">콜백함수</button>
    <button id="btn8">콜백함수2</button>
    <button id="btn9">콜백함수3</button>
    <button id="btn10">클로저</button>
    <button id="btn11">클로저2</button>
    <button id="btn12">클로저3</button>
    <button id="btn13">클로저4</button>
    <button id="btn14">클로저5</button>
    <button id="btn15">화살표함수(람다식)</button>
    <hr>
    <div id="result">결과?</div>
</body>
</html>
 cs

함수선언 및 호출

  • 함수선언
    • function name(){ 명령 };
    • function(){ 명령 };
  • 함수호출
    • name();
  • 같은 내용을 여러번 사용할때 (객체지향)
  • 매개변수
    • parameter
    • 함수선언시 외부 값을 받기 위해 만드는 변수
    • 매개변수 기본값 지정하기

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      14

      15

      16

      17

      18

      19

      20

      21

      22

      23

      document.querySelector("button:nth-of-type(5)").onclick = function() {

                  here.innerHTML = this.innerText;

                  call(10, 20, 40);

                  call();

                  call(100);

                  call(100,200);

                  call(100, "",200);

                  call("", "",200);

                  call("", "e",200);

              };

              //매개변수 default 값주기

              function call(a, b, c) {

                  if(!a) a = 1;

                  if(!b) b = 2;

                  if(!c) c = 3;

                  here.innerHTML += "<br>" + (a + b + c);

              }

              btn6.onclick = function() {

                  var arr = [10,20,30,40,50];

                  arr.forEach(function(item, i) {

                      here.innerHTML += "<br>" + i +"번째:" + item+ ":" + arguments[0];

                  })

              }

      Colored by Color Scripter

      		 cs

변수

  • 스코프
    • 변수가 적용되는 범위
      1. 로컬변수
        • 한 함수 안에서만 사용
        • 함수내에서 var 선언
      2. 글로벌변수
        • 스크립트 소스 천체에서 사용
        • 함수 밖에서 선언하거나
        • 예약어 없이 선언
  • 호이스팅
    • 함수 안에 있는 선언들을 모두 끌어올림(hoisting)
    • 해당 함수 유효 범위의 최상단에 선언하는 것
      1. 자바스크립트 interprereter가 함수 실행 전 해당 함수를 훑는다.
      2. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
    • 함수 블록 {} 안에서 유효
    • 실제로 코드가 끌어올려지는 건 아님, 메모리 변화 없음
    • 변수에 자장된 함수 표현식은 호이스팅 되지 않음
  • 변수의 선언과 재할당
    • var로 선언된 변수는 재할당 및 재선언이 가능함
  • let / const
    • ES6 부터 예약어 추가
    • 호이스팅, 재선언으로 인한 오류 때문
    • 스코프 범위
      • let, const < var < ' '
    • let
      • {}블록안에서만 쓸 수 있음
      • 호이스팅, 재선언 불가
      • 재할당 가능
    • const
      • {}블록안에서만 쓸 수 있음
      • 호이스팅, 재선언, 재할당 불가
    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>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script>
    //선언하지 않고 사용한 변수 = 글로벌
        function call() {
        for(j2=1; j2<=5; j2++){
            console.log("j2="+j2);
        }
        for(var i2=1; i2<=5; i2++){
            console.log("i2="+i2);
        }
        for(var i3=1; i3<=5; i3++){
            console.log("i3="+i3);
        }
        console.log("j2="+j2);
        }
    </script>
    </head>
    <body>
     
    </body>
    </html>
    		 cs
  • 자바스크립트 스타일 가이드
    1. 전역변수 최소화
    2. var 변수는 함수 시작시 선언
    3. for문의 카운터 변수 사용시 var 지양

이벤트와 이벤트핸들러

이벤트

  • 웹 브라우저 안에서 브라우저나 사용자가 행하는 동작
  • 마우스 키보드 사용시, 웹 문서를 부를 시, from 태그에 내용 입력시 발생
    1. 마우스 이벤트
      • click
      • double click
      • mousedown : 요소를 눌렀을 때
      • mouseup : 요소를 눌렀다 뗐을 때
      • mousemove : 요소 위에서 움직일때
      • mouseover : 요소 위로 올라갈때
      • mouseout : 요소 밖으로 나갈때
    2. 키보드
      • keydown : 키를 누르는 동안
      • keypress : 키가 눌렸을 때
      • keyup : 키에서 뗄 때
    3. from
      • blur : 폼 요소에서 포커스를 잃었을 때
      • change : 목록이나 체크상태가 변경 되었을 때
      • focus : 폼 요소에 포커스가 놓였을 때
      • reset : 폼이 리셋되었을 때
      • submit : submit 버튼을 클릭했을 때

이벤트 핸들러

  • 이벤트가 발생하면 처리하는 함수
  • <HTML태그 on이름 = "함수()">
  • ex.<태그 onclick="alter()">
  • 여러가지 이벤트 처리시 자바스크립트 함수로 묶어서 처리

DOM을 이용한 이벤트 처리

  • 자바스크립트로 HTML을 가져와 이벤트 처리
  • 웹요소.onclick=함수;
  • 다양한 선택자를 사용할 수 있는 document.querySelector
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#here{    width: 300px; height: 300px; border: 1px solid red;}
</style>
<script>
function call1() {
    var t = document.createTextNode("text노드");
    var e = document.createElement("p");
    e.appendChild(t);
    var h = document.getElementById("here");
    h.appendChild(e);
    
    h.innerHTML +="<br><p> innerHTML로 p생성</p>";
    
    var e = document.createElement("img");
    e.src="../sources/16/images/doit.jpg";
    h.appendChild(e);
}
 
function call2()    {
    var img = document.querySelector("#my");
    aa="src"
    img.setAttribute(aa, "../sources/15/images/flower.jpg")
}
 
function call3()    {
    var img = document.querySelector("#my");
    img.src="../sources/16/images/doit.jpg";
}
 
 
</script>
</head>
<body>
<h1>DOM</h1>
 
<button onclick="call1()">동적객체생성</button>
<button onclick="call2()">동적객체속성 변경</button>
<button onclick="call3()">동적객체속성 변경</button>
<div id="here"></div>
</body>
</html>
 cs

 

728x90

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

자바스크립트 기본문법  (0) 2021.04.05
자바스크립트 기초  (0) 2021.04.05

관련글

티스토리툴바