JS와 HTML, CSS의 개념들을 응용하여 자리배치도를 만들다.
<!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: 2px solid lightcoral;
}
td{
border: 1px solid black;
text-align: center;
font-weight: bold;
font-size: 10px;
}
</style>
</head>
<body>
<script>
/*
인원 수 줄에 맞게 자리를 배치 하기
<조건문>
1. 사용자에게 인원수를 입력받기 (현재 인원은 몇명인가요?) - memNum
2. 한 줄에 몇명씩 앉을지 입력받기 (한 줄에 몇명씩 앉나요?) - colNum
3. 몇 줄이 나올지 조건문을 통해 결과 얻기 - rowNum
<반복문>
4. for문 구조
4-1 줄 수 (rowNum)을 조건으로 하는 바깥 for문
4-2 칸 수 (colNum)을 조건으로 하는 이중 for문
5. 좌석 번호(seatNum)
<추가>
6. 해당 좌석을 table 처리 해주기
*/
let memNum = parseInt(prompt("전체 인원은 몇명인가요?")); // 25 / 전체인원 수 입력받고 정수화
let colNum = parseInt(prompt("한 줄에 몇명씩 앉나요?")); // 4 / 각 줄에 앉을 인원 수 입력받고 정수화
let rowNum = 0; // 숫자형 초기값 0 / 몇 줄이 나오는 지 구하기 위해
let seatNum = 1 // 좌석 수 세려고 1로 세팅
if(memNum%colNum != 0){ // 전체 인원 수에서 각 줄에 앉을 사람 나누었을 때 0이 아니면
rowNum = parseInt(memNum/colNum) + 1 // 6 + 1 / 0이 아니면 나머지 사람이 앉을 줄 1줄 추가해야함
}
else{
rowNum = parseInt(memNum/colNum) // 0이면 나머지 사람이 없으니 몫이 그대로 줄이 된다.
}
document.write("<h3>자리배치도<h3>") // 자리배치도 h3 텍스트
document.write("<table>") // 테이블(표) 설정
for(i = 1; i <= rowNum; i++){ // rowNum을 반복문 조건으로 사용해서 rowNum만큼 줄을 반복 생성한다.
document.write("<tr>") // 줄 생성
for(j = 1; j <= colNum; j++){ /* colNum을 반복문 조건으로 사용해서 colNum만큼 줄에 칸을 생성하고
colNum만큼 칸을 만들면 자동으로 다음 줄로 넘어감 */
document.write("<div>") // 각 좌석마다 영역을 주기 위해 div
document.write("<td> 좌석", seatNum, "</td>") // 좌석 1칸 씩 생성
document.write("</div>")
if(seatNum == memNum){break} // 좌석 수 = 인원 수 되면 좌석 수 증가 멈추기
seatNum += 1 // 같지 않다면 좌석 1칸 생성 할 때마다 좌석 수 1 증가
}
document.write("</tr>") // 줄 생성 끝
} document.write("</table>") // 테이블 끝
</script>
</body>
</html>
1, 2) 입력받기 및 변수 선언
let memNum = parseInt(prompt("전체 인원은 몇명인가요?")); // 25 / 전체인원 수 입력받고 정수화
let colNum = parseInt(prompt("한 줄에 몇명씩 앉나요?")); // 4 / 각 줄에 앉을 인원 수 입력받고 정수화
let rowNum = 0; // 숫자형 초기값 0 / 몇 줄이 나오는 지 구하기 위해
let seatNum = 1 // 좌석 수 세려고 1로 세팅입력 및 변수 선언)
전체 인원수 = 25
한 줄에 앉을 인원수 = 4
좌석 번호를 구하기 위해 seatNum 선언 (1보단 무조건 크니까 1로 설정했다.)
3) 총 몇 줄이 나올지 조건문(if)을 통해 구하기
if(memNum%colNum != 0){ // 전체 인원 수에서 각 줄에 앉을 사람 나누었을 때 0이 아니면
rowNum = parseInt(memNum/colNum) + 1 // 6 + 1 / 0이 아니면 나머지 사람이 앉을 줄 1줄 추가해야함
}
else{
rowNum = parseInt(memNum/colNum) // 0이면 나머지 사람이 없으니 몫이 그대로 줄이 된다.
}전체 인원수를 각 줄에 앉을 인원수로 나눈 몫이 기본적으로 주어져야 할 총 줄이고,
나머지가 존재하면 그 나머지 인원이 앉을 줄이 추가로 1줄 주어져야 하기 때문에 나머지를 이용해서 조건문을 만들었다.
4) 각 줄을 만들어주고 그 줄을 만들 때 그 줄에 들어갈 칸을 생성하기
전체 줄을 하나씩 만드는 외부 for(반복) 문을 만들고 그 안에 그 줄에 들어갈 한 칸씩 만드는 내부 for문을 만들어야 한다.
4 - 1) 외부 for문
for(i = 1; i <= rowNum; i++){}전체 줄을 하나씩 만드는 for문을 만드려고 할 때 과정 3에서 구한 rowNum을 조건으로 사용해야 한다.
i 가 1씩 증가하면서 rowNum과 같아질 때까지 줄을 만들기 때문에 결국 rowNum 값만큼 줄을 만든다.
4 - 2) 내부 for문
for(j = 1; j <= colNum; j++){ /* colNum을 반복문 조건으로 사용해서 colNum만큼 줄에 칸을 생성하고
colNum만큼 칸을 만들면 자동으로 다음 줄로 넘어감 */
document.write("<div>") // 각 좌석마다 영역을 주기 위해 div
document.write("<td> 좌석", seatNum, "</td>") // 좌석 1칸 씩 생성
document.write("</div>")
if(seatNum == memNum){break} // 좌석 수 = 인원 수 되면 좌석 수 증가 멈추기
seatNum += 1 // 같지 않다면 좌석 1칸 생성 할 때마다 좌석 수 1 증가
}과정 1에서 입력받은 colNum을 조건으로 해야 한 줄에 들어가는 칸의 개수를 정할 수 있다.
각 칸을 영역을 주기 위해서 좌석을 생성하는 줄을 div 태그로 감싼다.
좌석 번호를 세기 위해서 칸을 만들 때마다 seatNum += 1을 해서 좌석 번호를 1씩 증가시킨다.
전체 인원수(memNum)과 seatNum이 같아지면 더 이상 좌석 번호를 증가시킬 필요가 없으므로,
break를 걸어 증가를 멈춘다.
느낀점
HTML 태그들도 script 태그 안에서 적용할 수 있는 방법을 배웠고, 나머지가 있을 때 줄 추가하기, 이 2가지만 생각한다면
쉽게 해결할 수 있을 것 같다.
'Front-End > 1. JavaScript 기초' 카테고리의 다른 글
| [JS] Ex10_다중if.html (0) | 2023.06.13 |
|---|---|
| [JS} Ex09_단순if.html (0) | 2023.06.13 |
| [JS] Ex08_연산자예제2.html (0) | 2023.06.12 |
| [JS] Ex08_연산자예제1.html (0) | 2023.06.12 |
| [JS] Ex07_비교_삼항연산자.html (0) | 2023.06.12 |
