Math Object


Home > Document > JavaScript > Object > Math object

Math Object

Math object는 Math라는 글자만 봐도 알 수 있듯이 수학(Mathemetics)에 사용되는 Property와 Method 들을 다루는 Object가 되겠습니다. 사실 저의 경우에는 아래 표에 있는 Property들 중에 PI 를 제외한 나머지 들은 실행해 본 적은 있어도 사용해 본적은 단 한 번도 없구요. 두 번째 표의 Method 중에서는 round(), ceil(), floor(), random(), max(), min() 이렇게 6개 이외에는 실제로 사용해 보지 않았습니다. 그렇지만 이런 Property나 Method가 필요한 사람에게는 꼭 있어야 되는 것 들이겠죠. 별로 사용해 보지 않은 것 들이라 이렇게 강좌로 꾸미려다 보니 NetScape, W3C, MSDN, ECMA 등을 뒤져서 정확성을 기했습니다. 그러고 보니 이 페이지는 강좌라기 보다 제 스스로 공부를 한 셈이로군요...^^

*** JavaScript 대소문자를 정확히 구분한다는 사실을 항상 잊으면 안 되겠습니다...

NN : Netscape Navigator, IE : Internet Explorer (Property와 Method를 처리하는 최소 브라우저 버전)
Math Object Properties
Properties 설 명 NN IE 
E 자연 LOG의 밑(base) return 2.0 3.0
LN2 2의 자연 LOG 값 return 2.0 3.0
LN10 10의 자연 LOG 값 return 2.0 3.0
LOG2E 밑(base)이 2인 E의 LOG 값 return 2.0 3.0
LOG10E 밑(base)이 10인 E의 LOG 값 return 2.0 3.0
PI PI(원주율) return 2.0 3.0
SQRT1_2 1 / 2 제곱근 return 2.0 3.0
SQRT2 2 제곱근 return 2.0 3.0


Math Object Property 예제
<html>
    <head>
        <title>Math 관련 Properties</title>
    <script type="text/javascript">
    <!--
    document.write("Math.<b>E</b> = " + Math.E +"<br>")
    document.write("Math.<b>LN2</b> = " + Math.LN2 +"<br>")
    document.write("Math.<b>LN10</b> = " + Math.LN10 +"<br>")
    document.write("Math.<b>LOG2E</b> = " + Math.LOG2E +"<br>")
    document.write("Math.<b>LOG10E</b> = " + Math.LOG10E +"<br>")
    document.write("Math.<b>PI</b> = " + Math.PI +"<br>")
    document.write("Math.<b>SQRT2</b> = " + Math.SQRT2 +"<br>")
    document.write("Math.<b>SQRT1_2</b> = " + Math.SQRT1_2 )
    // -->
    </script>
    </head>
    <body>
    
    </body>
</html>
코드 실행 하기



Math Object의 Method

아래의 Method 중에 random(), round(), ceil(), floor(), max(), min() 등은 어느 분야나 쓸 모가 많은 Method이므로 잘 알아 두면 유용하게 사용할 수 있져...

NN : Netscape Navigator, IE : Internet Explorer (Property와 Method를 처리하는 최소 브라우저 버전)
Math Object Methods
Methods 설 명 NN IE
abs(x) x 의 절대값(absolute Value) return 2.0 3.0
acos(x) x 의 arccosine 값 return 2.0 3.0
asin(x) x 의 arcsine 값 return 2.0 3.0
atan(x) x 의 arctangent 값 return 2.0 3.0
atan2(y,x) X 축과 어떤 좌표(x,y)가 이루는 각도(-pi ~ pi 사이의 radian 값) return 2.0 3.0
ceil(x) x 가 소수일 경우 무조건 반올림 또는 정수이면 x 값 return 2.0 3.0
cos(x) x 의 cosine 값 return 2.0 3.0
exp(x) 자연 LOG E의 지수 (指數 : exponent) x 값 (Ex :E 의 x 乘 ) return 2.0 3.0
floor(x) x 가 소수일 경우 무조건 반내림(절사) 또는 정수이면 x 값 return 2.0 3.0
log(x) x 의 자연 LOG 값 return 2.0 3.0
max(x,y) x, y 중에서 큰 값 return 2.0 3.0
min(x,y) x, y 중에서 작은 값 return 2.0 3.0
pow(x,y) xy 승(乘) 값 return 2.0 3.0
random() 0 ~ 1 사이의 임의의 수 return 2.0 3.0
round(x) x 의 반올림 값 return 2.0 3.0
sin(x) x 의 sine 값 return 2.0 3.0
sqrt(x) x 의 제곱근 값 return 2.0 3.0
tan(x) x 의 tangent 값 return 2.0 3.0


Math Object Method 예제
<html>
    <head>
        <title>Math 관련 Methods</title>
    <script type="text/javascript">
    <!--
    document.write("-3.5의 절대값은 : " + Math.abs(-3.5) + "<br />")
    document.write("PI의 sine 값은 : " + Math.sin(Math.PI/2) + "<br />")
    document.write("PI의 cosine 값은 : " + Math.cos(Math.PI/2) + "<br />")
    document.write("PI의 tangent 값은 : " + Math.tan(Math.PI/2) + "<br />")
    document.write("0.5의 arcsine 값은 : " + Math.asin(0.5) + "<br />")
    document.write("0.5의 arccosine 값은 : " + Math.acos(0.5) + "<br />")
    document.write("0.5의 arctangent 값은 : " + Math.atan(0.5) + "<br />")
    document.write("좌표 (3, 5)와 X 축의 각도(radian)는 : " + Math.atan2(3,5) + "<br />")
    document.write("자연 LOG E의 10승은 : " + Math.exp(10) + "<br />")
    document.write("4.9의 무조건 반내림 값은 : " + Math.floor(4.9) + "<br />")
    document.write("4.1의 무조건 반올림 값은 : " + Math.ceil(4.1) + "<br />")
    document.write("10의 자연 LOG 값은 : " + Math.log(10) + "<br />")
    document.write("3과 5중에 더 큰 수는 : " + Math.max(3,5) + "<br />")
    document.write("3과 5중에 더 작은 수는 : " + Math.min(3,5) + "<br />")
    document.write("2의 3승(2<sup>3</sup>)은 : " + Math.pow(2,3) + "<br />")
    document.write("0 ~ 1 사이의 임의의 수는 멀까? : " + Math.random() + "<br />")
    document.write("4.4999의 반올림 값은 : " + Math.round(4.4999) + "<br />")
    document.write("2의 제곱근 값은 : " + Math.sqrt(2) + "<br />")
    document.write("0 ~ 100 사이의 임의의 정수는 멀까? : " + Math.round(Math.random() * 100))
    // Math.random() 의 경우는  '실행 결과 보기' 단추를 누를 때 마다 달라집니다.
    // -->
    </script>
    </head>
    <body>
    
    </body>
</html>
코드 실행 하기



몇 가지 Method 를 이용한 간단한 내기

어떤 예제를 하면 좋을지 생각하다가 random() 이라는 아주 재미있는 Method를 이용하여 간단한 내기 게임을 하나 만들었습니다. random 이라는 단어는 모르긴 해도 아마 이 사이트의 회원님들이나 이 사이트를 찾아 오신 분이라면 아마 무쟈게 귀에 익은 단어이리라 생각합니다. Te... , Pro... , Zer... 이렇게 3 단어의 일부만 봐도 아! 그거... 하고 아실테죠... 예 맞습니다. 바로 StarCraft 의 Random Player라고 잊지 않습니까... 어떤 종족이 걸릴지 모르는, 아무 종족이나 다 잘하는 그런 Gamer를 뜻하죠. 유명한 선수로는 우리 나라의 최인규, 최진우 등이 있고 푸른 눈의 마법사라고 불리는 기욤 페이트리 같은 선수, 그리고... 바로 이 사람...ㅎㅎ

아래의 예제는 0 ~ 1 사이의 임의의 수를 발생시키는 random Method를 이용하여 2개의 임의의 수를 발생시키고 10을 곱하여 round Method로 0 ~ 10 사이이 정수로 만든 다음 각각 a와 b의 변수에 저장하고 두 수의 크기를 max Method로 비교한 다음 누가 이겼는지 판정해 주는 아무런 조작이 없는 아주 공평한 내기라고 할 수 있습니다. 또 그냥 판정만 하면 거기에 불복할 수도 있기 때문에 Input field에 그 값을 출력하게 하는 과정입니다.

입력
<html>
<head>
    <title>Gambling</title>
    <script type="text/javascript">
    <!--
    function who_win(){
        var a = Math.round(Math.random() *10) // 0 ~ 10  사이의 정수를 발행 시켜 a 에 저장
        var b = Math.round(Math.random() *10) // 0 ~ 10  사이의 정수를 발행 시켜 b 에 저장
        var who = Math.max(a, b) // a, b 중 큰 쪽을 who에 저장
    document.gamble.forA.value = a // name이 forA 인 input field에 a값 출력
    document.gamble.forB.value = b // name이 forB 인 input field에 b값 출력
        if(a == b) // a, b 가 같은 값이면
        {
        window.alert("두 선수 비겼습니다.             ") // 두 선수 비겼습니다. 를 경고창에 출력
        }
       else if(who == a) // 그렇지 않고 큰 쪽이 a 라면
        {
        window.alert("a 선수가 이겼습니다.             ") // a 선수가 이겼습니다. 를 경고창에 출력
        }
        else // 그렇지 않으면, 즉 b가 크면
        {
        window.alert("b 선수가 이겼습니다.             ") // b 선수가 이겼습니다. 를 경고창에 출력
        }
    }
    // -->
    </script>
    <style type="text/css">
    <!-- 
    input{border:1px solid royalblue; background-color:gold;} /*input field type selector */
    -->
    </style>
</head>
<body>
    <br /><br /><br />
    <form name="gamble">
        <p align="center">
            a 의 결과 : 
            <input type="text" readonly="readonly" name="forA" />
            ☞ ☜
            <input type="text" readonly="readonly" name="forB" /> : b 의 결과<br /><br />
            <button  onclick="who_win()">도박을 위하여 지나친 정신 건강을 삼가합시다.</button>
        </p>
    </form>
</body>
</html>
코드 실행 하기





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색