배열의 원소값을 가져와서 별찍기

안시우·2024년 4월 25일

자바스크립트

목록 보기
1/5

1. 설명

  • 자바스크립트 객체 3가지
    • 코어 객체 :
      프로토타입(new로 객체 생성)
      자바에서 클래스 라이브러리를 생각하면 편하다.
      예) Date, Array, String, Math 등
    • HTML DOM 객체 :
      html tag
      예) document 등
    • 브라우저 객체 :
      위치 저장, size조절, history 등 기능이 있다.
      예) window->생략가능
  • 객체 만드는 방법 3가지
    • 프로토타입 객체 : new
    • 리터럴 객체 :
      클래스 설계 동시에 디폴트 생성자와 함께 객체 생성됨
      ([]: 배열 {}: 객체)
  • Array 객체 메소드
    • concat : 배열을 붙인다.
    • join : 배열의 원소들을 원하는 문자열로 연결한다.
    • reverse : 배열의 원소 순서를 반대로 한다.
    • slice : 배열의 원소를 원하는 만큼 잘라서 가져올 수 있다.
    • sort : 정렬
    • toString : 배열의 원소값들
  • parseInt(Math.random()*(30-5+1)+5) :
    • 5~30 사이의 무작위 정수값
    • 공식 : parseInt(Math.random()*(최댓값-최솟값+1)+최솟값)
    • Math.random()은 실수값으로 반환되기 때문에 parseInt 사용한다.
  • document.write : 사용시 `(백틱)을 이용하여 변수를 넣어줄 수 있다.

2. 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>배열로 만들어서 별표찍기</title>
</head>
<body>
  <h1>배열로 만들어서 별표찍기</h1>
  <hr>
  <script>
  	const COUNT = 5; //배열에 넣을 원소 갯수
  	//배열 객체생성(배열의 크기를 정하지 않아도 된다.)
    const numArray = Array();
    //무작위 값을 배열에 넣어준다.
    for(let i=0;i<COUNT;i++){
      numArray[i] = parseInt(Math.random()*(30-5+1)+5);
    }
	//배열 출력하기
    document.write(`const numArray = [`);
    for(let i=0;i<numArray.length;i++){
    //numArray의 i번째 원소를 출력할 때, 마지막 원소는 쉼표 빼고 찍기
      i === numArray.length-1 ? (document.write(`${numArray[i]}`)) : (document.write(`${numArray[i]} , `));
    }
    document.write(`] <br>`);
	//배열 원소값을 받아와서 별찍기
    for(let i=0;i<numArray.length;i++){
    	//원소값 받아오기
      let value = numArray[i];
      for(let j=0;j<value;j++){
        document.write(`*`);
      }
      document.write(` ${value} <br>`);
    }
  </script>
</body>
</html>

3. 결과

0개의 댓글