티스토리 뷰

development/html javascript CSS

[JavaScript] Math 객체 활용하기 / ceil(), round(), floor(), random()

Happyoon ~ 2021. 10. 19. 13:02
728x90
반응형

예시 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Math 객체 활용하기</h1>
    <script>
        //sin(60도)
        let result = Math.sin(60*Math.PI/180);
        //반올림 값 얻어내기
        let result2 = Math.round(10.6);
        let result3 = Math.round(10.3);
        //올림 값 얻어내기
        let result4 = Math.ceil(10.6);
        let result5 = Math.ceil(10.3);
        //내림 값 얻어내기
        let result6 = Math.floor(10.6);
        let result7 = Math.floor(10.3);
        //0이상 1 미만의 랜덤한 실수 얻어내기
        let random9 = Math.random();
        //0이상 10 미만의 랜덤한 실수 얻어내기
        let random10 = Manth.random()*10;
        //0 이상 9 이하의 랜덤한 정수 얻어내기
        let random11 = Math.floor(Math.random()*10);
        //10 이상 19 이하의 랜덤한 정수 얻어내기 - 첫번째 10은 갯수, 두번째 10은 시작값
        let result12 = Math.floor(Math.random()*10)+10;
        //1 이상 45 이하의 랜덤한 정수 얻어내기
        let result13 = Math.floor(Math.random()*45)+1;

    </script>
</body>
</html>

floor() : 내림

round(): 반올림

ceil(): 올림

random(): 0이상 1미만으 랜덤한 실수 얻어내기

 

 

다음의 예시에서, random() 뒤에 곱해지는 숫자는 범위값(끝), 뒤에 더해지는 숫자 1은 시작값을 의미함을 알 수 있다. 

//1 이상 45 이하의 랜덤한 정수 얻어내기
let result13 = Math.floor(Math.random()*45)+1;

예시 2

버튼 클릭 시 0과 2 사이의 랜덤한 정수를 얻어 p요소에 출력하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step09_example.html</title>
</head>
<body>
    <h1>랜덤한 결과 얻어내기</h1>
    <button id = "testBtn">테스트</button>
    <p id ="result"></p>
    <script>
        /*
            테스트 버튼을 누르면 
            0~2 사이의 랜덤한 정수를 얻어내서 
            결과값을 p요소에 출력하는 프로그래밍을 해보세요.
        */
        document.querySelector("#testBtn").addEventListener("click",function(){
            document.querySelector("#result").innerText = Math.floor(Math.random()*3);

        });
    </script>
</body>
</html>

예시 3

랜덤한 0~2 사이의 정수를 얻어 경우에 따라 가위, 바위, 보를 p에 출력하기

 

3-1) if문 사용하기 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step09_example2.html</title>
</head>
<body>
    <h1>랜덤한 결과 얻어내기</h1>
    <button id = "testBtn">테스트</button>
    <p id ="result"></p>
    <script>
        /*
            테스트 버튼을 누르면 
            0~2 사이의 랜덤한 정수를 얻어내서 
            0이 나오면 "가위",
            1이 나오면 "바위",
            2가 나오면 "보"
            라는 문자열을 p요소에 출력하는 프로그래밍을 해보세요.
        */
        document.querySelector("#testBtn").addEventListener("click",function(){
            let randomN = Math.floor(Math.random()*3);
            let str ="";
            if(randomN==0){
                str = "가위";

            }
            else if(randomN==1){
                str="바위";
            }
            else{
                str = "보";
            }
            document.querySelector("#result").innerText = str; 


        });
    </script>
</body>
</html>

 

 

3-2) 배열 사용하기 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step09_example3-2.html</title>
</head>
<body>
    <h1>랜덤한 결과 얻어내기</h1>
    <button id = "testBtn">테스트</button>
    <div id = "result">

    </div>
    <script>
        /*
            테스트 버튼을 누르면 
            0~2 사이의 랜덤한 정수를 얻어내서 
            0이 나오면 scissor.jpg,
            1이 나오면 rock.jpg,
            2가 나오면 paper.jpg 이미지를
            위의 div 안에 출력하는 프로그래밍을 해보세요.
        */

        document.querySelector("#testBtn").addEventListener("click",function(){
            let randomN = Math.floor(Math.random()*3);
            let img_src = "";
            
            
            //배열로 푸는법
            let img_srcArr = ['images/scissor.jpg','images/rock.jpg','images/paper.jpg'];
            img_src = img_srcArr[randomN];
            img = `<img src =${img_src}>`;
            document.querySelector("#result").innerHTML = img;

            

        });
    </script>
    
</body>
</html>

 

 

 

반응형

'development > html javascript CSS' 카테고리의 다른 글

[JavaScript] JSON / JSON.parse(), JSON.stringify()  (0) 2021.10.19
[JavaScript] this 복습하기 / EventListener에서의 this  (0) 2021.10.19
[JavaScript] setInterval() 주기마다 반복 작업 시행 method  (0) 2021.10.15
[JavaScript] setTimeout() 시간 지연시켜 작업 수행 method  (0) 2021.10.15
[JavaScript] 에서 문자열의 생성법과 가공법 / backtick, ${변수명}  (0) 2021.10.15
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
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
글 보관함