KH/JavaScript

JS_Math , String ,Equality,Identity

오늘의 진 2022. 9. 22. 11:27

Math

Math 객체는 수학계산을 위해 다양한 프로퍼티와 메소드를 제공한다. 

Math 객체는 new Math() 로 객체를 생성하지 않고

Math.프로퍼티 또는 Math. 메소드() 로 만든다. 

 

메소드 의미
abs(x) x의 절대값 리턴
sin(x) 사인값 리턴
exp(x) e의 x 제곱근 값 리턴
pow(x,y) x의 y 제곱값 리턴
random() 0~1 사이의 임의의 실수 리턴
floor(x) x보다 작거나 같은 수 중 가장 큰 정수 리턴(소숫점 이하 버림)
round(x) x를 반올림한 정수 리턴 (소숫점 이하 반올림)
ceil(x) 인수와 같거나 큰 수 중에서 가장 작은 정수 반환 (소숫점이하 올림)
sqrt(x) x의 제곱근 리턴
프로퍼티 의미
E Euler 상수
PI 원주율 3.154592

 

 

String 객체 

: String 객체는 문자열을 다루는 객체이다. 

문자열은 단일 따옴표(' ') 또는 이중 따옴표(" ")안에 저장한다. 

Javascript에서 문자열은 주로 리터럴을 사용한다. 하지만 new 연산자로 String 객체를 생성하기도 한다. 

  메소드 의미
속성 length 문자열의 길이를 구한다
문자 big() / small() 문자를 한단게 크게 / 작게
  blink() 문자를 깜빡이게 설정
  fontsize(크기) 문자 크기 설정
  fontcolor(색상) 문자 색상 설정
  toLowerCase() 문자를 소문자로 변경
  toUpperCase() 문자를 대문자로 변경
  anchor(# 위치표시 문자) <a name="">과 같은 효과
  link(링크할 위치) <a href="">와 같은 효과
  italic() / strike() 이텔릭체 / 취소선 설정 

 

 

 

 

 

Math의 함수들 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Math 객체</title>
</head>
<body>

    <script>
        document.write(Math.pow(8,2)+"<br>");
        document.write(Math.random()+"<br>");
        document.write(Math.floor(4.7)+"<br>");
        document.write(Math.ceil(4.4)+"<br>");
        document.write(Math.ceil(-11.9)+"<br>");
        document.write(Math.round(4.7)+"<br>");
        document.write(Math.abs(-4.4)+"<br>");
        document.write(Math.sqrt(64)+"<br>");
    </script>
</body>
</html>

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function plusfunc() {
            var a = parseInt(frm.a.value);
            var b = parseInt(frm.b.value);

            if (isNaN(a) || isNaN(b)) {
                alert("a값 또는 b값은 숫자가 아닙니다.");
                frm.a.value = "";
                frm.b.value = "";
                frm.b.focus();
                return;
            }
            frm.rs.value = a + b;
        }
        function divifunc() {
            var a = Number(frm.a.value);
            var b = Number(frm.b.value);
            rs = a / b;

            if (isFinite(rs) == false) { // 주어진 값이 유한인지 판별
                alert("0으로 나눌 수 없습니다.");
                frm.a.value = "";
                frm.b.value = "";
                frm.a.focus();
                return;
            }
            frm.rs.value = rs;
        }
    </script>
</head>

<body>
    <form name="frm">
        A 값 : <input type="text" size="7" name="a">&nbsp;&nbsp;&nbsp;
        B 값 : <input type="text" size="7" name="b"><br>
        결과 : <input type="text" size="7" name="rs"><br>
        <input type="button" name="+" value="더하기" onclick="plusfunc()">;
        <input type="button" name="/" value="나누기" onclick="divifunc()">;
    </form>
</body>
</html>

 

A 값 :     B 값 :
결과 :
; ;

 

 

 

곱셈연습 프로그램

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Math를 활용한 곱셈</title>
    <script>
        function randomInt() {
            return Math.floor(Math.random() * 9) + 1; //1-9의 난수값 리턴
        }
    </script>
</head>

<body>

    <h3> Math를 활용한 곱셈</h3>
    <hr>
    <script>
        //곱셈 문제 생성 
        var ques = randomInt() + " * " + randomInt() + " / " + randomInt();
        //사용자로부터 답 입력 
        var user = prompt(ques + "값은 얼마입니까 ?", 0);

        if (user == null) {
            document.write("구구단 연습을 종료합니다.");
        } else {
            var ans = Math.floor(eval(ques)); // 구구단 정답 계산
            if (ans == user)
                document.write("정답 !!!  ");
            else
                document.write("Stone 이냐 !!  ");

            document.write(ques + " = " + "<strong>" + ans + "</strong>  입니다.<br>");
        }


    </script>
</body>

</html>

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>17개의 CSS3 색 이름과 색</title>
<style>
    div{
        display: inline-block;
        width: 80px;
        padding: 20px;


    }
</style>
</head>
<body>

    <h3>17개의 CSS3 색이름과 색</h3>
<hr>
<script>
    var colorNames =[
        "maroon","red","orange","yellow","olive",
        "purple","fuchsia","white","lime","green",
        "navy","blue","aqua","teal","black","silver","gray"
    ];

    for(i=0 ; i<colorNames.length ; i++){
        var str = "<div style='background-color:";
        str += colorNames[i];
        str+="'>"+colorNames[i]+"</div>";
        document.write(str);
    }
</script>


</body>
</html>

 

Array 출력 및 정렬하기 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>문자열 배열 다루기</title>
</head>

<body>
    <h3>문자열 배열 다루기</h3>
    <hr>
    <script>
        function printArray(array) {
            for (i = 0; i < array.length; i++)
                document.write(array[i] + " ");
            document.write("<br>")

        }
        var names = new Array("qeen", "jaemoonlee", "king", "gracehwang");

        //(1) 배열의 각 이름 출력 
        document.write("이름 : ");
        printArray(names);

        //(2) 가장 긴 이름 출력 
        var longest = names[0];
        for (i = 1; i < names.length; i++) {
            if (names[i].length > longest.length)
                longest = names[i];
        }
        document.write("가장 긴 이름 : " + longest + "<br>");

        //(3) 오름차순으로 출력
        names.sort();
        document.write("오름차순 이름 : ");
        printArray(names);
    </script>
</body>
</html>

sort : 오름차순 정렬

 

 

 

 

 

 

 

 

 

String의 함수들 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>String Function</title>
</head>
<body>
<script>
    var data =new String("JavaScript Test");
    document.write(data+"<br>");
    document.write(data.length+"<br>");
    document.write(data.toLowerCase()+"<br>");
    document.write(data.bold()+"<br>");
    document.write("다음".link('http://www.daum.net')+"<br><br>");
    document.write(data.charAt(4)+"<br>");
    document.write(data.substring(1,3)+"<br>");
    document.write(data.replace("Test","sample")+"<br>");
</script>
</body>
</html>

 

 

 

Equality

 

==와 !=는 Equality 연산자 이다. Equality라고 해봤자 사실 영어로는 그 뉘앙스가 제대로 와닿지 않는다. 

중요한 점은 JavaScript에서 ==을 사용하면

연산이 되기 전에 피연산자들을 먼저 비교할 수 있는 형태로 변환시킨다는 점이다.

(== 연산자는 동등 연산자로, 피연산자가 서로 다른 타입이면 타입을 강제로 변환하여 비교한다.)

따라서 == 을 사용하면 다음가 같은 사실이 성립한다. 

245 == '245'   //true
true == 1 // true
undefinded == null //true
'abc' == new String('abc') // true
null == false //fakse
'true' == true //false
true == 2 //false

 

Identity

===와 !==는 Identity 연산자이다. 

이녀석은 ==와는 반대로 형변환을 하지 않고 연산한다. 

(=== 연산자는 일치 연산자로, 두 피연산자를 더 정확하게 비교한다.)

245 === '245'   //false
true === 1 // false
undefinded === null //false
'abc' === new String('abc') // false

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Number Test</title>
</head>
<body>
<script>
    var a = 15;
    var b = new Number(15);
    var c = 15;
    document.write("a와 b를 더하면 : "+(a.toString()+b.toString()));
    document.write("<br>15의 2진수 표현 : "+a.toString(2));
    document.write("<br>15의 8진수 표현 : "+a.toString(8));
    document.write("<br>15의 16진수 표현 : "+a.toString(16));
    document.write("<br>a와 b의 타입 : "+typeof a +"&nbsp;&nbsp;"+typeof b);
    document.write("<br>a와 b의 값 비교 : "+(a==b));
    document.write("<br>a와 b의 타입 비교 : "+(a===b));
    document.write("<br>a와 c의 타입 비교 : "+(a===c));
    
</script>
</body>
</html>

 

 

 

 

 

 

 

 

 

'KH > JavaScript' 카테고리의 다른 글

JS_DOM(Document Object Model)  (1) 2022.09.22
JS_ 사용자 객체(Object) 생성  (0) 2022.09.22
JS_ Javascript의 객체와 배열  (1) 2022.09.21
JS_숫자 맞추기 게임  (0) 2022.09.21
JS_내장함수  (0) 2022.09.20

'KH/JavaScript'의 다른글

  • 현재글JS_Math , String ,Equality,Identity

관련글

티스토리툴바