개발새발개발/JavaScript

JavaScript - Alert Box 만들기 1편(요소 선택 및 변경, Alert 1개 만들기)

birdsfoot 2024. 12. 12.

JavaScript는 이미 배워 친숙한 친구이지만

최근 Django를 하느라 소홀하게 대한 부분이 있어

오랜만에 복습겸 유튜버 코딩애플님의 AlertBox 만들기를 따라해봤다!

난이도는 매우매우 쉬움!

그래도 싸피에서 배웠던거랑 다른 부분도 있어서 신기했다

이번글은 코딩애플님이 알려주신 것 + 내 생각을 정리를 적어볼 예정이다

시작!

1. HTML 요소 변경하기

document.getElementById('???').???='red'

- 이 형식을 활용하여 대부분의 HTML 요소를 수정할 수 있음

- 다만, 가능한 종류가 많기 때문에 '???' 부분은 구글 검색으로 찾아보면서 해야함- 검색할 때 '$' 표시 있는 건 jQuery 문법으로 javascript와 다른거임

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h2 id="hello">안녕하세요!</h2>
    <h2 id="hi">올때메로나</h2>
    
    <script>

        document.getElementById('hello').innerHTML='안녕'
        document.getElementById('hello').style.color='red'
        document.getElementById('hello').style.fontSize='30px'

        document.getElementById('hi').innerHTML='올때바밤바'

    </script>

</body>
</html>

2. Alert 만들기

UI 만드는 법

1) 만들고 싶은 것 미리 디자인하고 숨기기

2) 버튼 누르기 등 이벤트 동작이 발생하면 보이도록 하기

[1] function 없이 selector 이용하기

- 코드 재사용이 안되고, JS와 HTML 문법이 섞여있어 보기 안좋음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <!-- UI 만드는 법 : 1. 미리디자인해놓고 숨김 2. 버튼 누르거나 하면 보여줌 -->

    <div class="alert-box" id="alert">
        <p>Alert 박스</p>
    </div>
    
    <!-- function 없이 쓰는 방법(지저분함) -->
    <button onclick="document.getElementById('alert').style.display = 'block';">열기</button>
    <button onclick="document.getElementById('alert').style.display = 'none';">닫기</button>
    


    <script>

    </script>
    
</body>
</html>

[2] 각각의 function 활용

- 열기, 닫기 함수를 만들기

- 만약 100가지 버튼이 있다면? => 함수 100개 만들어야해서 비효율적. 상황에 맞게 사용해야함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <!-- UI 만드는 법 : 1. 미리디자인해놓고 숨김 2. 버튼 누르거나 하면 보여줌 -->

    <div class="alert-box" id="alert">
        <p>Alert 박스</p>
        <button onclick="alertClose()">닫기</button>
    </div>
  
    <button onclick="alertOpen()">열기</button>

    <script>
        function alertOpen() {
            document.getElementById('alert').style.display = 'block';
        }

        function alertClose() {
            document.getElementById('alert').style.display = 'none';
        }


        
        

    </script>
    
</body>
</html>

[3] 파라미터를 이용해 함수 만들기

- 파라미터를 활용해 여러 상황에서 재사용이 가능함(코드의 재사용성 증가!)

- 함수가 하나라서 보기 편해짐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <!-- UI 만드는 법 : 1. 미리디자인해놓고 숨김 2. 버튼 누르거나 하면 보여줌 -->

    <div class="alert-box" id="alert">
        <p>Alert 박스</p>
        <button onclick="alertToggle('none')">닫기</button>
    </div>
  
    <button onclick="alertToggle('block')">열기</button>

    <script>


        //파라미터를 이용해 함수 줄이기 
        function alertToggle(arg) {
            document.getElementById('alert').style.display = arg;
        }
        

    </script>
    
</body>
</html>

3. Alert 2개 만들기

[1] 각각의 함수 만들기

- 어려우면 한글로 먼저 따라써보기

- p태그를 어떻게 지정해야할지 몰라 헤맸는데, id를 부여해주면 해결되는 문제였다!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <!-- UI 만드는 법 : 1. 미리디자인해놓고 숨김 2. 버튼 누르거나 하면 보여줌 -->

    <div class="alert-box" id="alert">
        <p id="title">Alert 박스</p>
        <button onclick="alertToggle('none')">닫기</button>
    </div>
  
    <button onclick="alertId()" >아이디</button>
    <button onclick="alertPassword()">비밀번호</button>

    <script>

        // 참고
        // class selector를 이용하기
        // 인덱싱가능(class 중 2번째거 찾기)
        // document.getElementsByClassName('alert-box')[2].inner~

        function alertId() {
            // 제목바꾸기
            document.getElementById('title').innerHTML = '아이디를 입력하세요'
            // 열기
            alertToggle('block')
            // document.getElementById('alert').style.display = 'block'
        }
        

        function alertPassword() {
            document.getElementById('title').innerHTML = '비밀번호를 입력하세요'
            alertToggle('block')
        }

        //alert 상태를 변경하는 함수
        function alertToggle(arg) {
            document.getElementById('alert').style.display = arg
        }

        

    </script>
    
</body>
</html>

[2] 파라미터 활용하기

- 개인적으로는 글이 길어지면 파라미터도 길어져 가시성은 좀 아쉬움

- 상황에 맞게 활용해야 할 듯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <!-- UI 만드는 법 : 1. 미리디자인해놓고 숨김 2. 버튼 누르거나 하면 보여줌 -->

    <div class="alert-box" id="alert">
        <p id="title">Alert 박스</p>
        <button onclick="alertToggle('none')">닫기</button>
    </div>
  
    <button onclick="alertChange('아이디를 입력하세요')" >아이디</button>
    <button onclick="alertChange('비밀번호를 입력하세요')">비밀번호</button>

    <script>

        function alertChange(arg) {
            // 제목바꾸기
            document.getElementById('title').innerHTML = arg
          
            // 열기
            document.getElementById('alert').style.display = 'block'
        }
        


        //alert 상태를 변경하는 함수
        function alertToggle(arg) {
            document.getElementById('alert').style.display = arg
        }

        

    </script>
    
</body>
</html>

[3] addEventListener 사용하기

- Event 종류에는 click 외에도 keydown, scroll, mouseover 등 다양한게 있다

- getElement 를 이용해 얻은 요소에 특정 event가 발생하면 function부분을 실행한다.

document.getElementById('close').addEventListener('click', function(){

document.getElementById('alert').style.display = 'none'

})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <!-- UI 만드는 법 : 1. 미리디자인해놓고 숨김 2. 버튼 누르거나 하면 보여줌 -->

    <div class="alert-box" id="alert">
        <p id="title">Alert 박스</p>
        <button id="close">닫기</button>
    </div>
  
    <button onclick="alertChange('아이디를 입력하세요')" >아이디</button>
    <button onclick="alertChange('비밀번호를 입력하세요')">비밀번호</button>

    <script>

        document.getElementById('close').addEventListener('click', function(){
            document.getElementById('alert').style.display = 'none'
        })
        // event에는 click 외에도 keydown, scroll, mouseover 등 다양한게 있음

        function alertChange(arg) {
            // 제목바꾸기
            document.getElementById('title').innerHTML = arg
          
            // 열기
            document.getElementById('alert').style.display = 'block'
        }
                

    </script>
    
</body>
</html>

번외

함수를 만들다가 특이한 에러를 만났다

나는 분명 '열기' 라고 코드명을 입력했는데

function을 사용한 후로 '열기' 버튼이 '당신에게' 로 변경되어 있었다!

코드 어디에도 '당신에게' 라는 말은 쓴 적이 없는데..!!

????

????

관리자모드로 봐도 이해가 안되는 부분

새로고침해도 처음엔 열기로 보였다가 곧바로 '당신에게'로 변경됐다

콘솔 에러메시지를 보니까 google translate의 오류라고 뜸..!

보니까 중국어(간체) 자동번역이 걸려있다

이 부분을 해제하니까 다행히 오류 해결!

사실 잠 2시간 자고 새벽 3시에 일어나

부모님 공항에 모셔다드리고 바로 공부하는거라

처음엔 정신착란이 온건가 생각해서 대수롭지않게 넘겼다

근데 다시봐도 같은 오류! 컴퓨터는 거짓말 안하는데!?

그래서 처음엔 이스터에그인가 설레기도 했다 ㅋㅋ

구글 검색해봐도 이런 에러는 없던데..!

여튼 잘 해결되서 다행이다 :)

열기가 왜 저렇게 해석되는건지 아시는 분은 댓글 주세요...ㅋㅋㅋ

'개발새발개발 > JavaScript' 카테고리의 다른 글

JavaScript - 형변환, 연산자, 조건문, 반복문 (0)	2025.01.12
JavaScript - 연산자, 조건문, 반복문 (0)	2025.01.06
JavaScript - 데이터 타입(원시 자료형) (0)	2025.01.05
JavaScript - AlertBox 만들기 3편(jQuery 라이브러리와 설치법) (1)	2024.12.14
JavaScript - Alert Box 만들기2편(EventListener) (0)	2024.12.13