반복문-while문/for문/중첩for문/객체-Date,Math

반복문✅✨

반복문은 원하는 횟수만큼 코드를 반복실행하게 만드는 문장이다.

동일한 UI를 반복적으로 보여줘야 한다거나, 문장이나 문구를 반복하여 보여주고 싶을 때 사용한다. 

1. while문 (~하는 동안)

조건식이 만족할 때까지 {} 안에 있는 코드를 여러 회 반복 실행하고 

실행 순서는 조건식을 검사하고 만족하면 {}안에 있는 코드와 증감식을 실행한다.

[기본형]

var 변수 = 초깃값;  ------> counter변수라고 부른다.

while(조건식){

  반복해야 할 자바스크립트 코드;

  증감식;

}

구동원리:

조건식이 true에서 false가 될때까지 계속 cycle을 돈다. while(10>0){반복해야 할 자바스크립트 코드 실행; --->증감식실행;--->증감식이 실행되고 나면 다시 조건 검사를 하러 간다. 

 

ex) var num = 10;

 <script>

      //while문

      //i를 자주 쓰는데 iteration(반복)이라는 뜻이라서

      var i = 1; //카운터 변수.

      while (i <= 10) {

        document.write("안녕하세요" + i, "<br />");

        i++;

      }

      var i = 1; //카운터 변수.

      while (i <= 10) {

        document.write("안녕하세요", i, "<br />");

        i++;

      }

    </script>

"안녕하세요" 가 알아서 100번 반복되서 출력된다.

안녕하세요1 안녕하세요2 ...안녕하세요10까지 출력하세요.

💡예제 💡

//while문 사용하여 2의 배수이면서 6의 배수인 숫자만 출력하기

      //while은 ~하는 동안 반복하겠다! 이기 때문에 횟수를 정해줘야한다.

      var i = 1;

      while (i <= 100) {

        if (i % 2 == 0 && i % 6 == 0) {

          document.write(i, "<br />");

        }

        i++;

      }

 

💡예제 💡

20부터 100까지 숫자 중 짝수일 경우 글자 색을 파랑색으로 출력하고, 

홀수면 빨간색으로 출력하세요.

<style>

      .red {

        color: red;

      }

      .blue {

        color: blue;

      }

    </style>

//20부터 100까지 숫자중 짝수일 경우 글자 색 파랑색으로 출력하고,

      //홀수면 빨간색으로 출력하기

      var count = 20;

      while (count <= 100) {

        if (count % 2 == 0) {

          document.write("<p class='red'>", count, "</p>");

        } else {

          document.write("<p class='blue'>", count, "</p>");

        }

        count++;

      }

if(조건식)에는 비교하거나 true아님 false가 나오는 값이 들어와야한다.

document.write() 안에 태그가 들어갈 수 있다. 문자열 안에 태그가 들어가면 문자가 아닌 태그로 인식한다.그래서 '<p>'써주면 된다. <p class="red"></p>작은 따옴표 안에 작은 따옴표 넣을 수 없다!"<p class='blue'>count</p>"써주게 되면 그냥 문자열이다. count를 변수 그대로 써주려면 ,(콤마)로 구분하거나 +로 연결시켜줘야한다.

💡(위의 것과 반대개념의)예제 💡

10부터 20까지의 숫자 중 짝수일 경우 글자 색을 파랑색으로 출력하고, 

홀수면 빨간색으로 출력하세요.

     var count = 20;

      while (count >= 10) {

        if (count % 2 == 0) {

          document.write("<p class='red'>", count, "</p>");

        } else {

          document.write("<p class='blue'>", count, "</p>");

        }

        count--;

      }

---

do while문 

while문의 경우 조건식의 만족여부를 먼저 검사한 후에 {}안에 있는 코드를 실행하지만 do while문은 일단 코드를 무조건 한 번 실행한 후 조건검사를 실행한다. *실무에서 안 쓴다!

[기본형]

var 변수 = 초기값;

 

do{

   자바스크립트코드;

   증감식;

}while(조건식)

-->

// var i = 10;

      // do {

      //   document.write("hello");

      // } while (i < 3);

 

for 문

for문은 while문과 마찬가지로 조건식을 만족할 때까지 특정 코드를 반복 실행한다. 

사용 방법은 while문과 같지만 문법이 훨씬 간결하여 for문을 많이 사용한다. 

[기본형]

for(초기값; 조건식; 증감식)

 

서로 자리를 바꿀 수 없다. 

사이에 반드시 ;(세미콜론)이 들어가야한다. 

구동원리: 

//(초기값; 조건식; 증감식)

      for (var i = 1; i <= 100; i++) {

        if (i % 4 == 0) {

          document.write("<p class='green'>" + i + "</p>");

        } else if (i % 7 == 0) {

          document.write("<p class='orange'>" + i + "</p>");

        }

      }

    </script>

여기에 4와 7의 공통배수, 공배수를 제외하면

i%4==0&&i%7!=0

 //for문을 이용하여 1부터 100까지 숫자 중 4의 배수면 초록색,

      //7의 배수면 주황색으로 출력하기 4와 7의 공배수는 핫핑크로 출력하세요.

      //(초기값; 조건식; 증감식)

      for (var i = 1; i <= 100; i++) {

        if (i % 4 == 0 && i % 7 != 0) {

          document.write("<p class='green'>" + i + "</p>");

        } else if (i % 7 == 0 && i % 4 != 0) {

          document.write("<p class='orange'>" + i + "</p>");

        } else if (i % 4 == 0 && i % 7 == 0) {

          document.write("<p class='hotpink'>" + i + "</p>");

        }

      }

---

break문

반복문인 while문과 for문에서는 break문을 실행하면 조건식과 관계없이 강제로 반복문을 종료한다. 

즉, break문은 강제종료문을 뜻한다. 

[기본형]

1. while문

var 변수= 초기값;

while(조건식){

   break;

   자바스크립트 코드;

   증감식;

}

 

2. for문

for(초기값;조건식;증감식){

   break;

   자바스크립트 코드;

   증감식;

}

for (var i = 1; i <= 10; i++) {

        if (i == 6) break; //i가 6이 되면 반복문을 종료함.

        document.write(i, "<br />");

      }

 

Continue문=건너뛰기 문

continue문은 반복문 안에서만 사용할 수 있다.

while문에서 사용할 경우 continue문을 만나면 continue문 다음에 오는 코드는 무시하고 바로 '조건식'으로 가서 조건검사를 실행한다.

즉, while문에서 continue문은 '코드를 실행하지 말고 조건검사해!'라는 뜻이다.

 

for문에서 사용할 경우 continue문을 만나면 continue문 다음에 오는 코드는 무시하고 바로 '증감식'으로 가서 증감 연산을 실행한다. 

즉, for문에서 continue문은 '코드를 실행하지 말고 증감식을 실행해'라는 뜻이다. 

[기본형]

1. while문

var 변수= 초기값;

while(조건식){

   continue;

   자바스크립트 코드;

   증감식;

}

 

2. for문

for(초기값;조건식;증감식){

    continue;

   자바스크립트 코드;

   증감식;

}

 //continue문

      for (var i = 1; i <= 10; i++) {

        if (i % 2 == 0) continue;

        document.write(i, "<br />");

      }

 

중첩 for문

중첩 for문은 어떤 요소를 하나 생성할 때마다 안쪽에 다른 요소를 반복해서 생성해야할 경우 사용된다.

 

자바스크립트가 중첩 for문을 만나면 먼저 바깥쪽 for문의 초깃값과 조건식을 먼저 검사한다.

조건식이 만족하면 바깥쪽 for문의 {}안쪽 for문을 실행한다.

안쪽 for문도 마찬가지로 초깃값과 조건식을 먼저 검사한 후 {}안에 자바스크립트 코드를 실행하고 안쪽 for문의

증감식으로 가서 증감연산을 실행한다.

 

바깥쪽 for문이 1번 실행되면 안쪽 for문의 조건식이 true에서 false가 될 때까지 반복 실행하고, 안쪽 for문이 종료하면 바깥쪽 for문의 증감식을 실행하고 또 다시 조건 검사를 하여 안쪽 for문을 정해진 횟수만큼 반복 실행한다.

중첩 for문은 바깥쪽 for문의 조건식이 false가 될 때까지 반복 실행한다.

 

[기본형]

for(초깃값; 조건식; 증감식){

  for(초깃값; 조건식; 증감식){

      자바스크립트 코드;

 

바깥쪽 for문에 쓰여지는 변수랑 안쪽 for문에 쓰여지는 변수 이름은 겹칠 수 없다!

 

중첩 for문을 이용하여 3행 2열 표 만들기 

<body>

    <script>

      for (var i = 1; i <= 3; i++) {

        for (var k = 1; k <= 2; k++) {

          document.write(i + "행" + k + "열", "<br/ >");

        }

      }

    </script>

  </body>

 

중첩 for문을 이용하여 구구단만들기(3단까지만)

for (var a = 2; a <= 3; a++) {

        for (var b = 1; b <= 9; b++) {

          document.write(a + "x" + b + "=" + a * b, "<br/ >");

        }

      }

 

5행 5열 표 만들기 

for(var c=1; c <=5; c++){

        for(var d=1; d<=5; d++){

          document.write(c+"행"+d+"열", "<br />");

        }

      }

 

5행 5열 표 안에 숫자 순서대로 채워서 js에서 바로 만들기

    var num = 1; //칸 안에 쓸 숫자

      var t = "<table border='1'>";

      for (var e = 1; e <= 5; e++) {

        //행

        t += "<tr>";

        for (var f = 1; f <= 5; f++) {

          //열

          t += "<td>";

          t += num++;

          t += "</td>";

        }

        t += "</tr>";

      }

      t += "</table>";

      document.write(t);

    </script>

 

이해 안갈 경우 대입연산(복합대입연산) 복습하기!

객체 Object

 

자바스크립트는 객체 기반 프로그래밍 언어이다.

객체를 구성하는 요소로는 속성(Property)과 기능(method)이 있다.

객체는 객체마다 정해진 기능과 속성을 이용할 수 있으며, 

해당 객체에 포함되어 있지 않은 기능이나 속성은 사용할 수 없다.

 

예를 들어, document는 html에서 <body> 부분에 해당하는 '객체'를 뜻한다.

html안에 있는 모든 태그들도 넓은 의미의 '객체'이다. ex)<a> 링크 기능과, inline속성을 가지고 있다.

document 에는 .write()라는 기능이 있고, 글자를 나타내거나 특정 태그를 화면에 나타낼(쓸) 수 있다.

이렇게 객체마다 정해진 기능과 속성이 있고, 이외의 다른 기능이나 속성은 쓸 수 없다.

이것이 바로 객체의 개념이다.

 

[기본형]

/* 객체의 기능(=method)을 사용할 경우, 객체.메서드() 소괄호! */

객체.메서드()

 

/* 객체의 속성(=property)를 사용할 경우 */

객체.프로퍼티

 

/* 객체의 속성(=property) 값을 바꾸고 싶을 경우 */

객체.프로퍼티 = 값;

---

객체의 종류

 

자바스크립트의 객체는 크게

→내장객체 : '날짜', '문자', '수학', '배열', '정규식표현'과 같은 객체가 있다.

 

→ 브라우저 객체 모델(BOM) : 브라우저의 계층 구조로 내장되어 있는 객체를 말하며 

window, screen, location... 등의 여러 객체로 이루어져 있다.

 

→ 문서 객체 : html문서 구조를 말하며, 웹 요소를 제어하는 다양한 기능과 프로퍼티를 제공하고 있다.

---

내장객체

내장객체는 Built-in-Object라고 부르며, 자바스크립트 엔진에 내장되어 필요할 때마다 생성하거나 이미 정의되어 있어 객체를 꺼내쓸 수 있다. 

변수 안에 저장할 수 있는것

1. 데이터 ex) 8, "hello"

2. 연산식 

3. 객체(기능+속성)

1. 내장객체 생성하기 

내장객체를 생성할 때에는 객체를 뜻하는 'new'라는 키워드를 사용하여 생성한다. 

객체를 생성할 때에는 변수에 참조하여 사용한다.

 

[기본형]

var 참조변수(=인스턴스 이름) = new 생성함수();

   참조변수.속성1=값1;

   참조변수.속성2=값2;

   참조변수.속성3=값3;

   참조변수.기능1=function(){기능으로 쓸 자바스크립트;}

//만약 객체를 커스텀해서 쓰고 싶다면 위에 있는 기본형을 쓰거나 아래 약식 기본형을 사용할 수 있다. 회원정보를 저장할 때 아래 약식형을 굉장히 많이 쓴다. 사용자가 회원정보를 입력했을 때 중간 검사역할인 java script로 보내지고, 유효성검사를 마친 뒤에 서버로 보내진다. 보안을 위해서 

ex) <script>

      var userinfo = {

        userName : "김땡땡";

        userId : "dotKim";

        userPw: "123457";

        phone: "01012345678"

        info: function(){

           alert("사용자의 이름은?" + this.userName);

           }

};

 

document.write(userInfo.userId);

userinfo.userPw="145678";

 

document.write(userInfo.userPw);

 

userInfo.info2 = function(){

//기능

}

 

userInfo.into(); method를 쓴다. 사용한다 = method를 호출한다 라고 부른다.

 

alert 창에서 사용자의 이름은? 을 띄어주는게 userinfo의 기능이다! 

userinfo라는 객체를 만들고, userinfo의 속성들은 userName, userId...etc 기능으로 쓸 method명을 써준다. 기능(method)명이 info가 되고, 

함수()는 곧 기능 커스텀해서 쓰고 싶으면 new Object();비어있는 객체를 생성하면 되는데, Object의 O는 항상 대문자로 써야한다. 약식형에서 new생성함수() 부분을 {}중괄호로 대체할 수 있다는 뜻이고, 중괄호{}안에 쓰는 거는 :(콜론)으로 구분하고, 위의 기본형은 =으로 구분한다. 

var 참조변수 ={

   속성1 : 값1,

   속성2 : 값2,

   속성3 : 값3, 

   기능1 : function(){ 기능으로 쓸 자바스크립트;}

}

  <script>

      //tv라는 새로운 객체 생성하기

      var tv = new Object();

      //tv객체에 기능과 속성 추가하기

      tv.color = "white"; //property 추가

      tv.price = 3000000; //property 추가

      tv.info = function () {

        document.write("tv색상:" + this.color, "<br/>");

        document.write("tv가격:" + this.price, "<br/>");

      };

      document.write("<h2>tv객체 메서드 호출</h2>");

      //info메서드 사용하기

      tv.info();

    </script>

 

this라는 키워드. 실무면접에서 많이 물어본다.

예제 파일 정리해놓기

---

날짜객체 Date

 

날짜나 시간 관련 정보를 제공받고 싶을 때 날짜 객체를 생성한다.

날짜객체는 날짜와 관련된 작업을 할 때 굉장히 유용한 객체로 타이머, 디데이 계산기, 몇 시간 또는 몇 초 전에 게시글이 작성되었는지 등을 화면에 표시하고 싶을 때 많이 사용한다.

property없고 method만 있다.

{}중괄호는 커스텀해서 쓸 때 사용한다.

[날짜객체 기본형]

1. 현재 날짜, 시간 정보를 제공하는 날짜객체 생성 

var 참조변수 = new  Date();     //참조변수 자리에 Date객체가 생성된 상태. 오늘 날짜에 대한 정보를 가지고 있음.

 

2. 특정 날짜에 대한 정보를 제공하는 날짜 객체 생성 

var 참조변수 = new  Date("연/월/일");  //문자라 데이터 가공이 어렵다.

var 참조변수 = new  Date(연, 월-1, 일); //(2025, 7(특정날짜 월에서 1뺀 걸 써줘야한다.), 24); 보통 데이터 가공하고 싶다면 숫자로 입력한다. 자바스크립트 프로그래밍 언어에서는 시작하는 숫자가 1이 아니라 0이다. 즉, 0이 1월, 1이 2월, 2가 3월... 이다. 현재 월을 제대로 나타내려면 -1된 값으로 계산하여 작성해야 한다.

 

날짜객체의 메서드

날짜 객체는 날짜의 정보를 가져오는 GET메서드와 정보를 수정하는 SET메서드로 이루어져 있다.

 

[GET]

1. getFullYear() : 연도 정보를 가져옴. 

2. getMonth() : 월 정보를 가져옴. (현재 월-1된 값으로 가져와준다.)

3. getDate() : 일 정보를 가져옴. 

4. getDay() : 요일 정보를 가져옴. (0:일요일 ~ 6: 토요일)

5. getHours() : 시 정보를 가져옴. 

6. getMinutes() : 분 정보를 가져옴. 

7. getSeconds() : 초 정보를 가져옴. 

8. getMilliseconds() : 밀리 초 정보를 가져옴.(1/1000초)

9. getTime() : 1970년 1월 1일(국제 표준 시 제정일)부터 경과된 시간을 밀리초로 표기함. ★

10. toGMTString() : GMT표준 표기 방식으로 문자형 데이터로 시간을 반환함.

 

[SET메서드] ***setDay는 없다. 요일은 날짜를 바꾸면 자동으로 바뀌므로

1. setFullYear() : 연도 정보를 수정함.

2. setMonth() : 월 정보를 수정함. (현재 월-1된 값으로 가져와준다.)

3. setDate() : 일 정보를 수정함.

4. setHours() : 시 정보를 수정함. 

5. setMinutes() : 분 정보를 수정함. 

6. setSeconds() : 초 정보를 수정함. 

7. setMilliseconds() : 밀리 초 정보를 수정함. (1/1000초)

8. setTime() : 1970년 1월 1일(국제 표준 시 제정일)부터 경과된 시간을 밀리초로 표기함. ★

9. toLocalString() : 운영 시스템 표기 방식으로 문자형 데이터로 시간을 반환함. 

 

 

객체의 첫글자는 대문자를 쓴다. 

선택문은 숫자를 문자로 바꾸고 싶을 때 쓴다 ! 

<script>

      var today = new Date(); //현재 날짜에 대한 정보를 포함한 객체 생성

      var nowYear = today.getFullYear(); //현재 연도 정보 가져오기

      var nowMonth = today.getMonth() + 1; //현재 월 정보 가져오기

      var nowDate = today.getDate(); //현재 일 정보 가져오기

      var nowDay = today.getDay(); //현재 요일 정보 가져오기

      document.write("<h2>오늘 날짜 정보</h2>");

      document.write("현재 연도 : " + nowYear, "<br/>");

      document.write("현재 월 : " + nowMonth, "<br/>");

      document.write("현재 일 : " + nowDate, "<br/>");

      document.write("현재 요일 : " + nowDay, "<br/>");

      switch (nowDay) {

        case 0:

          nowDay = "일요일";

          break;

        case 1:

          nowDay = "월요일";

          break;

        case 2:

          nowDay = "화요일";

          break;

        case 3:

          nowDay = "수요일";

          break;

        case 4:

          nowDay = "목요일";

          break;

        case 5:

          nowDay = "금요일";

          break;

        case 6:

          nowDay = "토요일";

          break;

      }

      document.write("현재 요일 : " + nowDay, "<br/>");

💡예제💡

특정날짜 객체로 2002년 월드컵의 개막식이 무슨 요일인지 구하기

 if (theDay == 5) theDay = "금요일"; //원래는 이렇게 쓰면 안되고 switch문으로 써야한다!!!

      document.write("<h2>2002년 월드컵 정보</h2>");

      document.write("2002년 월드컵은" + theMonth + "월", "<br/>");

      document.write(theDate + "일에 열렸고,", "<br/>");

      document.write(theDay + "이었다.", "<br/>");

 

---

🟢 현재 날짜부터 연말까지 남은 날짜 D-day 계산기 만들기 🟢

디데이 계산기를 만들려면 특정 날짜에서 현재 날짜를 빼서 남은 일 수를 구해야한다.

[공식]

남은 일 수(밀리초) = 특정 날짜 객체- 현재 날짜 객체   

밀리초로 시간 계산하기 1초 = 1000(msc)

1분(60초) = 1000*60

1시간(60분) = 1000*60*60

하루(24시간) = 1000*60*60*24

 

<script>

      var today = new Date(); //오늘날짜

      var nowYear = today.getFullYear(); //올해 연도

      var theDate = new Date(nowYear, 11, 31); //연말 정보

      var diffDate = theDate.getTime() - today.getTime(); //연말(밀리초)-현재날짜(밀리초)

      var result = Math.ceil(diffDate / (1000 * 60 * 60 * 24)); //남은 일수 = 밀리초로 계산한 남은 일수 / 하루

      document.write("연말 D-day :" + result + "일 남았습니다.");

    </script>

 

---

수학객체 Math

자바스크립트에 내장 객체에는 수학과 관련된 기능과 속성을 제공하는 수학객체가 있다. 단순한 연산이 아닌 복잡한 계산이나 ,

산술연산자와 같은 연산자로 구할 수 없는 "최댓값", "최솟값", 반올림 등을 구할 때에는 수학 객체를 사용할 수 있다.

[메서드와 상수] *상수 : 변하지 않는 수, 고정된 수 ex)원주율 

 

1. Math.abs(숫자) : 숫자의 절댓값을 반환

2. Math.max(숫자1, 숫자2, 숫자3...) : 숫자 중 가장 큰 값을 반환

3. Math. min(숫자1, 숫자2, 숫자3...) : 숫자 중 가장 작은 값을 반환

4. Math.pow(숫자, 제곱값) : 숫자의 거듭제곱값을 반환

5. Math.random() : 0 이상 ~1 미만 사이의 난수(랜덤 수)를 반환

6. Math.round(숫자) : 소수점 첫째 자리에서 반올림하여 정수를 반환

7. Math.ceil(숫자) : 소수점 첫째 자리에서 무조건 올림하여 정수를 반환

8. Math.floor(숫자) : 소수점 첫째자리에서 무조건 내림하여 정수를 반환

9. Math.sqrt(숫자) : 숫자의 제곱근 값을 반환

10. Math.PI : 원주율 상수를 반환 3.14...

 

<script>

      var num = 2.1234;

      var maxNum = Math.max(10, 5, 19, 46, 3); //최댓값

      document.write(maxNum, "<br/>"); //46

      var minNum = Math.min(10, 5, 19, 46, 3); //최소값

      document.write(minNum, "<br/>"); //

      var roundNum = Math.round(num); //반올림

      document.write(roundNum, "<br/>"); //2

      var ceilNum = Math.ceil(num); //올림

      document.write(ceilNum, "<br/>"); //3

      var floorNum = Math.floor(num); //내림

      document.write(floorNum, "<br/>"); //2

      var randomNum = Math.random(); //0~1 사이의 난수

      document.write(randomeNum, "<br/>"); //랜덤 수

      var piNum = Math.PI; //원주율 상수

      document.write(piNum, "<br />"); //3.141592

    </script>

 

---

🟢Math.random()메서드로 임의의 구간의 정수 구하기🟢

Math.random()메서드를 이용하면 0과 1 사이의 난수를 구할 수 있다.만약 0~1이 아닌 임의로 지정한 숫자 구간에서 난수를 정수로 반환받으려면 어떻게 해야할까?

 

1. 만약 0~10 사이에 난수를 반환받으려면 아래와 같이 사용한다.

     Math.random()*10

var num = Math.random()*10;

   document.write(num);

 

2. 0~10까지의 난수를 정수로만 반환받으려면 내림이나 올림을 사용한다.

     Math.floor(Math.random()*11)

 <script>

      var num = Math.floor(Math.random() * 11);

      document.write(num);

    </script>

 

3. 120~150 사이의 난수를 정수로 반환하고 싶으면 아래와 같은 공식을 사용한다.-     

     Math.floor(Math.random()*31)    => 0~30까지 난수를 정수로 변환

     Math.floor(Math.random()*31)+120 => 최솟값 120~ 최댓값 150까지의 난수를 정수로 반환

즉, 난수를 발생하여 원하는 구간의 정수값을 구하려면

Math.floor(Math.random()*(최댓값-최솟값+1))+최솟값; 

 

로또 번호 생성기, 인형 옷입히기 만들 수 있다.

---

🟢 컴퓨터랑 묵찌빠 게임 만들기 🟢

 <script>

      var num = Math.floor(Math.random() * 11);

      document.write(num, "<br />");

      document.write("<h2>컴퓨터랑 묵찌빠</h2>", "<br />");

      var game = prompt("묵! 찌! 빠!!"); //사용자에게 묵찌빠 정보 받아오기

      var gameNum;

      switch (game) {

        case "묵":

          gameNum = 2;

          break;

        case "찌":

          gameNum = 1;

          break;

        case "빠":

          gameNum = 3;

          break;

        default:

          alert("잘못 작성하셨습니다.");

          location.reload(); //새로고침

      }

      //컴퓨터가 내는 묵찌빠

      var com = Math.ceil(Math.random() * 3); //1~3사이의 난수를 정수로 반환

      if (gameNum == com) {

        document.write("사용자 승!!");

      } else {

        document.write("사용자 패!");

      }

    </script>

코드결과 값 범위문제 여부

Math.random() * 3 + 1	실수 1.0 이상 ~ 4.0 미만	4는 안 나옴, 정수 아님
Math.ceil(Math.random() * 3)	정수 0~3 (0 가능성 있음)	❌ 0 나올 수 있음
Math.floor(Math.random() * 3) + 1