이전 블로그 내용 보는데 자바스크립트가 아니고 자바인 것 같은데...
너무 오래전이라 뭘 배우면서 썼던건지 기억이 안남.... 자바 정말 기초만 배우고 다시 쳐다보지도 않아서...
별 출력 컨트롤 하기.
이전 배운 for문을 활용하여 별모양 출력을 컨트롤해 보자.
****
****
****
별을 한 줄에 4개씩 총 3줄을 출력하는 for문을 만들어보자.
먼저 첫 for문으로 라인이 몇 번 반복되어야 할지 정해준다.
for문의 기초가 (1. 초기식; 2. 조건식; 4 증감식) {
3. 조건식의 결과가 참인 동안 반복적으로 실행하고자 하는 명령문;
}
으로 진행되니 위의 식을 풀어보자면
for( 초기 라인은 0; 라인이 3보다 적을 때; 라인 추가) {
3. 조건
}
으로 우선 진행이 된다.
그리고 나면 이제 별에 대한 for문을 설정해 주어야 하는데 별이 한 줄에 4개를 넣어 주어야 하기 때문에
for( 초기 별 = 0; 별이 4개보다 적을 때; 별을 추가해 준다) {
3. 조건식 결과 실행 명령문.
}
위의 내용을 종합하여 수식을 적어보면 아래와 같이 된다.
for (let line = 0; line<3; line++){
for(let star = 0; star<4; star++){
document.write("*");
}
document.write("<br>");
}여기서 사용된 document.write는 console창이나 alert의 창이 아닌 html 화면에 바로 출력해 주는 함수라고 한다.
document.write(출력내용); 으로 사용할 수 있다.
결과물은 위와 같다.
*
**
***
****
왼쪽 정렬된 삼각형 별 만들기.
line이 한 줄 늘어날 때마다 별이 1개씩 늘어나는 구조
이번 문제 또한 2개의 for문을 사용하기로 했다.
for( 라인의 수 =0; 라인의 수가 4개보다 작을 때; 라인 추가 ) {
라인출력
}
라인이 4보다 작을 때 계속해서 라인을 하나 더 추가해 준다는 내용이기 때문에
첫 번째 for문은 위의 첫번째 문제의 for문과 크게 다른 내용이 없다.
문제는 2번째 for문
2번째 for문은 첫 줄에는 별 1개, 2번째 줄에는 별 2개 3번째 줄에는 별 3개이므로
라인이 늘어날 때마다 별이 늘어나므로 라인과 엮어서 수식을 만들면 편하다.
for( 별의 수 =0; 별의 수가 라인보다 적거나 같을 때; 별 추가) {
별 출력
}
으로 하고 수식을 정리하면 아래와 같다.
for(let line=0; line<4; line++) {
for(let star=0; star<=line; star++ ) {
document.write("*")
}
document.write("<br>")
}
역 삼각형 별 만들기
****
***
**
*
위의 삼각형과는 반대로 점점 별의 숫자가 1개씩 줄어드는 상황
이것 또한 위의 식을 이용하면
for(라인이 0일 때, 라인이 4보다 적으면; 라인을 하나 추가){
for(별이 4일 때; 별이 라인보다 크면; 별을 하나 뺀다){
조건 출력
}
조건 출력
}
이 되므로 이 코드를 옮기면
for (let line=0; line<5; line++){
for(let star=5; star>line; star--) {
document.write("*")
}
document.write("<br>")
}이와 같음
결과는
*
**
***
****
우측 정렬 된 삼각형
for(라인이 0일 때; 라인이 4보다 작으면; 라인 추가) {
for(스페이스바가 처음에는 3개; 스페이스바가 라인보다 크면; 스페이스바 하나 제거){
출력("스페이스");
}
for (별이 처음에 0일 때; 별이 라인보다 작거나 같으면; 별 하나 추가){
출력("*")
}
출력("<br>")
}
이걸 코드로 변환하면
for(line=0; line<4; line++){
for(space=3; space>line; space--){
document.write(" ")
}
for(star=0; star<=line; star++){
document.write("*")
}
document.write("<br>")
}
마지막 피라미드 모양 만들기!
*
***
*****
*******
*********
***********
첫번째 줄 : 빈 공간 : 5, 별 : 1개,
두 번째 줄 : 빈 공간 : 4, 별 : 3개,
세 번째 줄 : 빈 공간 : 3, 별 : 5개,
네 번째 줄 : 빈 공간 : 2, 별 : 7개
다섯 번째 줄 : 빈 공간 : 1, 별 : 9개
여섯 번째 줄 : 빈 공간 : 0, 별 : 11개
for ( 라인이 0 일 때; 라인이 7보다 작으면; 라인 추가){
for( 빈공간이빈 공간이 =0일 때; 빈 공간이 6에서 라인을 뺀 것보다 작으면; 빈 공간 ++) {
빈공간 출력;
}
for ( 별이 0일 때, 별이 라인의 2배 보다 1 많은 것보다 작을 때; 별 증가){
별 출력
}
라인 출력
}
for (let line=0; line<7; line++){
for(let blank = 0; blank<6-line; blank++){
document.write(" ")
} for(let star = 0; star<line*2+1; star++){
document.write("*")
}
document.write("<br>")
}
사실 이것보다 더 간단하게 코드를 짤 수 있을 것 같은데 지금 당장 생각나는게 이 방법밖에 없음...😢
line이 =0이라면; line 7보다 작으면 라인을 하나 추가한다.
= for (let line=0; line<7; line++) {
document.write("<br>")
}
빈 칸이 =0이라면; 빈칸이 6에서 라인을 뺀 것보다 작다면 빈칸 추가
= for(let blank = 0; blank <6-line; blank++) {
document.write(" ")
}
별이 0이라면; 별이 라인*2+1보다 작다면 별 추가하기
=for (let star=0; star<line*2+1; star++) {
document.wirte("*")
}
수식으로 보면 복잡해 보이는데 풀어서 이야기 하자면
첫 번째 for 문 빈 공간이 0이므로 6-line(첫번째 줄 = 1); 빈공간 +
두 번째 반복 빈 공간 : 1, 6-1=5, 빈 공간+
세 번째 반복 빈 공간 : 2, 6-1=5, 빈공간 +
네 번째 반복 빈 공간 : 3, 6-1=5, 빈공간 +
다섯 번째 반복 빈 공간 : 4, 6-1=5, 빈공간 +
여섯 번째 반복 빈 공간 : 5, 6-1= 5, 더 이상 작지 않으므로 중단.
= 그러므로 첫 번째 줄 빈 공간이 5가 되며 다음 for 문으로 넘어간다.
다음 for 문은 별이므로 별이 0이고 라인(첫 번째 라인) 1*2+1= 3;
0이 3보다 작기 때문에 별 + 1개
=빈 공간 5개 + 별 1개 + <br>
이 코드가 반복되면
이렇게 만들 수 있음!
오랜만에 별 만들기 for문 하려니까 너무 어려워서 한참 찾음
'공부 > Javascript + jQuery' 카테고리의 다른 글
| 중첩 for문을 활용하여 구구단 만들기 (0) | 2023.02.06 |
|---|---|
| 자바스크립트 06.for문 (0) | 2022.01.07 |
| 자바스크립트 05. switch와 삼항연산식 (0) | 2022.01.05 |
| 자바스크립트 03.객체(Object) (0) | 2022.01.04 |
| 자바스크립트 02.배열(Array) (0) | 2022.01.04 |
댓글