오봉이와 함께하는 개발 블로그

JavaScript - 함수 사용법 기초 본문

FE/JavaScript

JavaScript - 함수 사용법 기초

오봉봉이 2021. 12. 8. 17:14
728x90

자바스크립트 함수

  • 자동 호출되는 함수
  • 선언적 함수(일반 함수 : function)
  • 익명 함수
  • 콜백 함수
  • 화살표 함수
  • 디폴트 매개변수

자동 호출함수 & 선언적 함수

  • 독립적인 모듈
  • 특정 기능을 수행하고 결과를 돌려주는 독립적인 코드 집합
  • 메소드, 모듈, 기능, 프로시저 등으로 불림
  • 함수를 사용하기 위해서는 반드시 호출해야 함
  • 함수 선언 형식
    • function 함수명() { 함수가 수행하는 문장; }
  • 자동 호출되는 함수 : 스스로 동작하는함수
    • (function() { 함수가 수행하는 문장} })();
  • 함수 사용
    • 함수를 사용하기 위해서는 반드시 호출해야 함
    • 함수를 만들었다고 해서 스스로 기능을 수행하는 것은 아님
    • 함수 호출 방법 : 함수명() (함수 이름만 호출하면 수행이 된다)
    • function show() { alert("show()함수 입니다"); }
      • 함수 호출
        • show(); // 방법 1 : 필요한 곳에서 호출
        • <body onLoad="show()"> // 방법 2 : HTML 이벤트 속성에서 호출
        • function show() { alert("show()함수 입니다"); input(); // 다른 함수 호출 } // 방법 3 : 다른 함수 내에서 호출

함수 예제 코드

function1.html
        <script type="text/javascript">
            // 자동 호출되는 함수 : 호출하지 않아도 스스로 동작하는 함수
            (function() {
                alert("자동 실행");
            })();
            // 함수 정의(함수 선언) - 선언과 동시에 정의
            function show() {
                alert("show()함수 입니다.");
            }
            // 함수 호출
            show();
        </script>
</head>
<!-- HTML 태그 이벤트에서 함수 호출 -->
<!-- <body onload="show()"> -->
function2.html
        <script type="text/javascript">
            // 다른 함수 내에서 함수 호출
            function start() {
                var answer = confirm("배경색을 변경하시겠습니까?")
                if(answer) {
                    changeColor();
                }
                else {
                    alert("취소하였습니다.");
                }
            }
            function changeColor() {
                var color = prompt("색상 입력", "red / blue / green");
                document.write(color);
                document.bgColor = color;
            }
            start();
        </script>
functionEx1.html
        <script type="text/javascript">
            function input() {
                var color = prompt("색상 입력", "red / blue / green");
                document.bgColor = color;
            }
        </script>
</head>
<body>
    <button onclick="input()">색상 입력</button>
</body>
functionEx2.html
        <script type="text/javascript">
            function input() {
                num = prompt("숫자 입력");
                show();
            }
            function show() {
                for (var i = 0; i < num; i++) {
                    // document.write("★"); // 버튼 사라짐
                    document.body.innerHTML += "★"; // 버튼 유지
                }
            }
        </script>
</head>
<body>
    <button onclick="input()">숫자 입력</button>
</body>
728x90
저작자표시

'FE > JavaScript' 카테고리의 다른 글

JavaScript - 내장 객체(Date, Array, Math, String 객체)  (0) 2021.12.09
JavaScript - 함수 사용법 기초 2  (0) 2021.12.09
JavaScript - 배열 기초  (0) 2021.12.08
JavaScript - 숫자(정수, 실수) 형변환  (0) 2021.12.08
JavaScript - 제어문 예제  (0) 2021.12.08
'FE/JavaScript' Related Articles more
Comments