본문 바로가기
JavaScript

자바스크립트 이벤트 활용2

팽투더이 2022. 11. 8. 17:22
728x90

자바스크립트 이벤트 활용2

 

📌 글자 입력 양식

  • 버튼
  • 글자 입력
  • 선택
  • 체크박스
  • 라디오버튼

버튼

    <body>
        <button>버튼1</button>
        <input type="button" value="버튼2">
        <form action="">
            <input type="submit" value="버튼3">
        </form>
    </body>

 

📌 입력 양식을 기반으로 inch 받아 cm로 변환

    <head>
        <title>DOMContentLoaded</title>
        <script>
            document.addEventListener('DOMContentLoaded', ()=> {
                const input = document.querySelector('input')
                const button = document.querySelector('button')
                const p = document.querySelector('p')

                button.addEventListener('click', () => {
                    const inch = Number(input.value)

                    if(isNaN(inch)){
                        p.textContent = '숫자를 입력해주세요'
                        return
                    }

                    const cm = inch * 2.54
                    p.textContent = `${cm} cm`
                })

            })
        </script>
    </head>
    <body>
        <input type="text">inch<br>
        <button>계산</button>
        <p></p>
    </body>

글자 입력

 

📌 이메일 형식 확인하기

    <head>
        <title>DOMContentLoaded</title>
        <script>
            document.addEventListener('DOMContentLoaded', ()=> {
                const input = document.querySelector('input')
                const p = document.querySelector('p')
                // 이메일인지 검사하는 함수
                const isEmail = (value) => {
                    return (value.indexOf('@') > 1)
                            && (value.split('@')[1].indexOf('.') > 1)
                }

                input.addEventListener('keyup', (event) => {
                    const value = event.currentTarget.value
                    if(isEmail(value)) {
                        p.style.color = 'green'
                        p.textContent = `이메일 형식입니다: ${value}`
                    } else {
                        p.style.color = 'red'
                        p.textContent = `이메일 형식이 아닙니다: ${value}`
                    }
                })

            })
        </script>
    </head>
    <body>
        <input type="text">
        <p></p>
    </body>

선택

 

📌 드롭다운 목록 활용하기

드롭다운 목록은 기본적으로 select 태그로 구현합니다.

    <head>
        <title>DOMContentLoaded</title>
        <script>
            document.addEventListener('DOMContentLoaded', ()=> {
                const select = document.querySelector('select')
                const p = document.querySelector('p')

                select.addEventListener('change', (event) => {
                    const options = event.currentTarget.options
                    const index = event.currentTarget.options.selectedIndex

                    p.textContent = `선택: ${options[index].textContent}`
                })
            })
        </script>
    </head>
    <body>
        <select>
            <option>떡볶이</option>
            <option>순대</option>
            <option>오뎅</option>
            <option>튀김</option>
        </select>
        <p>선택: 떡볶이</p>
    </body>

 

📌 multiple select태그

multiple 속성을 부여하면 ctrl키 또는 shift키를 누르고 여러 항목을 선택할 수 있다.

    <head>
        <title>DOMContentLoaded</title>
        <script>
            document.addEventListener('DOMContentLoaded', ()=> {
                const select = document.querySelector('select')
                const p = document.querySelector('p')

                select.addEventListener('change', (event) => {
                    const options = event.currentTarget.options
                    const list = []
                    for(const option of options){
                        if(option.selected) {
                            list.push(option.textContent)
                        }
                    }

                    p.textContent = `선택: ${list.join(',')}`
                })
            })
        </script>
    </head>
    <body>
        <select multiple>
            <option>떡볶이</option>
            <option>순대</option>
            <option>오뎅</option>
            <option>튀김</option>
        </select>
        <p></p>
    </body>

 

📌 cm 단위를 여러 단위로 변환하는 프로그램

    <head>
        <title>DOMContentLoaded</title>
        <script>
            document.addEventListener('DOMContentLoaded', ()=> {
                const input = document.querySelector('input')
                const select = document.querySelector('select')
                const span = document.querySelector('span')
                const handler = () => {
                    const value = Number(input.value)
                    //선택된 단위
                    const selectedUnit = select.options[select.options.selectedIndex] 
                    //선택된 단위의 value값 추출해 숫자로 변환
                    span.textContent = (value * Number(selectedUnit.value)).toFixed(2)
                }
                input.addEventListener('keyup', handler)
                input.addEventListener('change', handler)
            })
        </script>
    </head>
    <body>
        <input type="text" name="", id="" value="0"> cm =
        <span>0</span>
        <select>
            <option value="10">mm</option>
            <option value="0.01">m</option>
            <option value="0.393701">inch</option>
        </select>
    </body>

    <head>
        <title>DOMContentLoaded</title>
        <script>
            document.addEventListener('DOMContentLoaded', ()=> {
                let 현재값
                let 변환상수 = 10

                const select = document.querySelector('select')
                const input = document.querySelector('input')
                const span = document.querySelector('span')

                const calculate = () => {
                    span.textContent = (현재값 * 변환상수).toFixed(2)
                }

                select.addEventListener('change', (event) => {
                    const options = event.currentTarget.options
                    const index = event.currentTarget.options.selectedIndex
                    // 항목을 선택하면 항목의 value 속성이 추출
                    변환상수 = Number(options[index].value)
                    calculate()
                })

                input.addEventListener('keyup', (event) => {
                    현재값 = Number(event.currentTarget.value)
                    calculate()
                })
            })
        </script>
    </head>
    <body>
        <input type="text"> cm =
        <span></span>
        <select>
            <option value="10">mm</option>
            <option value="0.01">m</option>
            <option value="0.393701">inch</option>
        </select>
    </body>

 

📌 코드 리뷰

  • value 속성 : 값을 추출!
  • keydown → keypress → 입력양식에 값이 들어감! → keyup
  • change 이벤트 : 입력 양식 전체에 값 입력을 마쳤을 때

체크박스

체크 박스처럼 체크 상태를 확인 할 때는 입력 양식의 checked 속성을 사용합니다.

어떤 대상의 true 또는 false

 

📌 체크박스 활용하기

    <head>
        <title>DOMContentLoaded</title>
        <script>
            document.addEventListener('DOMContentLoaded', ()=> {
                let [timer, timerId] = [0,0]
                const h1 = document.querySelector('h1')
                const checkbox = document.querySelector('input')

                checkbox.addEventListener('change', (event) => {
                    if(event.currentTarget.checked) {
                        timerId = setInterval(() => {
                            timer += 1
                            h1.textContent = `${timer}초`
                        }, 100)
                    } else {
                        clearInterval(timerId)
                    }
                })
            })
        </script>
    </head>
    <body>
        <input type="checkbox">
        <span>타이머 활성화</span>
        <h1></h1>
    </body>

체크박스가 체크 되면 0.1초 단위로 타이머가 증가하는 프로그램

라디오버튼

체크박스와 비슷한 입력 양식 요소로 여러 대상 중에 하나를 선택할때 사용합니다.

대표적인 예로 성별을 선택할 때(선택안함, 남, 녀)와 같이 하나만 선택할 수 있게 해주는 요소이다.

 

📌 라디오버튼 활용하기

    <head>
        <title>DOMContentLoaded</title>
        <script>
            document.addEventListener('DOMContentLoaded', ()=> {
                const output = document.querySelector('#output')
                const radios = document.querySelectorAll('[name=pet]')

                radios.forEach((radio) => {
                    radio.addEventListener('change', (event) => {
                        const current = event.currentTarget
                        if(current.checked){
                            output.textContent = `좋아하는 애완동물은 ${current.value}이시군요!`
                        }
                    })
                })
            })
        </script>
    </head>
    <body>
        <h3># 좋아하는 애완동물을 선택해주세요</h3>
        <input type="radio" name="pet" value="강아지">
        <span>강아지</span>
        <input type="radio" name="pet" value="고양이">
        <span>고양이</span>
        <input type="radio" name="pet" value="햄스터">
        <span>햄스터</span>
        <input type="radio" name="pet" value="기타">
        <span>기타</span>
        <hr>
        <h3 id="output"></h3>
    </body>

name 속성을 입력하지 않으면 카테고리 구분없이 선택할 수 있으며, 한번 선택하고 나면 선택을 취소할 수도 없습니다.

📌 checkbox와 radio button 코드 리뷰

  • chage 이벤트
  • checked 속성

참고한 책 : 혼자 공부하는 자바스크립트

저작자표시

'JavaScript' 카테고리의 다른 글

자바스크립트 localStorage 객체  (0) 2022.11.09
자바스크립트 to do list 만들기  (0) 2022.11.08
자바스크립트 이벤트 활용1  (0) 2022.11.08
자바스크립트 문서 객체 조작하기  (0) 2022.11.08
자바스크립트 객체와 배열 고급  (0) 2022.11.07

'JavaScript' Related Articles

티스토리툴바