[JavaScript] node select, create, onfocus&onblur

728x90

1. Node

element = node = tag(태그)
console.dir(태그); ▶ 어떤 것을 사용할 수 있는지 나타냄

1.1. node css 변경

style 속성 이용 (속성은 점(.)으로 가져옴/ 쿼리셀렉터로 가져오는 것은 태그)
카멜표기법 따름 (text-align ▶ textAlign)
style에 전달되는 값을 문자열로 작성

노드.style.css속성 = 값

1.2. node 생성, 추가

1.2.1. createElement()

태그(요소)를 생성
()안에 문자열 들어감

1.2.2. appendChild()

요소를 부모 자식 관계로 넣어줌, 어떤 태그의 자식요소를 마지막에 추가
태그 요소를 생성해서 넣어줌
append 마지막에 추가하겠다


      
      
      
    
    
      <javascript />
    
<button type="button" id="add">추가</button>

<script>

	function test() {
    	var div = document.createElement("div"); //div태그 생성
       	var p = document.createElement("p"); //p태그 생성
        var text = document.createTextNode("생성"); //innerHTML로 대체 가능
        
        p.appendChild(text); //p태그 안에 text 넣기
        div.appendChild(p); //div태그 안에 p태그 넣기
        document.body.appendChild(div); //body태그 안에 div태그 넣기
    }
    var add = docuement.getElementByld("add"); //id가 add인 (버튼)가져와서 add라는 변수에 담기
    add.onclick = test; //add 버튼을 클릭하면 test함수 뜸

</script>

1.2.3. innerHTML = 문자열

요소를 HTML의 방식으로 생성
직접 문자열로 집어 넣음


      
      
      
    
    
      <javascript />
    
<div id="inner1"></div>

<button id="btn1">버튼1</button>
<script>
	var btn1 = document.getElementById("btn1");
    btn1.onclick = function(){
    	let inner1 = document.getElementById("inner1");
        inner1.innerHTML = "<b>버튼 클릭시 문자 방식으로 요소를 생성합니다</b>";
        //직접 쓰고 innerHTML에 한방에 사용
    }
</script>

1.2.4. insertBefore(삽입노드, 기준노드)

기준노드 앞에 삽입노드 추가
뒤의 노드 앞에 앞의 노드를 넣는다.

up / down 함수 만들기 - node select 페이지에서 한번 더 확인

2023.01.02 - [클라이언트/JavaScript] - [JavaScript] node remove, select(parent,children), class 속성제어


      
      
      
    
    
      <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>

    <style>
        table {border-spacing: 0; border-collapse: collapse;}
        thead th, tbody td {
            border: 1px solid black;
        }
    </style>

</head>
<body>
    
    <table >
        <thead>
            <tr>
                <th>이동</th>
                <th>번호</th>
                <th>이름</th>
                <th>내용</th>
                <th>날짜</th>
            </tr>

        </thead>

        <tbody class="table">
        <tr> <!-- inline 이벤트로 down, up 함수 걸기 / 각자 본인에 맞는 부모에 맞춰서 구분해야 하기 때문에 this 사용 -->
            <td><button onclick="down(this)">↓</button><button onclick="up(this)">↑</button></td>
            <td>1</td>
            <td>홍길자</td>
            <td>안녕!</td>
            <td>2019-01-01</td>
        </tr>
        <tr>
            <td><button onclick="down(this)">↓</button><button onclick="up(this)">↑</button></td>
            <td>2</td>
            <td>이순신</td>
            <td>반가워</td>
            <td>2019-02-01</td>
        </tr>
        <tr>
            <td><button onclick="down(this)">↓</button><button onclick="up(this)">↑</button></td>
            <td>3</td>
            <td>이순신</td>
            <td>반가워</td>
            <td>2019-02-01</td>
        </tr>
        <tr>
            <td><button onclick="down(this)">↓</button><button onclick="up(this)">↑</button></td>
            <td>4</td>
            <td>이순신</td>
            <td>반가워</td>
            <td>2019-02-01</td>
        </tr>
        <tr>
            <td><button onclick="down(this)">↓</button><button onclick="up(this)">↑</button></td>
            <td>5</td>
            <td>이순신</td>
            <td>반가워</td>
            <td>2019-02-01</td>
        </tr>
        </tbody>
    </table>

    <script>
        //down 함수
        function down(x) { //down 함수 생성, this 받을 매개변수 x
            // console.log(x); //x는 자기 자신을 나타내는 태그
            // console.dir(x); //태그에서 어떤 것을 사용할 수 있는지 나타냄

            // console.log( x.parentNode ); //부모태그(공백이 있다면, 공백을 선택)
            // console.log( x.parentElement ); //부모태그(순수한 태그의 형태만 선택) / 태그(x).parentElement

            // console.log(x.parentElement.nextElementSibling); //id의 다음 형제 td = 번호
            // console.log(x.parentElement.nextElementSibling.nextElementSibling); //번호의 다음 형제 td = 이름
            // console.log(x.previousElementSibling); //버튼 기준으로 이전 형제 = null(없음)

            // console.log(x.parentElement.parentElement); //tr
            // console.log(x.parentElement.parentElement.firstElementChild); //tr의 firstElementChild = 첫번째 자식태그 = 첫번째 td = 버튼
            // console.log(x.parentElement.parentElement.lastElementChild); //tr의 lastElementChild = 마지막 자식태그 = 마지막 td = 날짜

            // console.log(x.parentElement.parentElement.children); //배열!!!!!!!!!!!!!!! tr의 해당 자식들 = td 다섯개
            // console.log(x.parentElement.parentElement.children[2]); //index 번호로 선택 가능, 자식들 중 3번째 = 이름

            var current = x.parentElement.parentElement; //버튼의 부모행 = tr, 누른행
            //tr의 다음 이웃 = 다음행
            var next = current.nextElementSibling; //tr의 다음행
        
            //insertBefore은 동작시킬 태그의 부모태그를 얻어옵니다.
            var table = document.querySelector(".table"); //appendChild 할때도 부모를 얻어왔음
          
            if(next == null) {
                alert("마지막 행 입니다");
                return; //함수 종료
            }

            table.insertBefore(next, current); //current 앞에 next를 넣는다.
        }


        //up 함수
        function up(y) {
            var current = y.parentElement.parentElement;
            var pre = current.previousElementSibling;

            var table = document.querySelector(".table");

            if(pre == null) {
                alert("첫번째 행 입니다");
                return; //함수 종료
            }

            table.insertBefore(current, pre); //pre 앞에 current를 넣는다.
        }
    </script>

</body>
</html>

인라인 이벤트로 각자의 버튼에 up, down 함수 걸기
button마다 td, tr이 다르기 때문에 본인의 부모에 맞춰서 구분하기 위해 this 사용 (this를 매개변수로 넣어줌)
down 함수: this를 받을 매개변수로 x 넣어줌
current 변수 - 한줄을 옮겨야 하기 때문에 tr을 가져와야 함, 누른 행
next 변수 - current의 다음행이므로 current.nextElementSibling
자리를 바꾸기 위해서 insertBefore를 사용 - 동작시킬 태그의 부모 태그를 얻어옴 = tr의 부모태그 tbody
기준 노드 앞에 삽입 노드를 넣기 때문에 current 앞에 next넣음
if 조건문 - next 행이 없을 경우, alert 실행 후 함수 종료(return)
up 함수: this를 받을 매개변수로 x 넣어줌
다른 부분은 down 함수와 같지만 insertBefore의 순서 바꾸기
pre 앞에 current 넣음

1.3. 예제

1.3.1. 노트선택(1)


      
      
      
    
    
      <javascript />
    
<!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>
    
    <button id="btn">버튼</button>
    <input type="checkbox" name="inter" value="1">java
    <input type="checkbox" name="inter" value="2">js
    <input type="checkbox" name="inter" value="3">css
    <input type="checkbox" name="inter" value="4">html

    <script>
        //element == node == 태그

        var btn = document.getElementById("btn");
        // console.log(btn); //태그 자체

        var inter = document.getElementsByName("inter"); //name이 inter인 태그 - 반환이 배열
        // console.log(inter); //nodelist 나옴

        btn.onclick = function() { //버튼을 클릭할 때
            for(var i = 0; i < inter.length; i++) { //반복문을 돌리면서 태그를 가져옴
                console.log(inter[i]);
            }
        } //결과적으로 버튼을 클릭하면 태그 4개가 다 나옴
    </script>


    <hr>


    <button id="btn2">버튼2</button>
    
    <input type="radio" name="aaa" class="hello" value="1">프로그램
    <input type="radio" name="aaa" class="hello" value="2">디자인
    <input type="radio" name="aaa" class="hello" value="3">네트워크
    <input type="radio" name="aaa" class="hello" value="4">보안

    <script>
        var btn2 = document.getElementById("btn2");

        var hello = document.getElementsByClassName("hello"); //class명이 hello인 태그 - 반환이 배열
        console.log(hello);

        btn2.onclick = function () {
            
            for(var i = 0; i < hello.length; i++) {
                console.log(hello);
            }
        }
    </script>

    <hr>
    <button id="btn3">버튼3</button>

    <ul id="bye">
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
    </ul>

    <ul>
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
    </ul>
    
    <script>
        var btn3 = document.getElementById("btn3"); //document는 전체문서에서~

        var bye = document.getElementById("bye"); //id가 bye인 태그

        var li = bye.getElementsByTagName("li"); //bye인 태그에서 탐색
        // console.log(li);

        
        btn3.onclick= function() {
            for(var i = 0; i < li.length; i++) {
                console.log(li[i]);
            }
        }
    </script>


</body>
</html>

button - id로 checkbox - name으로 script로 가져옴
name이 inter인 태그는 반환이 배열이므로 for 반복문을 이용하여 콘솔에 출력
결과적으로 버튼을 클릭하면 태그 4개 나옴
버튼을 누르면 class명이 hello인 태그를 배열로 가져옴
버튼을 누르면 id가 bye인 ul 태그를 가져오고, bye를 이용해 tag 이름이 li인 것을 콘솔에 출력

1.3.2. 노트선택(2)


      
      
      
    
    
      <javascript />
    
<!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>
    
    <button id="btn">쿼리셀렉터 확인</button>
    <ul class="box">
        <li>hi</li>
        <li>bye</li>
        <li>good afternoon</li>
    </ul>

    <script>
        var btn = document.querySelector("#btn"); //css 선택자로 얻습니다
        // console.log(btn); //태그 자체
        // var li = document.querySelector(".box li"); //li태그를 얻습니다 (단일★)
        // console.log(li);

        var lis = document.querySelectorAll(".box li"); //li태그를 얻습니다 (모두★)
        
        btn.onclick = function() {
            for(var i = 0; i < lis.length; i++) {
                console.log(lis[i]);
            }
        }
    </script>

</body>
</html>

css의 속성을 이용한 쿼리셀렉터를 사용
querySelector(".box li") - li 태그 하나 얻음
querySelectorAll(".box li") - li태그 전부 얻음

1.3.3. 태그의 속성제어

.속성명으로 접근

클래스는 .className, .classList로 얻음


      
      
      
    
    
      <javascript />
    
<!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>
    
    <h3>태그의 속성 제어하기</h3>

    <!-- 태그는 하나의 객체 -->
    <input type="text" value="" id="input" required>
    <div class="msg"></div>
    <button type="button" id="btn">확인</button>

    <script>
        //태그의 속성 = .속성명 으로 접근함
        //태그를 js 측으로 가져와야지 뭘 할 수 있음, 무조건 가져와야 함

        var input = document.getElementById("input");

        // console.log(input.type); //type속성 확인
        // console.log(input.id); //id속성 확인
        // console.log(input.value); //value속성 확인
        // console.log(input.required); //required 속성 확인
        // console.log(input.checked); //checked 속성 확인

        // input.value = "변경"; //id는 웬만하면 건들지 말고, 나머지는 대입하면 변경됨
        // console.log(input.value);

        //태그 사이값을 HTML 형식으로 얻음 innerHTML
        var btn = document.getElementById("btn");
        // console.log(btn.innerHTML); //확인 나옴

        var msg = document.querySelector(".msg");

        //버튼을 누르면 사용자가 입력한 value를 가지고 와서 msg태그 사이에 출력
        btn.addEventListener("click", function () {
            var a = input.value; //유저가 입력한 value값
            msg.innerHTML = a;
        })
    </script>

</body>
</html>

user가 입력한 value값을 넣을 div태그 하나 만듦 (class = "msg")
input에 입력값이 들어갈 때, msg의 innerHTML에 넣음
msg.innerHTML = input.value;

1.3.4. CSS 제어

.style.스타일속성 =


      
      
      
    
    
      <javascript />
    
<!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>
    
    <h3>CSS 제어</h3>

    <ul class="box">
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
    </ul>

    <button id="btn">css 속성 변경하기</button>

    <script>
        // li 전부 한꺼번에 바꿔주려면
        var li = document.querySelectorAll(".box li"); //1. querySelectorAll바꿔줌
        var btn = document.getElementById("btn");
        btn.onclick = function() {
            
            for(var i = 0; i < li.length; i++) { //2.배열로 나오니까 반복문 돌림
                li[i].style.backgroundColor = "lightblue"; //3.li의 i번째에 style 넣음
                li[i].style.color = "red";
            }

            // li.style.backgroundColor = "lightblue"; //하이픈 → 카멜표기법으로
            // li.style.color = "red";
        }
    </script>

</body>
</html>

클릭 했을 때 css 속성 한꺼번에 변경하려면 querySelectAll 이용
반복문을 돌리면서 li의 i번째에 style 넣음

2. onfocus / onblur

2.1. onfocus

input에 focus 들어갈 때 동작

2.2. onblur

input에 focus가 떠났을 때 동작
onchange와 비교


      
      
      
    
    
      <javascript />
    
<!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>
        input:focus {
            outline: none;
        }
    </style>

</head>
<body>
    
    <h3>onfocus - 인풋에 focus 들어갈 때 동작, onblur - 인풋에 focus가 떠났을 때 동작</h3>
    <input type="text" class="xx">
    
    <script>
        var xx = document.querySelector(".xx");
        xx.onfocus = function () {
            console.log("포커스 진입");
        }
        
        xx.onblur = function () {
            console.log("포커스 아웃");
        }
     </script>
     
</body>
</html>

2.2.1. onblur 예제 (▼)


      
      
      
    
    
      <javascript />
    
<!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>
        input:focus {
            outline: none;
        }
    </style>

</head>
<body>

    <h3>onfocus, onblur 실습</h3>
    <article>
        아이디 <input type="text" class="id" placeholder="4자리 이상"><br>
        <div class="idmsg"></div>
        비밀번호 <input type="text" class="pw" placeholder="9자리 이상">
        <div class="pwmsg"></div>
    </article>

    <script>
        var id = document.querySelector(".id"); //id 가져옴
        var pw = document.querySelector(".pw"); //pw 가져옴
        var idmsg = document.querySelector(".idmsg");
        var pwmsg = document.querySelector(".pwmsg");

        id.onblur = function () { //포커스가 나갈때 (onchange와 비교)
            if(id.value.length < 4) {
                idmsg.innerHTML = "아이디 4글자 이상이거든요?";
                id.style.border = "3px solid red";
            } else {
                idmsg.innerHTML = "";
                id.style.border = "3px solid green";
            }
        }

        pw.onblur = function () {
            if(pw.value.length < 9) {
                pwmsg.innerHTML = "비밀번호 9글자 이상이거든요?";
                pw.style.border = "3px solid red";
            } else {
                pwmsg.innerHTML = "";
                pw.style.border = "3px solid green";
            }
        }
    </script>

</body>
</html>

id, pw, idmsg, pwmsg를 가져와서 포커스가 나갈 때
idmsg.innerHTML 메세지 띄우면서, style 속성 넣어줌

2.2.2. onchange 예제 (▲)

onblur인 경우, 아무것도 적지 않고 클릭했다가 포커스가 나갈때 실행
onchange의 경우, text를 적고 (=바뀔 때) 포커스가 나갈때 실행


      
      
      
    
    
      <javascript />
    
<!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>
        input:focus {
            outline: none;
        }
    </style>

</head>
<body> 

    <h3>onfocus, onblur 실습</h3>
    <article>
        아이디 <input type="text" id="id" placeholder="4자리 이상"><span class="idmsg"></span>
        <br>
        비밀번호 <input type="text" id="pw" placeholder="9자리 이상"><span class="pwmsg"></span>
    </article>

    <script>
        var id = document.querySelector("#id"); //id 가져옴
        var pw = document.querySelector("#pw"); //pw 가져옴
        var idmsg = document.querySelector(".idmsg"); //idmsg 가져옴
        var pwmsg = document.querySelector(".pwmsg"); //pwmsg 가져옴

        id.onchange = function () { //내용이 변할때 (onblur와 비교)
            if(id.value.length < 4) { //사용자가 적은 value값 가져오는데, 그 값의 길이가 4보다 작으면
                idmsg.innerHTML = "아이디 4글자 이상이거든요?"; //idmsg에 메세지를 넣어줌
                id.style.border = "3px solid red"; //id태그의 컬러를 바꿔줌
            } else {
                idmsg.innerHTML = "";
                id.style.border = "3px solid green";
            }
        }

        pw.onchange = function () {
            if(pw.value.length < 9) {
                pwmsg.innerHTML = "비밀번호 9글자 이상이거든요?";
                pw.style.border = "3px solid red";
            } else {
                pwmsg.innerHTML = "";
                pw.style.border = "3px solid green";
            }
        }
    </script>

</body>
</html>

3. Quiz - node select

3.1. node_select - check 이벤트


      
      
      
    
    
      <javascript />
    
  <!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>
    
    <h3>사용자가 버튼을 클릭하면 input태그의 공백여부, 체크박스의 체크여부를 확인</h3>

    아이디: <input type="input" id="id" vlaue="">
    기억하기: <input type="checkbox" class="remember">
    <button id="btn" >확인</button>

    <script>
        var btn = document.getElementById("btn");
        var id = document.getElementById("id");
        var remember = document.getElementsByClassName("remember");

        // btn.onclick = function() {
        //     var space = id.value.replace(/\s/g, ""); //정규표현식 추가
        //     if(space.length == 0) {
        //         console.log("id가 없음");
        //     } else {
        //         console.log("id:",space);
        //     }

        //     // var check = remember.
        //     if(remember[0].checked == true) {
        //         console.log("id 기억한대유");
        //     } else {
        //         console.log("id 기억 안 한대유");
        //     }
        // }

        //alert창 남발한 답안
        btn.onclick = function() {
            if(id.value == "") {
                alert("input의 값을 확인하세요");
            } else {
                alert("id:" + id.value); //alert에는 +로 붙여야 나옴
            }

            // var check = remember.
            if(remember[0].checked != true) {
                alert("기억하기를 체크하세요");
            }
        }
    </script>


    <hr>

    
    <h3>인라인이벤트 - 사용자가 체크박스를 클릭할때마다 경고창에 value값을 띄어주세요</h3>
    <!-- <input type="checkbox" value="1" onclick="alert(value)">조항1
    <input type="checkbox" value="2" onclick="alert(value)">조항2
    <input type="checkbox" value="3" onclick="alert(value)">조항3 -->

    <!-- 다른 답안 -->
    <input type="checkbox" value="1" onclick="check(this)">조항1
    <input type="checkbox" value="2" onclick="check(this)">조항2
    <input type="checkbox" value="3" onclick="check(this)">조항3

    <script>
        function check(tag) {
            // console.log(tag);
            if(tag.checked == true) {
                alert(tag.value + "조항 선택");
            }
        }
    </script>


  </body>
  </html>

var space = id.value.replace(/\s/g, "");
정규식으로 replace 해서 공백 제거 후, length = 0이면 id 공백

3.2. node_select - change 이벤트


      
      
      
    
    
      <javascript />
    
<!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>[ select의 value 속성은 선택된 값을 의미 ]</p>
    <h3>change 이벤트</h3>

    <div id="msg" style="font-size: 30px; font-weight: 600; margin-bottom: 20px;">단어를 선택하세요</div>

    <select id="sel">
        <option value="1">선택</option>
        <option value="2">안녕하세요</option>
        <option value="3">hello</option>
        <option value="4">你好</option>
        <option value="5">こんにちは</option>
    </select>

    <script>
        var sel = document.getElementById("sel");
        var msg = document.querySelector("#msg"); //http로 보내기 위한 msg 변수

        sel.onchange = function () {
            console.log(sel); //select 다 가져옴
            
            var a = "";
            switch (sel.value) {
                case "1":
                    a = "선택하세요";
                    break;
                case "2":
                    a = "한국어 입니다";
                    break;
                case "3":
                    a = "영어 입니다";
                    break;
                case "4":
                    a = "중국어 입니다";
                    break;
                default:
                    a = "일본어 입니다";
                    break;
            }
            msg.innerHTML = a;
        }
    </script>


    <!-- 다른 풀이 -->
    <!-- <select id="lang">
        <option value="">선택</option>
        <option value="영어">hello</option>
        <option value="한글">안녕하세요</option>
        <option value="중국어">你好</option>
    </select>
    
    <script>
        var lang = document.getElementById("lang");
        var msg = document.querySelector("#msg");

        lang.onchange = function() {
            if(lang.value == "") {
                msg.innerHTML = "단어를 선택하세요";
            } else {
                msg.innerHTML = lang.value + "입니다";
            }
        }

    </script> -->


</body>
</html>

3.3. node_select - click이벤트


      
      
      
    
    
      <javascript />
    
<!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>

    <input type="checkbox" name="seat" value="1">1번
    <input type="checkbox" name="seat" value="2">2번
    <input type="checkbox" name="seat" value="3">3번
    <input type="checkbox" name="seat" value="4">4번
    <input type="checkbox" name="seat" value="5">5번
    <input type="checkbox" name="seat" value="6">6번
    <input type="checkbox" name="seat" value="7">7번
    <input type="checkbox" name="seat" value="8">8번
    <input type="checkbox" name="seat" value="9">9번
    <input type="checkbox" name="seat" value="10">10번

    <button type="button" id="btn">클릭</button>

    <script>
        //버튼을 클릭시, 좌석이 적어도 한개이상 체크되어있지 않다면 경고창을 띄우세요.
        // var seat = document.querySelectorAll("input[name='sear']"); 이렇게 사용하고 싶었음
        var seat = document.getElementsByName("seat"); //배열
        var btn = document.getElementById("btn"); 

        btn.addEventListener("click", function () {
            var cnt = 0;
            for(var i = 0; i < seat.length; i++) {
                if(seat[i].checked == true) {
                    cnt++;
                }
            }

            if(cnt == 0) {
                alert("좌석을 최소한 하나 이상 선택하세요");
            }

        })
    </script>
    
</body>
</html>

checkbox의 checkde 이용하여 좌석이 선택되어 있는지 확인

3.4. count 만들기


      
      
      
    
    
      <javascript />
    
<!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>
    
    <h3>카운트 만들기 - this, innerHTML, value 속성을 사용하면 됩니다.</h3>

    <input type="number" value="0">
    <button onclick="calc(this)" >+</button>
    <button onclick="calc(this)">-</button>
    <!-- alert: 0보다 작을 수 없습니다. -->

    <script>
        var number = document.querySelector("input");
        function calc(tag) {
            if(tag.innerHTML == '+') { //들어온 매개변수 tag의 
                number.value++;
            } else if(number.value <= 0){
                alert("0보다 작을 수 없습니다");
            } else {
                number.value--;
            }
        }
    </script>

</body>
</html>

인라인이벤트에 cal() 함수 넣기
tag의 innerHTML이 +이면 number의 값을 더함
-이면 number의 값을 뺌


      
      
      
    
    
      <javascript />
    
<!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>
    
    <h3>카운트 만들기 - this, innerHTML, value 속성을 사용하면 됩니다.</h3>

    <input type="number" value="0" id="num">
    <button onclick="calc(this)" >+</button> <!-- this를 넣어서 이게 무엇인지 확인 -->
    <button onclick="calc(this)">-</button>
    <!-- alert: 0보다 작을 수 없습니다. -->

    <script>
        var num = document.querySelector("num");
        function calc(x) { //x가 태그, 위에서 this로 넣어주었으니 매개변수 넣어줘야 함
            if(x.innerHTML == '+') { //들어온 매개변수 tag의 써져있는(innerHTML) 속성 확인
                num.value++; //num이 가지고 있는 value(초기 0) 값 하나씩 증가
            } else {
                if(num.value <= 0) { //num의 value가 0보다 떨어지면
                    return; //종료
                }
                num.value--; //num이 가지고 있는 value(초기 0) 값 하나씩 감소
            }
        }
    </script>

</body>
</html>

3.5. 그림, 색상 변경하기 - click 이벤트


      
      
      
    
    
      <javascript />
    
<!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>
    
    <article>

        <img src="img/1.jpg" class="img" alt="이미지" width="400" style="border: 3px solid black;">

        <select class="sel">
            <option value="1.jpg">봄</option>
            <option value="2.jpg">여름</option>
            <option value="3.jpg">가을</option>
            <option value="4.jpg">겨울</option>
        </select>

        <button class="btn" type="button">이미지 바꾸기</button>

        <input type="color" class="input">
        <button class="btn2">색상 변경하기</button>

    </article>

    <script>
        //버튼을 클릭하면 select태그의 value를 img의 src에 넣는다

        //1. 클래스로 가져와서 변수 만듦
        var img = document.querySelector(".img"); //이미지
        var sel = document.querySelector(".sel"); //옵션(select)
        var btn = document.querySelector(".btn"); //버튼

        //2. 버튼에 클릭 이벤트 걸기
        btn.onclick = function () {
            //select가 가지고 있는 value값을 img가 가지고 있는 src에 넣는다
            //링크니까 앞에 img/넣어줌
            img.src = "img/" + sel.value;
        }

        //input의 value를 얻어서 img의 style에 적용
        //1. 클래스로 가져와서 변수 만듦
        var input = document.querySelector(".input");
        var btn2 = document.querySelector(".btn2");
        btn2.onclick = function () {
            // console.log(input.value);
            img.style.border = "3px solid " + input.value;
        }


    </script>



    <!------------------------------ 업그레이드 ver ------------------------------->



    <!-- <article>
        <img src="img/1.jpg" class="img" alt="이미지" width="400" style="border: 3px solid black;">

        <select class="sel">
            <option value="1.jpg">봄</option>
            <option value="2.jpg">여름</option>
            <option value="3.jpg">가을</option>
            <option value="4.jpg">겨울</option>
        </select>

        <button class="btn" type="button">이미지 바꾸기</button>

        <input type="color" class="input">
        <button class="btn2">색상 변경하기</button>
    </article>

    <script>
        var img = document.querySelector(".img");
        var sel = document.querySelector(".sel");
        sel.onchange = function () {
            img.src = "img/" + sel.value;
        }

        var input = document.querySelector(".input");
        input.onchange = function () {
            img.style.border = "3px solid " + input.value;
        }
    </script> -->

</body>
</html>

이미지 변경 - select의 값(value)을 확인해서 main img의 src에 넣어 줌
색상 변경 - input(색상)의 값(value)을 확인해서 img의 style 속성에 넣어줌
upgrade ver. 이벤트를 onchange로 바꿔주면 버튼을 누르기 전에 value값이 바뀌면서 실행됨

4. Quiz - node create

4.1. node 한번에 생성 [ 다시 한 번 보기 ]


      
      
      
    
    
      <javascript />
    
<!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>
    
    <h3>inner HTML</h3>
    <div class="inner1">

    </div>
    <button class="btn">태그 생성</button>

    <script>
        var inner1 = document.querySelector(".inner1");
        var btn = document.querySelector(".btn");
        
        btn.onclick = function () {
            //문자열의 형태로 태그를 자식으로 넣는다.
            inner1.innerHTML = "<div><a href='#'>태그생성</a></div>"
        }
    </script>


    <hr>


    <h3>inner HTML2</h3>
    <div class="inner2">
        <!-- 단순히 넣어도 되지만 반복해서 넣기
        <input type="checkbox" name="add" value="1">1
        <input type="checkbox" name="add" value="2">2
        <input type="checkbox" name="add" value="3">3
        <input type="checkbox" name="add" value="4">4
        <input type="checkbox" name="add" value="5">5
        -->
    </div>
    <button class="btn2">태그 생성</button>

    <script>
        var inner2 = document.querySelector(".inner2");
        var btn2 = document.querySelector(".btn2");

        btn2.onclick = function () {
            
            var str = ''; //문자열을 더할 변수 생성
            for(var i = 1; i <= 5; i++) {
                str += '<input type="checkbox" name="add" value="'+  i  +'">' + i;
            }

            // console.log(str);

            //마지막에 한번만
            inner2.innerHTML = str;
        }        
    </script>

</body>
</html>

btn.onclick = function() {
//문자열의 형태로 태그를 자식으로 넣는다.
inner1.innerHTML = "<div><a href = '#'> 태그생성 </a></div>"
}

4.2. node 하나씩 생성 - todo list 생성, list 추가 [ 다시 한 번 보기 ]


      
      
      
    
    
      <javascript />
    
<!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>
    
    <h3>todo list 만들기</h3>
    <input type="text" class="todo" placeholder="할 일을 작성해 보세요">
    <button class="btn">추가</button>
    
    <!-- 버튼 누르면 하나씩 생성 -->
    <ul class="list">
        <!--
        <li>내용</li>
        <li>내용</li>
        <li>내용</li>
        <li>내용</li>
        <li>내용</li>
        이런식으로 생성될 것임
        -->
    </ul>

    <script>
        var todo = document.querySelector(".todo");
        var list = document.querySelector(".list");
        var btn = document.querySelector(".btn");
        
        btn.onclick = function () {

            var li = document.createElement("li"); //li태그 생성
            // console.log(li); 순수한 태그 생성, <li></li>

            var a = document.createElement("a");
            a.href = "#"; //태그를 조립한다고 생각하면 됨
            // console.log(a); //<a href = "#"></a>
            a.innerHTML = todo.value; //todo에 적은 값을 a의 innerHTML에 넣음
            
            li.appendChild(a); //li태그의 자식으로 a태그를 넣음
            
            list.appendChild(li); //최종적으로 list태그(ul)의 자식으로 li를 넣음

            todo.value = ""; //추가하면 value 값 없애기, 초기화
        }
    </script>



    <hr>



    <h3>addlist 만들기</h3>
    <div id="addList">
    </div>

    <button id="add">추가</button>

    <script>      
        window.onload = function() { //로딩이 될 때 이미 리스트 열개는 만들어져 있음
            var addList = document.getElementById("addList"); //id로 addList 가져옴
            var ul = document.createElement("ul"); //ul태그는 for밖에서 한번만 만들어짐

            for(var i = 1; i <= 10; i++) { //li태그는 10개 만들어짐
                var li = document.createElement("li"); //태그를 만들고
                li.innerHTML = "리스트" + i + "번째"; //innerHTML에 리스트i번째라고 나타내기
                ul.appendChild(li); //ul의 자식으로 li를 하나씩 추가 함
            }

            addList.appendChild(ul); //최종적으로 ul을 addList에 넣음 = addList의 자식으로 ul을 넣음
        }

        //

        var add = document.getElementById("add"); //add 버튼 가져옴
        add.onclick = function() {
            var li = document.createElement("li");
            li.innerHTML = "추가된 리스트";
            
            //새롭게 addList > li 태그를 얻음 = document.querySelector("#addList > ul");
            //재사용할 필요가 없다면 변수를 만들어서 넣지 않고 점(.) 찍어서 사용
            document.querySelector("#addList > ul").appendChild(li);
        }   
    </script>

</body>
</html>

4.3. 표 한번에 추가

for문 사용 - 비효율적


      
      
      
    
    
      <javascript />
    
<!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>
        table {
            border-spacing: 0;
            border-collapse: collapse;
        }

        thead th,
        td {
            border: 1px solid black;
        }
    </style>

</head>

<body>

    <button type="button" id="addLists">5개추가하기</button>
    <button type="button" id="addList">1개추가하기</button>

    <table>
        <thead>
            <tr>
                <th>교시</th>
                <th>훈련과목</th>
                <th>담당자</th>
                <th>훈련내용</th>
            </tr>
        </thead>
        <tbody class="todoList">
            <tr>
                <td><input type="text" size="3"></td>
                <td><input type="text"></td>
                <td><input type="text" size="5"></td>
                <td><input type="text"></td>
            </tr>
            <!-- tr별로 appendChild가 들어가면 됨 -->
        </tbody>
    </table>


    <script>
        var addList = document.getElementById("addList");
        var addLists = document.getElementById("addLists");

        var todoList = document.querySelector(".todoList");

        addList.onclick = function () {
            var tr = document.createElement("tr"); //tr만듦
            for (var i = 1; i <= 4; i++) {
                var td = document.createElement("td"); //td만듦
                var input = document.createElement("input"); //input만듦
                tr.appendChild(td);
                td.appendChild(input);
                input.type = "text";

                if (i == 1) {
                    input.size = "3";
                } else if (i == 3) {
                    input.size = "5";
                }
            }
            // console.log(tr);
            todoList.appendChild(tr);
        }


        addLists.onclick = function () {
            for (var j = 1; j <= 5; j++) {
                var tr = document.createElement("tr"); //tr만듦

                for (var i = 1; i <= 4; i++) {
                    var td = document.createElement("td"); //td만듦
                    var input = document.createElement("input"); //input만듦
                    tr.appendChild(td);
                    td.appendChild(input);
                    input.type = "text";

                    if (i == 1) {
                        input.size = "3";
                    } else if (i == 3) {
                        input.size = "5";
                    }
                }
                // console.log(tr);
                todoList.appendChild(tr);
            }
        }
    </script>


</body>

</html>

innerHTML로 한꺼번에 tr태그를 만들어서 가져오기 - 효율적
tr을 querySelector로 가져와서 cloneNode로 만들어 appendChild 하기


      
      
      
    
    
      <javascript />
    
<!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>
        table {
            border-spacing: 0;
            border-collapse: collapse;
        }

        thead th,
        td {
            border: 1px solid black;
        }
    </style>

</head>

<body>

    <button type="button" id="addLists">5개추가하기</button>
    <button type="button" id="addList">1개추가하기</button>

    <table>
        <thead>
            <tr>
                <th>교시</th>
                <th>훈련과목</th>
                <th>담당자</th>
                <th>훈련내용</th>
            </tr>
        </thead>
        <tbody class="todoList">
            <tr><!-- tr의 innerHTML안에 각 td들을 넣어 만듦 -->
                <td><input type="text" size="3"></td>
                <td><input type="text"></td>
                <td><input type="text" size="5"></td>
                <td><input type="text"></td>
            </tr>
            <!-- tr별로 appendChild가 들어가면 됨 -->
        </tbody>
    </table>


    <script>
        var todoList = document.querySelector(".todoList"); //todoList를 가져옴

        var addList = document.getElementById("addList");
        addList.onclick = function () {
            //tr은 1개 td는 4개
            createTag(); //함수호출
        }

        var addLists = addLists = document.getElementById("addLists");
        addLists.onclick = function () { //함수 안에서 5번 호출
            for (var i = 1; i <= 5; i++) {
                createTag();
            }
        }

        function createTag() { //함수로 만듦
            var tr = document.createElement("tr"); //tr태그를 만듦
            tr.innerHTML = '<td><input type="text" size="3"></td>' +
                '<td><input type="text"></td>' +
                '<td><input type="text" size="5"></td>' +
                '<td><input type="text"></td>';

            todoList.appendChild(tr);
            // document.querySelector(".todoList").appendChild(tr); todoList를 안만들면 이렇게 하면 됨
        }
    </script>



    <script> //짧은 코드
        var todoList = document.querySelector(".todoList"); //todoList를 가져옴

        addList.onclick = function () {
            var tr = document.querySelector(".todoList tr"); //tr을 querySelector로 다 가져옴 → object형
            var a = tr.cloneNode(true); //cloneNode로 node로 클론떠서 var변수로 하나 만들어줌
            todoList.appendChild(a); //appendChild는 node형만 가지고 올 수 있음
        }

        addLists.onclick = function () {
            for (var i = 1; i <= 5; i++) {
                var tr = document.querySelector(".todoList tr");
                var a = tr.cloneNode(true);
                todoList.appendChild(a);
            }
        }
    </script>

</body>

</html>

오늘 하루

기억에 남는 부분

어려운 부분

문제 해결 부분

728x90

'클라이언트 > JavaScript' 카테고리의 다른 글

[JavaScript] 이벤트 객체 (0)	2023.01.03
[JavaScript] node remove, select(parent,children), class 속성제어 (1)	2023.01.02
[JavaScript] 이벤트 핸들러, this, BOM, DOM (0)	2022.12.29
[JavaScript] 함수, 변수scope, Closure & lexical scoping, JSON(객체) (0)	2022.12.28
[JavaScript] JS 기본 문법 (0)	2022.12.27

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

1. Node

1.1. node css 변경

1.2. node 생성, 추가

1.2.1. createElement()

1.2.2. appendChild()

1.2.3. innerHTML = 문자열

1.2.4. insertBefore(삽입노드, 기준노드)

1.3. 예제

1.3.1. 노트선택(1)

1.3.2. 노트선택(2)

1.3.3. 태그의 속성제어

1.3.4. CSS 제어

2. onfocus / onblur

2.1. onfocus

2.2. onblur

2.2.1. onblur 예제 (▼)

2.2.2. onchange 예제 (▲)

3. Quiz - node select

3.1. node_select - check 이벤트

3.2. node_select - change 이벤트

3.3. node_select - click이벤트

3.4. count 만들기

3.5. 그림, 색상 변경하기 - click 이벤트

4. Quiz - node create

4.1. node 한번에 생성 [ 다시 한 번 보기 ]

4.2. node 하나씩 생성 - todo list 생성, list 추가 [ 다시 한 번 보기 ]

4.3. 표 한번에 추가

'클라이언트 > JavaScript' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

'클라이언트 > JavaScript' 카테고리의 다른 글

검색 태그

최근 댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역