· FRONT-END/└ JS

[ JavaScript ] 모듈형 자바스크립트

감자도리22 2024. 5. 15. 22:48

환경 : Visual Studio Code

팝업 ㄹㅇ 떠있는 줄 알고 버튼 누를 뻔;;

 

[ 주요 코드 ]

    <script type="text/javascript">
        //목표 : 
        //HTML에 단 한 줄도 자바스크립트 코드를 쓰지 않고 버튼을 누르면 알림창을 출력하도록 만들기
        function hello(){
            alert("클릭!");
        }

        //call back (예약 실행)
        //window의 load가 완료되면 특정 함수를 예약 실행하도록 지시
        //- load 이벤트는 모든 준비가 끝난 시점을 의미
        window.onload = function(){
            var button = document.querySelector("button");
            // console.log(button);
            button.addEventListener("click", function(){
                alert("클릭!");
            });
        };

    </script>

     (+) window.onload로 함수를 불러오게 되면, window의 로드가 완료되면 특정 함수를 실행하도록 설정한 것이다.

     (+)  button.addEventListener("click", function(){
                alert("클릭!");
            });

            addEventListener()를 사용하여 함수를 호출!!! 이게 더 좋다고 한다..

 

[ 전체 코드 ]

<!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">
        //목표 : 
        //HTML에 단 한 줄도 자바스크립트 코드를 쓰지 않고 버튼을 누르면 알림창을 출력하도록 만들기
        function hello(){
            alert("클릭!");
        }

        //call back (예약 실행)
        //window의 load가 완료되면 특정 함수를 예약 실행하도록 지시
        //- load 이벤트는 모든 준비가 끝난 시점을 의미
        window.onload = function(){
            var button = document.querySelector("button");
            // console.log(button);
            button.addEventListener("click", function(){
                alert("클릭!");
            });
        };

    </script>
</head>
<body>


    <div class="container w-500">
        <div class="cell center">
            <h1>독립모듈형 자바스크립트</h1>
        </div>
        <div class="cell">
            <button class="btn positive">click</button>
        </div>
    </div>

   
</body>
</html>

 

 

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

728x90