이전 포스팅에서 특정 명령을 반복해 실행하는 방법을 알아보았다.
[제어문] #3. for 문(1)
반복문이란 반복문은 어떤 동작을 여러 번 실행하는 데 사용한다. 반복문을 사용하면 여러 명령을 늘어놓지 않고 소스를 간단하게 작성할 수 있다는 장점이 있고, 작성한 소스의 양이 줄어 컴퓨
udangtangtang-cording-oldcast1e.tistory.com
여기서 for문 안에 for문을 중복으로 사용하여 좀 더 효율적이고 구체적인 반복을 할 수 있다. 이를 중첩 for 문이라고 한다.
중첩 for문에 관한 설명에 앞서 구구단을 출력하는 반복문을 만들어 확인해보도록 한다.
구구단을 만들기 위해서는 각 구구단을 구분하기 위해 출력 시 "스페이스(공백)" 처리가 되어야 하는데, 자바스크립트는 공백을 인식하지 못하므로 와 같은 명령어를 이용해야 한다.
공백 생성 명령어:
작성한 구구단 프로그램은 다음과 같이 세로열 버전과 가로 열 버전이 있다.
세로열
<script>
for(let i = 1;i<=9;i++){
for(let j = 1;j<=9;j++){
document.write(i+" * "+j+" = "+i*j);
document.write("<br>");
}
}
</script>가로 열
<script>
for(let i = 1;i<=9;i++){
for(let j = 1;j<=9;j++){
document.write(i+" X "+j+" = "+i*j);
document.write(" ");
}
document.write("<br>");
}
</script>이때, 가로 열 구구단 출력 프로그램을 실행하면 각각 계산한 숫자의 자릿수가 달라 구구단이 삐뚤 해 보인다.
이를 조건문을 이용하여 각각의 출력에 상관없이 일정하게 출력하도록 수정한다.
<script>
for(let i = 1;i<=9;i++){
for(let j = 1;j<=9;j++){
document.write(i+" X "+j+" = "+i*j);
if(i*j >= 10) document.write(" ");
else document.write(" ");
}
document.write("<br>");
}
</script>for 문에 조건문을 추가하여 계산한 결괏값이 10의 자리 이상인 경우와 10의 자리가 아닌 경우로 나누었다. 10의 자리가 아닌 경우에는 10의 자리인 경우보다 출력의 공간을 적게 하므로 10의 자리보다 작은 경우에서 공백을 더 생성하여 문제를 해결하였다.
CSS와 html을 이용하여 구구단 표를 보기 좋게 꾸밀수 있다.
CSS
div {
display:inline-block;
padding:0 20px 30px 20px;
margin:15px;
border:1px solid #ccc;
line-height:2;
}
div h3 {
text-align:center;
font-weight:bold;
}HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>구구단 - for문</title>
<link rel="stylesheet" href="css/gugudan.css">
</head>
<body>
<h1>구구단</h1>
<script>
for(var i = 2; i <= 9; i++) {
document.write("<div>");
document.write("<h3>" + i + "단</h3>");
for (var j = 1; j <= 9; j++) {
document.write(i +" X " + j + " = " + i * j + "<br>");
}
document.write("</div>");
}
</script>
</body>
</html>결과
'JavaScript > [theory]' 카테고리의 다른 글
| [함수] #2. let과 constant로 변수 선언하기 (0) | 2022.10.03 |
|---|---|
| [함수] #1.함수의 정의와 실행 (0) | 2022.10.02 |
| [제어문] #3. for 문(1) (0) | 2022.09.29 |
| [제어문] #2. switch 문 (0) | 2022.09.29 |
| [제어문] #1. if문과 if-else문 (0) | 2022.09.29 |
