<step42>'js_keydown, keyup, form'

1) keyEvent.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        document.addEventListener('keydown',function(e){
            if(e.key==='Enter') alert('안녕하세요');
        })
    </script>
</body>
</html>

2) keyEvent_ex.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box;}
        div {
            width: 100%;
            height: 100vh;
            background: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        ul {
            display: flex;
        }
        li {
            list-style: none;
            width: 120px;
            height: 120px;
            border-radius: 10%;
            background: black;
            margin: 6px;
            color: #fff;
            text-align: center;
            line-height: 120px;
            font-size: 38px;
            transition: 0.5s;
        }
        li.on {
            background: tomato;
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <script>
        let lis = document.querySelectorAll('li');
        document.addEventListener('keydown',function(e){
            lis[Number(e.key)-1].classList.add('on');
        })
        document.addEventListener('keyup',function(e){
            lis[Number(e.key)-1].classList.remove('on');
        })
    </script>
</body>
</html>

3) ex01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- <script defer src="./ex01_teach_script.js"></script> -->
    <script defer src="./ex01_key_script.js"></script>
    <style>
        * {margin: 0; padding: 0; box-sizing: border-box;}
        li { list-style: none;}
        #wrap {
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
        }
        #todoheader {
            color: #fff;
            padding: 30px 0;
            text-align: center;
            /* linear-gradient(방향, 색상1, 색상2, 색상3,...) */
            background-image: linear-gradient(to right, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
        }
        #todoheader input {
            border: none;
            width: 60%;
            height: 40px;
            border-radius: 20px;
            background: #fff;
            outline: none;
            padding-left: 30px;
        }
        #todoheader {
            vertical-align: middle;
            height: 150px;
        }
        #todoheader button {
            border: none;
            outline: none;
            background: transparent;
            vertical-align: middle;
        }
        #todoheader button i {
            font-size: 40px;
            color: #fff;
        }
        #listUl li {
            background: #eee;
            line-height: 40px;
            padding-left: 20%;
            padding-right: 20%;
            position: relative;
        }
        #listUl li span {
            float: right;
        }
        #listUl li.check {
            text-decoration: line-through;
            background: #ddd;
        }
        #listUl li.check::before {
            content: "";
            display: block;
            width: 30px;
            height: 15px;
            border-bottom: 1px solid #333;
            border-left: 1px solid #333;
            transform: rotate(320deg);
            position: absolute;
            left: 16%;
            top: 5px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="todoheader">
            <h1>to do list</h1>
            <div>
                <input type="text" id="todoInput">
                <button id="insertBtn"><i class="material-icons">add_circle</i></button>
            </div>
        </div>
        <div id="todolist">
            <ul id="listUl"></ul>
        </div>
    </div>
</body>
</html>

main.js

//btn input ul
let btn = document.querySelector('#insertBtn');
let input = document.querySelector('#todoInput');
let ul = document.querySelector('#listUl');

// btn.addEventListener('click',addList);

//btn클릭시 실행되는 함수
//input의 value가 있는지 확인 없으면 return, 있으면 그 값을 
//li에 넣어주고 li를 ul에 추가
function addList(){
    if(!input.value) return;
    let li = document.createElement('li');
    li.innerHTML = `${input.value}<span>X</span>`;
    ul.append(li);
    input.value = '';
    // document.querySelector('#listUl li').addEventListener('click', function(){
    //     document.querySelector('#listUl li').classList.toggle('check');
    // })
    li.addEventListener('click',function(){
        document.addEventListener('keydown',function(e){
            if(e.key === 'Delete') li.remove();
        })
    })
}

document.addEventListener('keydown',function(e){
    if(e.key === 'Enter'){
        addList();
    }
});


//ul을 클릭하면 클릭한 대상이 li면 check클래스를 지정
//check클래스가 있으면 제거
ul.addEventListener('click',function(e){
    console.log(e);
    if(e.target.nodeName === 'LI') e.target.classList.toggle('check');
})

4) form.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :focus {
            background: yellow;
        }
    </style>
</head>
<body>
    <form action="" name="myForm" id="form1">
        <input type="text" name="userId" id="userId" value="아이디" autofocus>
        <input type="text" name="userPass" id="userPass">
        <textarea name="msg" id="myMsg" cols="30" rows="10">
            안녕하세요안녕하세요
        </textarea>
    </form>
    <form action="" name="myForm2" id="form2">
        <input type="text" name="userId">
        <input type="text" name="userPass">
    </form>
    <script>
        // 폼 탐색
        let form1 = document.querySelector('#form1');
        let form2 = document.forms.myForm2;
        let form3 = document.forms[1];
        console.log(form1);
        console.log(form2);
        console.log(form3);
        // 폼안의 요소 탐색
        // form.elements.name
        // 짧은 표기법 form.name
        console.log(form1.elements.userPass == form1.userPass);
        console.log(form1.msg.value);

        document.querySelector('#userPass').focus();

        let input1 = form1.userId;
        let input2 = form1.userPass;
        document.querySelector('#userId').addEventListener('keydown',function(e){
            if(e.key==='Enter') input2.focus();
        })
    </script>
</body>
</html>

5) form_ex.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" id="form">
        주민등록번호
        <input type="text" name="code1" id="code1"> -
        <input type="text" name="code2" id="code2">
    </form>
    <script>
        let code12 = document.querySelector('#code1');
        let fo = form.code2;
        console.log(code12);
        console.log(fo);
        // console.log(code12.value.length);
        code12.addEventListener('keyup',function(e){
            if(code12.value.length==6 && !isNaN(Number(code12.value))){
            fo.focus();
        }
        })

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

6) checkbox.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>좋아하는 과일 선택하기</p>
    <p>🍅 <input type="checkbox" name="fruits" value="tomato"></p>
    <p>🍌 <input type="checkbox" name="fruits" value="banana"></p>
    <p>🍊 <input type="checkbox" name="fruits" value="orange"></p>
    <p><button id="btn">결과보기</button></p>
    <p id="result"></p>
    <script>
        const btn = document.querySelector('#btn');
        btn.addEventListener('click',function(){
            let fruitsInputs = document.querySelectorAll('input');
            let str = '';
            fruitsInputs.forEach(input=>{
                str = input.checked ? str+input.value : str;
            })
            document.querySelector('#result').innerHTML = str;
        })
    </script>
</body>
</html>

7) checkbox_ex.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>좋아하는 과일 선택하기</p>
    <p>전체선택 <input type="checkbox" name="fruits" id="all"></p>
    <p>🍅 <input type="checkbox" name="fruits" value="tomato"></p>
    <p>🍌 <input type="checkbox" name="fruits" value="banana"></p>
    <p>🍊 <input type="checkbox" name="fruits" value="orange"></p>
    <p><button id="btn">확인</button></p>
    <p id="result"></p>
    <script>
        let all = document.querySelector('#all');
        
        all.addEventListener('click',function(){
            let fruitsInputs = document.querySelectorAll('input');    
            
            if(all.checked == true){
                fruitsInputs.forEach(input=>{
                input.checked = true;
            })
            }else {
                fruitsInputs.forEach(input=>{
                input.checked = false;
            })
            }
        })

        const btn = document.querySelector('#btn');
        btn.addEventListener('click',function(){
            let fruitsInputs = document.querySelectorAll('input');
            let str = '';
            fruitsInputs.forEach(input=>{
                str = input.checked ? str+input.value : str;
            })
            document.querySelector('#result').innerHTML = str;
        })

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

8) checkbox_ex_teach.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" name="fruitsForm">
        <p>전체 선택<input type="checkbox" name="allch"></p>
        <p>사과<input type="checkbox" value="사과" name="fafru"></p>
        <p>수박<input type="checkbox" value="수박" name="fafru"></p>
        <p>바나나<input type="checkbox" value="바나나" name="fafru"></p>
        <p>오렌지<input type="checkbox" value="오렌지" name="fafru"></p>
    </form>
        <p><button id="btn">확인</button><span id="result"></span></p> 
    <script>
        let form = document.forms.fruitsForm;
        let allch = form.allch;
        console.log(allch)
        // document.querySelector('input').addEventListener
        allch.addEventListener('click',function(){
            let inputs = document.forms.fruitsForm.fafru;
            if(this.checked){
                inputs.forEach(input=>{
                    input.checked = true;
                })
            }else {
                inputs.forEach(input=>{
                    input.checked = false;
                })
            }
        })
        let btn = document.querySelector('#btn');
        btn.addEventListener('click',function(){
            let inputs = document.forms.fruitsForm.fafru;
            let str = '';
            inputs.forEach(input=>{
                str = input.checked ? str+input.value : str;
            })
            document.querySelector('#result').innerHTML = str;
        })
    </script>
</body>
</html>

9) chAddress.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>회원주소
        <input type="text" name="address" id="address" value="울산시 남구 삼산동">
    </p>
    <p>
        배송지가 같으면 다음을 체크하세요
        <input type="checkbox" name="chk" id="chk">
    </p>
    <p>
        배송지 주소 
        <input type="text" name="address2" id="address2">
    </p>
    <script>
        document.querySelector('#chk').addEventListener('click',function(){
            if(this.checked) {
                document.querySelector('#address2').value = document.querySelector('#address').value;
            }else {
                document.querySelector('#address2').value = '';
            }
        })
    </script>
</body>
</html>

10) change.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="num" id="num">
        <option value="가">10</option>
        <option value="나">20</option>
        <option value="다">30</option>
        <option value="라">40</option>
    </select>
    <script>
        document.querySelector('#num').addEventListener('change',function(){
            console.log(this.value);
        })
    </script>
</body>
</html>

11) change_ex.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p> 가격 <input type="text" id="price"></p>
    <p> 수량 <select name="" id="num">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
    </select></p>
    <p> 총가격 <input type="text" id="priceall"></p>
    <script>
        let price = document.querySelector('#price');
        let num = document.querySelector('#num');
        let priceall = document.querySelector('#priceall');

        num.addEventListener('click',function(){
            priceall.value = price.value*this.value;
        })
    </script>
</body>
</html>

12) ex.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>1. 연산</h1>
    <input type="text" id="input1">+<input type="text" id="input2">=<input type="text" id="result"> <button id="btn1">연산</button>
    <h1>2. 총합 구하기</h1>
    가격 <input type="text" id="pri"> x 수량 <select name="" id="sel">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
    </select> 총합 : <span id="allplus"></span>
    <h1>3. 총합 구하기2 (선택된 값만)</h1>
    <p> 바나나(1000원) <input type="checkbox" value="1000" class="fru"></p>
    <p> 사과(500원) <input type="checkbox" value="500" class="fru"></p>
    <p> 배(1500원)<input type="checkbox" value="1500" class="fru"></p>
    <button id="btn2">총합구하기</button>
    선택한 총가격 : <span id="allprice"></span>
    <script>
        //1. 연산
        let btn1 = document.querySelector('#btn1');
        btn1.addEventListener('click',function(){
            let result = document.querySelector('#result');
            let input1 = document.querySelector('#input1');
            let input2 = document.querySelector('#input2');

            result.value = Number(input1.value) + Number(input2.value);
        })
        //2. 총합 구하기
        let sel = document.querySelector('#sel');
        sel.addEventListener('change',function(){
            let allplus = document.querySelector('#allplus');
            let pri = document.querySelector('#pri');
            allplus.innerHTML = Number(pri.value) * Number(sel.value);
        })
        //3. 총합 구하기2
        let btn2 = document.querySelector('#btn2');
        btn2.addEventListener('click',function(){
            let allprice = document.querySelector('#allprice');
            let fruits = document.querySelectorAll('.fru');
            let str = 0;
            fruits.forEach(input=>{
                str = input.checked ? str+Number(input.value) : str;
            })
            allprice.innerHTML +=str;
        })
    </script>
</body>
</html>

13) kakaomap.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
</head>
<body>
    <button onclick="PostCodeSearch()">주소찾기</button>
    <input type="text" id="address">
    <script>
        function PostCodeSearch(){
            new daum.Postcode({
            oncomplete: function(data) {
                console.log(data);
                document.querySelector('#address').value = data.roadAddress;
            }
        }).open();
        }
    </script>
</body>
</html>

'노력이 좋아서' 카테고리의 다른 글

<step44>'js_클래스' (0)	2022.05.20
<step43>'js_정규표현식, symbol, set, Date' (0)	2022.05.19
<step41>'js_dom, scroll' (0)	2022.05.17
<step40>'js_event,scroll' (0)	2022.05.16
<step39>'js_DOM' (0)	2022.05.13

'노력이 좋아서' 카테고리의 다른 글

티스토리툴바