JAVASCRIPT STEP 39 - DOM 예제

★ 문제 1

• 아래와 같은 문서를 생성하시오.
• 조건
  • 숫자키를 누르면 하단의 박스(div)안에 이미지를 생성하시오.
  • 상단 숫자키 사용 가능
  • 우측 숫자키패드 사용 가능

 

■ HTML 코드

<div id="div1"></div>

 

■ CSS 코드

<style>
#div1 {
    border: 1px solid #999;
    padding: 20px;
    min-height: 146px;
}
</style>

 

■ JavaScript

<script>

    let div1 = document.getElementById('div1');

    window.onkeydown = function() {
        if(event.keyCode >=48 && event.keyCode <=57){
            div1.innerHTML += "<img src='images/" + (event.keyCode - 48) + ".png'>"
        }else if(event.keyCode >=96 && event.keyCode <=105){
            div1.innerHTML += "<img src='images/" + (event.keyCode - 96) + ".png'>"
        }
    }

</script>

 

■ 실행 결과

키패드의 숫자를 누르면 해당 이미지가 div박스 안에 삽입

 

★ 문제 2

• 아래와 같은 문서를 생성하시오.
• 조건
  • 색상과 이름을 입력하면 테이블에 추가하시오.

 

■ HTML 코드

<h1>테이블</h1>

<fieldset>
    <legend>색상입력</legend>
    <div><label>색상 : </label><input type="color" id="txtColor"></div>
    <div><label>이름 : </label><input type="text" id="txtName" size="15"></div>
    <div><input type="button" value="추가하기" id="btnAdd"></div>
</fieldset>

<table id="tbl1">
    <thead>
        <tr>
            <th>색상명</th>
            <th>미리보기</th>
        </tr>
    </thead>
    <tbody id="tbody1">
        <tr>
            <td>노랑</td>
            <td bgColor="#FFFF00">#FFFF00</td>
        </tr>
        <tr>
            <td>풀색</td>
            <td bgColor="#ACEF12">#ACEF12</td>
        </tr>
    </tbody>
</table>

 

■ CSS 코드

<style>
fieldset { width: 200px; }
    fieldset > div { margin: 5px; }
    #tbl1 { border: 1px solid gray; border-collapse: collapse; margin-top: 20px; width: 400px; }
    #tbl1 td { border: 1px solid gray; padding: 4px 10px; text-align: center;}
    #tbl1 td:nth-child(1) { width: 150px; }
</style>

 

■ JavaScript

<script>

    let color = document.getElementById('txtColor');
    let name = document.getElementById('txtName');
    let add = document.getElementById('btnAdd');
    let tbody1 = document.getElementById("tbody1");

    add.onclick = function() {

        var row = "<tr>";
        row += "<td>";
        row += txtName.value;
        row += "</td>";
        row += "<td bgColor='" + txtColor.value + "'>";
        row += txtColor.value;
        row += "</td>";
        row += "</tr>";

        tbody1.innerHTML += row;

        //색 추가뒤에 입력 양식을 초기화
        txtColor.value = "#000";
        txtName.value = "";x

    };

    txtColor.onchange = function() {
        txtName.focus();
    };

    txtName.onkeydown = function() {
        if (event.keyCode == 13) {
            btnAdd.click(); //버튼 클릭 / 에뮬레이터 함수
        }
    };



</script>

 

■ 실행 결과

색상 선택 후, 이름 입력 시 해당 색상 저장

 

★ 문제 3

• 아래와 같은 문서를 생성하시오.
• 조건
  • 방향키 조작에 따라 테이블을 행/열을 조작하시오.
  • 좌우 : 열 추가/삭제
  • 상하 : 행 추가/삭제
  • 셀에 숫자를 할당하시오.

 

■ HTML 코드

<table id="tbl" class="table">
    <tbody id="tbody1">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

 

■ CSS 코드

<style>
    #tbl, #tbl td {
        border : 1px solid black;
        border-collapse: collapse;
    }
    #tbl td {
        width : 100px;
        height: 100px;
        text-align: center;
    }

</style>

 

■ JavaScript

<script>
    let tbody1 = document.getElementById("tbody1");
    let row = 2;
    let column = 2;
    var no = 0;

    window.onkeydown = function() {

        no=1;

        if(event.keyCode == 39) {
            //열 증가
            column++;
            create();
        } else if(event.keyCode == 37) {
            //열 감소
            column--;
            if(column<1) column=1;
            create();
        } else if(event.keyCode == 40) {
            //행 증가
            row++;
            create();
        } else if(event.keyCode == 38) {
            //행 감소
            row--;
            if(row<1) row=1;
            create();
        }
    };

    function create() {
        tbody1.innerHTML = "";
        let temp = "";

        for (var i=0; i<row; i++) {
            temp= "<tr>";
            for (var j=0; j<column; j++) {
                temp += "<td>";
                temp += no;
                temp += "</td>"
                no++; 
            }
            temp += "</tr>";
            tbody1.innerHTML += temp;
        }
    }

</script>

 

■ 실행 결과

방향키를 이용하여 테이블의 크기를 늘리거나 줄임

 

★ 문제 4

• 아래와 같은 문서를 생성하시오.
• 조건
  • 모든 셀에 클릭(onmousedown) 이벤트를 추가해 카운트를 조작하시오.
  • 왼쪽 버튼 : 카운트 증가
  • 오른쪽 버튼 : 카운트 감소
  • 오른쪽 버튼을 눌러 0이 되면 클릭 이벤트 사용 중지

 

■ HTML 코드

<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
    <!--  -->
    <table id="tbl1">
        <tr>
            <td class="cell">0</td>
            <td class="cell">0</td>
            <td class="cell">0</td>
            <td class="cell">0</td>
            <td class="cell">0</td>
        </tr>
        <tr>
            <td class="cell">0</td>
            <td class="cell">0</td>
            <td class="cell">0</td>
            <td class="cell">0</td>
            <td class="cell">0</td>
        </tr>
        <tr>
            <td class="cell">0</td>
            <td class="cell">0</td>
            <td class="cell">0</td>
            <td class="cell">0</td>
            <td class="cell">0</td>
        </tr>
        <tr>
            <td class="cell">0</td>
            <td class="cell">0</td>
            <td class="cell">0</td>
            <td class="cell">0</td>
            <td class="cell">0</td>
        </tr>
        <tr>
            <td class="cell">0</td>
            <td class="cell">0</td>
            <td class="cell">0</td>
            <td class="cell">0</td>
            <td class="cell">0</td>
        </tr>
    </table>
</body>

 

■ CSS 코드

<style>
    #tbl1, #tbl1 td {
        border : 1px solid black;
        border-collapse: collapse;
    }
    #tbl1 td {
        width : 100px;
        height: 100px;
        text-align: center;
        font-size : 70px;
        font-weight: bold;
    }
</style>

 

■ JavaScript

<script>

    window.onload = function() {

        let cell = document.getElementsByClassName('cell');

        for(var i=0; i<cell.length; i++) {

            cell[i].onmousedown = function() {

                let c = event.srcElement;
                var n = parseInt(c.innerHTML);    

                if(event.buttons == 1) {
                    n++;
                    c.innerText = n;
                    c.bgColor = "white";
                } else if (event.buttons == 2) {
                    n--;
                    if (n <=0) {
                        n=0;
                        c.bgColor = "gray";
                        event.srcElement.onmousedown = null;
                    }
                    c.innerText = n;
                }

            };
        }

    };


</script>

 

■ 실행 결과

왼쪽 마우스 클릭 시, 숫자 증가 오른쪽 마우스 클릭시, 숫자 감소 0이되면 잠김

 

★ 문제 5

• 아래와 같은 문서를 생성하시오
• 조건
  • 모든 셀에 클릭 이벤트를 추가해 이미지 태그를 동적 추가하시오.
  • 왼쪽 버튼 : rect_icon01.png 추가
  • 오른쪽 버튼 : rect_icon02.png 추가

 

■ HTML 코드

<body oncontextmenu="return false;">
<table id="tbl">
    <tr>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
    </tr>
    <tr>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
    </tr>
    <tr>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
    </tr>
    <tr>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
    </tr>
    <tr>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
    </tr>
</table>

 

■ CSS 코드

<style>
    #tbl {
        border : 1px solid gray;
        border-collapse: collapse;
    }

    #tbl td {
        border : 1px solid gray;
        width : 128px;
        height: 128px;
        font-size : 0px;
        padding : 0px;
        margin : 0px;
    }

    #tbl img {
        display: block;
    }

</style>

 

■ JavaScript

<script>

    const list = document.getElementsByClassName('td');

    for (let i=0; i<list.length; i++) {

        list[i].onmousedown = function() {


            if(event.buttons == 1) {
                event.target.innerHTML = '<img src="images/rect_icon01.png">';
            } else if(event.buttons == 2) {
                event.target.innerHTML = '<img src="images/rect_icon02.png">';
            } else if(event.buttons == 4) {
                event.target.innerHTML = '<img src="images/rect_icon03.png">';
            }
        };

    }

</script>

 

■ 실행 결과

왼쪽 버튼클릭시 헤드셋 이미지, 오른쪽 버튼 클릭시 침대 이미지, 휠 버튼 클릭시 집이미지

 

★ 문제 6

• 아래와 같은 문서를 생성하시오.
• 조건
  • 방향키에 맞춰 활성화된 셀을 이동하시오.
  • 상,하,좌,우

 

■ HTML 코드

<table id="tbl">
    <tr>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
    </tr>
    <tr>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
    </tr>
    <tr>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
    </tr>
    <tr>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
    </tr>
    <tr>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
    </tr>
</table>

 

■ CSS 코드

<style>
    #tbl {
        border : 1px solid gray;
        border-collapse: collapse;
        margin : 0px auto;
    }

    #tbl td {
        border : 1px solid gray;
        width : 100px;
        height: 100px;
        font-size : 0px;
        padding : 0px;
        margin : 0px;
    }
</style>

 

■ JavaScript

<script>

    let cell = 0;
    let index = 0;

    window.onload = function() {
        cell=document.getElementsByClassName("td");
        cell[index].bgColor = "gold";
    };

    window.onkeydown = function() {

        clear();
        //좌 : 37, 우 : 39, 상 : 38, 하 : 40
        if (event.keyCode == 37) {
            //좌
            index--;
            if(index < 0 || index%5 ==4) index++;
        } else if (event.keyCode == 39) {
            //우
            index++;
            if(index >= cell.length || index%5==0) index--;
        } else if (event.keyCode == 38) {
            //상
            index -=5;
            if(index < 0) index+=5;
        } else if (event.keyCode == 40) {
            //하
            index +=5;
            if(index >= cell.length) index -=5;
        }
        cell[index].bgColor = "gold";

    };

    function clear() {

        for (var i=0; i<cell.length; i++) {
            cell[i].bgColor = "transparent";
        }

    }

</script>

 

■ 실행 결과

방향키를 이용하여, 해당 네모칸을 이동

 

★ 문제 7

• 아래와 같은 문서를 생성하시오.
• 조건
  • 방향키에 맞춰 활성화된 셀을 이동하시오.
  • 상,하,좌,우
  • 검은색 셀은 장애물이라 이동할 수 없습니다.

 

■ HTML 코드

<table id="tbl">
    <tr>
        <td class="td"></td>
        <td class="td"></td>
        <td class="no" id="no"></td>
        <td class="td"></td>
        <td class="td"></td>
    </tr>
    <tr>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
    </tr>
    <tr>
        <td class="no" id="no"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="no" id="no"></td>
        <td class="td"></td>
    </tr>
    <tr>
        <td class="td"></td>
        <td class="td"></td>
        <td class="no" id="no"></td>
        <td class="td"></td>
        <td class="td"></td>
    </tr>
    <tr>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="td"></td>
        <td class="no" id="no"></td>
    </tr>
</table>

 

■ CSS 코드

<style>
    #tbl {
        border : 1px solid gray;
        border-collapse: collapse;
        margin : 0px auto;
    }

    #tbl td {
        border : 1px solid gray;
        width : 100px;
        height: 100px;
        font-size : 0px;
        padding : 0px;
        margin : 0px;
    }

    #no {
        background-color: gray;
    }
</style>

 

■ JavaScript

<script>

    let cell = 0;
    let index = 0;

    window.onload = function() {
        cell=document.getElementsByTagName("td");
        no=document.getElementsByClassName("no");
        cell[index].bgColor = "tomato";
    };

    window.onkeydown = function() {

        clear();

        //벽 : 2,10,13,17,24
        //좌 : 37, 우 : 39, 상 : 38, 하 : 40

        if (event.keyCode == 37) {
            //좌
            index--;
            if(index < 0 || index%5 == 4) index++;
            if (cell[index].className == "no") { index++; }
        } else if (event.keyCode == 39) {
            //우
            index++;
            if(index >= cell.length || index%5==0) index--;
            if(cell[index].className == "no") {index--;}
        } else if (event.keyCode == 38) {
            //상
            index -=5;
            if(index < 0) index+=5;
            if(cell[index].className == "no") {index+=5;}
        } else if (event.keyCode == 40) {
            //하
            index +=5;
            if(index >= cell.length) index -=5;
            if(cell[index].className == "no") {index-=5;}
        }
        cell[index].bgColor = "tomato";

    };

    function clear() {

        for (var i=0; i<cell.length; i++) {
            cell[i].bgColor = "transparent";
        }

    }

</script>

 

■ 실행 결과

방향키를 이용하여, 네모칸 이동. 장애물은 못 지나감.

 

★ 문제 8 

• 아래와 같은 문서를 생성하시오.
• 조건
  • 사용자 입력을 받아 행을 추가하시오.

 

■ HTML 코드

<fieldset id="add">
    <legend>입력 항목</legend>
    <div><label for="txtname">이름 : </label><input type="text" id="txtname" autofocus></div>
    <div><label for="selage">나이 : </label><select id="selage"></select></div>
    <div><label for="rbgener">성별 : </label><label><input type="radio" name="rbgender" id="rbgender1" value="m" checked> 남자</label><label><input type="radio" name="rbgender" id="rbgender2" value="f"> 여자</label></div>
    <div><label for="txtaddress">주소 : </label><input type="text" id="txtaddress"></div>
    <div><input type="button" id="btnadd" value="추가하기"></div>
</fieldset>


<table id="tbl1">
    <thead>
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>나이</th>
            <th>성별</th>
            <th>주소</th>
        </tr>
    </thead>
    <tbody id="tbody1">
        <tr>
            <td colspan="5">등록된 항목이 없습니다.</td>
        </tr>
    </tbody>
</table>

 

■ CSS 코드

<style>
    div, span, input, th, td, fieldset {
        font-size: 14px;
    }

    #add {
        border: 1px solid gray;
        padding: 10px;
        width: 300px;
    }

    #add > div {
        margin-bottom: 5px;
    }

    #add > div > label:first-child {
        display: inline-block;
        width: 50px;
        text-align: right;
        margin-right: 10px;
    }

    #btnadd {
        margin-top: 10px;
        margin-left: 15px;
    }

    #tbl1 {
        border: 1px solid gray;
        border-collapse: collapse;
        width: 500px;
        margin-top: 20px;
    }
    #tbl1 th {
        background: #ddd;
    }
    #tbl1 th, #tbl1 td {
        border: 1px solid gray;
        padding: 4px;
        text-align: center;
    }
    #tbl1 th:nth-child(1) { width: 50px; }
    #tbl1 th:nth-child(2) { width: 70px; }
    #tbl1 th:nth-child(3) { width: 50px; }
    #tbl1 th:nth-child(4) { width: 120px; }
    #tbl1 th:nth-child(5) { width: 210px; }



</style>

 

■ JavaScript

<script>

    var txtname, selage, rbgender1, rbgender2, txtaddress, btnadd, tbody1;
    var num = 1;

    window.onload = function() {

        txtname = document.getElementById("txtname");
        selage = document.getElementById("selage");
        rbgender1 = document.getElementById("rbgender1");
        rbgender2 = document.getElementById("rbgender2");
        txtaddress = document.getElementById("txtaddress");
        btnadd = document.getElementById("btnadd");
        tbody1 = document.getElementById("tbody1");

        btnadd.onclick = additem;

        for (var i=20; i<=60; i++) {
            selage.innerHTML += "<option value='" + i + "'>" + i + "</option>";
        }		

        txtaddress.onkeydown = function() {
            if (event.keyCode == 13) {
                additem();
            }
        };

    };

    function additem() {

        if (txtname.value == "") {
            txtname.focus();
            return;
        }

        if (txtaddress.value == "") {
            txtaddress.focus();
            return;
        }


        if (tbody1.innerText == "등록된 항목이 없습니다.") {
            tbody1.innerHTML = "";
        }

        var row = "<tr>";

        row += "<td>";
        row += num;
        num++;
        row += "</td>";

        row += "<td>";
        row += txtname.value;
        row += "</td>";

        row += "<td>";
        row += selage.value;
        row += "</td>";

        row += "<td>";
        if (rbgender1.checked) {
            row += "<img src='https://drive.google.com/uc?export=download&id=1pxPAyKXIRZmw-Er8BMvy5fkPSh6ea-uo'>";
        } else {
            row += "<img src='https://drive.google.com/uc?export=download&id=1Nqr6aDPium54TKqa1LKsZWmFPzDEHOfi'>";
        }
        row += "</td>";

        row += "<td>";
        row += txtaddress.value;
        row += "</td>";

        row += "</tr>";

        tbody1.innerHTML += row;


        txtname.value = "";
        selage.selectedIndex = 0;
        rbgender1.checked = true;
        txtaddress.value = "";
        txtname.focus();

    }

</script>

 

■ 실행 결과

주소록

 

★ 문제 9

• 아래와 같은 문서를 생성하시오.
• 조건
  • 달력을 구현하시오.

 

■ HTML 코드

<h1>
    <div id="title"></div>
    <div>
        <button id="btnprev">이전달</button>
        <button id="btnnow">이번달</button>
        <button id="btnnext">다음달</button>
    </div>
</h1>

<table id="tbl">
    <thead>
        <tr>
            <th>SUN</th>
            <th>MON</th>
            <th>TUE</th>
            <th>WED</th>
            <th>THU</th>
            <th>FRI</th>
            <th>SAT</th>
        </tr>
    </thead>
    <tbody id='tbody1'></tbody>
</table>

 

■ CSS 코드

<style>
    body {
        margin: 20px;
        margin-top: 40px;
    }
    h1 {
        width: 800px;
        display: flex;
        justify-content: space-between;
    }
    #tbl {
        border: 1px solid #999;
        border-collapse: collapse;
        width: 805px;
    }
    #tbl th, #tbl td {
        border: 1px solid #999;
    }
    #tbl th {
        background-color: #444;
        color: white;
        padding: 7px;
    }
    #tbl td {
        height: 80px;
        width: 115px;
        vertical-align: top;
        padding: 15px;
        position: relative;
    }
    #tbl .no {
        position: absolute;
        right: 10px;
        top: 9px;
    }
    #tbl td div {
        font-size: .9em;
    }
    #tbl td:first-child .no {
        color: tomato;
    }
    #tbl td:last-child .no {
        color: cornflowerblue;
    }
</style>

 

■ JavaScript

<script>

    var title = document.getElementById("title");
    var tbody1 = document.getElementById("tbody1");

    var year;
    var month;

    var now = new Date();
    year = now.getFullYear();
    month = now.getMonth();


    function start(year, month) {
        var date = new Date(year, month, 1);

        var lastDay = (new Date(date.getFullYear(), date.getMonth()+1, 0)).getDate(); //해당월의 마지막날
        var firstDay = (new Date(date.getFullYear(), date.getMonth(), 1)).getDay(); //해당월 1일의 요일

        title.textContent = date.getFullYear() + "." + (date.getMonth() + 1);


        //공백 채우기
        var temp = "";
        temp = "<tr>";

        for (var i=0; i<firstDay; i++) {
            temp += "<td></td>";
        }

        for (var i=1; i<=lastDay; i++) {
            temp += "<td>";
            temp += "<span class='no'>" + i + "</span>";
            temp += "<div>할일</div>";
            temp += "<div>또 할일</div>";
            temp += "<div>더 많은 할일</div>";
            temp += "</td>";
            if ((i + firstDay) % 7 == 0) {
                temp += "</tr><tr>";
            }
        }

        var seed = 7;

        if (7 - (lastDay % 7 + firstDay) < 0) {
            seed = 14;
        }

        for (var i=0; i<(seed - (lastDay % 7 + firstDay)); i++) {
            temp += "<td></td>";
        }
        temp += "</tr>";

        tbody1.innerHTML = temp;
    }

    start(year, month);


    document.getElementById('btnnext').onclick = function() {
        now.setMonth(now.getMonth() + 1);
        year = now.getFullYear();
        month = now.getMonth();
        start(year, month);
    };

    document.getElementById('btnnow').onclick = function() {
        now = new Date();
        year = now.getFullYear();
        month = now.getMonth();
        start(year, month);
    };

    document.getElementById('btnprev').onclick = function() {
        now.setMonth(now.getMonth() - 1);
        year = now.getFullYear();
        month = now.getMonth();
        start(year, month);
    };

</script>

 

■ 실행 결과

달력