자바스크립트 객체 (Object) > 내장 객체 (Date, Array, Math, String)
자바스크립트 객체 (Object)
- 내장 객체
- 브라우저 객체
- 문서 객체 (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(); // Date 객체 생성
- var month = today.getMonth();
Date 객체의 시간/날짜 정보를 반환하는 메소드
Date 객체의 시간/날짜 정보를 설정하는 메소드
날짜/시간 정보의 포맷을 변경하는 데 사용하는 메소드
Date 객체 예제 : date.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 Date 객체</title>
<script type="text/javascript">
// Date 객체 today 선언
var today = new Date();
//var year = today.getYear();
var year = today.getFullYear();
var month = today.getMonth() + 1; //.getMonth()가 0부터 반환
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 ="토";
}
document.write("오늘은 " + year + "년 " + month + "월 " +
date + "일 " + day + "요일입니다");
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
var amPm;
var amPm = "오전";
if (hour == 24) {
hour -= 24;
} else if (hour >= 12) {
amPm = "오후";
if (hour > 12) {
hour -= 12;
}
}
document.write("<br>지금은 " + amPm + hour + "시 " + minute + "분 " +
second + "초입니다");
</script>
</head>
<body>
</body>
</html>
Array 객체
- 배열 내장 객체
- var arr = new Array(3); // Array 객체 생성
- arr.sort() // 객체.메소드()
Array 객체 주요 메소드
Array 객체 예제 : arrayObject.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 Array 객체</title>
<script type="text/javascript">
var fruits = new Array("사과" , "복숭아", "포도");
// var fruits = ["사과" , "복숭아", "포도"]; //결과 동일
document.write("모든 요소 출력 <br>");
for(var i=0; i<fruits.length; i++)
document.write(fruits[i] + " ");
fruits.shift(); // 첫 번째 요소 제거
document.write("<br> shift() : 첫 번째 요소 제거 - ");
for(var i=0; i<fruits.length; i++)
document.write(fruits[i] + " ");
fruits.unshift("배"); // 맨 앞에 요소 추가
document.write("<br> unshift() : 맨 앞에 요소 추가 - ");
for(var i=0; i<fruits.length; i++)
document.write(fruits[i] + " ");
fruits.pop(); // 마지막 요소 제거
document.write("<br> pop() : 마지막 요소 제거 - ");
for(var i=0; i<fruits.length; i++)
document.write(fruits[i] + " ");
fruits.push("딸기"); // 마지막에 요소 추가
fruits.push("수박"); // 마지막에 요소 추가
document.write("<br> push() : 마지막에 (딸기, 수박) 요소 추가 - ");
for(var i=0; i<fruits.length; i++)
document.write(fruits[i] + " ");
fruits.reverse(); // 역순으로 변경
document.write("<br> reverse() : 역순으로 변경 - ");
for(var i=0; i<fruits.length; i++)
document.write(fruits[i] + " ");
fruits.sort(); // 오름차순 정렬
document.write("<br> sort() : 오름차순 정렬 - ");
for(var i=0; i<fruits.length; i++)
document.write(fruits[i] + " ");
fruits.splice(2, 1, "망고", "오렌지"); // [2] 위치 요소 1개 삭제하고 '망고', '오렌지' 추가
document.write("<br> splice() : [2] 위치 요소 1개 삭제하고 '망고', '오렌지' 추가 - ");
for(var i=0; i<fruits.length; i++)
document.write(fruits[i] + " ");
// slice()로 잘라서 새 배열 생성
var newFruits = fruits.slice(1, 4); // start~ end-1 : [1]~[3] 요초 추출하여 새 배열 생성
document.write("<br> slice() : [1]~[3] 요초 추출하여 새 배열 생성 - ");
for(var i=0; i<newFruits.length; i++)
document.write(newFruits[i] + " ");
</script>
</head>
<body>
</body>
</html>
Math 객체
- 수학적 계산에 필요한 함수나 상수 값 제공
- 상수 값은 속성으로
- 수학 함수는 메소드로 제공
- Math 객체는 속성이나 메소드에 접근하기 위해 따로 객체 변수 선언하지 않고 Math 클래스 이름 그대로 사용
- 형식
- Math.속성
- Math.메소드
- 예:
- Math.PI
- Math.abs()
Math 객체의 주요 메소드
Math.random()
- 0.0x ~ 0.9x 사이의 실수 형태의 값으로 난수 발생
- 정수값으로 사용하기 위해서는
- 곱하기 10을 하고
- Math.floor() 메소드로 소수점 이하 값을 버리고
- 시작 값 더해서 사용
- 예 : 1 ~ 10 사이의 난수 발생
- var num = 1 + Math.floor(Math.random() * 10);
Math.random() 연습문제 : random.html
- 실행할 때마다 이미지 다르게 출력(그림1 ~ 3 중 1개가 임의로 출력)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 Math.random()</title>
<script type="text/javascript">
var rand=1 + Math.floor(Math.random() * 3);
document.write('<img src="image/그림' + rand + '.jpg">');
document.write('<br>그림' + rand + '.jpg');
// 또는 ${ranNum} 사용
var ranNum = 1 + Math.floor(Math.random() * 3); // 1~3 랜덤 숫자
document.write(`<img src="image/그림${ranNum}.jpg"><br>그림${ranNum}.jpg`);
</script>
</head>
<body>
</head>
<body>
</body>
</html>
String 객체
- 문자열 객체
- var name = “홍길동”; // 상수 형태 문자열 (객체로 자동 변환 : 일시적)
- var name = new String();
- new를 이용해서 객체를 생성하지 않고 상수 형태(“문자열”)로 문자열을 만들어도 문자열 객체의 특징 모두 사용
String 객체의 주요 메소드
String 객체 예제 : string.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 String 객체</title>
<script type="text/javascript">
//String 객체 name 생성
var name = new String("홍길동");
// var name = "홍길동"; // 해도 동일
// String 문자열 속성 메소드
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>
</head>
<body>
</body>
</html>String 객체 주요 메소드
charAt()
- charAt(인덱스) : 인덱스로 지정된 위치의 문자 반환
- str.charAt(3) : 문자열 str에서 4번째 문자(w) 반환
- 인덱스 : 0부터 시작
- 예 : str = “flower”;
- 연습문제 : charAtEx.html
- 숫자를 입력 받아서 (1234abd111)
- 숫자가 아닌 값이 하나라도 들어 있으면 “숫자 형식이 아닙니다” alert() 출력
- 입력된 값 화면에 출력 (write())
substring()
- substring(start, end)
- 문자열 일부분 추출 : 인덱스 start ~ end-1까지의 문자열
- 인덱스 : 0부터 시작
- 예 : “19990115”
- substring(4, 6)
- start : 인덱스 4 (다섯번째)
- end-1 : 6-1은 인덱스 5 (여섯번째)
- 5 ~6 번째 문자열 : 01
- 연습문제 : substring.html
- “생년월일 (예: 19990125)”
- 화면에 출력 : ~ 년 ~월 ~일에 태어나셨군요
IndexOf()
- indexOf(‘문자’)
- 문자열에서 지정된 문자의 위치를 인덱스 값으로 반환
- 인덱스는 0부터
- 검색할 때 왼쪽부터 찾아서 처음 발견한 문자의 위치를 알려주는 것
- 예: email.indexOf(‘@’)
- email 문자열에서 세번째 위치하는 2 반환
- 찾고자하는 문자가 문자열에 없으면 -1 반환
- 연습문제 : indexOf.html
- “이메일 입력” 입력 받아서
- 이메일 형식이 아니면 “이메일 형식이 아닙니다” alert() 출력
- 화면에 “입력한 email : abcd@1234” 출력
- 이메일 형식이 아닌 조건
- @ 없는 경우
- . 없는 경우
- .이 @ 앞에 오는 경우
split()
- split(“구분자”)
- 구분자로 문자열 분리
- 예 : str = “1999-11-12”
- var date = str.split(‘-’); 하면
- 문자열이 ‘-’ 기준으로 분리되어 배열에 순서대로 저장
- date[0]에는 1999 가 저장되고
- date[1]에는 11 이 저장되고
- date[2]에는 12가 저장
- 연습문제 : split.html
- “생년월일 입력 (예: 1999-11-12)” 입력 받아서
- 화면에 출력 (write()) : 1999년 11월 12일