JavaScript를 이용한 나이 계산기(출생연도)

 

 

* 태어난 연도를 입력하고 [submit]클릭 시 나이를 계산하여 출력시킨다.

* 태어난 연도를 입력하지 않은 상태에서 [submit] 클릭 시 "태어난 연도를 입력하세요"라는 문구를 출력한다.

나이계산.txt

0.00MB

---

StudyPoint.1

document.querySelector('#AgeBtn').addEventListener('click', function() { };

//addEventListener : 요소에 특정 이벤트 발생 시 실행할 함수(핸들러) 생성.

HTML 문서 내 ID가 AgeBtn인 요소를 찾아 해당요소에 click 이벤트 발생 시 함수 실행.

 

 

StudyPoint.2
if(! birthYear) {   // birthYear 변수의 값이 Null인 경우 if { } 문 실행.
alert('태어난 연도를 입력하세요');      //alert 창 발생.
document.querySelector('#userYear').focus();   // ID:userYear 요소로 포커스 이동.

}

 

자바스크립트에서 특정 변수의 Null 값 체크하는 방법.

  1) if ( 변수 == "" )  //값이 비어있는 경우

  2) if ( ! 변수 )  // !은 not연산자로 true 값을 false로 변경시키고 false 값은 true로 변경시킴.

     * 자바스크립트 자료형 중 false로 반환되는 값 : "", null, undefined, 0, NaN

 

 

StudyPoint.3

document.querySelector('#ResultBox span').innerText = age;

// javascript를 통해 계산된 변수의 값을 HTML 요소의 text 속성으로 출력.

 

 

StudyPoint.4

const nowYear = new Date().getFullYear();

//new Date()는 javascript에서 시간과 날짜를 표현하는 객체.

new Date()의 메소드 종류

getFullYear() : 4자리 연도만 가져옴.

getHours() : '시'만 가져옴. (getMinutes, getSeconds)

toDateString() : 날짜만 문자열로 변환.

toLocaleTimeString() : 지역화된 시간 오전/오후 (hh:mm:ss:)

toString() : 날짜와 시간을 문자열로 변환.

toLocaleDateString() : 지역화된 날짜(년 월 일)

getDay() : 요일 0(일요일)~6(토요일) 값만 가져옴.

getMonth() : 날짜 중 월만 가져옴.

* getDay와 getMonth의 경우 0부터 결과값이 시작된다는것을 주의하여 작성해야한다.

  (Ex: getDay() -> 0, 일요일로 시작, getMonth()-> 0, 1월로 시작.