728x90
자바스크립트 함수
함수의 형식
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>함수(function)</title> <script> /* // **함수의 형식 function 함수명([인자...[,인자]]) { 코드 return 반환값; } */ // **함수의 정의와 호출 // *함수 정의 function numbering(){ // 함수명 : numbering i = 0; // 변수 i선언 0으로 초기화 // 반복문 i는 10까지 while(i<10){ // 반복문 i는 10까지 document.write(i); // i를 브라우저에 출력 i += 1; // i를 1씩 증가 } } // *함수 호출 numbering(); </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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>함수의 효용성</title> <script> /* 0~9까지 출력을 5번 해야한다면...? 아래와 같이 코드를 작성하면 된다. 하지만 1000번, 100000번 해야한다면? 매번 이렇게 적을 수 없을 것이다. 하지만 함수를 사용한다면 보다 쉽고, 효율적으로 코드를 작성할수 있다. */ var i = 0; while(i<10){ document.write(i); i += 1; } var i = 0; while(i<10){ document.write(i); i += 1; } var i = 0; while(i<10){ document.write(i); i += 1; } var i = 0; while(i<10){ document.write(i); i += 1; } var i = 0; while(i<10){ document.write(i); i += 1; } // *0~9까지 출력해주는 함수 정의하고 함수를 사용하고 싶을 때마다 // 호출하여 사용하면된다. function numbering(){ var i = 0; while(i < 10){ document.write(i+"<br/>"); i += 1; } } // *함수 호출 // 함수를 5번 호출하여 출력 numbering(); numbering(); numbering(); numbering(); numbering(); //하지만 호출을 5번하는 것은 상당히 간편해 보이지만 //앞서 말한것 처럼 1000번 100000번 해야한다면? //이때는 반복문을 사용하면 보다 생산성을 높일 수 있다. for(var i=0; i<5; i++){ numbering(); i += 1; } </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 49 50 51 52 53 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>함수의 입력과 출력</title> <script> // **함수의 출력 // *함수 정의 function get_member1(){ return 'DoubleS'; // 결과를 반환하고 함수를 중지시킨다. } function get_member2(){ return 'DoubleK'; } function get_member3(){ return 'DoubleJ'; } // *함수 호출 console.log(get_member1()); console.log(get_member2()); console.log(get_member3()); // **함수의 입력 // *함수 정의 function get_argument(arg){ // arg는 매개변수, parameter return arg * 1000 ; // 결과 값을 호출한 곳으로 반환 } alert(get_argument(1)); // 1은 인자, argument alert(get_argument(2)); // **함수의 복수의 인자 // *함수 정의 function get_arguments(arg1, arg2){ // 복수의 매개변수를 정의 return arg1 + arg2 ; // 결과 값을 호출한 곳으로 반환 } // *함수 호출 alert(get_arguments(1, 2)); // 3 출력 alert(get_arguments(3, 4)); // 7 출력 </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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>함수를 정의 하는 다른 방법</title> <script> var numbering = function() { i = 0; while(i<10){ document.write(i); i += 1; } } numbering(); // 익명함수 : 정의와 호출을 동시에, 1회성으로 호출할 경우에 사용 (function() { i = 0; while(i<10){ document.write(i); i += 1; } })(); </script> </head> <body> </body> </html> | cs |