[JavaScript] 객체

▶ 객체

1. 내장 객체 생성하기

객체를 생성할 때는 new라는 키워드와 생성 함수를 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 사용자 정의 객체 </title>
<script>
	var tv = new Object( );
	tv.color = "white";
	tv.price = 300000;
	tv.info = function( ) {
		document.write("tv 색상: " + this.color, "<br>");
		document.write("tv 가격: " + this.price, "<br>");
	}

	var car = { 
		color: "black",
		price: 5000000,
		info: function( ) {
			document.write("car 색상: " + this.color, "<br>");
			document.write("car 가격: " + this.price, "<br>");
		} 
	}; 

	document.write("<h1>tv 객체 메서드 호출</h1>");
	tv.info();
	document.write("<h1>car 객체 메서드 호출</h1>");
	car.info();        
</script>
</head>
<body>
</body>
</html>

2. 날짜 정보 객체

날짜나 시간 관련 정보를 제공받고 싶을 때는 날짜 객체(Date Object)를 생성한다.

예제 1) 현재 날짜 객체와 특정 날짜 객체를 이용하여 2002년 월드컵 날짜와 관련된 정보 출력하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset = "UTF-8">
	<title> 날짜 정보 객체 </title>
	<script>
	var today = new Date( );
	var nowMonth = today.getMonth( ),
					nowDate = today.getDate( ),
					nowDay = today.getDay( );
	
	document.write("<h1>오늘 날짜 정보</h1>");
	document.write("현재 월: " + nowMonth, "<br>");
	document.write("현재 일: " + nowDate, "<br>");
	document.write("현재 요일:" + nowDay, "<br>");
	
	var worldcup = new Date(2002, 4, 31);
	var theMonth = worldcup.getMonth( ),
					theDate = worldcup.getDate( ),
					theDay = worldcup.getDay( );
	
	document.write("<h1>월드컵 날짜 정보</h1>");
	document.write("2002월드컵 몇 월: " + theMonth, "<br>");
	document.write("2002월드컵 몇 일: " + theDate, "<br>");
	document.write("2002월드컵 무슨 요일: " + theDay, "<br>");
	</script>
</head>
<body>
</body>
</html>

getMonth() → 월 정보를 가져옴(현재 월 -1)

getDay() → 요일 정보를 가져옴(일:0 ~ 토:6)

예제 2) 현재 날짜부터 연말까지 며칠이 남았는지 날짜 정보 객체를 이용하여 알아보기

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 날짜 정보 객체 </title>
<script>
	var today = new Date();
	var nowYear = today.getFullYear();
	
	var theDate = new Date(nowYear, 11, 31);
	var diffDate = theDate.getTime( ) - today.getTime( );
	
	var result = Math.ceil( diffDate / (60 * 1000 * 60 * 24) );
	document.write("<h1>오늘부터 올해 연말까지 남은 날짜</h1>");
	document.write("D-day: " + result + "일 남았습니다.");
</script>
</head>
<body>
</body>
</html>

3. 수학 객체

자바스크립트 내장 객체에는 수학과 관련된 기능과 속성을 제공하는 수학 객체가 있다. 더하기, 곱하기, 나누기 등은 앞에서 배운 산술 연산자를 사용하면 된다. 하지만 최댓값, 최솟값, 반올림값 등은 산술 연산자로 구할 수 없다. 하지만 메서드를 사용하면 값을 처리할 수 있다.

종류	설명
Math.abs(숫자)	숫자의 절댓값을 반환한다.
Math.max(숫자1, 숫자2, 숫자3, 숫자4)	숫자 중 가장 큰 값을 반환한다.
Math.min(숫자1, 숫자2, 숫자3, 숫자4)	숫자 중 가장 적은 값을 반환한다
Math.pow(숫자, 제곱값)	숫자의 거듭제곱값을 반환한다.
Math.random()	0~1 사이의 난수를 반환한다.
Math.round(숫자)	소수점 첫째 자리에서 반올림하여 정수를 반환한다.
Math.ceil(숫자)	소수점 첫째 자리에서 무조건 올림하여 정수를 반환한다.
Math.floor(숫자)	소수점 첫째 자리에서 무조건 내림하여 정수를 반환한다.
Math.sqrt(숫자)	숫자의 제곱근값을 반환한다.
Math.PI	원주율 상수를 반환한다.

예제 1)

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 수학객체 </title>
<script>
	var num = 2.1234;

	var maxNum = Math.max(10, 5, 8, 30),
		minNum = Math.min(10, 5, 8, 30),
		roundNum = Math.round(num),
		floorNum = Math.floor(num),
		ceilNum = Math.ceil(num),
		rndNum = Math.random( ),
		piNum = Math.PI;

	document.write(maxNum, "<br>");
	document.write(minNum, "<br>");
	document.write(roundNum, "<br>");
	document.write(floorNum, "<br>");
	document.write(ceilNum, "<br>");
	document.write(rndNum, "<br>");
	document.write(piNum, "<br>");
</script>
</head>
<body>
</body>
</html>

예제 2)

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 수학객체 </title>
<script>
	document.write("<h1>컴퓨터 가위, 바위, 보 맞추기</h1>");

	var game = prompt("가위, 바위, 보 중 선택하세요?", "가위");
	var gameNum;
	switch(game) {
		case "가위": gameNum = 1;
		break;
		case "바위": gameNum = 2;
		break;
		case "보": gameNum = 3;
		break;
		default: alert("잘못 작성하셨습니다.");
		location.reload();
	}

	var com = Math.ceil( Math.random() * 3 );

	document.write("<img src=\"images/math_img_" + com + ".jpg\">");

	if(gameNum == com) {
		document.write("<img src=\"images/game_1.jpg\">");
	} else {
		document.write("<img src=\"images/game_2.jpg\">");
	}
</script>
</head>
<body>
</body>
</html>

4. 배열 객체

여러 개의 데이터를 하나의 저장소에 저장하려면 배열 객체(Array Object)를 생성하면 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 배열객체 </title>
<script>
	var arr = [30, "따르릉", true];

	document.write("<h3>배열값 가져오기-1</h3>");
	document.write(arr[0], "<br>");
	document.write(arr[1], "<br>");
	document.write(arr[2], "<br>");

	document.write("<h3>배열값 가져오기-2</h3>");
	for(var i = 0; i < arr.length; i++){
		document.write(arr[i], "<br>");
	}

	document.write("<h3>배열값 가져오기-3</h3>");
	for(i in arr){
		document.write(arr[i], "<br>");
	}
</script>
</head>
<body>
</body>
</html>

-배열 객체의 메서드 및 속성

종류	설명
join(연결 문자)	배열 객체의 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환한다.
reverse()	배열 객체의 데이터 순서를 거꾸로 바꾼 후 반환한다.
sort()	배열 객체의 데이터를 오름차순으로 정렬한다.
slice(index1, index2)	배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져온다.
splice()	배열 객체의 지정 데이터를 삭제하고 그 구간에 새 데이터를 삽입할 수 있다.
concat()	2개의 배열 객체를 하나로 결합한다.
pop()	배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제한다.
push(new data)	배열 객체의 마지막 인덱스에 새 데이터를 삽입한다.
shift()	배열 객체에 저장된 데이터 중 첫 번째 인덱스에 저장된 데이터를 삭제한다.
unshift(new data)	배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입한다.
length	배열에 저장된 총 데이터의 개수를 반환한다.

예제 1)

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 배열객체 </title>
<script>
		var arr_1 = ["사당", "교대", "방배", "강남"];
		var arr_2 = ["신사", "압구정", "옥수"];

		var result = arr_1.join("-");
		console.log(result);

		result = arr_1.concat(arr_2);
		console.log(result);

		result = arr_1.slice(1, 3);
		console.log(result);

		arr_1.sort( );
		console.log(arr_1);

		arr_2.reverse( );
		console.log(arr_2);
</script>
</head>
<body>
</body>
</html>

예제 2)

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 배열객체 </title>
<script>
	var greenArr = ["교대", "방배", "강남"];
	var yellowArr = ["미금","정자","수서"];

	greenArr.splice(2, 1, "서초", "역삼");
	console.log(greenArr);

	var data1 = yellowArr.pop( );
	var data2 = yellowArr.shift( );

	yellowArr.push(data2);
	console.log(yellowArr);

	yellowArr.unshift(data1);
	console.log(yellowArr);
</script>
</head>
<body>
</body>
</html>

5. 문자열 객체

문자열 객체(String Object)는 문자형 데이터를 객체로 취급하는 것으로, 자바스크립트에서 가장 많이 사용한다.

var t = new String("hello javascript");  // 문자열 객체 생성

var t = "hello javascript";  // 문자열 객체 생성

-문자열 객체의 메서드 및 속성

종류	설명
charAt(index)	문자열에서 인덱스 번호에 해당하는 문자를 반환한다.
indexOf("찾을 문자")	문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환한다. 만일 찾는 문자가 없으면 -1을 반환한다.
lastIndexOf("찾을 문자")	문자열에서 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환한다. 만일 찾는 문자가 없으면 -1을 반환한다.
match("찾을 문자")	문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 반환한다. 만일 찾는 문자가 없으면 null을 반환한다.
replace("바꿀 문자", "새 문자")	문자열에서 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 새 문자로 치환한다.
search("찾을 문자")	문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 인덱스 번호를 반환한다.
slice(a, b)	a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환한다.
substring(a, b)	a 인덱스부터 b 인덱스 이전 구간의 문자를 반환한다.
substr(a, 문자 개수)	문자열에 a 인덱스부터 지정한 문자 개수만큼 문자열을 반환한다.
split("문자")	지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환한다.
toLowerCase()	문자열에서 영문 대문자를 모두 소문자로 바꾼다.
toUpperCase()	문자열에서 영문 소문자를 모두 대문자로 바꾼다.
length	문자열에서 문자의 개수를 반환한다.
concat("새로운 문자")	문자열에 새로운 문자열을 결합한다.
charCodeAt(index)	문자열 index에 해당 문자의 아스키 코드값을 반환한다.
fromCharCode(아스키 코드 값)	아스키 코드값에 해당하는 문자를 반환한다.
trim()	문자의 앞 또는 뒤에 공백 문자열을 삭제한다.

예제 1)

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 문자 객체 </title>
<script>
	var str = "Hello Thank you good luck to you";
	document.write(str.charAt(16), "<br>");
	document.write(str.indexOf("you"), "<br>");
	document.write(str.indexOf("you", 16), "<br>");
	document.write(str.lastIndexOf("you"), "<br>");
	document.write(str.lastIndexOf("you", 25), "<br>");
	document.write(str.match("luck"), "<br>");
	document.write(str.search("you"), "<br>");
	document.write(str.substr(21, 4), "<br>");
	document.write(str.substring(6, 12), "<br>");
	document.write(str.replace("you","me"), "<br>");
	document.write(str.toLowerCase(), "<br>");
	document.write(str.toUpperCase(), "<br>");
	document.write(str.length, "<br>");

	var arr = str.split(" ");
	document.write(arr[0], "<br>");
	document.write(arr[4], "<br>");

	document.write(str.charCodeAt(0), "<br>");
	document.write(String.fromCharCode(72), "<br>");
</script>
</head>
<body>
</body>
</html>

예제 2)

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 문자 객체 </title>
<script>
	var userName = prompt("당신의 영문 이름은?","");

	var upperName = userName.toUpperCase();
	document.write(upperName, "<br>");

	var userNum = prompt("당신의 연락처는?","");
	var result = userNum.substring(0, userNum.length - 4) + "****";
	document.write(result, "<br>");
</script>
</head>
<body>
</body>
</html>

예제 3)

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 문자 객체 </title>
<script>
	var userEmail = prompt("당신의 이메일 주소는?", "");
	var arrUrl = [".co.kr", ".com", ".net", ".or.kr", ".go.kr"];

	var check1 = false;
	var check2 = false;

	if( userEmail.indexOf("@") > 0 ) { check1=true; }

	for(var i = 0; i < arrUrl.length; i++) {
		if( userEmail.indexOf(arrUrl[i]) > 0 ) {
			check2 = true;
		} 
	}

	if( check1 && check2 ) {
		document.write( userEmail );
	} else {
		alert("이메일 형식이 잘못되었습니다.");
	}
</script>
</head>
<body>
</body>
</html>

6. 브라우저 객체 모델

브라우저에 내장된 객체를 '브라우저 객체'라고 한다. window는 브라우저 객체의 최상위 객체이며, window 객체에는 하위 객체가 포함되어 있다. 즉, 계층적 구조로 이루어져 있으며, 이를 브라우저 객체 모델(BOM, Browser Object Model)이라고 한다.

-window 객체의 메서드 종류

종류	설명
open("URL", "새 창 이름", "새 창 옵션")	URL 페이지를 새 창으로 나타낸다.
alert(data)	경고 창을 나타내고 데이터를 보여준다. 방문자가 [확인] 버튼을 누르면 alert()를 사용한 다음 위치의 코드를 수행한다.
prompt("질문", "답변")	질문과 답변으로 질의응답 창을 나타낸다.
confirm("질문 내용")	질문 내용으로 확인이나 취소 창을 나타낸다. [확인] 버튼을 누르면 true를 반환하고, [취소] 버튼을 누르면 false를 반환한다.
moveTo(x, y)	지정한 새 창의 위치를 이동한다.
resizeTo(width, height)	지정한 새 창의 크기를 변경한다.
setInterval(function() { 자바스크립트 코드 }, 일정 시간 간격)	지속적으로 일정한 시간 간격으로 함수를 호출하여 코드를 실행한다.
setTimeout(function() { 자바스크립트 코드 }, 일정 시간 간격)	단 한 번 일정한 시간 간격으로 함수를 호출하여 코드를 실행한다.

-open() 메서드를 이용해 팝업창 나타내기

open("URL", "새 창 이름", "새 창 옵션")

속성	설명
width	새 창의 너비를 설정한다.
height	새 창의 높이를 설정한다.
left	새 창의 수평(X축) 위치를 설정한다.
top	새 창의 수직(Y축) 위치를 설정한다.
scrollbars	새 창의 스크롤바의 숨김/노출을 설정한다(숨김 = no, 노출 = yes)
location	새 창의 URL 주소 입력 영역의 숨김/노출을 설정한다(숨김 = no, 노출 = yes)
status	새 창의 상태 표시줄 영역의 숨김/노출을 설정한다(숨김 = no, 노출 = yes)
toolbars	새 창의 도구 상자 영역의 숨김/노출을 설정한다(숨김 = no, 노출 = yes)

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> window 객체  </title>
<style>
	*{margin: 0;padding: 0;}
</style>  
</head>
<body>
	<p>
		<img src="images/window_object_1.jpg" usemap="#intro"
		alt="신간 책 소개" />
		<map name="intro" id="intro">
			<area shape="rect" coords="230,368,280,390" href="#" alt="창 닫기"
			onclick="window.close();" />
		</map>
	</p>  
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> window 객체 </title>
<script>
		window.open("winpopup.html", "pop1", "width=300, height=400, \
		left=300, top=50");
</script>
</head>
<body>
    <h1>이지스 퍼블리싱</h1>
</body>
</html>

-alert()

경고 창을 나타낼 때 사용한다. window.alert() 메서드는 window 객체를 따로 작성하지 않아도 사용할 수 있다.

alert("경고 메세지")

-prompt()

질의응답 창을 나타낼 때 사용한다. window.prompt() 메서드는 앞에 window 객체를 따로 작성하지 않아도 사용할 수 있다.

prompt("질의 내용", "기본 답변");

-confirm()

확인/취소 창을 나타낼 때 사용한다. window.confirm() 메서드는 앞에 window 객체를 따로 저장하지 않아도 사용할 수 있다.

confirm("정말로 삭제하시겠습니까?");

7. 일정한 시간 간격으로 코드 실행하기

-setInterval(), clearInterval()

일정한 시간 간격으로 코드를 실행하는 메서드로는 setInterval() 과 setTimeout() 가 있다. setInterval()은 일정한 시간 간격으로 코드를 반복 실행한다. setTimeout()은 일정한 시간 후에 코드를 실행하고 종료한다. clearInterval() 메서드는 setInterval() 메서드를 취소한다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> window 객체 </title>
<script>
	var addNum = 0;
	var subNum = 1000;

	var auto_1 = setInterval(function () {  // 3초(3000) 간격으로 반복 실행
		addNum++;
		console.log("addNum: " + addNum);
	}, 3000);

	var auto_2 = setInterval(function () {  // 3초(3000) 간격으로 반복 실행
		subNum--;
		console.log("subNum: " + subNum);
	}, 3000);
</script>
</head>
<body>
	<h1>일정 시간 간격으로 값 증감시키기</h1>
	<p> 콘솔 패널을 열어 확인하세요.</p>
	<button onclick="clearInterval(auto_1)">증가 정지</button>    
	<button onclick="clearInterval(auto_2)">감소 정지</button>    
</body>
</html>

-setTimeOut(), clearTimeout()

setTimeout() 메서드는 일정 시간이 지나면 코드를 실행하고 종료한다. setTimeout() 메서드를 조금만 응용하여 재귀 호출을 하면 setInterval() 메서드처럼 사용할 수도 있다. clearTimeout() 메서드는 setTimeout() 메서드를 제거한다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> window 객체 </title>
<script>
	var addNum = 0;
	var auto=setTimeout(function( ) {  // 5초 후에 코드를 한 번 실행한 후 setTimeout() 메서드를 종료
		addNum++;
		console.log(addNum);
	}, 5000);
</script>
</head>
<body>
    <h1>일정 시간 간격으로 한번만 값 증감시키기</h1>
    <p> 콘솔 패널을 열어 확인하세요.</p>
</body>
</html>

8. screen 객체

screen 객체는 사용자의 모니터 정보(속성)를 제공하는 객체이다. 예를 들어 모니터의 너비나 높이 또는 컬러 표현 (bit)를 반환한다.

-screen 객체의 속성 종류

종류	설명
screen.width	화면의 너빗값을 반환한다.
screen.height	화면의 높잇값을 반환한다.
screen.availWidth	작업 표시줄을 제외한 화면의 너빗값을 반환한다.
screen.availHeight	작업 표시줄을 제외한 화면의 높잇값을 반환한다.
screen.colorDepth	사용자 모니터가 표현 가능한 컬러 bit를 반환한다.

9. location 객체

location 객체는 사용자 브라우저와 관련된 속성과 메서드를 제공하는 객체다. 현재 URL에 대한 정보(속성)와 새로 고침(reload) 메서드를 제공한다.

location.속성;
location.메서드();

종류	속성
location.href	주소 영역의 참조 주소를 설정하거나 URL을 반환한다.
location.hash	URL의 해시값(#에 명시된 값)을 반환한다.
location.hostname	URL의 호스트 이름을 설정하거나 반환한다.
location.host	URL의 호스트 이름과 포트 번호를 반환한다.
location.protocol	URL의 프로토콜을 반환한다.
location.search	URL의 쿼리(요청값)을 반환한다.
location.reload()	마치 브라우저에서 F5 키를 누른 것처럼 새로 고침한다.

10. history 객체

history 객체는 사용자가 방문한 사이트의 기록을 남기고 이전 방문 사이트와 다음 방문 사이트로 다시 돌아갈 수 있는 속성과 메서드를 제공한다.

history.속성;
history.메서드();
history.메서드(n);

종류	설명
history.back()	이전 방문 사이트로 이동한다.
history.forward()	다음 방문 사이트로 이동한다.
history.go(이동 숫자)	이동 숫자에 -2를 입력하면 2단계 이전의 방문 사이트로 이동한다.
history.length	방문 기록에 저장된 목록의 개수를 반환한다.

11. navigator 객체

navigator:속성;

종류	설명
navigator.appCodeName	현재 브라우저의 코드명을 반환한다. 현 시점의 모든 브라우저는 'Mozilla'를 반환한다.
navigator.appName	현재 브라우저의 이름을 반환한다. 현 시점의 모든 브라우저는 'Netscape'를 반환한다.
navigator.appVersion	현재 브라우저의 버전 정보를 반환한다. 현 시점의 모든 브라우저는 '5.0(Win-dows)'을 반환한다.
navigator.language	현재 브라우저가 사용하고 있는 언어를 반환한다. 한국어를 사용할 경우에는 'ko'를 반환한다.
navigator.product	현재 브라우저의 엔진 이름을 반환한다. 크롬의 경우는 'Gecko'를 반환한다.
navigator.platform	현재 컴퓨터의 운영체제 정보를 제공한다. 운영체제가 윈도우이고 시스템 종류가 64비트(bit)라도 브라우저가 32비트로 설치되었다면 'Win32'라고 나타난다.
navigator.onLine	온라인 상태 여부에 대한 정보를 제공한다. 만일 인터넷이 정상적으로 연결되어 있는 상태라면 true 값을 반환한다.
navigator.userAgent	브라우저와 운영체제의 종합 정보를 제공한다.

저작자표시

'JavaScript > JavaScript' 카테고리의 다른 글

[드림코딩 by 엘리] JavaScript 기초 강의(1) (ES5+) (0)	2021.10.05
[JavaScript] 함수 (0)	2021.02.11
[JavaScript] 반복문 (0)	2021.02.02
[JavaScript] 제어문 (0)	2021.02.02
[JavaScript] 기초 문법, 변수, 연산자 (0)	2021.02.02

🐠붕어의 코딩 공부 기록🐠

[JavaScript] 객체

▶ 객체

'JavaScript > JavaScript' 카테고리의 다른 글

댓글

티스토리툴바

[JavaScript] 객체

▶ 객체

'JavaScript > JavaScript' 카테고리의 다른 글

관련글

댓글

티스토리툴바