티스토리 뷰

[JQUERY]자바스크립트

jQuery 042. 난수(랜덤한 숫자) 생성, Math.random()

가산동 2018. 12. 2. 00:40

아래는 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            /*
                난수(랜덤한 숫자) 만들기 Math.random() 
            */
            
            //#buttionP 클릭이벤트
            $("#buttonP").click(function(){
                
                //Math.random 
                var ranNum = Math.random();
                $("#ranNaum").text(ranNum);
                
                //Math.random * 10
                var test01 = ranNum*10;
                $("#test01").text(test01);
                
                //Math.floor(Math.random * 10) 
                var test02 = Math.floor(ranNum*10);
                $("#test02").text(test02);
                
                //1~10 난수 만들기
                var test03 = Math.floor(ranNum*10+1);
                $("#test03").text(test03);
                
            });
        });
    </script>
    
    <style>
        #buttonP{
            font-size: 30px;
            font-weight: bold;
            cursor: pointer;
        } 
    </style>
    
</head>
    <body>
        <p id="buttonP">클릭하면 위 예제의 결과를 확인 합니다.</p>
        <p>생성된 난수(랜덤한 숫자) = <span id="ranNaum"></span></p>
        <p>난수 * 10 = <span id="test01"></span></p>
        <p>floor(난수 * 10) = <span id="test02"></span></p>
        <p>1~10 사이의 난수 생성 = <span id="test03"></span></p>
    </body>
</html>
cs


아래는 예제 미리보기 입니다. 클릭해서 결과를 확인해보세요.


클릭하면 위 예제의 결과를 확인 합니다.

생성된 난수(랜덤한 숫자) =

난수 * 10 =

floor(난수 * 10) =

1~10 사이의 난수 생성 =



예제를 라인별로 보겠습니다.


45
46
47
48
49
50
51
    <body>
        <p id="buttonP">클릭하면 위 예제의 결과를 확인 합니다.</p>
        <p>생성된 난수(랜덤한 숫자) = <span id="ranNaum"></span></p>
        <p>난수 * 10 = <span id="test01"></span></p>
        <p>floor(난수 * 10) = <span id="test02"></span></p>
        <p>1~10 사이의 난수 생성 = <span id="test03"></span></p>
    </body>
cs

먼저, 위처럼 body 태그안에 예제의 결과를 출력한 p태그와 span태그를 생성해 줍니다.


13
14
            //#buttionP 클릭이벤트
            $("#buttonP").click(function(){
cs

라인 14.    <p id="buttonP">에 클릭이벤트를 생성합니다.

   click() 예제는 아래링크를 참조해주세요   

   [[JQUERY]자바스크립트] - jQuery 020. 이벤트 on(), 클릭이벤트 click()


16
17
18
                //Math.random 
                var ranNum = Math.random();
                $("#ranNaum").text(ranNum);
cs

# Math.random() 은 0~1 사이에 난수(랜덤한 수) 를 생성합니다.

라인 17.    var ranNum에 Math.random()을 활용해 난수를 넣어줍니다.

라인 18.    <span id="ranNaum">에 var ranNum의 값을 text()를 활용해 넣어줍니다.

   text() 예제는 아래링크를 참조해주세요

   [[JQUERY]자바스크립트] - jQuery 027. 텍스트 값 가져오기 text()


20
21
22
                //Math.random * 10
                var test01 = ranNum*10;
                $("#test01").text(test01);
cs


# Math.random() * 10 은 0~9까지의 난수(랜덤한 수)를 생성합니다.

라인 21.    var test01에 위에서 생성한 var ranNum에 *10 연산을 한 수 를 넣어줍니다.

라인 22.    <span id="test01">에 text()를 활용해 var test01의 값을 넣어줍니다.


24
25
26
                //Math.floor(Math.random * 10) 
                var test02 = Math.floor(ranNum*10);
                $("#test02").text(test02);
cs


# Math.floor() 는 소수점 아래 숫자를 버림(절삭) 합니다.

라인 25.    var test02에 위에서 생성한 var ranNum에 *10연산을 한 수를Math.floor() 로 감싸줍니다.

라인 26.    <span id="test02">에 text()를 활용해 var test02의 값을 넣어줍니다.


28
29
30
                //1~10 난수 만들기
                var test03 = Math.floor(ranNum*10+1);
                $("#test03").text(test03);
cs


# Math.Random()은 0~1 의 사이의 난수를 생성하기 때문에, 

*10을하면 0~9사이, +1을 더해주면 1~10 사이의 난수를 생성합니다.

라인 29.    var test02에 위에서 생성한 var ranNum에 *10+1 연산을 한 수를Math.floor() 로 감싸줍니다.

라인 26.    <span id="test02">에 text()를 활용해 var test02의 값을 넣어줍니다.


#결과를 확인하면, Math.random()을 활용해 원하는 범위 안의 난수를 어떻게 생성하는 지 알 수 있습니다.

저작자표시 비영리 변경금지

'[JQUERY]자바스크립트' 카테고리의 다른 글

jQuery 044. 다중 for() 문  (0) 2019.04.22
jQuery 043. 반복문 while()  (0) 2018.12.03
jQuery 041. 소수점 올림, 버림(절사), 반올림  (0) 2018.12.01
jQuery 040. 반복문 for(), break  (0) 2018.11.24
jQuery 039. 반복문 for(), continue  (0) 2018.11.24
댓글