[JavaScript] 함수 호출 기능

2024. 4. 27. 23:17· FRONT-END/└ JS

환경 : Visual Studio Code

 

 

[ 함수(Function) ]

  • 혼자서 특정 기능을 처리하도록 구성된 코드 덩어리로, 원할 때 실행 가능
  • 화면에서 어떤 변화가 발생하면 함수가 실행되도록 구성하는 것이 중요

 

[ Event Binding/Handling ]

  • 미리 작성해둔 JavaScript 함수를 태그의 특정 상황에 연결 지음
  • 예) onclick : 클릭했을 때, oninput : 입력했을 때

     

        

출력결과

    (+) 콘솔 내에서도 hello(); 함수를 호출할 수 있다!

 

 

[ 주요 코드 ]

    <!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현 -->
    <script type="text/javascript">

        function hello() {
            console.log("안녕");
        }
        //hello(); //호출 함수(call)
        
        function sum(){
            var total = 0;
            for(var i=1; i<=100; i++) {
                total += i;
            }
            console.log(total);
        }

        function seven(){
            var count = 0;//카운트 측정을 위한 변수를 선언
            for(var i=1; i<=100; i++) {//1
                if(i % 7 == 0) {//2
                    count++;
                }
            }
            console.log("7의 배수 개수 = " + count);//최종 결과 확인
        }

    </script>
</head>
<body>

    <div class="container w-500">
        <div class="cell center">
            <h1>자바스크립트 함수</h1>
        </div>

        <div class="cell">
            <button onclick="hello();">안녕</button>
        </div>
        <div class="cell">
            <h2 onclick="hello();">안녕</h2>
        </div>

        <!-- 다음 글자를 누르면 콘솔 화면에 결과가 나오도록 함수와 호출 구현 -->
        <div class="cell">
            <p onclick="sum();">1부터 100까지 합계는?</p>
        </div>

        <div class="cell">
            <span onclick="seven();">1부터 100사이의 7의 배수 개수는?</span>
        </div>

    </div>

</body>
</html>

     (+) 버튼을 누르면 콘솔 화면에 결과가 나오도록 function()을 설정해주고, onclick() 속성을 활용하여 사용자가 클릭했을 경우 해당 함수가 호출되도록 구현.

     (+) 함수 호출은 스크립트 내에서도 가능하다 (이를 활용하여 함수 내에서 다른 함수를 가져올 수 있다. 확장성!)


[ 전체 코드 ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript 예제</title>

    <!-- 구글 폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
     
    <!-- 내가 구현할 스타일 -->
    <link rel="stylesheet" type="text/css" href="../css/commons.css">
    <link rel="stylesheet" type="text/css" href="../css/test.css">
    
    <!-- font awesome 아이콘 CDN -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>

    </style>

    <!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현 -->
    <script type="text/javascript">
        /*
            함수(function)
            - 혼자서 특정 기능을 처리하도록 구성된 코드 덩어리
            - 원할 때 실행할 수 있어야 한다
            - 화면에서의 어떤 변화가 발생하면 함수가 실행되도록 구성하는 것이 중요
        */

        function hello() {
            console.log("안녕");
        }
        //hello(); //호출 함수(call)
        
        function sum(){
            var total = 0;
            for(var i=1; i<=100; i++) {
                total += i;
            }
            console.log(total);
        }

        function seven(){
            var count = 0;//카운트 측정을 위한 변수를 선언
            for(var i=1; i<=100; i++) {//1
                if(i % 7 == 0) {//2
                    count++;
                }
            }
            console.log("7의 배수 개수 = " + count);//최종 결과 확인
        }

    </script>
</head>
<body>


    <div class="container w-500">
        <div class="cell center">
            <h1>자바스크립트 함수</h1>
        </div>
        <!--
            미리 작성해둔 Javascript 함수를 태그의 특정 상황에 연결(event binding/handling)
            - onclick은 클릭했을 때
            - oninput은 입력했을 때

        -->
        <div class="cell">
            <button onclick="hello();">안녕</button>
        </div>
        <div class="cell">
            <h2 onclick="hello();">안녕</h2>
        </div>


        <!-- 다음 글자를 누르면 콘솔 화면에 결과가 나오도록 함수와 호출 구현 -->
        <div class="cell">
            <p onclick="sum();">1부터 100까지 합계는?</p>
        </div>

        <div class="cell">
            <span onclick="seven();">1부터 100사이의 7의 배수 개수는?</span>
        </div>

    </div>

</body>
</html>

 

 

 

 

 

개인 공부 기록용입니다:)

728x90