유랑하는 개발자

객체 지향 프로그래밍은 객체를 프로그램의 기본 단위로써 나누고 그 객체들이 상호 작용 하는 프로그램이라 배웁니다.

그렇다면 여기서 말하는 객체란 정확히 무엇일까요? 함께 학습이 필요한 클래스와 인스턴스도 같이 알아보겠습니다.

클래스(Class)

 - 객체가 정의된 '설계도'

 - 객체를 생성 하기 위해서 클래스가 꼭 필요함

 - 객체의 생성을 위한 용도이지 객체로써 직접 사용 할 수 없음

객체(Obejct)

 - 클래스를 이용해 만들어진 객체

 - 모든 인스턴스는 객체에 포함됨

인스턴스(Instance)

 - 인스턴스화는 클래스로부터 객체를 만드는 과정임. ex) Unit unit = new Unit():

 - 클래스를 사용해서 만들어진 객체를 '인스턴스 객체'라고 부름

 - 모든 인스턴스는 객체에 포함됨

아래 코드를 보면 이해를 좀 더 쉽게 할 수 있습니다.

우선 class Unit 에서 다양한 변수 및 메소드를 설정 할 수 있습니다. 이 과정을 설계도에 작업이라 생각 하시면 됩니다.

그리고 메인 클래스에서 Unit marine = new Unit()은 클래스를 인스턴스화 하는 부분입니다.

그 인스턴스를 포함하고 있는 부분은 ClassInstanceObject인 객체입니다.

// 큰 의미의 객체와 인스턴스
public class ClassInstanceObject {
	public static void main(String[] args) {
		// 클래스를 인스턴스화 하고 있는 부분
		Unit marine = new Unit();
		Unit medic = new Unit();
	}
}

// 클래스 (설계도)
class Unit {
	
}

브라우저 객체(BOM)의 객체인 screen 객체 메소드에 이은,

location객체와 history 객체의 메소드 입니다.

location.href : URL을 설정 및 반환 합니다.

location.host : URL 호스트 이름과 포트 번호를 설정 및 반환합니다.

location.hostname : URL의 호스트 이름을 설정 및 반환합니다.

location.hash : URL의 해쉬값을 설정 및 반환합니다.

location.origin : URL의 프로토콜, 호스트이름, 포트번호를 반환합니다.

location.protocol : URL의 프로토콜을 설정 및 반환합니다.

location.port : URL의 포트 번호를 설정 및 반환합니다.

location.search : URL의 쿼리스트링을 설정 및 반환합니다.

location.reload() : 화면을 새로고침 합니다.(F5와 같은 기능)

history.length : 방문 목록 갯수를 표현합니다.

history.back() : 이전 페이지로 이동 합니다.

history.forward() : 존재하는 다음 페이지로 이동 합니다.

history.go() : 인덱스 값에 맞춰 페이지가 이동 합니다.

navigator.appCodeName : 브라우저 이름을 반환합니다.

navigator.appName : 브라우저 이름을 반환합니다.

navigator.appVersion : 브라우저의 버전 정보를 반환합니다.

navigator.cookieEnabled : 쿠키 사용 여부를 반환합니다.

navigator.geolocation : 유저 접속 위치의 Geolocation 객체를 반환합니다.

navigator.language : 브라우저의 사용 언어를 반환합니다.

navigator.onLine : 온라인 브라우저 인지 확인합니다.

navigator.platform : 운영체제 정보를 반환합니다.

navigator.product : 브라우저 엔진 이름을 반환합니다.

navigator.userAgent : 서버 정보를 반환합니다.

navigator.javaEnabled() : 자바 사용 여부를 확인 합니다.(boolean)

결과 값이 보이는 내용만 테스트 하였습니다.

	console.log(navigator.appCodeName);
	console.log(navigator.appName);
	console.log(navigator.appVersion);
	console.log(navigator.cookieEnabled);
	console.log(navigator.geolocation);
	console.log(navigator.language);
	console.log(navigator.onLine);
	console.log(navigator.platform);
	console.log(navigator.product);
	console.log(navigator.userAgent);
	console.log(navigator.javaEnabled());

실행 결과 :

브라우저 객체(BOM)의 screen 객체 메소드

내용이 많지 않아 코드 내에 주석으로 설명 내체 하였습니다.

	var scr_width = screen.width;			// 화면 너비
	var scr_height = screen.height;			// 화면 높이
	var scr_avaWidth = screen.availWidth;	// 화면 사용 가능 너비
	var scr_avaHeight = screen.availHeight;	// 화면 사용 가능 높이
	var scr_colorDepth = screen.colorDepth;	// 표현 가능 컬러 bit
	var scr_pixelDepth = screen.pixelDepth;	// 표현 가능 픽셀 bit
	
	console.log("화면 너비 : " + scr_width);
	console.log("화면 높이 : " + scr_height);
	console.log("화면 사용 가능 너비 : " + scr_avaWidth);
	console.log("화면 사용 가능 높이 : " + scr_avaHeight);
	console.log("표현 가능 컬러 bit : " + scr_colorDepth);
	console.log("표현 가능 픽셀 bit : " + scr_pixelDepth);

결과 : 

자바스크립트의 배열을 추가,  삭제, 정렬 기능을 사용할 수 있는

배열 메소드를 코딩 하였습니다.

join('문자열') : 배열 객체 데이터를 문자열로 이어줍니다.

reverse() : 배열 객체 데이터의 정렬 순서를 역방향으로 해줍니다.

slice(index1, index2) : index1 ~ index2 까지의 구간을 잘라서 표현합니다.

sort() : 배열 객체 데이터를 오름차순으로 정렬합니다.

concat(배열) : 선택된 배열+'배열'을 하나의 배열로 연결 합니다.

pop() : 배열 객체 데이터의 마지막 데이터를 삭제합니다.

push() : 마지막 인덱스에 새로운 데이터를 추가 합니다.

shift() : 배열 객체 데이터의 맨 첫번째 데이터를 삭제 합니다.

unshift() : 첫번째 인덱스 앞에 새로운 데이터를 추가 합니다.

	var arr1 = ['A', 'B', 'C', 'D'];
	var arr2 = ['가', '나', '다', '라'];
	var arr3 = [1, 5, 3, 8, 2, 7];
	var arr4 = ['E', 'F', 'G', 'H'];
	var arr5 = ['a', 'b', 'c', 'd'];

	console.log(arr1.join(' & '));	// join('문자열')
	console.log(arr1.reverse());	// reverse()
	console.log(arr3.slice(0,3));	// slice(index1, index2)
	console.log(arr3.sort());		// sort()
	console.log(arr3.splice());		// splice()
	console.log(arr4.concat(arr5));	// concat(array)
	arr2.pop();		// pop()
	arr2.push('카카');	// push('문자열')
	arr2.shift();		// shift()
	arr2.unshift("가가"); // unshift('문자열')
	console.log(arr4.length);	

결과 : 

홈페이지 개발시 날짜 및 시간을 출력하는 소스입니다. 

자바스크립트 내장객체중 Date 객체를 사용 하였습니다.

Date 객체의 getDay() 메소드는 현재 요일을 0(일)~6(토) 까지의 숫자로 표시 해줍니다.

그래서 switch 문을 이용하여 요일로 수정 하였습니다.

	var dt = new Date();
	var year = dt.getFullYear(); // 년도
	var month = dt.getMonth();	 // 월
	var date = dt.getDate();	 // 일
	var day = dt.getDay();		 // 요일(포맷 전)
	var hours = dt.getHours();	 // 시간
	var mins = dt.getMinutes();	 // 분
	var snd = dt.getSeconds();	 //초
	var msnd = dt.getMilliseconds(); // 밀리초
	
	console.log(day);
	var dayName;	// 요일(포맷 후)
	
	switch(day) {
		case 0:dayName="일요일"; break;
		case 1:dayName="월요일"; break;
		case 2:dayName="화요일"; break;
		case 3:dayName="수요일"; break;
		case 4:dayName="목요일"; break;
		case 5:dayName="금요일"; break;
		case 6:dayName="토요일"; break;
	}
	
	document.write(year+"년 "+month+"월 ",+date+"일 "+dayName+"
");
	document.write(hours+"시 "+mins+"분 "+snd+":"+msnd+"초");

출력 결과 : 

1. for - in 문을 사용

var objTest = {'a' : 1000, 'b' : 2000, 'c' : 3000, 'd' : 4000,  'e' : 5000};

for(var i in objTest) {
     document.write("Key : " + i + ", value : " + objTest[i] + "
);
}