조건문을 공부할 때 자리 배치도 만드는 걸 했던 적이 있다. 이번에는 반복문 중 '중첩 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>
'개발 > 웹(Web)' 카테고리의 다른 글
[JavaScript] 기본 문법 연습문제 : 3의 배수 찾기 (feat. ChatGPT) (2) | 2024.12.26 |
---|---|
[JavaScript] 기본 문법 : 4의 배수 만들기 (1) | 2024.12.26 |
[JavaScript] 반복문 - break문, continue문 : 구구단, 조건덧셈 (3) | 2024.12.25 |
[JavaScript] 반복문 - while문, do~while문 : 팩토리얼 계산기 (1) | 2024.12.25 |
[JavaScript] 반복문 - 중첩 for 문 : 구구단 (0) | 2024.12.25 |