2023.03.04 - [JavaScript] - [JavaScript] for문 사용하여 구구단 출력 (세로버전, 가로버전)
반복문 진도가 다 나갔다 생각하면 해보는 실습문제..거의 반복문의 정석 같은 느낌..일명 별찍기..!!
실습을 하면서 다른 분들은 공백을 하시지만 난 잘 보이게 하기 위해서 ☆과 ★ 사용!
별을 찍기 전에 별이 행과 열에 몇 개씩 출력되는지 부터 세어보자! 5행 6열이라면 바깥for문 i에 5, 안쪽for문 j에 6!
문제1.
★
★★
★★★
★★★★
★★★★★
for(i=0;i<5;i++) {
for(j=0;j<=i;j++) {
document.write(`★`);
}
document.write(`<br>`);
}문제2.
★★★★★
★★★★
★★★
★★
★
for(i=0;i<5;i++) {
for(j=5;j>i;j--) {
document.write(`★`);
}
document.write(`<br>`);
}문제3.
☆★★★★★
☆☆★★★★
☆☆☆★★★
☆☆☆☆★★
☆☆☆☆☆★
여기서부터는 조금 난이도가 올라감
우선 이전 문제1과 비교해보면 문제1의 ★이 ☆로 변경되고, 그 옆에 ★이 추가된 모양이다.
문자열은 반복출력하면 띄어쓰기하지 않고 바로 옆에 붙어서 출력된 다는 점을 참고하자!
for(i=0;i<5;i++) {
for(j=0;j<=i;j++) {
document.write(`☆`);
}
for(j=5;j>i;j--) {
document.write(`★`);
}
document.write(`<br>`);
}문제1과 문제2는 별이 ★만 출력되게 했기때문에 for문 안에 for문을 1개만 사용하였는데,
문제3은 ☆과 ★ 두가지 색의 별이 출력되어야하기때문에 for문 안에 for문을 2개 사용했다.
☆은 문제1같이 증가하는 반복문을, ★는 문제2같이 감소하는 반복문을 사용하면
☆이 반목문의 조건문만큼 실행되고 반복문이 끝나면 ★이 출력되는 반복문이 실행되기 때문에 ★은 ☆에 의해서 옆으로 밀려난거같은 모양으로 출력된다.
문제4.
☆☆☆☆☆★
☆☆☆☆★★
☆☆☆★★★
☆☆★★★★
☆★★★★★
문제4는 ☆이 감소되는 반복문과 ★은 증가하는 반복문을 사용하면 된다.
for(i=0;i<5;i++) {
for(j=5;j>i;j--) {
document.write(`☆`);
}
for(j=0;j<=i;j++) {
document.write(`★`);
}
document.write(`<br>`);
}문제5.
☆☆☆☆★
☆☆☆★★★
☆☆★★★★★
☆★★★★★★★
★★★★★★★★★
또다시 올라간 난이도...
문제5는 방법이 2가지가 있다.
첫 번째 방법은 위의 이미지처럼 ☆ 반복문 하나(①)와 ★을 두 가지 반복문(②,③)으로 나눠서 생각하는것이다.
for(i=0;i<5;i++) {
for(j=4;j>i;j--) {
document.write(`☆`);
}
for(j=0;j<=i;j++) {
document.write(`★`);
}
for(j=1;j<=i;j++) {
document.write(`★`);
}
document.write(`<br>`);
}두 번째 방법은 ☆ 반복문 하나와 ★이 홀수개 만큼 증가되어 출력되게 하는 반복문이다.
for(i=0;i<5;i++) {
for(j=4;j>i;j--) {
document.write(`☆`);
}
for(j=0;j<=2*i;j++) {
document.write(`★`);
}
document.write(`<br>`);
}조건문에 2*i를 넣어주면 홀수개만큼 출력된다!!!
처음에 증감식에 2씩 증가하게 넣으면 되는 줄 알고 했다가 모양이 아주 엉망진창이 되었다..ㅋㅋㅋㅋ..
당연히 그럴수밖에;; 조건문은 그대로인데 증감식이 늘어난거니까 출력되는 거는 더 줄어들 수밖에;;;;;
심지어 2씩 증가 어찌하면 될지 몰라서 구글링해봄ㅋㅋㅋjavascript for 2씩 증가 << 이렇게ㅋㅋㅋㅋ
i++는 +=1과 같은 말이기 때문에, 2씩 증가를 원한다면 +=2 이렇게 넣으면 된당
잘못된 생각으로 새로운 지식 +1 !! 다음번엔 이런 실수 안할듯!!
문제6.
★★★★★★★★★
☆★★★★★★★
☆☆★★★★★
☆☆☆★★★
☆☆☆☆★
문제5를 응용하자.
첫 번째 방법은 ☆ 반복문 하나와 ★을 두 가지 반복문으로 나눠서 생각하는것
for(i=0;i<5;i++) {
for(j=0;j<i;j++) {
document.write(`☆`);
}
for(j=4;j>=i;j--) {
document.write(`★`);
}
for(j=3;j>=i;j--) {
document.write(`★`);
}
document.write(`<br>`);
}두 번째 방법은 ☆ 반복문 하나와 ★이 홀수개 만큼 감소되어 출력되게 하는 반복문이다.
for(i=0;i<5;i++) {
for(j=0;j<i;j++) {
document.write(`☆`);
}
for(j=8;j>=2*i;j--) {
document.write(`★`);
}
document.write(`<br>`);
}
문제7.
☆☆☆☆★
☆☆☆★★★
☆☆★★★★★
☆★★★★★★★
★★★★★★★★★
☆★★★★★★★
☆☆★★★★★
☆☆☆★★★
☆☆☆☆★
별찍기의 끝판왕..다이아몬드..!!! ◆ 등장!!!
하지만 문제5의 ▲과 문제6의 ▼를 합친 모양이라 두개의 코드를 같이 쓰면 ◆가 나온다..!!!
대신 문제5 와 문제6을 같이 하면 ★★★★★★★★★이 두번 출력되니까 조건문 부분에 숫자를 조정해주자.
for(i=0;i<5;i++) {
for(j=4;j>i;j--) {
document.write(`☆`);
}
for(j=0;j<=i;j++) {
document.write(`★`);
}
for(j=0;j<i;j++) {
document.write(`★`);
}
document.write(`<br>`);
}
for(i=0;i<4;i++) {
for(j=0;j<=i;j++) {
document.write(`☆`);
}
for(j=4;j>i;j--) {
document.write(`★`);
}
for(j=3;j>i;j--) {
document.write(`★`);
}
document.write(`<br>`);
}문제5와 문제6의 첫 번째 방법처럼 하면 코드가 뭔가.. 길어진다..
for(i=0;i<4;i++) {
for(j=4;j>i;j--) {
document.write(`☆`);
}
for(j=0;j<=(2*i);j++) {
document.write(`★`);
}
document.write(`<br>`);
}
for(i=0;i<5;i++) {
for(j=0;j<i;j++) {
document.write(`☆`);
}
for(j=8;j>=2*i;j--) {
document.write(`★`);
}
document.write(`<br>`);
}그나마 마음이 편안해지는 두 번째 방법...^_____^
별찍기는 행과 열에 얼만큼 반복시킬 건지 틀만 잡으면 머리속에 '얼추' 코드가 나오는거 같은데
정말 '얼추' 나온다는게 문제다..ㅋㅋㅋㅋㅋ...후
계속 라이브 서버로 켜놓고 조금씩 수정해가면서 출력된 결과를 보고 오?이게 이렇게 되는군? 하는 느낌이다..;;
그래도 별찍기를 해보니까 반복문에 대해서 완벽 마스터는 아니지만 익숙해졌다!!! 뿌듯
코드는 무조건 익숙해지는게 중요한듯~.~
