· FRONT-END/└ JS

[ JavaScript ] 모듈을 더욱 효율적으로 (this 사용) - 폰트 색상 바꾸기

감자도리22 2024. 5. 17. 20:20

환경 : Visual Studio Code

 

실행 결과

[ 주요 코드 ]

    <script type="text/javascript">
        window.onload = function(){
            var colorButtons = document.querySelectorAll(".btn-color");
            for(var i=0; i<colorButtons.length; i++) {
                colorButtons[i].addEventListener("click", function(){
                    //i를 사용할 수 없다(다른 함수니까)
                    //대신 this가 있다(주인공)
                    var result = document.querySelector(".result");
                    result.style.color = this.textContent;
                });
            }
        };
    </script>
</head>
<body>
    <div class="container w-700">
        <div class="cell center">
            <h1>모듈형으로 색상 변경</h1>
        </div>
        <div class="cell center result" style="font-size: 50px;">
            Hello Javascript!
        </div>
        <div class="cell center">
            <button class="btn positive btn-color">coral</button>
            <button class="btn positive btn-color">purple</button>
            <button class="btn positive btn-color">lightBlue</button>
            <button class="btn positive btn-color">lightGray</button>
            <button class="btn positive btn-color">orange</button>
        </div>
    </div>
</body>
</html>

     (+) 버튼의 클래스 명(btn-color)을 동일하게 주어 이후 버튼을 추가해도, 안의 텍스트만 색상과 동일하게 지정해준다면

          확장성을 높이며, 코드의 간결성도 챙길 수 있는 방법이다

     (+) 버튼을 배열로 가져와, 그 안에 있는 텍스트를 읽어와, 그 텍스트를 글씨체의 색상으로 적용해주는 코드이다.

           (this 사용)

[ 전체 코드 ]

<!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">
        window.onload = function(){
            var colorButtons = document.querySelectorAll(".btn-color");
            for(var i=0; i<colorButtons.length; i++) {
                colorButtons[i].addEventListener("click", function(){
                    //i를 사용할 수 없다(다른 함수니까)
                    //대신 this가 있다(주인공)
                    var result = document.querySelector(".result");
                    result.style.color = this.textContent;
                });
            }
        };
    </script>
</head>
<body>


    <div class="container w-700">
        <div class="cell center">
            <h1>모듈형으로 색상 변경</h1>
        </div>
        <div class="cell center result" style="font-size: 50px;">
            Hello Javascript!
        </div>
        <div class="cell center">
            <button class="btn positive btn-color">coral</button>
            <button class="btn positive btn-color">purple</button>
            <button class="btn positive btn-color">lightBlue</button>
            <button class="btn positive btn-color">lightGray</button>
            <button class="btn positive btn-color">orange</button>
        </div>
    </div>

   

</body>
</html>

 

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

728x90