투케이2K

83. (javascript/자바스크립트) new Date 와 for 문을 사용해 특정 연도, 월, 날짜, 요일 순차적 출력 실시 - 사파리 , 크롬 적용 본문

JavaScript

83. (javascript/자바스크립트) new Date 와 for 문을 사용해 특정 연도, 월, 날짜, 요일 순차적 출력 실시 - 사파리 , 크롬 적용

투케이2K 2021. 6. 30. 09:14

/* =========================== */

[ 개발 환경 설정 ]

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

/* =========================== */

[소스 코드]

 

    <script>

    	/*
    	[JS 요약 설명]
    	1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다
    	2. new Date getDay : 특정 일자 요일을 확인합니다 (일요일 0 값 ~ 토요일 6 값)
    	3. new Date(year, month, 0).getDate() : 특정 연도, 월의 마지막 날짜를 확인합니다    	
    	*/

   	
    	
    	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	window.onload = function() {
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log("");   		


    		//이벤트 함수 호출 
    		selectDate(2021, 6);
    	};


    	/* [이벤트 수행 함수] */
    	function selectDate(yyyy, mm){
    		//변수 선언 수행 실시 
    		var year = Number(yyyy);
    		var month = Number(mm);
    		var dayLabel = new Array("일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일");    		
    		console.log("");
    		console.log("[selectDate] : [start] : " + year + " : " + month);
    		console.log(""); 


    		//(월) 값 체크 실시 
    		if(month <= 0 || month >=13){ //잘못된 (월)
    			console.log("");
    			console.log("[selectDate] : [month] : [error]");
    			return;
    		}


    		//월 날짜 포맷 수행 실시 - 사파리, 크롬 적용 위함
    		var monthFormat = String(month);
    		if(monthFormat.length < 2){
    			monthFormat = "0" + String(monthFormat);
    		}

    		
    		//시작 일자 및 종료 일자를 확인
    		var firstDay = "01";    			
    		var firstLabel = String(year) + "-" + String(monthFormat) + "-" + firstDay;
    		var firstDayLabel = dayLabel[new Date(firstLabel).getDay()];
    		console.log("[selectDate] : [first] : ["+firstDay+"] : ["+firstDayLabel+"]");     		

    		var lastDay = String(new Date(year, monthFormat, "00").getDate());    			
    		var lastLabel = String(year) + "-" + String(monthFormat) + "-" + lastDay;
    		var lastDayLabel = dayLabel[new Date(lastLabel).getDay()];
    		console.log("[selectDate] : [last] : ["+lastDay+"] : ["+lastDayLabel+"]"); 
    		console.log("");


    		//반복문 수행하면서 순차적으로 출력 실시
    		var formatFirst = Number(firstDay); 
    		var formatLast = Number(lastDay);     		
    		for(var i=formatFirst; i<=formatLast; i++){
    			var checkDD = String(i);
    			if(checkDD.length < 2) checkDD = "0"+checkDD;    			
    			var date = String(year)+"-"+String(monthFormat)+"-"+String(checkDD);
    			var day = dayLabel[new Date(date).getDay()];
    			date = date + " " + day
    			console.log("[selectDate] : [date] : "+date); 
    		}
    	};
    	
    </script>

/* =========================== */

/* =========================== */

[결과 출력]

/* =========================== */

/* =========================== */

[요약 설명]

/*

[JS 요약 설명]

1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다

2. new Date getDay : 특정 일자 요일을 확인합니다 (일요일 0 값 ~ 토요일 6 값)

3. new Date(year, month, 0).getDate() : 특정 연도, 월의 마지막 날짜를 확인합니다

*/

/* =========================== */

반응형
Comments