Date
- getDate() : 로컬시간을 사용하여 일(월 기준)을 반환
- getDay() : 로컬시간을 사용하여 일(주 기준, 즉 요일)을 반환
- getFullYear() : 로컬시간을 사용하여연도를 반환
- getTime() : 1970. 1. 1. 00:00:00부터 현재시간까지 경과한 시간을 밀리초로 반환 (디데이 만들 때)
<style>
.calendar table {width: 700px; margin: 0 auto; border: 1px solid black; border-collapse: collapse;}
.calendar table td {border: 1px solid black; padding: 10px; height: 80px; vertical-align: top;}
.calendar table td.sunday {color: red;}
.calendar table td.saturday {color: blue;}
.prev-date, .next-date {opacity: .5;}
.calendar-title {text-align: center;}
</style>
<body>
<div class="calendar-title">
</div>
<div class="calendar"></div>
<button id="btn1">이전달</button>
<button id="btn2">다음달</button>
</body>
<script>
// 날짜 구하기
var now = new Date(); // 1월 1일
now.setDate(1); // 시작날짜 1일 고정
// 표 작성
function gridCalendar() { // 함수를 묶어두면 재사용가능
var months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { // 윤년의 조건
months[1] = 29;
}
// 달력 작성 시 필요한 재료(연, 월, (달의 시작 날짜의)요일, 마지막 날짜)
var year = now.getFullYear();
var month = now.getMonth();
var day = now.getDay();
var lastDate = months[month];
now.setDate(lastDate); // 날짜를 지정 마지막 날짜
var lastDateDay = now.getDay(); // 가져온다 요일.
// months[11] 처리하려고 변수 만듦.
var prevMonth = now.getMonth() -1 < 0 ? months[11] : months[now.getMonth() - 1];
now.setDate(1);
var str = "<table><tr>";
for(var i = 0 - day ; i < lastDate + (6-lastDateDay) ; i++) {
// 문장을 만들어 봐.
// 가로출력을 하다가 , 특정 조건에 줄바꿈.
// 특정조건에 td가 닫히고 다시 tr이 열림.
if(i < 0) {
str += "<td class='prev-date'>" + (prevMonth+i+1);
}
else if (i > lastDate-1) {
str += "<td class='next-date'>" +(i+1-lastDate);
}
else {
str += "<td>" + (i+1);
}
str += "</td>";
if(i % 7 == 6 - day) {
str += "</tr><tr>";
}
}
str += "</tr></table>"
return str;
}
$(function() {
init();
$("#btn1").click(prev);
$("#btn2").click(next);
// $("#.calendar").on("click", ".prev-date", prev);
// $("#.calendar").on("click", ".next-date", next);
});
function init() {
$(".calendar-title").html("<h2>" + now.getFullYear() + "." + (now.getMonth() + 1) + "</h2>");
$(".calendar").html(gridCalendar(now));
$(".calendar tr").each(function() {
$(this).find("td").eq(0).addClass("sunday");
$(this).find("td").eq(6).addClass("saturday");
});
}
// 다음 달?
// 변경 대상 now, 변경 로직 setMonth(getMonth()+1) >> 예외.12월일 때 체크
// 이전 달??
// 변경 대상 now, 변경 로직 setMonth(getMonth()-1) >> 예외.1월일 때 체크
function next() { // 사실 이 조건들 필요없음. new Date(2020, 13, 1) 하면 알아서 내년 됨.
if(now.getMonth() == 11) {
now.setMonth(0);
now.setFullYear(now.getFullYear() + 1);
}
else {
now.setMonth(now.getMonth()+1);
}
init();
}
function prev() {
if(now.getMonth() == 0) {
now.setMonth(11);
now.setFullYear(now.getFullYear() - 1);
}
else {
now.setMonth(now.getMonth() - 1);
}
init();
}
</script>
Array
<script>
Date.prototype.format = function(str) {
}
// 프로토타입 : 생성자함수로 만들어진 객체의 공용 공간
Array.prototype.remove = function(i) {
this.splice(i,1);
};
var menus = ["menu1", "menu2", "menu3", "menu4", ];
var menus = new Array("menu1", "menu2", "menu3", "menu4");
console.log(menus.length);
// 배열 각 요소에 접근하기.
console.log(menus[-1]); // undi
console.log(menus[0]);
console.log(menus[1]);
console.log(menus[2]);
console.log(menus[3]);
console.log(menus[4]); // undi
console.log(menus[10] = "menu");
menus.push("addMenu1"); // 빈 칸에 들어가는 게 아니라 마지막에
menus.unshift("addMenu2");
console.log(menus.pop());
console.log(menus);
console.log(menus.shift());
console.log(menus);
console.log(menus.join("-").split("-")); // 배열을 문자열로 만들었다가 > 다시 배열로.
menus.length = 4;
console.log(menus);
menus.splice(1,1); // 인덱스, 삭제할 개수
console.log(menus);
menus.splice(3,0, "menu5");
console.log(menus);
menus.remove(1);
console.log(menus);
var arr = [1,2,3,4,1,2,3,4,];
arr.remove(2);
console.log(arr);
arr.sort(function(l, r) {
return r - l ;
});
console.log(arr);
console.log(menus);
var a = ["영희", "철수", "미자", "진수", "딴동네", ];
a.sort();
a.reverse();
console.log(a);
var str = "alert('무야호')";
eval(str);
</script>'자바스크립트' 카테고리의 다른 글
| 브라우저 객체 모델 21. 03. 02 (0) | 2021.03.02 |
|---|---|
| 속성과 메서드 21. 02. 26. (0) | 2021.03.02 |
| Part 03. js 코어 라이브러리(타이머 함수, Math, String) 21. 02. 24. (0) | 2021.02.25 |
| Part 02. 03장- 함수 중급 21. 02. 24. (0) | 2021.02.24 |
| Part 02. 자바스크립트 함수기본 & 드롭다운 메뉴 만들기 21. 02. 23. (0) | 2021.02.23 |
