자바스크립트 객체 (Object)

자바스크립트 객체 (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 객체의 시간/날짜 정보 반환 메소드

메소드	설명
getYear()	1970년 이후의 연도 반환 / getFullYear()
get.Month()	월 반환 (0 = 1월, 1 = 2월 ... )
getDate()	일 반환
getDay()	요일 반환
getHours()	시 반환 (0 ~ 23)
getMinutes()	분 반환 (0 ~ 59)
getSeconds()	초 반환 (0 ~ 59)
getTime()	1970년 1월 1일 이후 시간을 1/1000 단위로 표시

Date 객체의 시간/날짜 정보를 설정하는 메소드

메소드	설명
setYear()	1970년 이후의 연도 설정
set.Month()	월 설정 (0 = 1월, 1 = 2월 ... )
setDate()	일 설정
setHours()	시 설정 (0 ~ 23)
setMinutes()	분 설정 (0 ~ 59)
setSeconds()	초 설정 (0 ~ 59)
setTime()	1970년 1월 1일 이후 시간을 1/1000 단위로 설정

날짜/시간 정보의 포맷 변경 메소드

메소드	설명
parse(날짜 문자열)	문자열을 시간으로 변경
toGMTString()	문자열을 GMT 날짜로 복귀
toLocaleString()	날짜를 문자열로 반환

예제

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript </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}요일 입니다.<br>`);
			
			var hour = today.getHours();
			var minute = today.getMinutes(); // getMonth()가 0부터 반환
			var second = today.getSeconds();
			
			var ampm = "오전";
			if (hour==24) {
				hour-=24;
			} else if (hour >= 12) {
				ampm = "오후";
				if (hour>12) {
					hour-=12;
				}
			}
			else ampm = "오전";
			
			document.write(`지금은 ${ampm}${hour}시 ${minute}분 ${second}초 입니다.`);
		</script>
	</head>
	<body>
		
	</body>
</html>

Array 객체

배열 내장 객체

Array 객체 주요 메소드

메소드	설명
unshift(데이터)	배열 맨 앞에 요소 추가
shift()	첫 번째 요소 삭제
push(데이터)	배열 마지막에 요소 추가
pop()	마지막 요소 삭제
reverse()	배열 순서를 역순으로 변경
sort()	오름차순으로 정렬
slice(start, end)	start ~ end-1 범위의 요소를 추출하여 새로운 배열 생성
splice(위치, 개수, 데이터)	특정 위치에 요소 삭제하고 추가

예제

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript </title>
		<script type="text/javascript">
		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("딸기", "수박"); // 마지막 요소 추가
		
		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.PI
Math.abs()

Math 객체의 주요 메소드

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

Math.random()

0.0x ~ 0.9x 사이의 실수 형태의 값으로 난수 발생
정수값으로 사용하기 : 곱하기 10 -> Math.floor() 메소드로 소수점 이하 값을 버림 -> 시작 값 더해서 사용

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

예제

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript </title>
		<script type="text/javascript">
			var num = 1 + Math.floor(Math.random()*3);
			document.write(`<img src="image/그림${num}.jpg"><br>그림${num}.jpg`);
		</script>
	</head>
	<body>
		
	</body>
</html>

String 객체 (문자열 객체)

new를 이용해서 객체를 생성하지 않고 상수 형태(“문자열”)로 문자열을 만들어도 문자열 객체의 특징 모두 사용

var name = “홍길동’; // 상수 형태 문자열 (객체로 자동 변환 : 일시적)
var name = new String(문자열);

String 객체의 주요 메소드

메소드	설명
charAt()	인덱스로 지정된 위치의 문자 반환
indexOf()	문자열에서 특정 문자의 위치 반환
laskIndexOf()	문자열 끝에서부터 검색하여 위치 반환
substring()	문자열의 일부분 추출
slice()	문자열의 일부분 추출 (오른쪽 끝(음수) 지정 가능)
substr()	문자열의 일부분 추출 (추출할 문자 개수 지정)
toUpperCase()	문자열을 모두 대문자로 변경
toLowerCase()	문자열을 모두 소문자로 변경
concat()	문자열 연결
split()	문자열 분리

예제 : 문자열 속성 메소드

// String 객체 name 생성
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(5).fontcolor("blue"));

예제 : chatAt()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript </title>
		<script type="text/javascript">
			var input = prompt("입력하세요.");
			var cnt = 0;
			for (let i=0; i<input.length; i++) {
				if (!(Number(input.charAt(i)))) cnt++;
				document.write(input.charAt(i));
			}
			if (cnt>0) alert("숫자 형식이 아닙니다.");
			
			// 또는
			/* for (let i=0; i<input.length; i++) {
				if (!(Number(input.charAt(i)))){
					alert("숫자 형식이 아닙니다.");
					break;
				}
			} */
		</script>
	</head>
	<body>
		
	</body>
</html>

예제 : substring()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript </title>
		<script type="text/javascript">
			var birth = prompt("생년월일", "예 : 19990102");
			
			var year = birth.substring(0, 4);
			var month = birth.substring(4, 6);
			var date = birth.substring(6, 8);
			
			document.write(`${year}년 ${month}월 ${date}일에 태어나셨군요.`);
		</script>
	</head>
	<body>
		
	</body>
</html>

예제 : indexOf()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript </title>
		<script type="text/javascript">
			var email = prompt("이메일 입력");
			
			if (email.indexOf('@') && email.indexOf('.') && email.indexOf('@')<email.indexOf('.')) {
				document.write(email);
			} else alert("이메일 형식이 아닙니다.");
		</script>
	</head>
	<body>
		
	</body>
</html>

예제 : split()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript </title>
		<script type="text/javascript">
			var birth = prompt("생년월일 입력 (예:1999-01-01)");
			var date = birth.split("-");
			
			document.write(`${date[0]}년 ${date[1]}월 ${date[2]}일`);
		</script>
	</head>
	<body>
		
	</body>
</html>

저작자표시 비영리 변경금지

'Frontend > Javascript' 카테고리의 다른 글

문서 객체 모델 (Document Object Model) (0)	2021.12.10
브라우저 객체 모델 (Browser Object Model) (0)	2021.12.10
디폴트 매개변수 (0)	2021.12.09
화살표함수 (0)	2021.12.09
콜백 함수 (Callback Function) (0)	2021.12.09

0lli2

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

자바스크립트 객체 (Object) 종류

내장 객체 (Built in Object)

'Frontend > Javascript' 카테고리의 다른 글

티스토리툴바

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

자바스크립트 객체 (Object) 종류

내장 객체 (Built in Object)

'Frontend > Javascript' 카테고리의 다른 글

'Frontend/Javascript' Related Articles

티스토리툴바