HTML DOM의 Input Week value 속성은 <input type="week"> 요소에 value 속성이 정의되어 있을 경우 해당 값을 문자열 형태로 반환합니다. 또한, 사용자가 이 속성에 새로운 문자열을 할당하여 주(week) 값을 동적으로 변경할 수도 있습니다.
value 속성의 값 형식
Input Week 요소의 값은 항상 YYYY-Www 형식의 문자열로 표현됩니다. 예를 들어 2021-W35는 2021년 35주차를 의미합니다. 이 형식을 활용하면 split() 메서드 등으로 연도와 주차 정보를 손쉽게 분리하여 처리할 수 있습니다.
문법(Syntax)
Input Week value 속성의 기본 문법은 다음과 같습니다.
1. 값 반환하기
inputWeekObject.value
2. 값 설정하기
value 속성에 새로운 문자열 값을 할당합니다.
inputWeekObject.value = 'String'
예제(Example)
다음은 Input Week value 속성을 활용한 실전 예제입니다. 버튼을 클릭하면 시험 주간이 35주차에서 36주차로 연기되며, 변경된 값이 화면에 출력됩니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Week value</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Week-value</legend>
<label for="WeekSelect">Examination Week:
<input type="week" id="WeekSelect" value="2021-W35">
</label>
<input type="button" onclick="updateValue()" value="Postpone Examinations">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputWeek = document.getElementById("WeekSelect");
function updateValue() {
inputWeek.value = '2021-W36';
divDisplay.textContent = 'New Examination Week: '+inputWeek.value.split('-W')[1]+' ,'+inputWeek.value.split('-W')[0];
}
</script>
</body>
</html>코드 설명
<input type="week">요소의 초기값이2021-W35(2021년 35주차)로 설정되어 있습니다.- 'Postpone Examinations' 버튼을 클릭하면
updateValue()함수가 실행됩니다. - 함수 내부에서
inputWeek.value = '2021-W36'을 통해 주 값을 36주차로 변경합니다. split('-W')메서드로 연도와 주차를 분리한 뒤, 변경된 시험 주간 정보를 div 영역에 출력합니다.
실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Postpone Examinations'(시험 연기) 버튼을 클릭하기 전 −
'Postpone Examinations'(시험 연기) 버튼을 클릭한 후 −
정리
HTML DOM의 Input Week value 속성은 자바스크립트만으로 주(week) 입력 필드의 값을 읽거나 수정할 수 있는 간편한 방법을 제공합니다. 폼 데이터 검증, 날짜 기반 일정 변경 기능 구현 등 다양한 웹 개발 시나리오에서 유용하게 활용할 수 있습니다.