for문
for문은 초기식, 조건식, 증감식 세 가지를 작성해 주어진 규칙에 따라 실행문을 반복하는 문법이다.
for문의 기본 구조)
<body>
<fieldset>
<legend>두 수 사이의 합 구하기</legend>
<label>첫 번째 수 : <input type="text" id="fNum"></label>
<label>두 번째 수 : <input type="text" id="sNum"></label>
<input type="button" value="구하기" onclick="twoNumber()">
<h1 id="result"></h1>
</fieldset>
</body>
<script>
function twoNumber(){
// num1과 num2의 type을 강제로 number화시킴
var num1 = Number(document.getElementById("fNum").value);
var num2 = Number(document.getElementById("sNum").value);
var result = document.getElementById("result");
var sum = 0;
var txt = null;
for(var i=num1; i<=num2; i++) {
sum = sum + i; // 기존 sum값에 i값을 더한 값이 sum이 된다.
txt = txt + i;
if(i < num2){
txt = txt + " + ";
} else { // i == num2 조건
txt = txt + " = ";
}
}
txt += sum;
result.innerHTML = txt;
}
</script>먼저 <body> 안의 첫 번째 <input> 요소에 입력된 value값이 <script> 속 num1에 넘겨오게 된다. num2도 같은 개념.
<script> 속 result는 <body>의 <h1>이라고 볼 수 있다. 즉 결과값이 담겨져 있지 않은, 비어있는 상태.
그렇다면 이제부터 for문을 살펴보자!
그 전에 결과값에 대한 변수를 sum으로 선언하고 0으로 초기화. 부호에 대한 입력도 변수 txt를 선언해준다.
for문의 식을 해석해보면 '변수 i가 num1부터(var i = num1) num2가 될 때까지(i <= num2) 1씩 더해져서(i ++) 아래의 실행문을 행한다'고 파악할 수 있다.
for문에 행해지는 동안 sum은 지속적으로 1씩 증가되는 i의 값을 계속 더하게 되고, 한 번 실행될 때마다 txt는 1씩 증가하는 i의 숫자와 함께 부호를 나타내게 된다.
이때 i 자체의 type은 number이더라도 string이 결합됐으므로 txt의 type은 string이다.
i의 숫자가 계속 증가하여 num2가 되면 그것을 마지막으로 for문은 종료가 된다.(조건에서 벗어났기 때문에)
for문 밖에서 마지막 결과값인 sum까지 txt에 더해준 뒤 result에 대입해주면 실행 결과는 다음과 같이 나타난다.
중첩 for문
중첩 for문은 말 그대로 for문 안에 for문이 중첩되어 있다는 것을 의미한다.
중첩 for문의 구조)
<script>
// Q. 중첩for문을 사용해서 구구단 2단부터 9단까지 출력하시오.
for(var i=2; i<=9; i++){
document.write("=== " + i + "단 ===<br/>");
for(var j=1; j<=9; j++){
document.write(i + " x " + j + " = " + (i*j) + "<br/>");
}
document.write("<br/>");
}
</scirpt>위 조건식을 분석해보면 바깥쪽 for문의 i는 2부터 9까지, 안쪽 for문의 j는 1부터 9까지 반복된다.
이때 잘 생각해야 하는 것은 바깥 for문과 안쪽 for문의 상관관계이다.
i = 2일 때 안쪽 for문의 j가 1부터 9까지 반복되며 10이 될 때 실행문을 행하지 않고 벗어나게 된다. 그 다음 i = 3이 되며, 다시 안쪽 for문의 j는 1부터 9까지 반복한다.
즉 안쪽의 for문 조건이 완료되어야 바깥쪽 변수 i의 숫자가 증가하고, i의 숫자가 1씩 증가할 때마다 안쪽 for문의 j는 매번 1부터 9까지 반복하게 된다.
for문의 원리 참고자료
'Js' 카테고리의 다른 글
| 6. 변수와 HTML 구조 설정 (0) | 2022.08.18 |
|---|---|
| 5. while문과 continue/break (0) | 2022.08.18 |
| 3. 조건문/Swich문 (0) | 2022.08.15 |
| 2. 연산자 (0) | 2022.08.15 |
| 1. JavaScript 기초 (0) | 2022.08.15 |
