JavaScript 과정의 5번쨰 시간으로, 객체에 대해 알아보고 실습해 봅니다. 이번시간에 배워볼 객체는 다음과 같습니다. - Date - RegExp - Object - Global

1. Startup JavaScript
5.객체 (Date, RegExp, Object, Global)
THINKER TO MAKER
x

2. 날짜 및 시간 계산
THINKER TO MAKER
Date Object

3. Date 객체 실습
var date1 = new
Date(2016,10,14,12,00,00,000);
console.log(date1);
console.log(date1.getFullYear());
console.log(date1.getMonth());
console.log(date1.getDate());
console.log(date1.getDay());
console.log(date1.getHours());
console.log(date1.getMinutes());
console.log(date1.getSeconds());
console.log(date1.getMilliseconds());
console.log(date1.getTime());
console.log(date1.getTimezoneOffset());
var date2 = new Date();
date2.setFullYear(2013);
date2.setMonth(8);
date2.setDate(5);
date2.setHours(11);
date2.setMinutes(23);
date2.setSeconds(15);
date2.setMilliseconds(512);
console.log(date2.toLocaleString());
console.log(date2.toGMTString());
console.log(date2.toUTCString());
console.log(date2.toDateString());
console.log(date2.toTimeString());
console.log(date2.toLocaleDateString()
);
console.log(date2.toLocaleTimeString()
);
getMonth() 의 경우 1~12의 값을 반환하는 것이 아닌 0~11 값을 반환
배열 위치 값과 같이 반환하므로, 숫자 월을 구하기 위해서는 +1 필요.

4. Date 객체
분류 멤버 개요
취득
getFullYear() 연도 (4자리 수 ex 2014)
getMonth() 월 (0~11, 1을 더해야 원하는 달을 얻을 수 있음)
getDate() 일 (1~31)
getDay() 요일 (0:일요일~6:토요일)
getHours() 시 (0~23)
getMinutes() 분 (0~59)
getSeconds() 초 (0~59)
getMilliseconds() 밀리초 (0~999)
getTime() 1970/01/01 00:00:00 로 부터의 경과 밀리초
getTimezoneOffset() 협정 세계 시와의 시차
설정
setFullYear(y) 연도 (4자리수)
setMonth(m) 월 (0~11)
setDate(d) 일 (1~31)
setHours(h) 시 (0~23)
날짜와 시간을 표현하는 데 사용하는 객체. 현지 시간(Local) 뿐만 아니라,
협정 세계 시(Coordinated Universal Time)에 대한 함수도 제공

5. Date 객체
분류 멤버 개요
취득
setMinutes(m) 분 (0~59)
setSeconds(s) 초 (0~59)
setMilliseconds(ms) 밀리초 (0~999)
setTime(ts) 1970/01/01 00:00:00 로 부터의 경과 밀리초
설정
parse(date) 날짜 문자열을 해석해 1970/01/01 부터 경과 밀리초 취득
UTC(y,m,d [,h, mm, s, ms]) 1970/01/01 루버ㅢ 경과 밀리초를 협정시로 취득
문자열
변환
toGMTString() 그라니치 표준시를 문자열로서 취득
toUTCString() 세계 협정시를 문자열로서 취득
toLocaleString() 로컬시를 문자열로 취득
toDateString() 일자 부분을 문자열로 취득
toTimeString() 시각 부분을 문자열로 취득
toLocaleDateString() 지역 정보에 따라서 날짜 부분을 문자열로서 취득
toLocaleTimeString() 지역 정보에 다라서 시각 부분을 문자열로서 취득
toString() 일시를 문자열로서 취득
협정 세계 시(Coordinated Universal Time)란 국제 협정으로 정해진 시간.
협정 시를 사용하는 경우 로컬 시간 함수의 이름에 UTC 를 추가해 주면 됨.

6. Date 객체 계산
Date 객체에 날짜, 시각을 가산 및 감산하기 위한 메소드가 없음
-> 각각 날짜, 시각 요소에 가산/감산을 해야 할 필요가 있음
var date1 = new Date(2016,9,10,12,30);
console.log(date1.toLocaleString());
date1.setMonth(date1.getMonth() - 3);
console.log(date1.toLocaleString());
date1.setMonth(date1.getDate() - 10);
console.log(date1.toLocaleString());
console.log('Next month or previous
month')
var date2 = new Date(2016,9,31,12,30);
console.log(date2.toLocaleString());
date2.setMonth(date2.getMonth() + 1);
date2.setDate(0);
console.log(date2.toLocaleString());
var diff = (date2.getTime() -
date1.getTime()) / (1000 * 60 * 60 *
24);
console.log(diff + ' Days between 1
and 2');
날짜, 시각 데이터 가산/감산
1. getXxxx 메소드 에서 현재 날짜,시각을 구함
2. 취득한 값에 가산/감산을 함
3. 위 2의 결과를 setXxxx 메소드로 다시 설정 함
날짜 계산시 유의 사항
덧셈/뺄샘 결과가 유효 범위를 넘어도 자동 계산
다음달의 0일 째는 이달의 마지막 달로 계산
날짜 차이를 구하는 경우 두 날짜 밀리 초의 차이임

7. 정규 표현식
THINKER TO MAKER
Regular Expression

8. 정규 표현식 실습
정규 표현으로 검색하기 위해서는 String.match 메소드,
RegExp.exec 메소드를 이용할 수 있음.
var p = /http(s)?://([w-]+.)+[w-
]+(/[w-./?%&=]*)?/gi;
var str1 = 'Thinker to maker -
http://www.circul.us';
str1 += ' contact us -
http://group.circul.us';
var str2 = 'What I make defines me';
// match
var result1 = str1.match(p);
for(var i = 0 ; i < result1.length ; i++){
console.log('Match result1 ' +
result1[i]);
}
// exec
var result2 = p.exec(str1);
for(var i = 0 ; i < result1.length ; i++){
console.log('Match result1 ' +
result1[i]);
}
// check match result
console.log(p.test(str1)); // true
console.log(p.test(str2)); // true
// search match point
console.log(str1.search(p)); //
positive
console.log(str2.search(p)); //
negative
// replace and split
console.log(str1.replace(p,
'www.circul.us'));
console.log(str1.split(p));
// replace all with regular expression
console.log(str1.replace('us', 'me'));
console.log(str1.replace(/us/gi,
'me'));

9. 정규 표현식
특정 문장에서 원하는 내용만 취득한다고 할 때, 복잡한 절차 없이 문자열의
패턴으로 표현하는 방법이 정규 표현 (Regular Expression) 임.
분류 멤버 개요
기본
ABC ABC 라는 문자열
[ABC] A, B, C 중 한 개의 문자
[^ABC] A, B, C 이외의 한 개의 문자
[A-Z] A~Z 사이의 한 문자
A|B|C A, B, C 중에서 어떤 것
양 지정
X* 0 문자 이외의 X (fe* 는 f, fe, fee 등으로 매치)
X? 0 또는 1문자의 X (fe?는 f, fe 에 매치, fee 는 매치하지 않음)
X+ 1 문자 이상의 x (fe+ 는 fe, fee 에 매치, f 는 매치하지 않음)
X{n} X의 n회 일치 ([0-9]{3}은 3자리의 숫자)
X{n,} X의 n회 이상 일치 ([0-9]{3,}은 3자리 이상의 숫자)
X{m,n} X의 m~n회 일치([0-9]{3,5}는 3~5자리의 숫자)
위치 지정
^ 행의 선두에 일치
$ 행의 말미에 일치

10. 정규 표현식
정규 표현식에서 이용가능한 패턴
분류 멤버 개요
문자 세트
. 임의의 1문자에 일치
w 대문자/소문자의 영숫자, 숫자, _에 일치 ([A-Za-z0-9] 와 동일)
W 문자 이외에 일치 ([^w] 와 동일)
d 숫자에 일치 ([0-9]와 동일)
D 숫자 이외에 일치 ([0-9]와 동일)
n 개행 (Line Feed)과 일치
r 복귀 (Carriage Return)와 일치
t 탭문자와 일치
s 공백문자와 일치 ([nrtvf]와 동일)
S 공백 이외의 문자와 일치([s]와 동일)
~ ~ 로 표현되는 문자

11. 정규 표현식
RegExp 객체는 exec 메소드로 마지막에 매치한 문자 위치 프로퍼티 등
정보 참조를 위한 몇가지 프로 퍼티를 제공 함
분류 멤버 개요
lastIndex 검색을 개시하는 위치
leftContext $’ 마지막 매치 문자열의 앞 문자열
rightContext $” 마지막 매치 문자열의 뒤로 계속 되는 문자열
lastMatch $& 마지막에 매치한 문자열 (Opera는 미 대응)
lastParen $+ 마지막에 매치한 ()로 둘러싼 그룹의 문자열 (Opera는 미 대응)
$1~9 패턴 매치한 문자열을 순서대로 보관 (최대 9개)
옵션 개요
g 문자열 전체에 대해 매치하는가 (지정하지 않은 경우, 한번 매칭한 시점에서 처리를 종료)
i 대문자/소문자를 구별하는 가
m 복수행에 대응하는 가 (개행 코드를 행의 시작과 끝으로 인식)

12. 객체
THINKER TO MAKER
Object

13. Object 객체
Object 객체는 객체의 공통 성질/기능을 제공하는 모든 객체의 기본 객체.
내장형 객체는 물론 모든 객체에서 Object 객체의 기능을 이용할 수 있음.
subString 메소드
constructor 프로퍼티
Object 객체
toString 메소드
valueOf 메소드
constructor 프로퍼티
String 객체
toString 메소드
valueOf 메소드
constructor 프로퍼티
Date 객체
toString 메소드
valueOf 메소드
constructor 프로퍼티
직접 제작한 객체
toString 메소드
valueOf 메소드
length 프로퍼티
getFullYear 메소드
getMonth 메소드
X 메소드
Y 메소드
etc...
etc... etc...
etc... etc...
etc...

14. Object 객체 실습
참조 형 변수를 식별 시에 typeof 를 이용하면 무조건 Object 형 반환
정확히 식별하기 위해서는 constructor 프로퍼티를 사용해야 함
// Constructor
var test1 = [];
var test2 = new Date();
// type of is return object
console.log(typeof test1); // object
console.log(typeof test2); // object
// constructor property
alert(test1.constructor); // Array
alert(test2.constructor); // Date
console.log(test1.constructor == Array);
console.log(test2.constructor == Date);
// using instanceof
console.log(test1 instanceof Array); // true
console.log(test2 instanceof Date); // true

15. Object 객체
Constructor 프로퍼티는 변환 값을 인스턴스 생성에 사용된 생성자를 반환.
동일한 기능을 가진 연산자로 instanceof 를 활용할 수 있음
멤버 개요
constructor Instance 화에서 사용되는 생성자 (읽기전용)
toString() 객체의 문자열 표현을 취득
valueOf() 객체의 기본형 표현 (만헤는 숫자값)을 취득
hasOwnProperty() 지정한 프로퍼티를 갖는 지 여부 확인
propertyIsEnumerable(prop) for ... in 명령에 의해서 프로퍼티/메소드를 열거할 수 있는 지 여부 확인
isPrototypeOf(obj) 호출원의 객체가 지정한 객체의 프로토타입인지 확인

16. Object 객체 실습
toString, valueOf 를 이용하여 객체의 내용을 기본 값으로 변환할 수 있음.
하지만, 두개의 역할이 다르게 동작할 수 있으므로 유의 해야 함
// Object instance
var obj1 = new Object();
obj1.name = 'circulus';
obj1.url = 'www.circul.us';
console.log(obj1);
var obj2 = {};
obj2.name = 'suwon';
obj2.url = 'www.suwon.ac.kr';
console.log(obj2);
// default method from Object
var obj3 = new Object();
console.log(obj3.toString());
console.log(obj3.valueOf());
var obj4 = new Date();
console.log(obj4.toString());
console.log(obj4.valueOf());
var obj5 =
['Banana','Apple','Tomato'];
console.log(obj5.toString());
console.log(obj5.valueOf());
var num = 10;
console.log(num.toString());
console.log(num.valueOf());
var reg = /[0-9]{3}-[0-9]{4}/g;
console.log(reg.toString());
console.log(reg.valueOf());

17. Global 객체
THINKER TO MAKER
Global

18. Global 객체 실습
parseFloat/parseInt/Number 모두 주어진 값을 수치로 변환하지만,
세부적인 동작에는 차이가 있으므로, 사용시 유의.
var n = '123.45xxx';
console.log(Number(n));
console.log(parseFloat(n));
console.log(parseInt(n));
var d = new Date();
console.log(Number(d)); //
12308669074569
console.log(parseFloat(d)); //
NaN
console.log(parseInt(d)); // NaN
var h = '0777';
console.log(Number(h)); //
777
console.log(parseFloat(h)); //
777
console.log(parseInt(h)); // 511
var e = '1.01e+2';
console.log(Number(e)); // 101
console.log(parseFloat(e)); // 101
console.log(parseInt(e)); // 101
console.log(typeof(123 + ''));
// String
console.log(typeof('123' - 0));
// Number
// encode uri
var str = '안녕하세요 자바스크립트입니다
123abc';
console.log(encodeURI(str));
console.log(encodeURIComponent(str));
// eval is evil
var str = 'window.alert("Eval is
evil")';
eval(str);

19. Global 객체
글로벌 변수/함수를 관리하기 위해 Javascript 가 자동 생성하는 객체 임.
어떠한 Function 에도 포함되지 않은 최 상위의 변수 및 함수들의 집합 임.
분류 멤버 개요
특수 값
NaN 수치가 아니다 (Not a Number)
Infinity 무한대 값 (∞)
undefined 미 정의 값
체크
isFinite(num) 유한 값인지 무한 값인지 판별(NaN, 양수와 음수의 무한대가 아님)
isNaN(num) 수치인지 아닌지 판별
변환
Boolean(val) 부울형으로 변환
Number(val) 수치형으로 변환
String(val) 문자열형으로 변환
parseFloat(str) 문자열을 부동소수점 수치로 변환
parseInt(str) 문자열을 정수 값으로 변환
인코드
escape(str) 문자열을 이스케이프 처리
unescape(str) 이스케이프 문자열을 원래 상태로 복귀
encodeURI(str) 문자열을 URI 인코딩 (encodeURIComponent 도 유사 역할)
decodeURI(str) 문자열을 URI 디코딩 (decodeURIComponent 도 유사 역할)
해석 eval(exp) 식/값을 평가 함

20. W www.circul.us G group.circul.us
S social.circul.us C cafe.circul.us
CONTACT.US circulus@circul.us
THINKER TO MAKER
ANY
QUESTION?
x