쌍용강북교육센터 국비 학원 Day 50일차 JavaScript (Date 날짜, 시간)

 

쌍용 강북 교육센터 국비학원 Day 50일차

 

Date

객체 생성

-> new Date() 는 new Date() 가 실행되는 시점에 날짜 및 시간 데이터를 갖고 오는 것이다.
출력하게 되면 요일명 월 일 년도 시:분:초 GMT기준시간을 표시해준다.

 

         
get 날짜함수  

-> 날짜 데이터에서 필요한 형식만 갖고 오는 함수이다.

종류	리턴값
getFullYear()	YYYY
getMonth()	MM (월은 0부터 시작하기 때문에 +1을 해야한다.)
getDate()	DD
getDay()	0 ~ 6 (일 ~ 토)
getHours()	HH
getMinutes()	MM
getSeconds()	SS
getMilliseconds()	mmm
toLocaleString()	년, 월, 일 시간의 데이터 포맷형식으로 리턴

 

set 날짜함수

-> 날짜 구성요소를 설정한다. 원하는 날짜 데이터의 형식에 값을 대입해주는 함수이다.
종류 : setFullYear(), setMonth(), setDate(), setHours(), setMinutes(), setSeconde(), setMilliseconds()

 

 

 

웹에 실시간으로 시간을 나타내는 시계 구현하기

 

 

func_currentDate()는 현재시간을 가져오는 함수이다. 시간을 가져와 setTimeout 과 setInterval을 이용해 두가지 방법으로 구현했다.

 

setTimeout - 함수는 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 지연 시간을 밀리초(ms) 단위로 받는다. (1000 = 1초)

 

이 함수는 세번째 인자부터는 가변 인자를 받는데. 첫번째 인자로 넘어온 함수가 인자를 받는 경우, 이 함수에 넘길 인자를 명시해주기 위해서 사용한다.

 

setInterval - 웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우에 사용한다. 즉, 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용한다.

 

함수 API는 setTimeout() 함수와 비슷하게 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 반복 주기를 밀리초(ms) 단위로 받는다.

 

 

※ 이 함수들을 사용한 후에는 clearTimeout() 함수와 clearInterval() 함수를 사용해서 타이머를 청소해주는 습관을 가지는 것이 좋다. 특히, SPA(Single Page Application) 을 개발할 때는 이 부분이 메모리 누수(memory leak) 로 이어질 수 있기 때문에 주의가 필요하다.

 

 

결과

 

 

다음은 웹에 타이머를 구현하는 예제이다.

 

타이머 함수 만들기

 

중지, 리셋, continue 구현

 

 

 

웹 소스보기 금지관련 속성 (body 속성에 부여)

oncontextmenu="return false" - 마우스 우클릭 금지
ondragstart="return false" - 드래그 금지
onselectstart="return false" - 선택복사 금지

 
※ onselectstart="return false" 에 노란줄과 함께 [Undefined attribute name]에 대한 이클립스 경고 해결방안

"Undefined attribute name"은 HTML에서 지정하지 않은 속성을 사용하고 있다는 경고이다.
이러한 경고를 보이지 않게 하려면 아래와 같이 하면 된다.

 

Eclipse -> Window -> Preferences -> Web -> HTML Files -> Validation 을 선택하고 Attributes 항목을 클릭한다.
그런다음 Undefined attribute name: Warning 을 Undefined attribute name: Ignore 으로 설정하고 Apply 후에 이클립스를 재시작하면 해결된다.