Welcome to

Javascript 객체 2

1. Date 객체

2. 정규표현식

2. Object 객체

3. Global 객체

Javascript 기초 – 객체2

선수 추천 과정 HTML5 CSS3

Date (1/3)

날짜와 시간을 표현하는 데 사용하는 객체로, Local 시간 뿐만 아니라 협정 세계시(Coordinated Universal Time)에 대한 함수도 제공한다.

분류 멤버 개요

취득

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)

Javascript 기초5

Date (2/3)

협정 세계시(Coordinated Universal Time)란 국제적인 협정으로 정해진 공식 시간을 말함. 협정시를 사용하는 경우 로컬 시간 함수의 이름에 UTC 를 추가해 주면된다.

분류 멤버 개요

취득

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() 일시를 문자열로서 취득

Javascript 기초5

Date 객체 (3/3)

대부분의 멤버가 직관적으로 확인할 수 있음

getMonth() 유의 기달을 구할때 사용하는 getMonth 메소드의 경우, 1~12 를 반환 하는 것이아닌, 0~11 값 (배열 위치 값 같이)을 반환하므로, 숫자로써 월을 구할 때는 + 1을 해주어야 함

Javascript 기초5

Date 객체 (3/3)

Date 객체에 날짜, 시각을 가산 및 감산하기 위한 메소드가 준비되어 있지 않음. 따라서 개개의 날짜, 시각 요소에 가산/감산을 해야 할 필요가 있음

유효 범위 덧셈과 뺄셈의 결과가 유효범위를 넘어버린 경우에도 Date 객체는 올바른 날짜로 자동 계산을 해줌

마지막 달 구하기 다음 달의 0일재는 Date 객체에서 이달의 마지막 달로 인식 함

날짜, 시각 데이터 가산/감산

1. getXxxx 메소드에서 현재의 날짜/시각 요소를 취득 함

2. 취득한 값에 가산/감산을 함

3. 위 2의 결과를 setXxxx 메소드로 다시 설정 함

날짜 차이 구하기 날짜 차이를 구하는 경우 두 날짜의 경과 밀리초를 구한다음 그 차를 구하면 됨

Javascript 기초5

정규표현식 (1/4)

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

위치 지정 ^ 행의 선두에 일치

$ 행의 말미에 일치

Javascript 기초5

정규표현식 (2/4)

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

분류 멤버 개요

문자 세트

. 임의의 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]와 동일)

\~ ~ 로 표현되는 문자

Javascript 기초5

정규표현식 (3/4)

RegExp 객체는 exec 메소드로 마지막에 매치한 문자 위치 프로퍼티 등 정보 참조를 위한 몇가지 프로퍼티를 제공 함

분류 멤버 개요

lastIndex 검색을 개시하는 위치

leftContext $’ 마지막 매치 문자열의 앞 문자열

rightContext $” 마지막 매치 문자열의 뒤로 계속 되는 문자열

lastMatch $& 마지막에 매치한 문자열 (Opera는 미 대응)

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

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

옵션 개요

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

i 대문자/소문자를 구별하는 가

m 복수행에 대응하는 가 (개행 코드를 행의 시작과 끝으로 인식)

정규 표현식 동작을 규정하는 옵션

Javascript 기초5

정규표현식 (4/4)

정규 표현으로 검색하기 위해서는 String.match 메소드와 RegExp.exec 메소드를 이용할 수 있음

match 메소드 정규표현 패턴에 매치한 문자열을 배열로 반환 함

exec 메소드 기글로벌 검색(g옵션)이 유효한지 어던지에 상관없이 한번의 실행에 하나의 실행결과만을 돌려줌. 하지만, 매치 문자열 전체와 서브 매치 문자열을 배열로 반환 함

match 성공 여부/위치 검색 test 메소드를 이용하면 검색 가능 여부에 따라, true/false 가 반환 됨. search 메소드는 검색 가능한 위치 값을 돌려주고, 검색이 불가능 한 경우에는 -1을 반환 함

Javascript 기초5

Object 객체 (1/3)

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

Javascript 기초5

Object 객체 (2/3)

참조형 변수를 식별시에 typeof 를 이용하면 무조건 Object 형으로만 반환 함. 제대로 식별하기 위해서는 constructor 프로퍼티를 사용하여 구분할 수 있음

멤버 개요

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

toString() 객체의 문자열 표현을 취득

valueOf() 객체의 기본형 표현 (만헤는 숫자값)을 취득

hasOwnProperty() 지정한 프로퍼티를 갖는 지 여부 확인

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

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

Constructor 프로퍼티 반환 값을 인스튼스의 생성에 사용된 생성자(Function 객체)를 되돌려 줌. 문자열 반환이 아님. 동등한 기능을 가진 연산자로 instanceof 를 활용하여 비교할 수도 있음

Javascript 기초5

Object 객체 (3/3)

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

toString/valueOf 차이 toString 의 경우 문자열을 반환하나, valueOf 는 문자열 이외의 값을 반환하게 됨. 기본 Object 형의 경우 의미 있는 정보를 반환하지 않으므로, 메소드를 재 정의(Override) 할 필요가 있음.

toString 자동 호출 Javascript 에서는 문자열을 반환할 필요가 있는 문맥에서 자동으로 toString 메소드를 호출함. 따라서 명시적으로 호출하지 않아도 됨

Javascript 기초5

Global 객체 (1/2)

글로벌 객체는 글로벌 변수나 글로벌 함수를 관리하기 위해 Javascript 가 자동적으로 생성하는 객체 임. 어떠한 Function 에도 포함되지 않은 Top level 의 변수 및 함수들의 집합임.

분류 멤버 개요

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

Javascript 기초5

Global 객체 (2/2)

parseFloat/parseInt/Number 모두 주어진 값을 수치로 변환하지만, 세부적인 동작에는 차이가 있으므로, 사용시 유의할 것.

산술 연산에 의한 수치 변환 + 연산자는 Operand 중 한쪽이 문자열인 경우에 다른 한쪽도 자동으로 문자열로 변환. – 연산자는 주어진 Operand 중 하나가 숫자면, 다른 한쪽도 자동적으로 수치로 변환 후 감산

Query 문자 escape 처리 URL 끝 부분에 ? 이후의 Key=value&.. 식으로 데이터를 처리할 때에 악영향을 끼치지 않는 문자로 변환 필요(URI encode)

eval is evil 임의의 코드가 실행되는 보안 위험과, 일반 적인 코드의 수행보다 처리가 늦는 성능 저하의 이슈가 있으므로 가급적 사용하지 않도록 해야 함

Javascript 기초5

Expand your dimension!

Let’s Start!