JavaScript - 내장함수(Math, Spring)

JavaScript

객체

• 내장 객체
• 브라우저 객체
• 문서 객체(DOM)
• 사용자 정의 객체

자바스크립트 내장 객체 (Built in Object)

• 미리 정의되어 있는 객체
• 선언 과정을 통해 객체 변수를 정의해서 사용
• 특별한 경우에만 사용자 정의 객체를 정의하여 사용하고, 대부분의 경우 내장 객체를 많이 사용한다.

대표적인 내장 객체

• Date : 날짜와 시간을 처리하기 위한 객체
• Array: 배열을 만들기 위한 객체
• String: 문자열을 다루기 위한 객체
• Math: 수학 계산을 위한 객체
• Event: 발생하는 이벤트에 관한 정보를 제공하는 객체
• Screen: 화면의 해상도, 색상, 크기에 관한 정보를 제공하는 객체

Math객체

• 수학적 계산에 필요한 함수나 상수 값 제공
• 상수 값은 속성으로, 수학 삼수는 메소드로 제공
• Math 객체는 속성이나 메소드에 접근하기 위해 따로 객체변수 선언하지 않고 Math 클래스 이름 그대로 사용
• 형식
  • Math.속성
  • Math.메소드

Math 객체의 주요 메소드

• sin(x) : sin
• cos(x) : cos
• tan(x) : tangent
• abs(x): 절댓값
• exp(x) : 지수 함수
• log(x) : 로그 함수
• random(x) : 난수 함수
• pow(x ,y) : 지수
• sqrt(x) : 제곱근
• round(x) : 반올림
• floor(x) : 버림
• ceil(x) : 올림
• max(x, y) : 최댓값
• min(x, y) : 최솟값

Math.random()

• 0.0x ~ 0.9x 사이의 실수 형태의 값으로 난수 발생
• 정수 값으로 사용하기 위해서는 x10을 하고, Math.floor() 메소드로 소수점 이하 값을 버린 후 시작 값 덯서 사용

// 1 ~ 10 사이의 난수 발생
var num = 1 + Math.floor(Math.random()*10);

Math 예제

random.html

<script type="text/javascript">
    var num = 1 + Math.floor(Math.random()*3);
    document.write(`<img src="image/그림${num}.jpg"> <br> 그림${num}.jpg  난수 :  ` + num);
</script>

String 객체

• 문자열 객체
• var name = "김준면"; // 상수 형태 문자열 (객체로 자동 변환 : 일시적)
• var name = new String();
• new를 이용해서 객체를 생성하지 않고 상수 형태("문자열")로 문자열을 만들어도 문자열 객체의 특징을 모두 사용

String 객체의 주요 메소드

• charAt() : 인덱스로 지정된 위치의 문자 반환
• indexOf("찾고자 하는 문자") : 문자열에서 특정 문자의 위치를 인덱스 값으로 반환(인덱스는 0부터) 발견하지 못하면 -1 반환
• lastIndexOf() :문자열 끝에서부터 검색하여 위치 반환
• subString(start, end) : 문자열의 일부분(start ~ end-1) 추출
• slice() : 문자열의 일부분 추출(오른쪽 끝(음수) 지정 가능)
• substr() : 문자열의 일부분 추출(추출할 문자 개수 지정)
• toUpperCase() : 문자열을 모두 대문자로 변경
• toLowerCase() : 문자열을 모두 소문자로 변경
• concat() : 문자열 연결
• split("구분자") : 구분자를 기준으로 문자열 분리되어 배열에 순서대로 저장

String 예제

String.html

<script type="text/javascript">
    var name = new String("김준면");
    // var name = "김준면"; 과 동일

    document.write(name.bold());
    document.write(name.sub());
    document.write(name.sup());
    document.write(name.italics());
    document.write(name.fontcolor("red"));
    document.write(name.fontsize(5));
    document.write(name.fontsize(6).fontcolor("blue"));
</script>

String 연습문제

charAtEx1.html

<script type="text/javascript">
    var input = prompt("숫자를 입력해 주세요.")
    for(var i=0; i<input.length; i++){
        if(!('0' <= input.charAt(i) && input.charAt(i) <='9')){
            alert("숫자 형식이 아닙니다!");
            break;
        }
    }
</script>

subStringEx1.html

<script type="text/javascript">
    var birth = prompt("생년월일 입력", "예 : 19990101");
    document.write(birth.substring(0, 4) + "년 " + birth.substring(4, 6) + "월 " + birth.substring(6, 8) + "일에 태어나셨군요");
</script>

indexOfEx1.html

<script type="text/javascript">
    var email = prompt("이메일 입력");
    if(email.indexOf("@") == -1 || email.indexOf(".") == -1 || (email.indexOf("@") > email.indexOf("."))) {
        alert("이메일 형식이 아닙니다.")
        document.write(email);
    }
</script>

splitEx1.html

<script type="text/javascript">
    var birth = prompt("생년월일 입력", "예 : 1999-04-09");
    var date = birth.split("-");
    document.write(date[0] + "년 " + date[1] + "월 " + date[2] + "일")
</script>