내부객체의 속성과 메서드

Number 객체

Number 객체는 수치형 값을 감싸서 객체로 만들어 주는 랩퍼(wrapper)객체이다.래퍼 객체란 수치값을 직접 사용할 수는 없고 반드시 객체가 필요한 경우에 사용된다. 다음과 같은 래퍼 객체가 있다.

Number 객체는 new Number()로 생성 할 수 있다.

예를 들어 다음 코드는  숫자 7을 가지고 있는 number객체를 생성한다.

var num = new Number(7);

단순히 수치값에도 메서드를 붙이면 자바스크립트가 자동적으로 숫자에 래퍼 객체를 감싸서 객체로 만든다. 따라서 다음과같은 문장이가능하다.

1.234.toString(); //1.234를 감싸는 래퍼 객체가 생성된다.

Number 객체의 속성 중 일부는 다음과 같다.

1. MAX VALUE - 표현할 수 있는 가장 큰 값

2. MIN VALUE - 표현할 수 있는 가장 작은 값

3. NaN - "Not-a-Number"의 약자

Number 객체의 메서드 중 일부는 다음과 같다.

1.toExponential([digits]) - 지수형으로 반환, 인수는 소수점 이하 숫자의 갯수이다.

2.toFixed([digits]) - 고정소수점 방식으로 반환, 인수는 소수점 이하 숫자의 갯수이다.

3.toPrecision([precison]) - 유효숫자 수를 지정한다.

4.toString([radix]) - 주어진 진법으로 숫자를 반환한다.

Number 객체는 어디에 사용될까? 2개의 실수를 소수점 2째 자리까지 비교하고 싶은 경우에 사용할 수 있다.

String 객체

String 의 속성은 다음과 같다.

length - 문자열의 길이이다.

예를 들어 웹 사이트에 회원으로 가입할 때 아이디 글자수 제한할때 length속성을 이용한다.

<script>

    function checkID() {

        var s = document.getElementById("id").value;

        if (s.length < 6) {

            alert("아이디는 6글자 이상이어야 합니다.")

        }

    }

</script>

 

string 객체의 메서드는 상당히 많다 .중요한 것들만 살펴보자

 

대소문자 변환

toUpperCase()와 toLowerCase()를 사용하면 문자열의 글자를 대문자 혹은 소문자로 변환할 수 있다.

예

<script>

var s = 'aBcDeF'

var result1 = s.toUpperCase();

var result2 = s.toLowerCase();

document.writeln(result1;)

document.writeln(result2;)

</script>

여기서 주의할 점은 s가 변환되는 것이 아니기 때문에 변환되는 값을 사용해 출력해야한다.

document.writeln(s) = aBcDeF 가 되버린다

 

 

문자열 붙이기

concat() 메서드는 하나의 문자열을 다른 문자열과 합친다.

결과는 새로운 문자열이 된다.

+연산자를 사용해도 동일한 결과를 얻을 수 있다.

 

<script>

var s1 = " 문자열 1 ";

var s2 = " 문자열 2 ";

s3 = s1.concat(s2);

document.writeln(s3); // "문자열 1 문자열 2"

</script>

문자열 검색

indexOf() 메서드는 문자열 안에서 주어진 텍스트가 처음 등장하는 위치를 반복한다.

<script>

var s = "자바스크립트에 오신 것을 환영합니다."

var n = s.indexOf("환영");

document.writeln(n); //14

</script>

// 환영이 시작하는 문자열길이가 14

 

문자열 매칭

 

match() 메서드는 문자열 안에서 일치하는 콘텐츠를 탐색하는 데 사용된다. match()메서드 에서는 정규식(regular expression) 을 사용할 수 있다. 즉 ?,*,^등의 기호를 사용할 수 있다.

<script>

    ste = 'Like father, like son.';

    //like를 찾는다. i와g는 옵션으로 insensitive, globally를 의미한다.

    resilt = str.math(/like/ig);

    document.writeln(result + '<br>');

    </script>

문자열 대체

 

replace() 메서드는 문자열 안에서 주어진 값을 다른 값으로 대체한다. replace()도 정규식을  사용할 수 있어서 가장 강력한 기능 중의 하나이다.

<script>

s = "Hong's number is 123-4567.";

result = s.replace("Hong's","Kim's");

document.writeln(result);

</script>

 

split(delimiter[, limit])

split () 첫 번째 인수를 분리자로 하여서 주어진 문자열을 분리한 후에 각 항목을 가지고 있는 배열을 반환한다.

 

<script>

s = "One, Two, Three, Four, Five";

Array = s. split(',');

for (i = 0; i < array.length; i++) {

    document.writeln(i + '-' + array[i] + '<br>');

}

</script>

HTML 래퍼 메서드

HTML 래퍼 메서드는 문자열을 적절한 HTML태그로 감싼 후에 반환한다.

<script>

var s = "This is a test";

document.write("Big"+ s.big()+"<br>");

document.write("Small"+s.small()+"<br>");

document.write("Bold"+s.bold()+"<br>");

document.write("Italic"+s.italics()+"<br>");

document.write("Fixed"+s.fixed()+"<br>");

document.write("Strike"+s.strike()+"<br>");

document.write("Fontcolor"+s.fontcolor()+"<br>");

document.write("Fontsize"+s.fontsize(6)+"<br>");

document.write("Subscript"+s.sub()+"<br>");

document.write("Seperscript"+s.sup()+"<br>");

document.write("LInk"+s.link("http://www.google.com")+"<br>");

</script>

 

문자열 리터럴과 문자열 객체

자바스크립트에서 문자열은 객체와 리터널 두가지 종류가 있다. 이 2가지 종류는 상당히 다르게 동작한다. 문자열 리터널은 큰 따옴표로 생성되며 문자열 객체는 키워드 new를 이용해 생성된다.

문자열 리터럴도 Sting 객체의 모든 속성과 메서드를 사용할 수 있다. 자바스크립트가 임시적으로 문장열 상수를 문자열 객체로 형변환을 하기 때문이다.

String 객체가 함수로 전달될 때는 값(value)만 전달된다. 함수 안에서 전달받은 문자열을 변경해도 원본은 그대로이다.

<script>

  var sLiteral = "문자열 리터널";

  sObject = new String("문자열 객체");

  function change(strlit,strobj) {

    strlit = "Hllo World"

    strobj = "Hello World"

  }

  document.writeln(typeof (sLiteral) + "<br>") //string

  document.writeln(typeof (sObject) + "<br>") //object

</script>

Math 객체

Math 객체는 수학적인 작업을 위한 객체이다. Math 는 생성자가 아니라 바로 객체이다 따라서 new 를 통하여 생성할 필요없이 바로 이용하면 된다. 수학 계산에 사용되는 상수와 거의 모든 함수를 가지도 있다고 봐야 한다. 많이 사용되는 것만 살펴보자.

<script>

  function calc(type) {

    x = Number (document.calculator.number1.value);

    if (type == 1)

      y = Math.sin((x * Math.PI) / 180.0);

      else if (type == 2)

        y = Math.log(x);

      else if (type == 3)

        y = Math.sqrt(x);

      else if (type == 4)

        y = Math.sqrt(x);  

      document.calculator.total.value = y;

  }

</script>

<body>

  <form name = "calculator">

    입력 : <input type = "text" name="number1"><br>

    계산 결과 : <input type="text" name="total"><br>

    <input type="button" value="SIN" onclick="calc(1);">

    <input type="button" value="LOG" onclick="calc(2);">

    <input type="button" value="SQRT" onclick="calc(3);">

    <input type="button" value="ABS" onclick="calc(4);">

  </form>

</body>

 

Math.min(x, y, ...)	인수로 전달받은 값 중에서 가장 작은 수를 반환함.
Math.max(x, y, ...)	인수로 전달받은 값 중에서 가장 큰 수를 반환함.
Math.random()	0보다 크거나 같고 1보다 작은 랜덤 숫자(random number)를 반환함.
Math.round(x)	x를 소수점 첫 번째 자리에서 반올림하여 그 결과를 반환함.
Math.floor(x)	x와 같거나 작은 수 중에서 가장 큰 정수를 반환함.
Math.ceil(x)	x와 같거나 큰 수 중에서 가장 작은 정수를 반환함.
Math.abs(x)	x의 절댓값을 반환함.
Math.cbrt(x)	x의 세제곱근을 반환함.
Math.sqrt(x)	x의 제곱근을 반환함.
Math.clz32(x)	x을 32비트 이진수로 변환한 후, 0이 아닌 비트의 개수를 반환함.
Math.exp(x)	ex 의 값을 반환함. (e : 오일러의 수)
Math.expm1(x)	1 - ex 의 값을 반환함.
Math.fround(x)	x와 가장 근접한 32비트 부동 소수점 수(single precision float)를 반환함.
Math.hypot(x, y, ...)	인수로 전달받은 값들을 각각 제곱한 후 더한 총합의 제곱근을 반환함.
Math.imul(x, y)	인수로 전달받은 두 값의 32비트 곱셈의 결과를 반환함.
Math.log(x)	x의 자연로그 값을 반환함. (ln x)
Math.log1p(x)	ln(1 + x)의 값을 반환함.
Math.log10(x)	x의 10을 밑으로 가지는 로그 값을 반환함.
Math.log2(x)	x의 2를 밑으로 가지는 로그 값을 반환함.
Math.pow(x, y)	x의 y승을 반환함.
Math.sign(x)	x의 부호 값을 반환함.
Math.trunc(x)	x의 모든 소수 부분을 삭제하고 정수 부분만을 반환함.
Math.sin(x), Math.cos(x), Math.tan(x),Math.asin(x), Math.acos(x), Math.atan(x), Math.asinh(x), Math.acosh(x), Math.atanh(x), Math.atan2(x)	x의 해당 삼각 함숫값을 반환함.

프로퍼티설명대략값

Math.E	오일러의 수(Euler's constant)라고 불리며, 자연로그(natural logarithms)의 밑(base) 값	2.718
Math.LN2	2의 자연로그 값	0.693
Math.LN10	10의 자연로그 값	2.303
Math.LOG2E	오일러 수(e)의 밑 값이 2인 로그 값	1.443
Math.LOG10E	오일러 수(e)의 밑 값이 10인 로그 값	0.434
Math.PI	원의 원주를 지름으로 나눈 비율(원주율) 값	3.14159
Math.SQRT1_2	2의 제곱근의 역수 값	0.707
Math.SQRT2	2의 제곱근 값	1.414

Array 객체

자바스크립트에서는 배열도 객체로 표현된다. 배열을 나타대는 객체는 Array이다. 우리는 Array 객체를 이용해 배열을 생성할 수도 있고 배열에 대하여 정렬과 같은 연산을 적용할 수도 있다.

<script>

var myArray = new Array();

myArray[0] = "apple"

myArray[1] = "banana"

myArray[2] = "orange"

</script>

배열의 크기가 자동으로 조절되낟. 다른 언어에서는 배열의 크기가 고정되어 있다. 자바스크립트에서는 배열의 크기는 현재 배열의 크기보다 큰 인덱스를 사용하면 자동으로 증가한다.

<script>

var myArray = new Array();

myArray[0] = "apple"

myArray[99] = "banana"

</script>

 

자바스크립트에서는 하나의 배열에 여러 가지 자료형을 혼합해서 저장할 수 있다. 즉 데이터의 종류를 다르게 하면서 배열에 저장할 수 있는것이다. 하나의 배열에 정수와 문자열을 동시에 저장하는 것이 가능하다.

<script>

var myArray = new Array();

myArray[0] = "apple"

myArray[1] = new Date();

myArray[2] = 3.14;

</script>

배열의 크기보다 큰 인덱스 값으로 배열 요소에 접근하면 오류가 발생하지않고 undefined값이 반환된다.