중첩 for문은 말 그대로 for문 안에 또 for문이 있는 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TreeEx</title>
<style>
</style>
<script>
function tree(){
for(i=1; i<=10; i++){
for(j=1; j<=i; j++){
document.write("*");
}
document.write("<br>");
}
}
</script>
</head>
<body>
<button onclick="tree();">실행</button>
</body>
</html>
i는 1부터 10까지 실행이 되고, j는 i의 숫자 만큼 실행이 됩니다. 그래서 1열에는 1행까지만 2열에는 2열까지 순차적으로 늘어나는데요. 그 숫자 만큼 별(*)이 출력 되는 과정입니다.
function tree(){
for(i=1; i<=10; i++){
for(j=10; j>=i; j--){
document.write("*");
}
document.write("<br>");
}
}
j를 10부터 시작하고 j>=i 일 때 실행을 하면 위 그림과 반대로 출력이 됩니다. 증가가 되는 게 아니라 증감이 되어야 하는 게 맞겠죠? 그래서 i줄은 그대로고 j만 (j=10; j>=i; j--)가 됩니다.
<script>
function tree(){
for(i=1; i<=10; i++){
for(j=1; j<=i; j++){
document.write("*");
}
document.write("<br>");
}
for(i=1; i<=10; i++){
for(j=10; j>=i; j--){
document.write("*");
}
document.write("<br>");
}
}
</script>
그리고 위에 두 개를 합치면 이런 모양이 나온답니다^^
'개발일지 > JavaScript + jquery' 카테고리의 다른 글
[js] 1차원, 2차원 배열(Array) 이해하기 (0) | 2021.09.07 |
---|---|
[js] While문 + Do While문 (0) | 2021.09.07 |
[js] 1부터 100까지의 합을 구하기(반복문-for) (0) | 2021.09.07 |
[js] 학점구하기 (조건문-Switch) & 숫자형과 문자형 (0) | 2021.09.07 |
[js] 코드를 간단하게 쓰는 방법과 조건문(if, else if) (0) | 2021.09.07 |