📂 JS 실습하기/그외 도전작
[ 자바스크립트 ] 나만의 "dateString()" 함수 만들기 ─ 1 🕔 2015. 4. 21. 22:28
먼저, 오늘 날짜에 대한 문자값을 가져오는 함수는 아래와 같다.
function dateString () { var date = new Date(); var month = date.getMonth(); var week = date.getDay(); monthArray = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; weekArray = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; get_month = function () { return monthArray [ month ]; }; get_week = function () { return weekArray [ week ]; }; return null; }
<button onclick="getDateString()"> 클릭하세요 </button> <p id="monthStr"></p> <p id="weekStr"></p> <p id="monthArr"></p> <p id="weekArr"></p> <script type="text/javascript"> function getDateString () { dateString (); document.getElementById( 'monthStr' ).innerHTML = get_month (); document.getElementById( 'weekStr' ).innerHTML = get_week (); document.getElementById( 'monthArr' ).innerHTML = monthArray; document.getElementById( 'weekArr' ).innerHTML = weekArray; } </script>
<p id="monthStr"></p>
<p id="weekStr"></p>
<p id="monthArr"></p>
<p id="weekArr"></p>
첫번째 수정 작업이다.
function dateString () { var date = new Date(); var month = date.getMonth(); var week = date.getDay(); this.monthArray = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; this.weekArray = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; this.get_month = function () { return this.monthArray [ month ]; }; this.get_week = function () { return this.weekArray [ week ]; }; return null; }
<button onclick="getString()"> 클릭하세요 </button> <p id="strMonth"></p> <p id="strWeek"></p> <p id="arrMonth"></p> <p id="arrWeek"></p> <script type="text/javascript"> function getString () { var str = new dateString (); document.getElementById( 'strMonth' ).innerHTML = str.get_month (); document.getElementById( 'strweek' ).innerHTML = str.get_week (); document.getElementById( 'arrMonth' ).innerHTML = str.monthArray; document.getElementById( 'arrWeek' ).innerHTML = str.weekArray; } </script>
<p id="strMonth"></p>
<p id="strWeek"></p>
<p id="arrMonth"></p>
<p id="arrWeek"></p>
마지막 수정 작업이다.
function dateString ( year, month, day ) { var date = year || new Date(); var month = month - 1 || date.getMonth(); var week; if ( typeof year == 'number' ) { date = new Date ( year,month,day ); week = date.getDay(); } else week = date.getDay(); this.monthArray = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; this.weekArray = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; this.get_month = function () { return this.monthArray [ month ]; }; this.get_week = function () { return this.weekArray [ week ]; }; return null; }
<button onclick="getStr()"> 클릭하세요 </button> <p id="monthS"></p> <p id="weekS"></p> <p id="monthA"></p> <p id="weekA"></p> <script type="text/javascript"> // 1. 기본 사용법 function getStr () { var str = new dateString (); document.getElementById( 'monthS' ).innerHTML = str.get_month (); document.getElementById( 'weekS' ).innerHTML = str.get_week (); document.getElementById( 'monthA' ).innerHTML = str.monthArray; document.getElementById( 'weekA' ).innerHTML = str.weekArray; } </script>
<p id="monthS"></p>
<p id="weekS"></p>
<p id="monthA"></p>
<p id="weekA"></p>
<button onclick="useDateFunction()"> 클릭하세요 </button> <p id="month"></p> <p id="week"></p> <script type="text/javascript"> // 2. 자바스크립트의 'Date()' 함수 사용하기 function useDateFunction () { var date = new Date (); var str = new dateString ( date ); var month = str.get_month (); var week = str.get_week (); document.getElementById( 'month' ).innerHTML = month; document.getElementById( 'week' ).innerHTML = week; } </script>
<p id="month"></p>
<p id="week"></p>
<button onclick="WorldCup2002()"> 클릭하세요 </button> <p id="WCmonth"></p> <p id="week"></p> <script type="text/javascript"> // 3. 2002년 한일 월드컵 개최일 (2002 FIFA World Cup) ─ 2002년 5월 31일. function WorldCup2002 () { var str = new dateString ( 2002, 5, 31 ); var month = str.get_month (); var week = str.get_week (); document.getElementById( 'WCmonth' ).innerHTML = month; document.getElementById( 'WCweek' ).innerHTML = week; } </script>
<p id="WCmonth"></p>
<p id="WCweek"></p>
<button onclick="toKorean()"> 클릭하세요 </button> <p id="korMonth"></p> <p id="korWeek"></p> <script type="text/javascript"> // 4. 배열 (Array) 바꾸기 function toKorean () { var str = new dateString (); str.monthArray = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']; str.weekArray = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일']; var month = str.get_month (); var week = str.get_week (); document.getElementById( 'korMonth' ).innerHTML = month; document.getElementById( 'korWeek' ).innerHTML = week; } </script>
<p id="korMonth"></p>
<p id="korWeek"></p>
☞ 나만의 "dateString()" 함수 만들기 ─ 2. 프로토타입 (prototype)을 추가하기
이 내용이 도움이 되셨나요? *^^*
'JS 실습하기 > 그외 도전작' 카테고리의 다른 글
[ 자바스크립트 ] 테이블 정렬하기 (5) | 2015.04.23 |
---|---|
[ 자바스크립트 ] 나만의 "dateString()" 함수 만들기 ─ 2 (0) | 2015.04.22 |
[ 자바스크립트 ] 로또 번호 생성기 1 (0) | 2015.03.25 |
[ 자바스크립트 ] 구버전용 벽시계 (0) | 2015.03.06 |
[ 자바스크립트 ] 랜덤으로 색상 및 글자 크기 바꾸기 (0) | 2015.03.05 |