만년 달력 만들기. 2 - 코딩수업#14
앞 선 수업에서 기본적인 만년 달력의 기본 원리를 배웠고,
내가 만들고 싶은 달력의 해당 연도의 첫날이 어떤 요일 인지를 찾는 것까지의 계산을 해봤다.
위의 원리를 기반으로 직접 코딩 작업을 해가면서 만년 달력을 만들겠다.
몇 가지 기본 데이터가 들어갈 변수를 만들어 보자.
var year=2018; // year는 만년 달력의 연도
var month=9; // month는 해당 월
var days=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //보통 해의 매월 마지막 날의 수
새해 첫날이 어떤 요일 일지를 확인해 보자
앞서 이야기했던 원리를 보자면 해당 연도 직전 연도까지 몇 번의 윤년이 있었는지를 계산해야 한다.
var pyear= year-1; // 앞선 연도
var yyear = parseInt(pyear/4)-parseInt(pyear/100)+parseInt(pyear/400); // 윤년의 수
var stweekday = (pyear+yyear)%7; // 1월 1일의 요일
올해가 윤년인지를 확인해 보자.
var yun=0;
if (year % 4 == 0)
{
yun=1;
if (year % 100 == 0)
{
yun=0;
if (year % 400 ==0 ) yun=1;
}
}
개발도구에서 확인해 보면 위와 같이 2010년은 yun이 0 즉 평년이고,
2012년은 yun이 1 즉 윤년임을 보여준다.
더 좋은 방법이 있을지 모르겠지만 어찌 되었건 해당 연도가 윤년인지 아닌지 확인은 가능하다.
이것이 필요한 이유는 해당 해의 2월을 28일로 할지 29일로 할지를 결정하기 위해서다.
이를 기반으로 위의 변수 days의 두 번째 항목은 28이기도 하고 29이기도 하다.
이제 전체를 통합해 보자.
특정 연도의 1월 1일이 어떤 요일인지 확인하였고,
올해가 윤년 인지도 확인했다.
그렇다면 원하는 월의 시작 요일이 무엇인지만 알면 달력을 찍어낼 수 있게 된다.
순서를 정하여 코딩에 적용해 보자.
1. 올해가 윤년인지 확인하여 위의 days 테이블의 2월에 해당하는 두 번째 숫자를 28로 그냥 둘지 아니면 29로 만들지 결정한다.
2. stweekday + 해당 월의 직전까지의 날수를 더한 숫자를 7로 나누어 나머지를 구한 숫자가 해당 월의 요일이 될 것이다.
여기까지를 통합하여 정리하고 코딩으로 만들어 보자.
var year=2018; // year는 만년 달력의 연도
var month=9; // month는 해당 월
var days=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //보통 해의 매월 마지막 날의 수
var pyear= year-1; // 앞선 연도
var yyear = parseInt(pyear/4)-parseInt(pyear/100)+parseInt(pyear/400); // 윤년의 수
var stweekday = (pyear+yyear)%7; // 1월 1일의 요일
//-----
var yun=0; // 올해가 윤년인지 확인
if (year % 4 == 0)
{
yun=1;
if (year % 100 == 0)
{
yun=0;
if (year % 400 ==0 ) yun=1;
}
}
if (yun==1) days[1]=29;
else yun=28; // 불필요할 수도 있으나 동일한 테이블을 여러 번 사용할 경우도 있으므로...
//----
var totdays= stweekday;
for(var i=0; i<month-1;i++) totdays+=days[i]; // 해당 월 직전까지의 날짜를 모두 더한다.
var stthismon=totdays%7; // 해당 월의 1일의 요일이 무엇인지 확인한다.
위의 코드를 실행해 보면 2018년 8월은 stthismon 이 2가 나오고 9월은 5가 나온다.
각각 수요일과 토요일임을 알 수 있다.
이제 인쇄만 하면 된다.
대부분의 달력은 일요일부터 시작하므로 이에 따라 달력을 찍어 보자
stthismon 의 숫자가 6이면 달력의 첫 번째 컬럼, 숫자가 0 이면 달력의 두번째 컬럼이 되는 것이다.
2018년 9월의 경우 6이므로 7번째 컬럼에서 부터 달력이 시작되게 된다.
달력의 출력물에는 다음의 정보를 출력하게 된다.
1. 먼저 달력의 연도와 월을 첫 번째 줄에 찍고, 한 줄 정도의 여유를 두고
2. 요일의 이름을 찍고
3. 1일이 속한 요일의 밑에서부터 출력을 하면 된다.
4. 토요일에 해당하는 날짜를 찍으면 다음 줄로 이동하여 나머지 날짜를 출력한다.
document.writeln(year+","+month+"<br><br>"); // 연도, 월을 출력한다.
document.writeln("SU MO TU WE TH FR SA<br>"); // 요일의 이름을 출력한다.
var curpos=stthismon;
if (stthismon<6) // 1일이 일요일이 아닐 경우 해당 숫자만큼의 공백을 추가한다.
{
for (var i=0; i<stthismon+1; i++) document.write(" ");
}
for (var i=0; i<days[month-1]; i++) // 해당 월의 숫자만큼의 날짜를 출력한다.
{
document.write(pad(i+1, 2) +' ');
curpos++;
if (curpos%7==6) document.writeln("<br>");
}
// 숫자의 자릿수를 맞추기 위하여 1 자릿수 숫자의 앞에 공백을 넣는 함수
function pad(n, width)
{ n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(' ') + n;
}
이상의 코드를 가지고 2018년 9월의 달력을 출력해 본다.
화면처럼 2018년 9월의 달력을 출력했다.
출력 이전에 자릿수를 맞추기 위하여 크롬 브라우저의 폰트를 굴림체로 바꿔주었다.
굴림체, 궁서체, 바탕체 (뒤에 체가 없는 글꼴은 해당 사항 없음)의 경우 한글은 전각, 영문과 숫자는 반각(한글의 절반 넓이) 이어서 자릿수를 맞추기 편하다.
이번 수업까지는 단순히 브라우저의 개발도구를 이용하여 코딩 연습을 해보았고, 다음 수업부터는 실제로 데이터를 입력하거나 웹 프로그램의 인터페이스를 이용해 보는 연습을 함께 진행하려고 한다.
가장 중요한 것은 프로그램을 구성하는 논리이지만, 보통의 웹 화면을 구성해 보는 것도 흥미를 유발할 수 있을 것이기 때문이다.
아무쪼록 도움이 되길 바란다.
