자바스크립트 for문 달력 - jabaseukeulibteu formun dallyeog

업무 도중에 달력만들기 업무가 추가되어 부랴부랴 for문 배우면서 만들어보는 달력만들기..과제....
일단 기본부터 탄탄하게 다져야된다며 순서대로 나누어 과제를 내주셨다😋
그로 인해 시간이 좀 걸리긴 했지만 어째됐던 완성 하긴 하여 기록하는 달력만들기 기록장😂

💬 달력만들기 기초부터 진행

📆 1) 콘솔창에 1부터 30까지 띄어쓰기로 구분해서 한줄로 출력하기

var arr = ''; for (var i = 1; i <= 30; i++) { arr += " " + i; } console.log(arr);

💻 결과값

📆 2) 1단계에서 30까지 출력했던걸, 30까지 출력하지 말고, 이 달의 마지막 날짜를 구해서 그 숫자까지 출력하기

ex) 1 2 3 4 … 31

var arr = ''; var date = new Date(); var days = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); // var lastDate = new Date(year, month, 0).getDate(); //해당 월 var month = date.getFullYear() + "년" + (date.getMonth() + 1) + "월 입니다."; console.log(month); // 해달 월 일수 나열 for (var i = 1; i <= days; i++) { arr += " " + i; } console.log(arr);

💻 결과값

📆 3) 2단계에서 출력한 날짜들을, 7칸 출력할 때마다 줄바꿈이 일어나도록 하기

ex) 1 2 3 4 5 6 7
     8 9 10 11 12 13 14
     …
    29 30 31

var arr = ''; var date = new Date(); var days = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); //해당 월 var month = date.getFullYear() + "년" + (date.getMonth() + 1) + "월 입니다."; console.log(month); // 해달 월 일수 나열 for (var i = 1; i <= days; i++) { arr += " " + i; if (i % 7 == 0) { arr += '\n'; } } console.log(arr);

💻 결과값

📆 4) 3단계에서 1일을 출력하기 전에, 빈칸을 2개 출력하고 1일을 출력하기 시작하기

• 빈칸은 눈에 안보이니까 [] 로 표기합니다.
• 그리고 7칸 출력할때마다 줄바꿈 (\n) 이 일어나야 합니다.

ex) [][] 1 2 3 4 5
     7 8 9 10 11 12
     …
    29 30 31

var arr = ''; var date = new Date(); var days = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); //해당 월 var month = date.getFullYear() + "년" + (date.getMonth() + 1) + "월 입니다."; console.log(month); // 해달 월 일수 나열 for (var i = 1; i <= days; i++) { if (i == 1) { arr += '[][]'; } arr += " " + i; if (i % 7 == 0) { // i가 1부터 시작했을때, 7로 나눈 나머지가 0일때 줄바꿈 arr += '\n'; } } console.log(arr);

💻 결과값

📆 5) 4단계에서 빈칸을 2개 출력했던것을, 2개 출력하지 말고, 이 달의 1일의 요일을 구해서 그 요일만큼의 빈칸을 출력하기

var arr = ''; var date = new Date(); var toYear = date.getFullYear() var toMonth = date.getMonth(); // var toMonth = 5; firstDay = new Date(toYear, toMonth, 1).getDay(); //1일의 요일 lastDate = new Date(toYear, toMonth + 1, 0).getDate(); // 이달 마지막날 //해당 월 var month = toYear + "년" + (toMonth + 1) + "월 입니다."; console.log(month); // 첫번째줄 빈칸 숫자 알아내기 (10월 기준 5개) // 빈칸 뒤에 날짜 출력 // 날짜를 요일에 셋팅 // 첫번째 줄 빈칸 5개 for (var bin = 0; bin < firstDay; bin++) { arr += "[ ]"; } // console.log(bin); //날짜 for (var i = 1; i <= lastDate; i++) { getday = new Date(toYear, toMonth, i).getDay(); // 요일을 얻어낸다. (일요일=0, 토요일=6) if (getday == 0) { arr += "\n"; } arr += " " + i; } console.log(arr)

💻 결과값

📆 6) 콘솔창에 그려진 달력을 HTML문서로 나타내기

var arr = ''; var toYear = date.getFullYear(); var toMonth = date.getMonth(); // var toMonth = 11; //이달 구하기 var firstDay = new Date(toYear, toMonth, 1).getDay(); //이 달 1일 요일 구하기 var lastDate = new Date(toYear, toMonth + 1, 0).getDate(); // 이 달의 마지막 날짜 구하기 var lastDay = new Date(toYear, toMonth, lastDate).getDay(); // 이 달의 마지막 요일 구하기 console.log("1일 요일", firstDay); console.log("이달 마지막 날짜", lastDate); console.log("마지막 요일", lastDay); //해당 월 var month = toYear + "년" + (toMonth + 1) + "월"; $('.month').text(month); console.log('해당 월', month); // 첫번째 줄 빈칸 5개 for (var bin = 0; bin < firstDay; bin++) { arr += "[ ]"; $(".calendar-body").append("<li></li>"); } console.log('빈칸', bin); //날짜 for (var i = 1; i <= lastDate; i++) { $(".calendar-body").append("<li class='date'>" + i + "</li>"); getday = new Date(toYear, toMonth, i).getDay(); // 요일을 얻어낸다. (일요일=0, 토요일=6) // 다음행 이동 if (getday == 0) { arr += "\n"; // $(".calendar-body").append("<br/>"); } arr += " " + i; } console.log(arr);

💻 결과값

💬 단계별 과제로 for문 이용하여 만들었던 달력만들기
     약간의 꼬임이(?) 있었지만 그래도 얼추 완성 되 가는거 같다^-^
     다음 기록장에선 달력 버튼 추가되어 완벽한 달력 모습을 갖출 수 있는 기록을 해보겠다.
     현재를 기록하기 위한 포스팅이라 가볍게 봐주시면 감사합니다😂