Startup JavaScript5. 객체 (Date, RegExp, Object, Global)

THINKER TO MAKER

x

날짜 및 시간 계산

THINKER TO MAKER

Date Object

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 필요 .

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) 에 대한 함수도 제공

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 를 추가해 주면 됨 .

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 일 째는 이달의 마지막 달로 계산날짜 차이를 구하는 경우 두 날짜 밀리 초의 차이임

정규 표현식

THINKER TO MAKER

Regular Expression

정규 표현식 실습정규 표현으로 검색하기 위해서는 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.cir-cul.us';var str2 = 'What I make defines me';

// matchvar result1 = str1.match(p);for(var i = 0 ; i < result1.length ; i++){ console.log('Match result1 ' + result1[i]);}

// execvar result2 = p.exec(str1);for(var i = 0 ; i < result1.length ; i++){ console.log('Match result1 ' + result1[i]);}

// check match resultconsole.log(p.test(str1)); // trueconsole.log(p.test(str2)); // true

// search match pointconsole.log(str1.search(p)); // posi-tiveconsole.log(str2.search(p)); // nega-tive

// replace and splitconsole.log(str1.replace(p, 'www.cir-cul.us'));console.log(str1.split(p));

// replace all with regular expressionconsole.log(str1.replace('us', 'me'));console.log(str1.replace(/us/gi, 'me'));

정규 표현식특정 문장에서 원하는 내용만 취득한다고 할 때 , 복잡한 절차 없이 문자열의패턴으로 표현하는 방법이 정규 표현 (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 자리의 숫자 )

위치 지정 ^ 행의 선두에 일치$ 행의 말미에 일치

정규 표현식정규 표현식에서 이용가능한 패턴

분류 멤버 개요

문자 세트

. 임의의 1 문자에 일치\w 대문자 / 소문자의 영숫자 , 숫자 , _ 에 일치 ([A-Za-z0-9] 와 동일 )\W 문자 이외에 일치 ([^\w] 와 동일 )\d 숫자에 일치 ([0-9] 와 동일 )\D 숫자 이외에 일치 ([0-9] 와 동일 )\n 개행 (Line Feed) 과 일치\r 복귀 (Carriage Return) 와 일치\t 탭문자와 일치\s 공백문자와 일치 ([\n\r\t\v\f] 와 동일 )\S 공백 이외의 문자와 일치 ([\s] 와 동일 )\~ ~ 로 표현되는 문자

정규 표현식RegExp 객체는 exec 메소드로 마지막에 매치한 문자 위치 프로퍼티 등 정보 참조를 위한 몇가지 프로 퍼티를 제공 함분류 멤버 개요lastIndex 검색을 개시하는 위치leftContext $’ 마지막 매치 문자열의 앞 문자열rightContext $” 마지막 매치 문자열의 뒤로 계속 되는 문자열lastMatch $& 마지막에 매치한 문자열 (Opera 는 미 대응 )

lastParen $+ 마지막에 매치한 () 로 둘러싼 그룹의 문자열 (Opera 는 미 대응 )

$1~9 패턴 매치한 문자열을 순서대로 보관 ( 최대 9 개 )

옵션 개요g 문자열 전체에 대해 매치하는가 ( 지정하지 않은 경우 , 한번 매칭한 시점에서 처리를 종료 )

i 대문자 / 소문자를 구별하는 가m 복수행에 대응하는 가 ( 개행 코드를 행의 시작과 끝으로 인식 )

객체

THINKER TO MAKER

Object

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...

Object 객체 실습참조 형 변수를 식별 시에 typeof 를 이용하면 무조건 Object 형 반환정확히 식별하기 위해서는 constructor 프로퍼티를 사용해야 함

// Constructorvar test1 = [];var test2 = new Date();

// type of is return objectconsole.log(typeof test1); // objectconsole.log(typeof test2); // object

// constructor propertyalert(test1.constructor); // Arrayalert(test2.constructor); // Date

console.log(test1.constructor == Array);console.log(test2.constructor == Date);

// using instanceofconsole.log(test1 instanceof Array); // trueconsole.log(test2 instanceof Date); // true

Object 객체Constructor 프로퍼티는 변환 값을 인스턴스 생성에 사용된 생성자를 반환 .동일한 기능을 가진 연산자로 instanceof 를 활용할 수 있음

멤버 개요constructor Instance 화에서 사용되는 생성자 ( 읽기전용 )

toString() 객체의 문자열 표현을 취득valueOf() 객체의 기본형 표현 ( 만헤는 숫자값 ) 을 취득hasOwnProperty() 지정한 프로퍼티를 갖는 지 여부 확인

propertyIsEnumerable(prop) for ... in 명령에 의해서 프로퍼티 / 메소드를 열거할 수 있는 지 여부 확인

isPrototypeOf(obj) 호출원의 객체가 지정한 객체의 프로토타입인지 확인

Object 객체 실습toString, valueOf 를 이용하여 객체의 내용을 기본 값으로 변환할 수 있음 . 하지만 , 두개의 역할이 다르게 동작할 수 있으므로 유의 해야 함

// Object instancevar 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 Objectvar 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());

Global 객체

THINKER TO MAKER

Global

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)); // 12308669074569console.log(parseFloat(d)); // NaNconsole.log(parseInt(d)); // NaN

var h = '0777';console.log(Number(h)); // 777console.log(parseFloat(h)); // 777console.log(parseInt(h)); // 511

var e = '1.01e+2';console.log(Number(e)); // 101console.log(parseFloat(e)); // 101console.log(parseInt(e)); // 101

console.log(typeof(123 + ''));// Stringconsole.log(typeof('123' - 0));// Number

// encode urivar str = ' 안녕하세요 자바스크립트입니다 123abc';console.log(encodeURI(str));console.log(encodeURIComponent(str));

// eval is evilvar str = 'window.alert("Eval is evil")';eval(str);

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) 식 / 값을 평가 함

W www.circul.us G group.circul.us S social.circul.us C cafe.circul.usCONTACT.US circulus@circul.us

THINKER TO MAKER

ANYQUES-TION?

x