JavaScript - 내장 객체(Date, Array, Math, String 객체)

자바스크립트 객체

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

내장 객체(Built in Object)

• 미리 정의되어 있는 객체
• 선언 과정을 통해 객체 변수를 정의해서 사용
• 특별한 경우에만 사용자 정의 객체를 정의하여 사용하고 대부분 경우 내장 객체 사용.
• 대표적인 내장 객체
  • Date : 날짜와 시간을 처리하기 위한 객체
  • Array : 배열을 만들기 위한 객체
  • String: 문자열을 다루기 위한 객체
  • Math : 수학 계산을 위한 객체
  • Event : 발생하는 이벤트에 관한 정보를 제공하는 객체
  • Screen : 화면의 해상도, 색상, 크기에 관한 정보를 제공하는 객체
• 객체 생성 및 사용 예
  • 객체 생성
    • var today = new Date(); // Date 객체 생성
    • var arr = new Array(3); // Array 객체 생성
  • 객체 사용
    • 객체.메소드();
    • today.getMonth();
    • arr.sort();

Date 객체

• 날짜와 시간을 관리해주는 내장 객체
• 웹 페이지에 오늘 날짜와 시간, 요일 등 표시
• var today = new Date();
• today.getMonth();
• Date 객체의 메소드
  • get 메소드 (시간 / 날짜 정보를 반환)
    • getYear() : 1970년도 이후의 연도 반환 / getFullYear()
    • getMonth() : 월 반환 (0 = 1월, 1 = 2월, 2 = 3월, ... 11 = 12월)
    • getDate() : 일 반환
    • getDay() : 요일 반환 (0 = 일요일, 1 = 월요일, ... 6 = 토요일)
    • getHours() : 시 반환 (0 ~ 23)
    • getMinutes() : 분 반환 (0 ~ 59)
    • getSeconds() : 초 반환 (0 ~ 59)
    • getTime() : 1970년 1월 1일 이후 시간을 1/1000 단위로 표시
  • set 메소드 (시간 / 날짜 정보를 설정)
    • setYear() : 1970년도 이후의 연도 설정
    • setMonth() : 월 설정 (0 = 1월, 1 = 2월, 2 = 3월, ... 11 = 12월)
    • setDate() : 일 설정
    • setHours() : 시 설정 (0 ~ 23)
    • setMinutes() : 분 설정 (0 ~ 59)
    • setSeconds() : 초 설정 (0 ~ 59)
    • setTime() : 1970년 1월 1일 이후 시간을 1/1000 단위로 설정
      • 날짜 / 시간 정보의 포맷을 변경하는 데 사용하는 메소드
    • parse(날짜 문자열) : 문자열을 시간으로 변경
    • toGMTString() : 문자열을 GMT 날짜로 복귀
    • toLocaleString() : 날짜를 문자열로 변환

Date 객체 예제 date.html

<script type="text/javascript">
            var today = new Date();

            var year = today.getFullYear();
            var month = today.getMonth() + 1;
            var date = today.getDate();
            var day;
            switch(today.getDay()) {
                case 0: day="일"; break;
                case 1: day="월"; break;
                case 2: day="화"; break;
                case 3: day="수"; break;
                case 4: day="목"; break;
                case 5: day="금"; break;
            default : day="토"; break;
            }
            document.write("오늘은 " + year + "년 " + month + "월 " + date + "일 " + day + "요일입니다.");

            var hour = 24;
            var minute = today.getMinutes();
            var second = today.getSeconds();
            var ampm;

            document.write("<br>지금은 " + hour + "시 " + minute + "분 " + second + "초 입니다.");

            if(hour >= 12) {
                if(hour == 12) { 
                    ampm = "오후 ";
                }
                else if (hour == 24) { 
                    ampm = "오전 ";
                    hour -= 24;
                }
                else { 
                    ampm = "오후 ";
                    hour -= 12;
                }
            }
            else { 
                ampm = "오전 "
            }
            document.write("<br>지금은 " + ampm + hour + "시 " + minute + "분 " + second + "초 입니다.");
        </script>

Array 객체

• 배열 내장 객체
• var arr = new Array(3); // Array 객체 생성
  • arr.sort();
  • Array 객체 주요 메소드
    • unshift(데이터) : 배열 맨 앞에 요소 추가
    • shift() : 첫 번째 요소 삭제
    • push(데이터) : 배열 마지막에 요소 추가
    • pop() : 마지막 요소 삭제
    • reverse() : 배열 순서를 역순으로 변경
    • sort() : 오름차순으로 정렬
    • slice(start, end) : start ~ end-1 범위의 요소를 추출하여 새로운 배열으로 생성
    • splice(위치, 개수, 데이터) : 특정 위치에 개수만큼 요소 삭제하고 데이터 추가

Array 객체 예제 arrayObject.html

        <script type="text/javascript">
            var fruits = new Array("사과", "복숭아", "포도");

            document.write("모든 요소 출력<br>");
            for(var i = 0; i < fruits.length; i++) {
                document.write(fruits[i] + " ");
            }
            document.write("<hr>");
            fruits.shift(); // 첫 번째 요소 제거
            document.write("shift 후 요소 출력<br>");
            for(var i = 0; i < fruits.length; i++) {
                document.write(fruits[i] + " ");
            }
            document.write("<hr>");
            fruits.unshift("배"); // 첫 번째 요소에 추가
            document.write("unshift 후 요소 출력<br>");
            for(var i = 0; i < fruits.length; i++) {
                document.write(fruits[i] + " ");
            }
            document.write("<hr>");
            fruits.pop(); // 마지막 요소 제거
            document.write("pop 후 요소 출력<br>");
            for(var i = 0; i < fruits.length; i++) {
                document.write(fruits[i] + " ");
            }
            document.write("<hr>");
            fruits.push("딸기"); // 마지막에 요소 추가
            fruits.push("수박");
            document.write("push 후 요소 출력<br>");
            for(var i = 0; i < fruits.length; i++) {
                document.write(fruits[i] + " ");
            }
            document.write("<hr>");
            fruits.reverse(); // 역순으로 변경
            document.write("reverse 후 요소 출력<br>");
            for(var i = 0; i < fruits.length; i++) {
                document.write(fruits[i] + " ");
            }
            document.write("<hr>");
            fruits.sort(); // 오름차순 정렬
            document.write("sort 후 요소 출력<br>");
            for(var i = 0; i < fruits.length; i++) {
                document.write(fruits[i] + " ");
            }
            document.write("<hr>");
            fruits.splice(2, 1, "망고", "오렌지"); // splice 작업 2번 인덱스부터 1개를 삭제하고 망고, 오렌지 추가
            document.write("splice 후 요소 출력<br>");
            for(var i = 0; i < fruits.length; i++) {
                document.write(fruits[i] + " ");
            }
            document.write("<hr>");
            var newFruits = fruits.slice(1, 4); // slice 작업 1번 인덱스부터 4-1번 인덱스까지 데이터를 잘라서 새 배열 생성
            document.write("slice 후 요소 출력 (newFruits)<br>");
            for(var i = 0; i < newFruits.length; i++) {
                document.write(newFruits[i] + " ");
            }
            document.write("<br>slice 후 요소 출력 (fruits)<br>");
            for(var i = 0; i < fruits.length; i++) {
                document.write(fruits[i] + " ");
            }
        </script>

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 사이의 실수 형태의 값으로 난수 발생
  • 정수값으로 사용하기 위해서는 곱하기 10을 하고, Math.floor() 메소드로 소수점 이하 값을 버린 후 시작 값 더해서 사용
  • 예 : 1 ~ 10 사이의 난수 발생
  • var num = 1 + Math.floor(Math.random() * 10);

Math.random() 연습문제 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>

String 객체 연습 문제 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>

String 객체 연습 문제 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>

String 객체 연습 문제 splitEx1.html

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