[Javascript] Age Calculator ④Refactoring2

1. 배경

지난번에 보완하기로 했던 내용들 중 일부를 보완했다.

 

2. 변수의 범위 제한

 - 사용자가 입력할 수 있는 year, month, date의 범위를 실제 달력과 일치하게 제한해야 할 필요가 있다. 이 경우, 범위를 벗어나는 경우, 확인 버튼을 누르지 않아도 경고 메시지가 출력되도록 하고 싶다.

 - 변수의 범위를 제한할 때는 if문을 이용해 제한하는 수밖에 없다고 한다. 그러므로 애초부터 input type에 text가 아닌 date를 줘서 날짜를 받아오는 편이 좋아 보인다. 다만, 처음 구상했던 내용과는 다르기 때문에 조금 더 생각해 볼 필요가 있다.

 

3. 메시지 출력창 단일화

 - 사용자가 값을 입력하는 만큼 결과 메시지가 출력되는 문제를 해결해야 한다.

 - 위 문제점은 innerHTML을 사용했을 때는 발견되지 않았던 문제점이므로 우선 innerHTML로 돌려놓았다. innerHTML을 사용하지 않고 해결할 수 있는지 연구해 볼 필요가 있다.

 

4. 엔터 키로 입력

 - 값을 입력하여 제출할 때, 키보드의 enter를 입력해도 제출이 가능하도록 개선하고 싶다.

function enterKey () {
  if (window.event.keyCode == 13) {
    calculateAge(getValue());
  }
}

먼저 enterKey라는 함수를 위와 같이 정의한다. 엔터 키의 키 코드 13을 이용하여, 이벤트로 전달된 키코드가 13이라면 getValue를 인자로 하는 calculateAge 함수를 실행시키도록 하였다.

 

<input onkeyup="enterKey();" type="text" class="date">

그 후, 엔터 키를 통해 값을 제출할 input 태그에 onkeyup="enterKey();"를 입력하여, 키 업 이벤트가 발생하면 enterKey 함수를 실행시키도록 한다.