년과 월을 선택하면 달력을 보여주는 프로그램을 생성하자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
const viewCalendar = function() {
const year = document.frm.year.options[document.frm.year.options.selectedIndex].value;
const month = document.frm.month.options[document.frm.month.options.selectedIndex].value;
const startCalendar = new Date( 2024, month-1, 1 );
const endCalendar = new Date( 2024, month, 1-1 );
const startDayOfWeek = startCalendar.getDay() + 1;
const endDate = endCalendar.getDate();
const endDayOfWeek = endCalendar.getDay() + 1;
let html = '<table border="1" width="800" height="600" cellspacing="0">';
html += '<tr>';
html += '<th>일요일</th>';
html += '<th>월요일</th>';
html += '<th>화요일</th>';
html += '<th>수요일</th>';
html += '<th>목요일</th>';
html += '<th>금요일</th>';
html += '<th>토요일</th>';
html += '</tr>';
html += '<tr>';
for( let i=1 ; i<startDayOfWeek ; i++ ) {
html += '<td></td>';
}
for( let i=1, n=startDayOfWeek ; i<=endDate ; i++, n++ ) {
if( n % 7 == 1 ) {
html += '<tr>';
}
html += '<td>' + i + '</td>';
if( n % 7 == 0 ) {
html += '</tr>';
}
}
for( let i=endDayOfWeek ; i<=6 ; i++ ) {
html += '<td></td>';
}
html += '</tr>';
html += '</table>';
const div = document.getElementById( 'result' );
div.innerHTML = html;
};
// html 로딩되면 자동실행
window.onload = function() {
viewCalendar();
};
</script>
</head>
<body>
<table>
<tr>
<td>
<form name='frm'>
<select name="year">
<option value="2024">2024년</option>
<option value="2025">2025년</option>
<option value="2026">2026년</option>
</select> 년
<select name="month">
<option value="1">1월</option>
<option value="2">2월</option>
<option value="3">3월</option>
<option value="4">4월</option>
<option value="5">5월</option>
<option value="6">6월</option>
<option value="7">7월</option>
<option value="8">8월</option>
<option value="9">9월</option>
<option value="10">10월</option>
<option value="11">12월</option>
<option value="12">12월</option>
</select> 월
<input type='button' value='달력보기' onclick='viewCalendar()' />
</form>
</td>
</tr>
</table>
<br /><hr /><br />
<div id="result"></div>
</body>
</html>
위의 코드에서 추가적으로 화면을 띄우자마자 현재연월이 표시되도록 만들어보자
ex ) 현재 : 2024년 4월
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
const viewCalendar = function() {
let year = parseInt(document.frm.year.value);
let month = parseInt(document.frm.month.value) - 1;
const startCalendar = new Date( 2024, month, 1 );
const endCalendar = new Date( 2024, month+1, 1-1 );
const startDayOfWeek = startCalendar.getDay() + 1;
const endDate = endCalendar.getDate();
const endDayOfWeek = endCalendar.getDay() + 1;
let html = '<table border="1" width="800" height="600" cellspacing="0">';
html += '<tr>';
html += '<th>일요일</th>';
html += '<th>월요일</th>';
html += '<th>화요일</th>';
html += '<th>수요일</th>';
html += '<th>목요일</th>';
html += '<th>금요일</th>';
html += '<th>토요일</th>';
html += '</tr>';
html += '<tr>';
for( let i=1 ; i<startDayOfWeek ; i++ ) {
html += '<td></td>';
}
for( let i=1, n=startDayOfWeek ; i<=endDate ; i++, n++ ) {
if( n % 7 == 1 ) {
html += '<tr>';
}
html += '<td>' + i + '</td>';
if( n % 7 == 0 ) {
html += '</tr>';
}
}
for( let i=endDayOfWeek ; i<=6 ; i++ ) {
html += '<td></td>';
}
html += '</tr>';
html += '</table>';
const div = document.getElementById( 'result' );
div.innerHTML = html;
};
// html 로딩되면 자동실행
window.onload = function() {
// select box 기본값 선택
const todayCalendar = new Date();
switch(todayCalendar.getFullYear()) {
case 2024 :
document.frm.year.options.selectedIndex = 0;
break;
case 2025 :
document.frm.year.options.selectedIndex = 1;
break;
case 2026 :
document.frm.year.options.selectedIndex = 2;
break;
}
document.frm.month.options.selectedIndex = todayCalendar.getMonth();
viewCalendar();
};
</script>
</head>
<body>
<table>
<tr>
<td>
<form name='frm'>
<select name="year">
<option value="2024">2024년</option>
<option value="2025">2025년</option>
<option value="2026">2026년</option>
</select> 년
<select name="month">
<option value="1">1월</option>
<option value="2">2월</option>
<option value="3">3월</option>
<option value="4">4월</option>
<option value="5">5월</option>
<option value="6">6월</option>
<option value="7">7월</option>
<option value="8">8월</option>
<option value="9">9월</option>
<option value="10">10월</option>
<option value="11">12월</option>
<option value="12">12월</option>
</select> 월
<input type='button' value='달력보기' onclick='viewCalendar()' />
</form>
</td>
</tr>
</table>
<br /><hr /><br />
<div id="result"></div>
</body>
</html>'JavaScript, React 🍦 > Javascript 공부' 카테고리의 다른 글
| [Javascript] 시작단과 끝단을 입력하면 구구단이 출력되는 프로그램 (0) | 2024.04.26 |
|---|---|
| [Javascript] 입력창에 검색어 입력 후 다음, 네이버, 구글에서 검색결과 보기 (0) | 2024.04.26 |
| [Javascript] 중복없는 로또번호 출력 (0) | 2024.04.25 |
| [Javascript] 국영수 총점과 평균 나타내는 표 만들기 (0) | 2024.04.25 |
| [Javascript] 구구단 테이블 만들기 (0) | 2024.04.25 |
