조건문을 공부할 때 자리 배치도 만드는 걸 했던 적이 있다. 이번에는 반복문 중 '중첩 for문'을 활용해서 자리 배치도를 업데이트했다.

 

 

[JavaScript] 조건문 - 활용 : 자리 배치도

1. 프로그램 계획  가. 변수    1) 입력 변수: 입장객 수(memNum), 한 줄에 앉게 될 사람 수(colNum)    2) 계산 변수: 필요한 줄의 개수(rowNum)   나. 연산식    1) 나머지 없는 경우: rowNum = memNum / colNum

readiness.tistory.com

  <script>
    var memNum = prompt("입장객은 몇 명입니까?"); // 전체 입장객 수
    var colNum = prompt("한 줄에 몇 명씩 앉을 것인가요?"); // 한 줄에 앉을 사람 수

    if(memNum % colNum === 0)
      rowNum = parseInt(memNum / colNum); // 'parseInt(), 결과값이 실수가 되었을 때 정수로 변환해주는 함수'
    else
      rowNum = parseInt(memNum / colNum) + 1;

    //document.write("총 " + rowNum + "줄이 필요합니다.");

    var i, j;
      document.write("<table>");
      for(i = 0; i < rowNum; i++) {
        document.write("<tr>");
        for(j = 1; j <= colNum; j++) {
          seatNo = i * colNum + j; // 좌석 번호 만들기
          if(seatNo > memNum) break;
          document.write("<td> 좌석 " + seatNo + " </td>");
        }
        document.write("</tr>");
      }
      document.write("</table>");
  </script>

 

적용한 CSS style은 아래와 같다. HTML, CSS을 전에 공부해 놓고는 자격증 공부한다고 놓고 있었는데, 취득 후에 JavaScript를 공부하면서 다시 보니 기억이 슬슬 난다.

  <style>
    table, td {
      border: 1px solid #ccc;
      border-collapse: collapse;
    }
    td {
      padding: 5px;
      font-size: 0.9em;
    }
  </style>

 

 

+ Recent posts