문제

1] 정사각형
*****
*****
*****
*****
*****

2] 삼각형1
*
**
***
****
*****

3] 삼각형1-reverse
*****
****
***
**
*

4] 삼각형2
    *
   **
  ***
 ****
*****

5] 삼각형2-reverse
*****
 ****
  ***
   **
    *

5] 정삼각형
    *
   ***
  *****
 ******* 
********* 

5] 정삼각형-reverse
********* 
 ******* 
  *****
   ***
    *

5] 다이아몬드
    *
   ***
  *****
 ******* 
********* 
 ******* 
  *****
   ***
    *

강의 듣기 전 혼자풀이

• for문을 사용해 각 행을 출력하고 안에서 repeat을 변수 i이용해서 *을 출력하는 방식으로 작성함.
• 공백이 포함되는 4~5번 문제의 경우 empty 변수를 넣어서 공백개수를 저장해서 마찬가지로 repeat을 이용해서 를 출력하는 방식으로 작성함.

1번 문제

window.onload = function () {
  for(let i = 1; i < 6; i++){
    document.write(`*`.repeat(5));
    document.write('<br>');
  }
};

2번 문제

window.onload = function () {
  for(let i = 1; i < 6; i++){
    document.write(`*`.repeat(i));
    document.write('<br>');
  }
};

3번 문제

window.onload = function () {
  for(let i = 5; i > 0; i--){
    document.write(`*`.repeat(i));
    document.write('<br>');
  }
};

4번 문제

window.onload = function () {
  for(let i = 1; i < 6; i++){
    let empty = 5-i;
    document.write(`&nbsp;`.repeat(empty));
    document.write(`*`.repeat(i));
    document.write('<br>');
  }
};

5-1번 문제

window.onload = function () {
  for(let i = 5; i > 0; i--){
    let empty = 5-i;
    document.write(` `.repeat(empty));
    document.write(`*`.repeat(i));
    document.write('<br>');
  }
};

5-2번 문제

window.onload = function () {
  for(let i = 1; i < 10; i += 2){
    let empty = (9-i)/2;
    document.write(`&nbsp;`.repeat(empty));
    document.write(`*`.repeat(i));
    document.write('<br>');
  }
};

5-3번 문제

window.onload = function () {
  for(let i = 9; i < 10; i -= 2){
    let empty = (9-i)/2;
    document.write(`&nbsp;`.repeat(empty));
    document.write(`*`.repeat(i));
    document.write('<br>');
  }
};

5-4번 문제

window.onload = function () {
  let star = 1;
  for(let i = 1; i < 10 ; i++){
    let empty = (9-star)/2;
    if(i < 5) {
      document.write(`&nbsp;`.repeat(empty));
      document.write(`*`.repeat(star));
      document.write('<br>');
      console.log(star);
      star += 2;
    }
    else if(i > 4) {
      document.write(`&nbsp;`.repeat(empty));
      document.write(`*`.repeat(star));
      document.write('<br>');
      console.log(star);
      star -= 2;
    }
  }
};

강의 들은 후 풀이

• 이중 for문을 이용해서 첫번째 for문에서 행을 그려주고, 두번째 for문에서 열을 그려주는 식으로 진행함
• 공백이 포함되는 4~5번 문제의 경우 이중 for문 내 첫번째 for문안에서 공백을 그려주는 for문과, 별을 그려주는 for문 2가지를 사용하는 식으로 진해함

1번 문제

window.onload = function () {
  for(let i = 1; i <= 5; i++){
    for(let j = 1; j <= 5; j++){
      document.write(`*`);
    }
    document.write('<br>');
  }
};

2번 문제

window.onload = function () {
  for(let i = 1; i <= 5; i++){
    for(let j = 1; j <= i; j++){
      document.write(`*`);
    }
    document.write('<br>');
  }
};

3번 문제

window.onload = function () {
  for(let i = 5; i > 0; i--){
    for(let j = 0; j <= i; j++){
      document.write(`*`);
    }
    document.write('<br>');
  }
};

4번 문제

window.onload = function () {
  for(let i = 1; i < 6; i++){    
    for(let j = 5; j > 0; j--){
      if(j <= i) {document.write(`*`);}
      else {document.write(`&nbsp;`);}
    }
    document.write('<br>');
  }
};

5-1번 문제

window.onload = function () {
  for(let i = 1; i < 6; i++){    
    for(let j = 1; j < 6; j++){
      
      if(j >= i) {document.write(`*`);}
      else {document.write(`&nbsp;`);}
    }
    document.write('<br>');
  }
};

5-2~4번 문제 생략

참고

본 학습노트는 인프런 강의 중 입문자를 위한, ES6+ 최신 자바스크립트 입문를 수강하며 작성하고 있습니다.