[Project - 01] 2. 랜덤 좌석 배정 프로그램 : 기본 기능 만들기

Project/[Project - 01]랜덤 좌석 배정 프로그램 2021. 1. 22. 17:39

랜덤 좌석 배정 프로그램의 기본 기능은, [좌석 배정] 버튼을 누르면 아래의 책상에 랜덤으로 번호가 배정되는 기능입니다.

전체 코드는 github에서 확인할 수 있습니다. https://github.com/younyikim/RandomSeat

●IDE : Atom

제목 및 table 레이아웃

<head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    <style media="screen">
        h1 {
          text-align : center;
          font-family: 'Jua', sans-serif;
          font-size : 40px;
        }
    </style>
    <meta charset="utf-8">
    <title>랜덤 좌석 배정 프로그램</title>
  </head>
  <body>
    <h1>랜덤 좌석 배정 프로그램</h1>

font는 구글 font를 사용하였습니다.

테이블을 책상 배치처럼 보이게 하기 위해, 아래와 같은 css 속성을 지정하여 사용하였습니다.

table {
       width : 90%;
       border-spacing: 0px 10px;
}
th, td {
        border : 1px solid black;
        text-align : center;
        font-size : 20px;
}

Button

button은 이곳(w3schools)를 참고해서 원하는 모양과 색으로 만들었습니다. 색은 주로 구글에서 'color picker'를 사용해 원하는 색을 찾아 적용합니다.

css style을 정의할 때,

id는 #

class는 .

tag는 아무것도 앞에 쓰지 않고 쓰듯이

type은 아래와 같이 사용하면 됩니다.

  input[type=button] {
          background-color: #55bd7e;
          border: none;
          color: white;
          padding: 10px 25px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 16px;
          font-family: 'Jua', sans-serif;
}

  <input type="button" id ="selected" name="random" value="좌석 배정"  onclick="
      if(document.querySelector('#selected').value === '좌석 배정'){
          randomSeat(20);
          document.querySelector('#selected').value = '다시 하기';
      } else {
        randomSeat(20);
      }
  ">

위의 <input> 태그의 기능을 간단히 설명하면, type은 button이고, id는 'selected', name은 'random', value는 '좌석 배정'입니다.

이 버튼을 클릭하면, onClick에 정의된 기능이 동작하게 됩니다.

if(document.querySelector('#selected').value === '좌석 배정')

'selected'란 id의 값(value)가 '좌석 배정'일 경우,

randomSeat()이라는 함수를 실행하고, 매개변수로는 20을 넣어줍니다. 그리고, 'selected'란 id의 값(value)을 '다시 하기'로 변경해줍니다.

즉, 버튼이 눌리면, 좌석을 배정해주는 함수가 실행되고, 버튼에 써있는 글씨가 '좌석 배정' 에서 '다시 하기'로 변경된다는 것입니다. HTML은 정적인 웹페이지이기 때문에 어떠한 이벤트가 발생하더라도, 화면에는 보여지는 변화가 없습니다. 이런 정적 웹페이지를 dynamic 하고, interactive하게 만들에주는 것이 바로 JavaScript입니다.

알고리즘

다음은 알고리즘이라고 하기에는 너무 간단한..좌석 배정을 랜덤으로 해주는 코드를 보겠습니다.

  var seat = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];

      function randomSeat(num) {
        var student = num;

        var i = 0;
        var j = 0;
        var max = num;

        for (i = 0; i < student; i++) {
          seat[i] = Math.floor(Math.random() * max) + 1;
          // 1~num까지의 수를 랜덤하게 뽑음
          // Math.floor() : 소수점 이하를 버림한다.

          //Check the overlap
          for (j = 0; j < i; j++) {
            if (seat[i] == seat[j]) i--;
          }
        }
        showTable();
      }

'seat'를 전역 변수로 선언하여 사용하였습니다. 우선 기본으로 20명의 자리를 배정하는 프로그램으로 만들어 1~20의 값을 배열에 넣어주었습니다.

함수 randomSeat는 매개변수로 주어진 num의 수 만큼, seat 배열에 랜덤한 번호를 저장하는 함수입니다.

Math.floor() 는 소수점 이하를 버림하는 함수이고, 1부터 num까지의 수를 뽑기 위해, 1을 더해줍니다.

두번째 for문은, 중복된 번호가 seat에 저장되지 않도록 처리해줍니다.

showTable()은 좌석 배정이 완료된 후, 실제 table에 자리를 보여주는 함수를 호출합니다.

showTable()

[좌석 배정] 버튼을 클릭 시, 각각의 table을 둘러싸고 있는 <div>에 아래의 table이 하나씩 표시됩니다.

function showTable() {
        var line1 =  document.getElementById("line1");
        var line2 =  document.getElementById("line2");
        var line3 =  document.getElementById("line3");

        var table1 = "";
        var table2 = "";
        var table3 = "";


		//첫번째 분단(테이블)
        table1 += "<table>";
            for (i = 0; i < 4; i++) {
              table1 += "<tr>";
                for (j = 0; j < 2; j++) {
                  table1 += "<td> " + seat[2 * i + j] + "</td>";
                }
                table1 += "</tr>";
            }
           table1 += "</table></br>";
           line1.innerHTML = table1;

		//두번째 분단(테이블)
          table2 += "<table>";
             for (i = 4; i < 7; i++) {
                table2 += "<tr>";
                 for (j = 0; j < 2; j++) {
                   table2 += "<td> " + seat[2 * i + j] + "</td>";
                 }
                 table2 += "</tr>";
             }
            table2 += "</table></br>";
            line2.innerHTML = table2;
		//세번째 분단(테이블)
            table3 += "<table>";
               for (i = 7; i < 10; i++) {
                  table3 += "<tr>";
                   for (j = 0; j < 2; j++) {
                     table3 += "<td> " + seat[2 * i + j] + "</td>";
                   }
                   table3 += "</tr>";
               }
              table3 += "</table></br>";
              line3.innerHTML = table3;
      }

왼쪽부터, <div>의 id가 line1, line2, line3 입니다.

아래는 <body>입니다. 저는 처음 화면에서도 책상이 보였으면 좋겠다고 생각해서 아래와 같은 코드를 추가했습니다.

  <div id="line1" style="width:33%; float:left; ">
      <script type="text/javascript">
        document.write('<table>');
            for (i = 0; i < 4; i++) {
              document.write('<tr>');
                for (j = 0; j < 2; j++) {
                  document.write('<td>' + "O" + '</td>');
                }
              document.write('</tr>')
            }
         document.write('</table><br/>');
      </script>
    </div>

    <div id="line2" style="width:33%; float:left;">
      <script type="text/javascript">
        document.write('<table>');
            for (i = 4; i < 7; i++) {
              document.write('<tr>');
                for (j = 0; j < 2; j++) {
                  document.write('<td>' + "O" + '</td>');
                }
              document.write('</tr>')
            }
         document.write('</table><br/>');
      </script>
    </div>

    <div id="line3" style="width:33%; float:left;">
      <script type="text/javascript">
        document.write('<table>');
            for (i = 7; i < 10; i++) {
              document.write('<tr>');
                for (j = 0; j < 2; j++) {
                  document.write('<td>' + "O" + '</td>');
                }
              document.write('</tr>')
            }
         document.write('</table><br/>');
      </script>
    </div>

혹시, 첫 화면에서는 책상이 보이지 않기를 원한다면, 위의 코드 대신 아래와 같은 코드를 사용하면 됩니다. 이러면 아래의 사진과 같은 화면이 초기 화면이 됩니다.

  <div id="line1" style="width:33%; float:left;"></div>
  <div id="line2" style="width:33%; float:left;"></div> 
  <div id="line3" style="width:33%; float:left;"></div>

_______________________________________

오늘은 랜덤 좌석 배정 프로그램의 아주 기본적인 기능들을 구현해보았습니다. 다음에는

조금 더 여러가지 기능들이 추가된 프로그램으로 돌아오겠습니다. 감사합니다.

'Project > [Project - 01]랜덤 좌석 배정 프로그램' 카테고리의 다른 글

[Project - 01] 1. 랜덤 좌석 배정 프로그램 : 개요 (0)	2021.01.22
[Project - 01] 0. 랜덤 좌석 배정 프로그램 : README.md (0)	2021.01.22

ABOUT ME

크크의 개발 블로그 크크의 개발 블로그

제목 및 table 레이아웃

Button

알고리즘

'Project > [Project - 01]랜덤 좌석 배정 프로그램' 카테고리의 다른 글

티스토리툴바

ABOUT ME

제목 및 table 레이아웃

Button

알고리즘

'Project > [Project - 01]랜덤 좌석 배정 프로그램' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바